first commit

components/StatsGrid.tsx

@@ -0,0 +1,35 @@
+"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";