115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";
|
|
|
|
export default function AreaOfInjury() {
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
// ✅ Detect mobile screen (same logic as Header2)
|
|
useEffect(() => {
|
|
const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
|
|
checkScreenSize();
|
|
window.addEventListener("resize", checkScreenSize);
|
|
return () => window.removeEventListener("resize", checkScreenSize);
|
|
}, []);
|
|
|
|
return (
|
|
<section className="team-section sec-pad centred bg-color-1">
|
|
{/* ===== Background Patterns ===== */}
|
|
<div className="pattern-layer">
|
|
<div className="pattern-1">
|
|
<Image
|
|
src="/assets/images/shape/shape-13.webp"
|
|
alt="Physiotherapy Background"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
<div className="pattern-2">
|
|
<Image
|
|
src="/assets/images/shape/shape-14.webp"
|
|
alt="Physiotherapy Background"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shape">
|
|
<div className="shape-2"></div>
|
|
</div>
|
|
|
|
{/* ===== Section Header ===== */}
|
|
<div className="auto-container">
|
|
<div className="sec-title mb_50 centred">
|
|
<span className="sub-title-1 new-color2">
|
|
Start Your Recovery Today! <br /> Visit Our Injury Care Team in Etobicoke.
|
|
</span>
|
|
<h2 className="tex-color-1">Area Of Injury</h2>
|
|
</div>
|
|
|
|
{/* ===== Injuries Grid ===== */}
|
|
<div className="row clearfix">
|
|
{areaOfInjuryData.slice(0, 8).map((area, index) => {
|
|
// ✅ Same concept as Header logo switching
|
|
const imageSrc = isMobile
|
|
? area.mobileImage || area.image // if mobile image exists, use it
|
|
: area.image;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="col-lg-3 col-md-6 col-6 team-block d-flex"
|
|
>
|
|
<div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1">
|
|
<div className="inner-box d-flex flex-column flex-grow-1">
|
|
<div className="image-box">
|
|
<figure className="image">
|
|
{/* ✅ Using Next/Image for automatic optimization */}
|
|
<Image
|
|
src={imageSrc}
|
|
alt={area.title}
|
|
width={400}
|
|
height={400}
|
|
quality={75}
|
|
priority={index < 4} // first few load faster
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
objectFit: "cover",
|
|
borderRadius: "10px",
|
|
}}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
|
|
<div className="lower-content mt-auto">
|
|
<h3>
|
|
<Link href={`/area-of-injury/${area.slug}`} aria-label="Area of injury title">
|
|
{area.title}
|
|
</Link>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* ===== View All Button ===== */}
|
|
<div className="col-12 text-center">
|
|
<div className="btn-box">
|
|
<Link href="/area-of-injury" className="theme-btn btn-one-new" aria-label="View all">
|
|
<span>View All</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|