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

colour code updated and home page sections updated service section desktop one section show mobile view another section show format updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-29 13:46:08 +05:30
parent 9555ef70f6
commit bf97f4de9f
20 changed files with 305 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/page.js
View File

@ -15,6 +15,7 @@ import TeamTwo from "@/components/sections/home1/Team"
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"
export default function Home() {
@ -24,8 +25,16 @@ export default function Home() {
<Banner />
<Features />
<AboutSection />
<ProcessSection />
<ServicesSection />
{/* <ProcessSection /> */}
{/* Desktop View */}
<div className="d-none d-md-block">
<ServicesSection />
</div>
{/* Mobile View */}
<div className="d-block d-md-none">
<MobileServices />
</div>
<FaqSection />
<AreaOfInjury />
<WhyChooseUsSection />

6
components/sections/home/AreaOfInjury.js
View File

@ -13,7 +13,7 @@ export default function AreaOfInjury() {
];
return (
<section className="team-section sec-pad centred">
<section className="team-section sec-pad centred bg-color-1">
<div className="pattern-layer">
<div className="pattern-1" style={{ backgroundImage: 'url(assets/images/shape/shape-13.png)' }}></div>
<div className="pattern-2" style={{ backgroundImage: 'url(assets/images/shape/shape-14.png)' }}></div>
@ -32,7 +32,7 @@ export default function AreaOfInjury() {
</div>
<div className="row clearfix">
{teamMembers.map((member, index) => (
<div key={index} className="col-lg-3 col-md-6 col-sm-12 team-block">
<div key={index} className="col-lg-3 col-md-6 col-6 team-block">
<div className="team-block-one wow fadeInUp animated" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
<div className="inner-box">
<div className="image-box">
@ -46,7 +46,7 @@ export default function AreaOfInjury() {
</div>
<div className="lower-content">
<h3><Link href="team-details">{member.name}</Link></h3>
<span className="designation">{member.role}</span>
{/* <span className="designation">{member.role}</span> */}
</div>
</div>
</div>

33
components/sections/home/FaqSection.js
View File

@ -21,15 +21,31 @@ export default function FaqSection() {
}
}
return (
<section className="faq-section sec-pad bg-color-1">
<figure className="image-layer"><img src="assets/images/resource/faq-1.png" alt="" /></figure>
<section className="faq-section sec-pad">
{/* <figure className="image-layer"><img src="assets/images/resource/faq-1.png" alt="" /></figure> */}
<div className="auto-container">
<div className="sec-title centred mb_50">
<span className="sub-title">Discover Who We Are</span>
<h2>Why Patients Trust Us</h2>
</div>
<div className="row clearfix">
<div className="col-xl-7 col-lg-12 col-md-12 offset-xl-5 content-column">
<div className="row clearfix d-flex align-items-center">
<div className="col-xl-6 col-lg-12 col-sm-12 image-column">
<div className="image_block_three">
<div className="image-box">
<div className="image-shape">
<div className="shape-1 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-8.png)' }}></div>
<div className="shape-2" style={{ backgroundImage: 'url(assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="assets/images/resource/about-2.jpg" alt="" /></figure>
<figure className="image image-2"><img src="assets/images/resource/about-3.jpg" alt="" /></figure>
<div className="icon-box"><i className="icon-14"></i></div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-12 col-md-12 content-column">
<div className="content-box">
<ul className="accordion-box">
@ -40,7 +56,7 @@ export default function FaqSection() {
</div>
<div className={isActive.key == 1 ? "acc-content current" : "acc-content"}>
<div className="content">
<div className="text"><p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke. Our registered physiotherapists provide trusted care including physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, massage, and acupuncture. We also offer osteopathy, custom braces, orthotics, pain management, workplace injury rehab, naturopathy, and home care services.</p>
<div className="text"><p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke. We provide trusted care through physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, massage, acupuncture, osteopathy, orthotics, braces, pain management, workplace injury rehab, naturopathy, and home care services.</p>
</div>
</div>
<div className="btn-box mt-3">
@ -82,7 +98,7 @@ export default function FaqSection() {
<div className="text"><p>Physiotherapy etobicoke is a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients.</p>
</div>
</div>
<div className="btn-box mt-3">
<div className="btn-box mt-3">
<Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
</div>
</div>
@ -90,14 +106,15 @@ export default function FaqSection() {
</ul>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 image-column">
{/* <div className="col-lg-6 col-md-12 col-sm-12 image-column">
<div className="image_block_four">
<div className="image-box ml_30">
<div className="image-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-22.png)' }}></div>
</div>
</div>
</div>
</div> */}
</div>
</div>
</section>

73
components/sections/home/MobileServicesSection.js Normal file
View File

@ -0,0 +1,73 @@
import Link from "next/link"
export default function MobileServices() {
return (
<>
<section className="feature-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Services</span>
<h2>We Offer For You Medical & <br />Saving Lives</h2>
</div>
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-6 feature-block">
<div className="feature-block-one">
<div className="inner-box text-center">
<div className="icon-box"><i className="icon-9"></i></div>
<h3><Link href="/">Qualified Doctor</Link></h3>
<div className="btn-box">
<Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
</div>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-6 feature-block">
<div className="feature-block-one">
<div className="inner-box text-center">
<div className="icon-box"><i className="icon-10"></i></div>
<h3><Link href="/">Emergency Help</Link></h3>
<div className="btn-box">
<Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
</div>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-6 feature-block">
<div className="feature-block-one">
<div className="inner-box text-center">
<div className="icon-box"><i className="icon-11"></i></div>
<h3><Link href="/">Modern Equipment</Link></h3>
<div className="btn-box">
<Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
</div>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-6 feature-block">
<div className="feature-block-one">
<div className="inner-box text-center">
<div className="icon-box"><i className="icon-12"></i></div>
<h3><Link href="/">Family Medicine</Link></h3>
<div className="btn-box">
<Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
</div>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</div>
</div>
</div>
<div className='col-12 text-center'>
<div className="btn-box">
<Link href="index-2" className="theme-btn btn-one"><span>View All Services</span></Link>
</div>
</div>
</div>
</div>
</section>
</>
)
}

2
components/sections/home/ServicesSection.js
View File

@ -3,7 +3,7 @@ import React from 'react';
export default function ServicesSection() {
return (
<section className="service-section sec-pad">
<section className="service-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Services</span>

2
public/assets/css/module-css/about.css
View File

@ -200,7 +200,7 @@
}
.about-style-two .content_block_one .content-box .list-style-one li:before{
background: #F4F3F8;
background: #ffe6e6;
}
.content_block_one .content-box .lower-box{

2
public/assets/css/module-css/banner.css
View File

@ -132,7 +132,7 @@
.banner-carousel .swiper-slide:before{
position: absolute;
content: '';
background: #EBF5FF;
background: #f9d6d6;
width: 100%;
height: 100%;
left: 0px;

6
public/assets/css/module-css/blog-details.css
View File

@ -48,7 +48,7 @@
.blog-details-content blockquote{
position: relative;
display: block;
background: #F4F3F8;
background: #ffe6e6;
border-radius: 20px;
padding: 40px;
margin: 0px 0px 30px 0px;
@ -117,7 +117,7 @@
font-size: 16px;
line-height: 29px;
color: var(--title-color);
background: #F4F3F8;
background: #ffe6e6;
border-radius: 5px;
padding: 10px 15px;
text-align: center;
@ -200,7 +200,7 @@
font-size: 16px;
line-height: 29px;
color: var(--title-color);
background: #F4F3F8;
background: #ffe6e6;
border-radius: 5px;
padding: 5px 20px;
z-index: 1;

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

@ -4,7 +4,7 @@
.chooseus-section{
position: relative;
padding: 114px 0px 160px 0px;
background-color: #0E1136;
background-color: #bc0000;
}
.chooseus-section .bg-layer{
@ -95,7 +95,7 @@
}
.chooseus-style-two .chooseus-block-one .inner-box h3{
color: #0E1136;
color: #bc0000;
}
.chooseus-style-two .chooseus-block-one .inner-box p{

2
public/assets/css/module-css/cta.css
View File

@ -10,7 +10,7 @@
.cta-section .bg-layer:before{
position: absolute;
content: '';
background: #0E1136;
background: #bc0000;
width: 100%;
height: 100%;
left: 0px;

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

@ -12,7 +12,7 @@
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
padding: 34px 25px 30px 23px;
padding: 25px;
z-index: 1;
margin-bottom: 30px;
transition: all 500ms ease;
@ -45,7 +45,7 @@
background: rgba(249, 49, 59, 0.05);
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
margin-bottom: 10px;
transition: all 500ms ease;
}
@ -56,10 +56,10 @@
.feature-block-one .inner-box h3{
position: relative;
display: block;
font-size: 26px;
line-height: 36px;
font-size: 20px;
line-height: 26px;
font-weight: 600;
margin-bottom: 20px;
margin-bottom: 10px;
}
.feature-block-one .inner-box h3 a{
@ -211,6 +211,24 @@
}
@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: 16px;
line-height: 24px;
margin-bottom: 10px;
}
}

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

@ -21,7 +21,7 @@
line-height: 65px;
font-weight: 600;
margin-bottom: 15px;
color: #0E1136;
color: #bc0000;
}
.funfact-block-one .inner-box .count-outer .symble{
@ -37,7 +37,7 @@
line-height: 26px;
font-weight: 500;
color: var(--secondary-color);
background: #F4F3F8;
background: #ffe6e6;
border-radius: 8px;
padding: 12px 15px;
}

2
public/assets/css/module-css/gallery.css
View File

@ -30,7 +30,7 @@
position: relative;
display: block;
overflow: hidden;
background: #0E1136;
background: #bc0000;
border-radius: 10px;
}

2
public/assets/css/module-css/page-title.css
View File

@ -19,7 +19,7 @@
.page-title .bg-layer:before{
position: absolute;
content: '';
background: #0E1136;
background: #bc0000;
width: 100%;
height: 100%;
left: 0px;

2
public/assets/css/module-css/service.css
View File

@ -105,7 +105,7 @@
.service-style-two{
position: relative;
background: #0E1136;
background: #bc0000;
}
.service-style-two .service-block-one .inner-box{

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

@ -92,7 +92,7 @@
border-radius: 10px;
font-size: 22px;
font-weight: 500;
color: #0E1136;
color: #bc0000;
padding: 10px 60px 10px 40px;
}
@ -129,7 +129,7 @@
font-size: 16px;
line-height: 29px;
color: var(--title-color);
background: #F4F3F8;
background: #ffe6e6;
border-radius: 5px;
padding: 10px 15px;
text-align: center;

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

@ -50,7 +50,7 @@
display: block;
width: 100%;
height: 66px;
background: #F4F3F8;
background: #ffe6e6;
border: 1px solid rgba(14, 17, 54, 0.05);
border-radius: 30px;
font-size: 16px;
@ -76,7 +76,7 @@
.subscribe-section:before{
position: absolute;
content: '';
background: #0E1136;
background: #bc0000;
width: 100%;
height: 50%;
left: 0px;

9
public/assets/css/module-css/team.css
View File

@ -89,7 +89,7 @@
}
.team-block-one .inner-box .lower-content{
padding: 30px 15px;
padding: 15px 15px 0px 15px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
@ -321,6 +321,13 @@
@media only screen and (max-width: 499px){
.team-block-one .inner-box .lower-content{
padding: 5px 5px 0px 5px;
}
.team-block-one .inner-box .lower-content h3{
font-size: 16px;
margin-bottom: 0px;
}
}

2
public/assets/css/module-css/video.css
View File

@ -10,7 +10,7 @@
.video-section .bg-layer:before{
position: absolute;
content: '';
background: #0E1136;
background: #bc0000;
width: 100%;
height: 100%;
left: 0px;

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

@ -119,7 +119,7 @@
--crimson-color: #DC143C;
--orange-color: #FFA500;
--text-color: #676767;
--title-color: #0E1136;
--title-color: #bc0000;
}
@ -260,7 +260,7 @@ h1,h2,h3,h4,h5,h6{
top: 0;
width: 100%;
z-index: 9999999;
background: #0E1136;
background: #bc0000;
}
.preloader-close{
@ -451,7 +451,7 @@ img {
.theme-btn.btn-two:hover,
.theme-btn.btn-one:hover{
background: #0E1136;
background: #bc0000;
}
.theme-btn:before, .theme-btn:after {
@ -464,7 +464,7 @@ img {
width: 100%;
height: 100%;
border-radius: 50%;
background: #0E1136;
background: #bc0000;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: center;
transform: scale(0) rotate(0);
@ -526,7 +526,7 @@ img {
}
.theme-btn.btn-three{
color: #0E1136 !important;
color: #bc0000 !important;
border: 1px solid #e5e5e5;
box-shadow: none;
background: #fff;
@ -857,7 +857,7 @@ img {
.header-top{
position: relative;
width: 100%;
background: #0E1136;
background: #bc0000;
padding: 15.5px 0px;
}
@ -1128,7 +1128,7 @@ img {
font-family: var(--soleil);
letter-spacing: 0.8px;
opacity:1;
color: #0E1136;
color: #bc0000;
z-index:1;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
@ -1169,7 +1169,7 @@ img {
margin-top: 15px;
z-index:100;
display:none;
background: #0E1136;
background: #bc0000;
opacity: 0;
visibility: hidden;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
@ -1254,7 +1254,7 @@ img {
left:100%;
top:0%;
margin-top: 15px;
background: #0E1136;
background: #bc0000;
width:230px;
z-index:100;
display:none;
@ -1837,7 +1837,7 @@ button.ltr {
}
.bg-color-1{
background-color: #F4F3F8;
background-color: #ffe6e6;
}
.list-style-one li{
@ -1845,7 +1845,7 @@ button.ltr {
display: block;
font-size: 16px;
line-height: 26px;
color: #0E1136;
color: #bc0000;
font-weight: 500;
padding-left: 40px;
margin-bottom: 17px;
@ -1855,7 +1855,7 @@ button.ltr {
display: block;
font-size: 16px;
line-height: 26px;
color: #0E1136;
color: #bc0000;
font-weight: 500;
padding-left: 10px;
margin-bottom: 17px;
@ -1971,7 +1971,7 @@ button.ltr {
.main-footer{
position: relative;
background: #0E1136;
background: #bc0000;
}
.main-footer .widget-section{
@ -2113,7 +2113,7 @@ button.ltr {
bottom: -223px;
width: 544px;
height: 544px;
background: #181B3E;
background: #a80303;
border-radius: 50%;
-webkit-animation: zoom-fade 8s infinite linear;
animation: zoom-fade 8s infinite linear;
@ -2360,11 +2360,11 @@ button.ltr {
position: relative;
display: inline-block;
font-size: 20px;
color: #0E1136;
color: #bc0000;
width: 48px;
height: 48px;
line-height: 52px;
background: #F4F3F8;
background: #ffe6e6;
text-align: center;
border-radius: 50%;
cursor: pointer;
@ -2491,7 +2491,7 @@ button.ltr {
}
.header-style-three .menu-right-content li{
background: #F4F3F8;
background: #ffe6e6;
}
.sticky-header .logo-box{
@ -2644,6 +2644,19 @@ button.ltr {
.sec-title h2{
font-size: 26px;
line-height: 34px;
}
.sec-pad{
padding: 30px 0px;
}
.sec-pad-2{
padding: 30px 0px;
}
}
blockquote {
@ -2661,11 +2674,119 @@ blockquote {
}
.theme-btn-2{
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
font-size: 14px;
line-height: 24px;
font-weight: 600;
font-family: var(--soleil);
color: #fff !important;
text-align: center;
border-radius: 40px;
z-index: 1;
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
transition: all 500ms ease;
}
.theme-btn-2.btn-one{
background: var(--theme-color);
}
.theme-btn-2.btn-two{
background: var(--secondary-color);
}
.theme-btn-2.btn-two:hover,
.theme-btn-2.btn-one:hover{
background: #bc0000;
}
.theme-btn-2:before, .theme-btn-2:after {
content: "";
position: absolute;
display: block;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #bc0000;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: center;
transform: scale(0) rotate(0);
z-index: -1;
}
.theme-btn-2:hover:before {
border-radius: 0;
transform: scale(1) rotate(-180deg);
}
.theme-btn-2:hover:after {
border-radius: 0;
transform: scale(1) rotate(180deg);
}
.theme-btn-2:after {
background: #0E1D40;
}
.theme-btn-2 span{
position: relative;
display: inline-block;
padding: 6px 12px 6px 12px;
}
.theme-btn-2 span:before{
position: absolute;
content: '';
background: var(--theme-color);
width: 30px;
height: 30px;
left: -5px;
top: -5px;
border-radius: 50%;
transform: scale(0,0);
transition: all 500ms ease;
}
.theme-btn-2:hover span:before{
transform: scale(1,1);
}
.theme-btn-2 span:after{
position: absolute;
content: '';
background: var(--theme-color);
width: 30px;
height: 30px;
right: -5px;
bottom: -5px;
border-radius: 50%;
transform: scale(0,0);
transition: all 500ms ease;
}
.theme-btn-2:hover span:after{
transform: scale(1,1);
}
@media(max-width: 500px) {
.theme-btn-2{
font-size: 12px;
line-height: 22px;
}
.row{
--bs-gutter-x: 20px;
}
}