first commit

components/ServicesPreview.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Hammer, Truck, Building2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const SERVICES = [
+  {
+    id: "01",
+    title: "Mobil Vinç",
+    description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
+    icon: Hammer,
+    bg: "bg-surface-container",
+  },
+  {
+    id: "02",
+    title: "Ağır Nakliyat",
+    description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
+    icon: Truck,
+    bg: "bg-surface-container-high",
+  },
+  {
+    id: "03",
+    title: "Sepetli Platform",
+    description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
+    icon: Building2,
+    bg: "bg-surface-container-highest",
+  },
+];
+
+export function ServicesPreview() {
+  return (
+    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
+        <motion.div 
+          initial={{ opacity: 0, x: -20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="max-w-3xl"
+        >
+          <span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
+          <h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
+        </motion.div>
+        <motion.div 
+          initial={{ opacity: 0, x: 20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="text-left md:text-right"
+        >
+          <p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
+        </motion.div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3">
+        {SERVICES.map((service, index) => (
+          <motion.div
+            key={service.title}
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1, duration: 0.6 }}
+            viewport={{ once: true }}
+            className={cn(
+              "group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
+              service.bg
+            )}
+          >
+            <div className="relative z-10 h-full flex flex-col justify-between">
+              <service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
+              <div>
+                <h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
+                <p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
+              </div>
+            </div>
+            
+            {/* Number Background */}
+            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
+              <span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
+            </div>
+
+            {/* Hover Overlay */}
+            <div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
+              <p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
+              <button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
+                Detaylar
+              </button>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}