91 lines
3.8 KiB
JavaScript

import Layout from "@/components/layout/Layout";
import Link from "next/link";
import Rehabilitation from "@/utils/Rehabilitation.utils";
export const metadata = {
title: "Rehabilitation Clinic in Etobicoke",
description: "Comprehensive rehab services in Etobicoke for injury recovery, pain relief & functional restoration.",
};
export default function RehabilitationPage() {
return (
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Rehabilitation" bannerImage="/assets/images/rehabilitation/rehabilation-banner.webp">
<section className="service-section sec-pad-2">
<div className="auto-container">
<div className="row clearfix">
{Rehabilitation.map((service, index) => (
// <div key={service.id} className="col-lg-4 col-md-6 col-sm-12 service-block">
// <div
// className="service-block-one wow fadeInUp animated"
// data-wow-delay={`${index * 300}ms`}
// data-wow-duration="1500ms"
// >
// <div className="inner-box">
// <div className="image-box">
// <figure className="image">
// <Link href={`/rehabilitation/${service.slug}`}>
// <img src={service.mainImage} alt={service.title} />
// </Link>
// </figure>
// </div>
// <div className="lower-content">
// <div className="icon-box">
// <img
// src={service.icon}
// alt={`${service.title} Icon`}
// />
// </div>
// <h3>
// <Link href={`/rehabilitation/${service.slug}`}>{service.title}</Link>
// </h3>
// <p>{service.shortDesc}</p>
// </div>
// </div>
// </div>
// </div>
<div className="col-lg-3 col-md-4 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image">
<Link href={`/rehabilitation/${service.slug}`} aria-label="rehabilitation">
<img src={service.mainImage} alt={service.title} loading="lazy"/>
</Link>
</figure>
</div>
<div className="lower-content-new">
<div className="icon-box-new">
<img
src={service.icon}
alt={`${service.title} Icon`}
/>
</div>
<h2>
<Link href={`/rehabilitation/${service.slug}`} aria-label="Service Title">{service.title}</Link>
</h2>
<p
className='text-start'
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
>
{service.shortDesc}
</p>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
</Layout>
);
}