52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { servicesData, commonDescriptions } from '../../data/siteData'
|
|
|
|
export default function Services() {
|
|
return (
|
|
<section className="py-20 bg-services-bg" id="services">
|
|
<div className="container mx-auto px-4">
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
|
|
{commonDescriptions.servicesTitle}
|
|
</h3>
|
|
<p className="text-text my-3">
|
|
{commonDescriptions.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Service Cards */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 pt-8 mt-3">
|
|
{servicesData.map((service) => (
|
|
<div
|
|
key={service.id}
|
|
className="group bg-white text-center px-5 py-10 rounded border-b-[3px] border-secondary hover:bg-secondary transition-all duration-300"
|
|
>
|
|
<div className="icon-holder mb-4">
|
|
<span
|
|
className={`fa fa-${service.icon} text-secondary group-hover:text-white transition-colors duration-300`}
|
|
style={{ fontSize: '36px' }}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<h4 className="text-xl font-semibold text-title group-hover:text-white mb-3 font-sans transition-colors duration-300">
|
|
{service.title}
|
|
</h4>
|
|
<div className="open-description">
|
|
<p className="text-text group-hover:text-white/90 mb-5 transition-colors duration-300">
|
|
{service.description}
|
|
</p>
|
|
<a
|
|
href="#read"
|
|
className="text-secondary group-hover:text-white font-bold transition-colors duration-300"
|
|
>
|
|
Read More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|