262 lines
14 KiB
JavaScript
262 lines
14 KiB
JavaScript
'use client'
|
||
import Layout from "@/components/layout/Layout"
|
||
import Link from "next/link"
|
||
import { useState } from 'react'
|
||
|
||
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/resource/process-1.jpg",
|
||
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/resource/process-2.jpg",
|
||
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/resource/process-3.jpg",
|
||
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non massa nec justo lacinia suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non massa nec justo lacinia suscipit."
|
||
}
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="About Us">
|
||
{/* about-section */}
|
||
<section className="about-style-three pt_120 pb_120 bg-color-1">
|
||
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.png)' }}></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.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-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">About Us</span>
|
||
<h2>Rapha Rehab Physiotherapy</h2>
|
||
</div>
|
||
<div className="text-box mb_40">
|
||
<p>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="index-2" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* about-section end */}
|
||
|
||
{/* process */}
|
||
<section className="process-section sec-pad ">
|
||
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-19.png)' }}></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" style={{ backgroundImage: 'url(/assets/images/shape/shape-18.png)' }}></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">
|
||
<div className="image-box">
|
||
<figure className="image image-1"><img src="/assets/images/why-us/back-2.webp" alt="" /></figure>
|
||
<figure className="image image-2"><img src="/assets/images/why-us/front-2.webp" alt="" /></figure>
|
||
<div className="icon-box"><img src="/assets/images/why-us/icon-2.webp" alt="" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
|
||
<div className="content_block_one pr_30">
|
||
<div className="content-box">
|
||
<div className="sec-title mb_15">
|
||
<span className="sub-title">About Us</span>
|
||
<h2>Medical services & diagnostics</h2>
|
||
</div>
|
||
<div className="text-box mb_40">
|
||
<ul className="list-style-one clearfix">
|
||
<li>Top-Notch Treatment – Under our care, you will be placed in a supportive and comfortable environment helping you receive care in comfortable and supportive environment designed to address your issues</li>
|
||
<li>Personalized Treatment Plan – We offer One-on-one care with a skilled therapist allows us to develop a plan specific to your particular needs results in a faster recovery.</li>
|
||
<li>We listen & take time – We listen & take time to get to know you properly – Right from the start with your inquiry, we are here to listen and help find the root cause of your problem.</li>
|
||
<li>Our treatment rooms – Our treatment rooms are fully equipped and private.</li>
|
||
<li>Strong network of health professionals – We have a strong network of health professionals to refer to, making sure you get the right diagnosis and correct treatment for your condition.</li>
|
||
</ul>
|
||
</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">
|
||
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
|
||
<div className="team-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
|
||
<div className="inner-box">
|
||
<div className="image-box">
|
||
<figure className="image"><img src="/assets/images/team/team-1.jpg" alt="" /></figure>
|
||
<ul className="social-links clearfix">
|
||
<li><Link href="/"><i className="icon-4"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-5"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-6"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-7"></i></Link></li>
|
||
</ul>
|
||
</div>
|
||
<div className="lower-content">
|
||
<h3><Link href="team-details/">Black Marvin</Link></h3>
|
||
<span className="designation">Medical Assistant</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
|
||
<div className="team-block-one wow fadeInUp animated" data-wow-delay="200ms" data-wow-duration="1500ms">
|
||
<div className="inner-box">
|
||
<div className="image-box">
|
||
<figure className="image"><img src="/assets/images/team/team-2.jpg" alt="" /></figure>
|
||
<ul className="social-links clearfix">
|
||
<li><Link href="/"><i className="icon-4"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-5"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-6"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-7"></i></Link></li>
|
||
</ul>
|
||
</div>
|
||
<div className="lower-content">
|
||
<h3><Link href="team-details">Eleanor Pena</Link></h3>
|
||
<span className="designation">Doctor</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
|
||
<div className="team-block-one wow fadeInUp animated" data-wow-delay="400ms" data-wow-duration="1500ms">
|
||
<div className="inner-box">
|
||
<div className="image-box">
|
||
<figure className="image"><img src="/assets/images/team/team-3.jpg" alt="" /></figure>
|
||
<ul className="social-links clearfix">
|
||
<li><Link href="/"><i className="icon-4"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-5"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-6"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-7"></i></Link></li>
|
||
</ul>
|
||
</div>
|
||
<div className="lower-content">
|
||
<h3><Link href="team-details">Arlene Maccy</Link></h3>
|
||
<span className="designation">Nursing Assistant</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
|
||
<div className="team-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
|
||
<div className="inner-box">
|
||
<div className="image-box">
|
||
<figure className="image"><img src="/assets/images/team/team-4.jpg" alt="" /></figure>
|
||
<ul className="social-links clearfix">
|
||
<li><Link href="/"><i className="icon-4"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-5"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-6"></i></Link></li>
|
||
<li><Link href="/"><i className="icon-7"></i></Link></li>
|
||
</ul>
|
||
</div>
|
||
<div className="lower-content">
|
||
<h3><Link href="team-details">Jenny Wilson</Link></h3>
|
||
<span className="designation">Senior Doctor</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* team-section-style-two end */}
|
||
</Layout>
|
||
</>
|
||
)
|
||
}
|
||
|
||
|