86 lines
4.1 KiB
JavaScript
86 lines
4.1 KiB
JavaScript
import { servicesList } from '@/utils/Services.utils';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
import Image from "next/image";
|
|
|
|
|
|
|
|
export default function ServicesSection() {
|
|
return (
|
|
<section className="team-section sec-pad centred bg-color-1">
|
|
<div className="pattern-layer">
|
|
<div className="pattern-1 ">
|
|
<Image
|
|
// loader={exportableLoader}
|
|
src="/assets/images/home/our-services/top-right.webp"
|
|
alt="Physiotherapy at Rapharehab"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="pattern-2 ">
|
|
<Image
|
|
// loader={exportableLoader}
|
|
src="/assets/images/home/our-services/bottom-left.webp"
|
|
alt="Physiotherapy at Rapharehab"
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="auto-container">
|
|
<div className="sec-title-1 mb_50 centred">
|
|
<span className="sub-title-1">We Help You Move Better & Live Healthier</span>
|
|
<h2>Our Services</h2>
|
|
</div>
|
|
<div className="row clearfix">
|
|
{servicesList?.slice(0, 8)?.map((service, index) => (
|
|
<div className="col-lg-3 col-md-4 col-sm-12 service-block d-flex" key={index}>
|
|
<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={`/etobicoke-treatment-service/${service.slug}`}>
|
|
<img src={service?.image} alt={service.alt} />
|
|
</Link>
|
|
</figure>
|
|
</div>
|
|
<div className="lower-content-new">
|
|
<div className="icon-box-new">
|
|
<img src={service?.icon} alt={service.alt} />
|
|
</div>
|
|
<h3 className='text-start'>
|
|
<Link href={`/etobicoke-treatment-service/${service.slug}`}>
|
|
{service?.shortTitle}
|
|
</Link>
|
|
</h3>
|
|
<p
|
|
className='text-start'
|
|
style={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 2,
|
|
WebkitBoxOrient: 'vertical',
|
|
}}
|
|
>
|
|
{service?.shortDescription}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className='col-12 text-center'>
|
|
<div className="btn-box">
|
|
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new"><span>View All Services</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|