MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile new structure updated

Browse Source
This commit is contained in:
akash 2025-09-05 16:48:28 +05:30
parent e18d1e8520
commit c5d46cd04b
6 changed files with 214 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.js
View File

@ -16,6 +16,7 @@ import AreaOfInjury from "@/components/sections/home/AreaOfInjury"
import News from "@/components/sections/home1/News" import News from "@/components/sections/home1/News"
import Funfacts from "@/components/sections/home1/Funfacts" import Funfacts from "@/components/sections/home1/Funfacts"
import MobileServices from "@/components/sections/home/MobileServicesSection" import MobileServices from "@/components/sections/home/MobileServicesSection"
import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard"
export default function Home() { export default function Home() {
@ -24,6 +25,7 @@ export default function Home() {
<Layout headerStyle={2} footerStyle={2}> <Layout headerStyle={2} footerStyle={2}>
<Banner /> <Banner />
<Features /> <Features />
<MobileFeatureCard/>
<AboutSection /> <AboutSection />
{/* <ProcessSection /> */} {/* <ProcessSection /> */}
{/* Desktop View */} {/* Desktop View */}

63
components/sections/home/MobileFeatureCard.js Normal file
View File

@ -0,0 +1,63 @@
import Link from 'next/link';
import React from 'react';
export default function MobileFeatureCard() {
return (
<section className="feature-section pt_120 pb-0 mobile-only" id="feature">
<div className="shape" style={{ backgroundImage: 'url(assets/images/shape/shape-6.png)' }}></div>
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-one">
<div className="inner-box">
<div className="icon-box">
<img src="/assets/images/home/icons/experienced.webp" alt="Icon" />
</div>
<h3><Link href="/">Experienced <br /> Professionals</Link></h3>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-one">
<div className="inner-box">
<div className="icon-box">
<img src="/assets/images/home/icons/walk-in.webp" alt="Icon" />
</div>
<h3><Link href="/">Walk-in<br /> Appointments</Link></h3>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-one">
<div className="inner-box">
<div className="icon-box">
<img src="/assets/images/home/icons/state.webp" alt="Icon" />
</div>
<h3><Link href="/">State-of-the-Art Technology</Link></h3>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-one">
<div className="inner-box">
<div className="icon-box">
<img src="/assets/images/home/icons/one.webp" alt="Icon" />
</div>
<h3><Link href="/">One-on-One <br /> Care</Link></h3>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
</div>
</div>
</section>
);
};

30
components/sections/home2/Features.js
View File

@ -4,7 +4,7 @@ import React from 'react';
export default function Features() { export default function Features() {
return ( return (
<> <>
<section className="feature-style-two centred"> <section className="feature-style-two centred desktop-only">
<div className="auto-container"> <div className="auto-container">
<div className="inner-container"> <div className="inner-container">
<div className="row clearfix"> <div className="row clearfix">
@ -15,9 +15,8 @@ export default function Features() {
<div className="icon-box"> <div className="icon-box">
<img src="/assets/images/home/icons/experienced.webp" alt="Icon" /> <img src="/assets/images/home/icons/experienced.webp" alt="Icon" />
</div> </div>
<h3><Link href="/">Experienced <br/> Professionals</Link></h3>
<h3><Link href="/">Experienced Professionals</Link></h3> {/* <p>Skilled experts deliver trusted professional healthcare with years of proven experience.</p> */}
<p>Skilled experts deliver trusted professional healthcare with years of proven experience.</p>
</div> </div>
</div> </div>
</div> </div>
@ -25,9 +24,11 @@ export default function Features() {
<div className="col-lg-3 col-md-6 col-sm-12 feature-block"> <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two"> <div className="feature-block-two">
<div className="inner-box"> <div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/icons/walk-in.webp" alt="Icon" /></div> <div className="icon-box">
<h3><Link href="/">Walk-in Appointments</Link></h3> <img src="/assets/images/home/icons/walk-in.webp" alt="Icon" />
<p>Get quick appointments with hassle-free, convenient scheduling today.</p> </div>
<h3><Link href="/">Walk-in<br/> Appointments</Link></h3>
{/* <p>Get quick appointments with hassle-free, convenient scheduling today.</p> */}
</div> </div>
</div> </div>
</div> </div>
@ -35,9 +36,11 @@ export default function Features() {
<div className="col-lg-3 col-md-6 col-sm-12 feature-block"> <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two"> <div className="feature-block-two">
<div className="inner-box"> <div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/icons/state.webp" alt="Icon" /></div> <div className="icon-box">
<img src="/assets/images/home/icons/state.webp" alt="Icon" />
</div>
<h3><Link href="/">State-of-the-Art Technology</Link></h3> <h3><Link href="/">State-of-the-Art Technology</Link></h3>
<p>Advanced tools ensure accurate results with modern, innovative solutions.</p> {/* <p>Advanced tools ensure accurate results with modern, innovative solutions.</p> */}
</div> </div>
</div> </div>
</div> </div>
@ -45,10 +48,11 @@ export default function Features() {
<div className="col-lg-3 col-md-6 col-sm-12 feature-block"> <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two"> <div className="feature-block-two">
<div className="inner-box"> <div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/icons/one.webp" alt="Icon" /></div> <div className="icon-box">
<img src="/assets/images/home/icons/one.webp" alt="Icon" />
</div>
<h3><Link href="/">One-on-One <br /> Care</Link></h3> <h3><Link href="/">One-on-One <br /> Care</Link></h3>
<p>Tailored attention provides focused treatments designed for unique needs.</p> {/* <p>Tailored attention provides focused treatments designed for unique needs.</p> */}
</div> </div>
</div> </div>
</div> </div>
@ -58,5 +62,5 @@ export default function Features() {
</div> </div>
</section> </section>
</> </>
) );
} }

96
public/assets/css/module-css/feature.css
View File

@ -1,4 +1,3 @@
/** feature-section **/ /** feature-section **/
.feature-section { .feature-section {
@ -36,19 +35,20 @@
.feature-block-one .inner-box .icon-box { .feature-block-one .inner-box .icon-box {
position: relative; position: relative;
display: inline-block; display: flex;
justify-content: center;
align-items: center;
width: 100px; width: 100px;
height: 100px; height: 100px;
line-height: 100px;
font-size: 50px; font-size: 50px;
color: var(--secondary-color); color: var(--secondary-color);
background: rgba(249, 49, 59, 0.05); background: rgba(249, 49, 59, 0.05);
text-align: center;
border-radius: 50%; border-radius: 50%;
margin-bottom: 10px; margin: 0 auto 10px auto;
transition: all 500ms ease; transition: all 500ms ease;
} }
/* .feature-block-one .inner-box:hover .icon-box{ /* .feature-block-one .inner-box:hover .icon-box{
background: #fff; background: #fff;
} */ } */
@ -125,7 +125,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 100px; height: 100px;
line-height: 100px; line-height: 80px;
font-size: 50px; font-size: 50px;
background: rgba(249, 49, 59, 0.05); background: rgba(249, 49, 59, 0.05);
color: var(--secondary-color); color: var(--secondary-color);
@ -188,16 +188,13 @@
/** RESPONSIVE-CSS **/ /** RESPONSIVE-CSS **/
@media only screen and (max-width: 1200px){ @media only screen and (max-width: 1024px) {
.feature-block-two .inner-box h3 a {
font-size: 25px;
display: inline-block;
color: var(--title-color);
} }
@media only screen and (max-width: 991px){
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
@ -212,9 +209,7 @@
} }
@media only screen and (max-width: 599px){ @media only screen and (max-width: 599px) {}
}
@media only screen and (max-width: 499px) { @media only screen and (max-width: 499px) {
.feature-block-one .inner-box { .feature-block-one .inner-box {
@ -231,9 +226,10 @@
} }
.feature-block-one .inner-box h3 { .feature-block-one .inner-box h3 {
font-size: 16px; font-size: 15px;
line-height: 24px; line-height: 24px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center;
} }
@ -242,43 +238,41 @@
/* show/hide helpers */
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
@media (max-width: 426px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
}
}
@media only screen and (max-width: 768px) {
.feature-block-two .inner-box {
position: relative;
display: block;
padding: 20px 20px;
}
}
@media (max-width: 767.98px) {
.feature-section.mobile-only .row.clearfix {
display: flex;
flex-wrap: wrap;
}
.feature-section.mobile-only .feature-block {
width: 50%;
}
}

4
public/assets/css/module-css/solutions.css
View File

@ -27,8 +27,8 @@
.image_block_two .image-box{ .image_block_two .image-box{
position: relative; position: relative;
display: block; display: block;
padding-bottom: 137px; /* padding-bottom: 137px; */
padding-left: 140px; /* padding-left: 140px; */
} }
.image_block_two .image-box img{ .image_block_two .image-box img{

2
public/assets/css/style.css
View File

@ -1355,7 +1355,7 @@
margin-top: 15px; margin-top: 15px;
z-index: 100; z-index: 100;
display: none; display: none;
background: #bc0000; /* background: #bc0000; */
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);