56 lines
2.7 KiB
JavaScript
56 lines
2.7 KiB
JavaScript
'use client';
|
|
import Layout from "@/components/layout/Layout"
|
|
import Link from "next/link"
|
|
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
|
|
|
|
export default function AreaOfInjury() {
|
|
return (
|
|
<Layout
|
|
headerStyle={2}
|
|
footerStyle={1}
|
|
breadcrumbTitle="Areas of Injury"
|
|
bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp"
|
|
>
|
|
<section className="service-section sec-pad-2">
|
|
<div className="auto-container">
|
|
<div className="row clearfix">
|
|
{areaOfInjuryData.map((item) => {
|
|
// Always use TITLE in uppercase
|
|
const altText = item.title ? item.title.toUpperCase() : "AREA OF INJURY";
|
|
|
|
return (
|
|
<div className="col-lg-4 col-md-6 col-sm-12 service-block" key={item.id}>
|
|
<div
|
|
className="service-block-one wow fadeInUp animated"
|
|
data-wow-delay="00ms"
|
|
data-wow-duration="1500ms"
|
|
>
|
|
<div className="inner-box">
|
|
<div className="image-box">
|
|
<figure className="image">
|
|
<Link href={`/area-of-injury/${item.slug}`}>
|
|
<img src={item.image} alt={altText} />
|
|
</Link>
|
|
</figure>
|
|
</div>
|
|
<div className="lower-content">
|
|
<div className="icon-box">
|
|
<img src={item.icon} alt={altText} />
|
|
</div>
|
|
<h3>
|
|
<Link href={`/area-of-injury/${item.slug}`}>{item.title}</Link>
|
|
</h3>
|
|
<p>{item.shortDescription}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
)
|
|
}
|