77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import {
|
|
Zap,
|
|
ShieldCheck,
|
|
Layers,
|
|
BarChart3,
|
|
Headset,
|
|
Cloud,
|
|
} from "lucide-react"
|
|
import homeData from "@/data/home.json"
|
|
|
|
const iconMap: Record<string, React.ReactNode> = {
|
|
"zap": <Zap className="w-5 h-5" />,
|
|
"shield-check": <ShieldCheck className="w-5 h-5" />,
|
|
"layers": <Layers className="w-5 h-5" />,
|
|
"bar-chart-3": <BarChart3 className="w-5 h-5" />,
|
|
"headset": <Headset className="w-5 h-5" />,
|
|
"cloud": <Cloud className="w-5 h-5" />,
|
|
}
|
|
|
|
export function AboutSection() {
|
|
const { advantages } = homeData
|
|
|
|
return (
|
|
<section id="advantages" className="py-20 lg:py-28 bg-neutral-50/80">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<div className="flex flex-col items-center text-center gap-4 mb-14">
|
|
<Badge
|
|
variant="outline"
|
|
className="border-primary/30 text-primary bg-primary-light px-4 py-1 text-sm font-medium"
|
|
>
|
|
{advantages.sectionBadge}
|
|
</Badge>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
|
|
{advantages.title}
|
|
</h2>
|
|
<p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
|
|
{advantages.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 3x2 grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{advantages.items.map((item, index) => (
|
|
<Card
|
|
key={item.title}
|
|
className="group relative border border-border bg-background hover:border-primary/35 hover:shadow-lg hover:shadow-primary/8 transition-all duration-300 overflow-hidden"
|
|
>
|
|
{/* Top accent line */}
|
|
<div className="absolute top-0 left-0 right-0 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
|
|
|
|
<CardContent className="p-7 flex flex-col gap-4">
|
|
{/* Icon */}
|
|
<div className="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300 shadow-sm">
|
|
{iconMap[item.icon]}
|
|
</div>
|
|
|
|
{/* Index number */}
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h3 className="text-base font-bold text-foreground leading-snug">{item.title}</h3>
|
|
<span className="text-2xl font-black text-border group-hover:text-primary/20 transition-colors shrink-0 leading-none mt-0.5">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|