98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
"use client";
|
||
import React, { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
|
||
// ✅ Progress bar (optional)
|
||
const ProgressBar = ({ label, percent }) => (
|
||
<div className="progress-box">
|
||
<p>{label}</p>
|
||
<div className="bar">
|
||
<div
|
||
className="bar-inner count-bar"
|
||
style={{ width: `${percent}%` }}
|
||
></div>
|
||
<div className="count-text">{`${percent}%`}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
export default function Solution() {
|
||
const [isMobile, setIsMobile] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
|
||
checkScreenSize();
|
||
window.addEventListener("resize", checkScreenSize);
|
||
return () => window.removeEventListener("resize", checkScreenSize);
|
||
}, []);
|
||
|
||
// ✅ Image source changes by screen size
|
||
const imageSrc = isMobile
|
||
? "/assets/images/home/trusted/trusted-physiotherapy-care-mbl.webp"
|
||
: "/assets/images/home/trusted/trusted-physiotherapy-care.webp";
|
||
|
||
return (
|
||
<section className="solutions-section p_relative">
|
||
<div className="auto-container">
|
||
<div className="row clearfix">
|
||
{/* ===== Left Column (Text) ===== */}
|
||
<div className="col-lg-6 col-md-12 col-sm-12 content-column">
|
||
<div className="content-box">
|
||
<div className="sec-title mb-3">
|
||
<span className="sub-title">Association With</span>
|
||
<h2>Trusted Physiotherapy Experts in Etobicoke</h2>
|
||
</div>
|
||
|
||
<p className="pr_50">
|
||
At <b>Rapha Rehab</b>, we go beyond routine treatment - we focus on your complete recovery.
|
||
Our expert physiotherapists and rehabilitation specialists in <b>Etobicoke</b> create personalized care plans designed to restore movement, relieve pain, and support long-term well-being.
|
||
From sports injuries to post-surgery rehabilitation, we’re committed to helping you move confidently and live without limits.
|
||
|
||
</p>
|
||
|
||
{/* ✅ Optional Progress Bars */}
|
||
{/* <div className="progress-inner mb_50">
|
||
<ProgressBar label="Skilled Doctor" percent={85} />
|
||
<ProgressBar label="Modernized Equipment" percent={90} />
|
||
<ProgressBar label="Dedicated Team" percent={80} />
|
||
</div> */}
|
||
|
||
<div className="btn-box mt_50">
|
||
<Link href="/contact" className="theme-btn btn-one" aria-label="Contact-Us">
|
||
<span>Contact Us</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ===== Right Column (Image) ===== */}
|
||
<div className="col-lg-6 col-md-12 col-sm-12 image-column">
|
||
<div className="image_block_tw">
|
||
<div className="image-box text-center">
|
||
<Image
|
||
src={imageSrc}
|
||
alt="Trusted Physiotherapy"
|
||
width={600}
|
||
height={400}
|
||
priority
|
||
quality={70}
|
||
placeholder="blur"
|
||
blurDataURL={imageSrc}
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
style={{
|
||
width: "100%",
|
||
height: "auto",
|
||
borderRadius: "10px",
|
||
objectFit: "cover",
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|