469 lines
20 KiB
JavaScript
469 lines
20 KiB
JavaScript
'use client'
|
||
import Layout from "@/components/layout/Layout"
|
||
import Link from "next/link"
|
||
import { useState } from 'react'
|
||
import { teamMembers } from "@/utils/constant.utils";
|
||
import CounterUp from "@/components/elements/CounterUp";
|
||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import 'swiper/css';
|
||
import 'swiper/css/navigation';
|
||
import 'swiper/css/pagination';
|
||
import Image from "next/image";
|
||
|
||
const swiperOptions = {
|
||
modules: [Autoplay, Pagination, Navigation],
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 2500,
|
||
disableOnInteraction: false,
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
};
|
||
|
||
const images = [
|
||
'/assets/images/BrandPartners/1.png',
|
||
'/assets/images/BrandPartners/2.png',
|
||
'/assets/images/BrandPartners/3.png',
|
||
'/assets/images/BrandPartners/4.png',
|
||
'/assets/images/BrandPartners/5.png',
|
||
'/assets/images/BrandPartners/6.png',
|
||
];
|
||
|
||
export default function Home() {
|
||
const [isOpen, setOpen] = useState(false)
|
||
const [activeIndex, setActiveIndex] = useState(null);
|
||
|
||
const toggleReadMore = (index) => {
|
||
setActiveIndex(activeIndex === index ? null : index);
|
||
};
|
||
|
||
|
||
|
||
const contents = [
|
||
{
|
||
title: "Mission",
|
||
img: "/assets/images/about-us/section2/mission.webp",
|
||
text: "Physiotherapy etobicoke is committed to providing quality and innovative health care in a comfortable and professional environment. Our interdisciplinary team will work collaboratively to offer a comprehensive and patient centered approach to ensure the highest level of client experience through our evidence-based clinical practice."
|
||
},
|
||
{
|
||
title: "Vision",
|
||
img: "/assets/images/about-us/section2/vision.webp",
|
||
text: "To be regarded as the most reliable and effective health care therapy practice backed by the team of innovative healthcare professionals driven by passion."
|
||
},
|
||
{
|
||
title: "Values",
|
||
img: "/assets/images/about-us/section2/values.webp",
|
||
text: "We value compassion, excellence, innovation, collaboration, and integrity. By combining empathy with evidence-based care, we create a supportive and professional environment that helps every patient achieve long-term health and well-being."
|
||
}
|
||
];
|
||
|
||
return (
|
||
<>
|
||
{/* about-section */}
|
||
<section className="about-style-three pt_90 pb_90">
|
||
{/* <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div> */}
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
<div className="col-lg-6 col-md-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.webp)' }}></div>
|
||
<div className="shape-2">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-33.png"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
{/* <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div> */}
|
||
<div className="shape-4">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-34.png"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="shape-5">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-11.webp"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
<figure className="image image-1-ho hide-img"><img src="/assets/images/about-us/section1/about-right.webp" alt="Physiotherapy at Rapharehab" /></figure>
|
||
<figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="Physiotherapy at Rapharehab" /></figure>
|
||
<div className="icon-box new-ho"><img src="/assets/images/about-us/section1/about-icon.webp" alt="Physiotherapy at Rapharehab" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-12 col-sm-12 content-column">
|
||
<div className="content_block_one">
|
||
<div className="content-box">
|
||
<div className="sec-title mb_15">
|
||
<span className="sub-title mt-3">About Us</span>
|
||
<h2>Comprehensive Physiotherapy & Rehabilitation Clinic in Etobicoke</h2>
|
||
</div>
|
||
<div className="text-box mb_40">
|
||
<p>Welcome to Rapha Rehab Physiotherapy Massage Therapy Clinic Etobicoke – physiotherapy clinic in etobicoke managed by Registered Physiotherapists offering reliable physiotherapy treatment Services, Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractor, Massage therapy , Acupuncture treatment, Foot Reflexology, Osteopathy, custom knee braces, orthotics, spinal decompression therapy, concussion management, chronic pain management, workplace injury management, Naturopathy and home care physiotherapy Services in Etobicoke.</p>
|
||
</div>
|
||
<div className="btn-box">
|
||
<Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* about-section end */}
|
||
|
||
{/* process */}
|
||
<section className="process-section sec-pad pt-0">
|
||
<div className="pattern-layer">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-19.png"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
|
||
<div className="shape">
|
||
{/* <div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div>
|
||
<div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div> */}
|
||
<div className="shape-3"></div>
|
||
</div>
|
||
<div className="auto-container">
|
||
<div className="sec-title mb_50 centred">
|
||
<span className="sub-title">Caring Excellence</span>
|
||
<h2>Mission Vision & Values</h2>
|
||
</div>
|
||
<div className="inner-container">
|
||
<div className="arrow-shape">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-18.webp"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
{contents.map((item, index) => {
|
||
const isActive = activeIndex === index;
|
||
const words = item.text.split(" ");
|
||
const shortText = words.slice(0, 20).join(" ") + (words.length > 20 ? "..." : "");
|
||
|
||
return (
|
||
<div key={index} className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
|
||
<div className="inner-box">
|
||
<span className="count-text">{`0${index + 1}`}</span>
|
||
<figure className="image-box"><img src={item.img} alt={item.title} /></figure>
|
||
<div className="lower-content">
|
||
<h3>{item.title}</h3>
|
||
<p>{isActive ? item.text : shortText}</p>
|
||
{words.length > 20 && (
|
||
<button className="read-more-btn" onClick={() => toggleReadMore(index)}>
|
||
{isActive ? "Read Less" : "Read More"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
{/* process end */}
|
||
|
||
<section className="testimonial-style-two p_relative bg-color-1">
|
||
{/* <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-19.png)' }}></div> */}
|
||
<div className="auto-container">
|
||
<div className="row align-items-center flex-row-reverse">
|
||
{/* RIGHT IMAGE / LEFT CONTENT */}
|
||
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
|
||
<div className="image_block_two pl_30 pb_30">
|
||
<div className="image-box">
|
||
<figure className="image image-1-new "><img src="/assets/images/about-us/section3/top.webp" className="new-image-about" alt="Physiotherapy at Rapharehab" /></figure>
|
||
<figure className="image image-2-new hide-img"><img src="/assets/images/about-us/section3/bottom.webp" alt="Physiotherapy at Rapharehab" /></figure>
|
||
<div className="icon-box my-icon"><img src="/assets/images/about-us/section3/icon.webp" className="new-image-about2" alt="Physiotherapy at Rapharehab" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-12 col-sm-12 content-column mb-5">
|
||
<div className="content_block_one">
|
||
<div className="content-box">
|
||
<div className="sec-title-1 mb_15">
|
||
<span className="sub-title-1">Why Choose Us</span>
|
||
<h2>Your Trusted Physiotherapy Team in Etobicoke</h2>
|
||
</div>
|
||
<div className="text-box mb_40">
|
||
<p className="tex-color-1">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 className="btn-box">
|
||
<Link href="/contact" className="theme-btn btn-one-new"><span>Book Appointment</span></Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* process end */}
|
||
|
||
|
||
{/* team-section-style-two */}
|
||
<section className="team-section sec-pad centred">
|
||
{/* <div className="shape"> */}
|
||
{/* <div
|
||
className="shape-1 float-bob-y"
|
||
style={{ backgroundImage: "url(/assets/images/shape/shape-15.png)" }}
|
||
></div> */}
|
||
{/* <div className="shape-2"></div> */}
|
||
{/* <div
|
||
className="shape-3 float-bob-x"
|
||
style={{ backgroundImage: "url(/assets/images/shape/shape-16.png)" }}
|
||
></div> */}
|
||
{/* </div> */}
|
||
|
||
<div className="auto-container">
|
||
<div className="sec-title mb_50">
|
||
<span className="sub-title">Our Team</span>
|
||
<h2>
|
||
Meet our experienced doctors <br />for the best treatment
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="row clearfix justify-content-center">
|
||
{teamMembers.map((member, index) => (
|
||
<div
|
||
key={member.id}
|
||
className="col-lg-3 col-md-6 col-sm-12 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">
|
||
<figure className="image">
|
||
<img src={member.image} alt={member.name} />
|
||
</figure>
|
||
{/* <ul className="social-links clearfix">
|
||
{member.socials.map((social, idx) => (
|
||
<li key={idx}>
|
||
<Link href={social.link}>
|
||
<i className={social.icon}></i>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul> */}
|
||
</div>
|
||
|
||
<div className="lower-content">
|
||
<h3>
|
||
<Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>
|
||
{member.name}
|
||
</Link>
|
||
</h3>
|
||
<span className="designation">{member.designation}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="chooseus-section">
|
||
<div className="bg-layer">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/about-us/section4/why-choose-right.webp"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
|
||
<div className="pattern-layer">
|
||
<Image
|
||
// loader={exportableLoader}
|
||
src="/assets/images/shape/shape-12.webp"
|
||
alt="Physiotherapy at Rapharehab"
|
||
fill
|
||
style={{ objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
|
||
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
<div className="col-lg-8 col-md-12 col-sm-12 content-column">
|
||
<div className="content-box">
|
||
<div className="sec-title light mb_50">
|
||
{/* <span className="sub-title">Why Choose Us</span> */}
|
||
<h2>WHY CHOOSE ETOBICOKE PHYSIOTHERAPY</h2>
|
||
<p className='sub-title-2'>Physiotherapy Etobicoke – We are a team of health care professionals provide physiotherapy, massage therapy services in etobicoke assist you in improving your health.</p>
|
||
</div>
|
||
<div className="row clearfix">
|
||
<div className="col-lg-6 col-md-6 chooseus-block">
|
||
<div className="chooseus-block-one">
|
||
<div className="inner-box">
|
||
<div className="icon-box"><img src="/assets/images/home/why-choose/expert-team.webp" alt="Expert team" /></div>
|
||
<h3>Expert Team</h3>
|
||
<p>At Etobicoke Physiotherapy, we have expert team of professionals.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-6 chooseus-block">
|
||
<div className="chooseus-block-one">
|
||
<div className="inner-box">
|
||
<div className="icon-box"><img src="/assets/images/about-us/section4/understand.webp" alt="Understand your pain" /></div>
|
||
<h3>Understand your Pain</h3>
|
||
<p>Etobicoke physiotherapy offer Treatment for faster recovery.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-6 chooseus-block">
|
||
<div className="chooseus-block-one">
|
||
<div className="inner-box">
|
||
<div className="icon-box"><img src="/assets/images/home/why-choose/ready.webp" alt="Ready to go" /></div>
|
||
<h3>Ready To Go</h3>
|
||
<p>Flexible opening hours conveniently located in etobicoke.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* <div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
|
||
<div className="chooseus-block-one">
|
||
<div className="inner-box">
|
||
<div className="icon-box"><i className="icon-20"></i></div>
|
||
<h3>24/7 Services</h3>
|
||
<p>Amet minim mollit non deserunt aliqua dolor do amet sint.</p>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="funfact-section centred">
|
||
<div className="auto-container">
|
||
<div className="inner-container">
|
||
<div className="row clearfix">
|
||
<div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
|
||
<div className="funfact-block-one">
|
||
<div className="inner-box">
|
||
|
||
<div className="count-outer count-box">
|
||
<CounterUp end={10} /><span>+</span>
|
||
</div>
|
||
<span className="text-new">Professionals</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
|
||
<div className="funfact-block-one">
|
||
<div className="inner-box">
|
||
|
||
<div className="count-outer count-box">
|
||
<CounterUp end={25} /><span>+</span>
|
||
</div>
|
||
<span className="text-new">Years Experience</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
|
||
<div className="funfact-block-one">
|
||
<div className="inner-box">
|
||
|
||
<div className="count-outer count-box">
|
||
<CounterUp end={10} /><span>k+</span>
|
||
</div>
|
||
<span className="text-new">Happy Customers</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-6 col-6 funfact-block">
|
||
<div className="funfact-block-one">
|
||
<div className="inner-box">
|
||
|
||
<div className="count-outer count-box">
|
||
<CounterUp end={97} /><span>%</span>
|
||
</div>
|
||
<span className="text-new">Client Satisfaction</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section className="image-slider-section relative w-full pt_90 pb_90 text-center">
|
||
<div className="auto-container mx-auto relative w-full">
|
||
<div className="sec-title mb_50 centred">
|
||
<h2>Our Trusted Partners</h2>
|
||
</div>
|
||
<div className="slider-wrapper w-full">
|
||
<Swiper
|
||
{...swiperOptions}
|
||
slidesPerView={3}
|
||
spaceBetween={30}
|
||
breakpoints={{
|
||
320: { slidesPerView: 1 },
|
||
640: { slidesPerView: 2 },
|
||
1024: { slidesPerView: 3 },
|
||
}}
|
||
className="w-full h-[400px]"
|
||
>
|
||
{images.map((src, index) => (
|
||
<SwiperSlide key={index}>
|
||
<img
|
||
src={src}
|
||
alt="Physiotherapy at Rapharehab"
|
||
className="w-full h-full object-cover rounded-lg"
|
||
/>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</>
|
||
)
|
||
}
|
||
|
||
|