rapharehap/components/sections/home/MobileServicesSection.js

76 lines
3.6 KiB
JavaScript

import { servicesList } from "@/utils/Services.utils"
import Link from "next/link"
import Image from "next/image"
export default function MobileServices() {
return (
<>
<section className="team-section sec-pad centred bg-color-1">
<div className="pattern-layer">
<div className="pattern-1 ">
<Image
src="/assets/images/home/our-services/top-right.webp"
alt="Physiotherapy at Rapharehab"
fill
style={{ objectFit: "cover" }}
/>
</div>
<div className="pattern-2 ">
<Image
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 mb_50 centred">
<span className="sub-title-1 new-color2">We Help You Move Better & <br />Live Healthier</span>
<h2 className="tex-color-1">Our Services</h2>
</div>
<div className="row clearfix">
{
servicesList?.slice(0, 8)?.map((service, index) => {
return (
<div className="col-lg-3 col-md-6 col-6 feature-block" key={index}>
<div className="feature-block-one">
<div className="inner-box text-center">
<div className="icon-box">
<img
src={service.icon2}
alt={`${service.alt}`}
/>
</div> <h3><Link href="/"> {service?.shortTitle}</Link></h3>
<div className="btn-box">
<Link
href={`/etobicoke-treatment-service/${service.slug}`}
className="theme-btn-2 btn-one"
>
<span>View Service</span>
</Link>
</div>
{/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
</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>
</>
)
}