99 lines
3.4 KiB
JavaScript
99 lines
3.4 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 Care in Etobicoke</h2>
|
|
</div>
|
|
|
|
<p className="pr_50">
|
|
Our highly skilled physiotherapy team in Etobicoke is dedicated
|
|
to helping you restore mobility, relieve pain, and achieve your
|
|
long-term health goals. With a personalized treatment approach
|
|
and patient-focused care, we are here to support your journey
|
|
toward better health and well-being.
|
|
</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>
|
|
);
|
|
}
|