36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
|
||
const STATS = [
|
||
{ label: "Maksimum Kapasite", value: "150T" },
|
||
{ label: "Teknik Destek", value: "24/7" },
|
||
{ label: "Modern Filo", value: "15+" },
|
||
{ label: "Güvenlik Kaydı", value: "100%" },
|
||
];
|
||
|
||
export function StatsGrid() {
|
||
return (
|
||
<section className="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest">
|
||
{STATS.map((stat, idx) => (
|
||
<motion.div
|
||
key={stat.label}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: idx * 0.1, duration: 0.5 }}
|
||
viewport={{ once: true }}
|
||
className={cn(
|
||
"p-8 md:p-16 flex flex-col justify-center transition-colors hover:bg-surface-container-low group",
|
||
idx % 2 === 0 ? "bg-surface-container-lowest" : "bg-surface-container/30"
|
||
)}
|
||
>
|
||
<span className="text-primary font-headline text-4xl md:text-6xl font-black mb-2 group-hover:scale-105 transition-transform origin-left">{stat.value}</span>
|
||
<span className="font-label text-[10px] md:text-xs uppercase tracking-[0.2em] text-on-surface-variant font-bold">{stat.label}</span>
|
||
</motion.div>
|
||
))}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
import { cn } from "@/lib/utils";
|