52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { Link } from '@tanstack/react-router'
|
|
import { featuresData, commonDescriptions } from '../../data/siteData'
|
|
|
|
export default function Features() {
|
|
return (
|
|
<section className="py-20 bg-white" id="about">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-wrap lg:flex-nowrap gap-12">
|
|
{/* Left Content */}
|
|
<div className="w-full lg:w-1/3">
|
|
<h4 className="text-lg font-semibold text-secondary mb-3">
|
|
{commonDescriptions.featuresSubtitle}
|
|
</h4>
|
|
<p className="text-text mt-3 leading-relaxed">
|
|
{commonDescriptions.featuresDesc}
|
|
</p>
|
|
<Link
|
|
to="/services"
|
|
className="inline-block mt-4 px-6 py-3 bg-secondary hover:bg-secondary/80 text-white font-semibold rounded transition-colors"
|
|
>
|
|
See More Services →
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Right Content - Feature Cards */}
|
|
<div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-6 lg:pl-8">
|
|
{featuresData.map((feature) => (
|
|
<div key={feature.id} className="feature-gd">
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.title}
|
|
className="w-full h-auto object-cover rounded"
|
|
/>
|
|
<div className="icon-info mt-3">
|
|
<h5 className="text-lg font-semibold mt-3">
|
|
<a href="#" className="text-title hover:text-secondary transition-colors">
|
|
{feature.title}
|
|
</a>
|
|
</h5>
|
|
<p className="text-text mt-2">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|