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

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

@ -2,61 +2,65 @@ import Link from "next/link";
import React from 'react';
export default function Features() {
return (
<>
<section className="feature-style-two centred">
<div className="auto-container">
<div className="inner-container">
<div className="row clearfix">
return (
<>
<section className="feature-style-two centred desktop-only">
<div className="auto-container">
<div className="inner-container">
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<div className="inner-box">
<div className="icon-box">
<img src="/assets/images/home/icons/experienced.webp" alt="Icon" />
</div>
<h3><Link href="/">Experienced Professionals</Link></h3>
<p>Skilled experts deliver trusted professional healthcare with years of proven experience.</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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 Appointments</Link></h3>
<p>Get quick appointments with hassle-free, convenient scheduling today.</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Advanced tools ensure accurate results with modern, innovative solutions.</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Tailored attention provides focused treatments designed for unique needs.</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Skilled experts deliver trusted professional healthcare with years of proven experience.</p> */}
</div>
</div>
</section>
</>
)
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Get quick appointments with hassle-free, convenient scheduling today.</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Advanced tools ensure accurate results with modern, innovative solutions.</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 feature-block">
<div className="feature-block-two">
<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>Tailored attention provides focused treatments designed for unique needs.</p> */}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

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

@ -1,11 +1,10 @@
/** feature-section **/
.feature-section{
.feature-section {
position: relative;
}
.feature-block-one .inner-box{
.feature-block-one .inner-box {
position: relative;
display: block;
background: #fff;
@ -29,31 +28,32 @@
transition: all 500ms ease;
} */
.feature-block-one .inner-box:hover:before{
.feature-block-one .inner-box:hover:before {
height: 100%;
top: 0px;
}
.feature-block-one .inner-box .icon-box{
.feature-block-one .inner-box .icon-box {
position: relative;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 50px;
color: var(--secondary-color);
background: rgba(249, 49, 59, 0.05);
text-align: center;
border-radius: 50%;
margin-bottom: 10px;
margin: 0 auto 10px auto;
transition: all 500ms ease;
}
/* .feature-block-one .inner-box:hover .icon-box{
background: #fff;
} */
.feature-block-one .inner-box h3{
.feature-block-one .inner-box h3 {
position: relative;
display: block;
font-size: 20px;
@ -67,11 +67,11 @@
color: var(--title-color);
} */
.feature-block-one .inner-box h3 a:hover{
.feature-block-one .inner-box h3 a:hover {
text-decoration: underline;
}
.feature-block-one .inner-box p{
.feature-block-one .inner-box p {
position: relative;
transition: all 500ms ease;
}
@ -81,7 +81,7 @@
color: #fff;
} */
.feature-section .shape{
.feature-section .shape {
position: absolute;
left: 80px;
top: 10px;
@ -93,11 +93,11 @@
/** feature-style-two **/
.feature-style-two{
.feature-style-two {
position: relative;
}
.feature-style-two .inner-container{
.feature-style-two .inner-container {
position: relative;
display: block;
background: #FFFFFF;
@ -114,18 +114,18 @@
}
}
.feature-block-two .inner-box{
.feature-block-two .inner-box {
position: relative;
display: block;
padding: 50px 20px;
}
.feature-block-two .inner-box .icon-box{
.feature-block-two .inner-box .icon-box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
line-height: 80px;
font-size: 50px;
background: rgba(249, 49, 59, 0.05);
color: var(--secondary-color);
@ -136,11 +136,11 @@
transition: all 500ms ease;
}
.feature-block-two .inner-box:hover .icon-box{
.feature-block-two .inner-box:hover .icon-box {
color: #fff;
}
.feature-block-two .inner-box .icon-box:before{
.feature-block-two .inner-box .icon-box:before {
position: absolute;
content: '';
background: var(--theme-color);
@ -150,7 +150,7 @@
top: 0px;
z-index: -1;
border-radius: 50%;
transform: scale(0,0);
transform: scale(0, 0);
transition: all 500ms ease;
}
@ -158,7 +158,7 @@
transform: scale(1,1);
} */
.feature-block-two .inner-box h3{
.feature-block-two .inner-box h3 {
display: block;
font-size: 26px;
line-height: 36px;
@ -166,12 +166,12 @@
margin-bottom: 20px;
}
.feature-block-two .inner-box h3 a{
.feature-block-two .inner-box h3 a {
display: inline-block;
color: var(--title-color);
}
.feature-block-two .inner-box h3 a:hover{
.feature-block-two .inner-box h3 a:hover {
color: var(--theme-color);
}
@ -188,97 +188,91 @@
/** 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){
.feature-section{
.feature-section {
padding: 70px 0px 40px 0px;
}
.feature-section .shape{
.feature-section .shape {
display: none;
}
}
@media only screen and (max-width: 599px){
@media only screen and (max-width: 599px) {}
@media only screen and (max-width: 499px) {
.feature-block-one .inner-box {
position: relative;
display: block;
background: #fff;
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
padding: 15px;
z-index: 1;
margin-bottom: 20px;
transition: all 500ms ease;
}
.feature-block-one .inner-box h3 {
font-size: 15px;
line-height: 24px;
margin-bottom: 10px;
text-align: center;
}
}
@media only screen and (max-width: 499px){
.feature-block-one .inner-box{
position: relative;
/* show/hide helpers */
.desktop-only {
display: block;
background: #fff;
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
padding: 15px;
z-index: 1;
margin-bottom: 20px;
transition: all 500ms ease;
}
.feature-block-one .inner-box h3{
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
.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{
position: relative;
display: block;
padding-bottom: 137px;
padding-left: 140px;
/* padding-bottom: 137px; */
/* padding-left: 140px; */
}
.image_block_two .image-box img{

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

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