first commit

components/Hero.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function Hero() {
+  return (
+    <section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
+      {/* Background Image & Overlay */}
+      <div className="absolute inset-0 z-0">
+        <img 
+          className="w-full h-full object-cover" 
+          src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4" 
+          alt="Heavy duty crane in Dalaman"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
+      </div>
+
+      <div className="relative z-10 px-6 md:px-12 max-w-6xl">
+        <motion.div 
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mb-8 flex items-center gap-4"
+        >
+          <span className="h-[2px] w-8 md:w-12 bg-primary"></span>
+          <span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold">Dalaman / Muğla</span>
+        </motion.div>
+
+        <motion.h1 
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="font-headline text-[clamp(2.5rem,8vw,5.5rem)] font-bold leading-[0.9] tracking-tighter text-white mb-8 text-balance"
+        >
+          Dalaman’ın Güçlü <br />
+          Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
+        </motion.h1>
+
+        <motion.ul 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 0.5 }}
+          className="space-y-4 mb-16"
+        >
+          {["Ağır Nakliyat", "Sepetli Platform", "Mobil Vinç Kiralama"].map((item, idx) => (
+            <li key={item} className="flex items-center gap-4 group">
+              <span className="w-2 h-2 bg-primary"></span>
+              <span className="font-headline text-lg md:text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors cursor-default">
+                {item}
+              </span>
+            </li>
+          ))}
+        </motion.ul>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.8 }}
+          className="flex flex-col sm:flex-row gap-4"
+        >
+          <button className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]">
+            Hizmet Alın
+          </button>
+          <button className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50">
+            Filomuz
+          </button>
+        </motion.div>
+      </div>
+
+      {/* Bottom Gradient Texture */}
+      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
+    </section>
+  );
+}