39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { Target, CheckCircle, Shield, Briefcase, Headphones, TrendingUp } from 'lucide-react'
|
|
import { useContent } from '@/components/layout/content-provider'
|
|
|
|
const icons = [Target, CheckCircle, Shield, Briefcase, Headphones, TrendingUp]
|
|
|
|
export default function FeaturesIconGrid() {
|
|
const content = useContent()
|
|
const { featuresIconGrid } = content.pages.home
|
|
|
|
return (
|
|
<section className="py-12 md:py-16 lg:py-20 border-t border-border/50">
|
|
<div className="mx-auto max-w-5xl space-y-6 px-6 md:space-y-10">
|
|
<div className="relative z-10 mx-auto max-w-xl space-y-4 text-center md:space-y-6">
|
|
<h2 className="text-heading-2 text-balance font-semibold">{featuresIconGrid.heading}</h2>
|
|
<p className="text-body leading-relaxed text-muted-foreground">{featuresIconGrid.description}</p>
|
|
</div>
|
|
|
|
<div className="relative mx-auto grid max-w-4xl divide-x divide-y border border-border dark:border-primary/20 dark:divide-primary/10 *:p-12 sm:grid-cols-2 lg:grid-cols-3 *:transition-colors *:hover:bg-primary/5 dark:*:hover:bg-primary/5">
|
|
{featuresIconGrid.items.map((item, index) => {
|
|
const Icon = icons[index] ?? Target
|
|
return (
|
|
<div key={index} className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Icon className="size-4 text-primary dark:text-primary" />
|
|
<h4 className="text-heading-5 font-medium">{item}</h4>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
|