first commit

components/Navbar.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+const NAV_LINKS = [
+  { name: "Hizmetler", href: "/hizmetler" },
+  { name: "Filomuz", href: "/filomuz" },
+  { name: "Hakkımızda", href: "/hakkimizda" },
+  { name: "İletişim", href: "/iletisim" },
+];
+
+export function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <nav
+      className={cn(
+        "fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-6 md:px-12 py-6 transition-all duration-300",
+        isScrolled
+          ? "bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/15"
+          : "bg-transparent"
+      )}
+    >
+      {/* Logo */}
+      <Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
+        AYDOĞAN <span className="text-white">NAKLİYAT</span>
+      </Link>
+
+      {/* Desktop Links */}
+      <div className="hidden md:flex items-center gap-12">
+        {NAV_LINKS.map((link) => (
+          <Link
+            key={link.name}
+            href={link.href}
+            className="font-headline uppercase tracking-widest text-xs font-bold text-white/60 hover:text-primary transition-all duration-300"
+          >
+            {link.name}
+          </Link>
+        ))}
+      </div>
+
+      {/* CTA Button */}
+      <div className="hidden md:flex items-center gap-4">
+        <button className="bg-primary-container text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all rounded-none ring-offset-2 focus:ring-2 focus:ring-primary">
+          Teklif Alın
+        </button>
+      </div>
+
+      {/* Mobile Menu Toggle */}
+      <button
+        className="md:hidden text-white focus:outline-none p-2"
+        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+        aria-label="Menu toggle"
+      >
+        {mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="fixed inset-0 bg-black/60 backdrop-blur-md md:hidden z-[-1]"
+              onClick={() => setMobileMenuOpen(false)}
+            />
+            <motion.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed top-0 right-0 h-screen w-[85%] bg-surface-container-highest flex flex-col p-12 md:hidden shadow-2xl z-[101]"
+            >
+              <div className="flex justify-between items-center mb-16">
+                <span className="font-headline font-black text-xl text-primary">MENÜ</span>
+                <button onClick={() => setMobileMenuOpen(false)}>
+                  <X size={32} className="text-white" />
+                </button>
+              </div>
+              <div className="flex flex-col gap-10">
+                {NAV_LINKS.map((link) => (
+                  <Link
+                    key={link.name}
+                    href={link.href}
+                    className="font-headline text-3xl font-bold text-white uppercase tracking-tighter hover:text-primary transition-colors"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {link.name}
+                  </Link>
+                ))}
+                <button className="mt-10 bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none transition-all">
+                  Hızlı Teklif
+                </button>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}