ss

2026-06-09 13:06:58 +03:00
parent 13b77ee54f
commit f6b4acb760
19 changed files with 2633 additions and 75 deletions
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Menu, X } from "lucide-react";
+
+const navLinks = [
+  // { name: "Odalar",     href: "/odalar"     },
+  { name: "Aktiviteler",href: "/aktiviteler"},
+  { name: "Restoran",   href: "/restoran"   },
+  { name: "Etkinlikler",href: "/etkinlikler"},
+  { name: "Galeri",     href: "/galeri"     },
+  { name: "Hakkımızda", href: "/hakkimizda" },
+  { name: "İletişim",   href: "/iletisim"   },
+];
+
+export default function Navbar() {
+  const [isOpen, setIsOpen]   = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 60);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => { setIsOpen(false); }, [pathname]);
+
+  const isHome = pathname === "/";
+
+  return (
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
+        scrolled
+          ? "bg-white/95 backdrop-blur-md shadow-sm py-4"
+          : "bg-transparent py-6"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center">
+
+          {/* Logo */}
+          <Link href="/" className="flex-shrink-0 flex flex-col leading-none group">
+            <span
+              className={`font-serif text-xl font-bold tracking-[0.08em] transition-colors ${
+                scrolled ? "text-primary" : isHome ? "text-white" : "text-primary"
+              }`}
+            >
+              KITE BEACH
+            </span>
+            <span
+              className={`text-[9px] tracking-[0.3em] uppercase font-medium transition-colors ${
+                scrolled ? "text-muted" : isHome ? "text-white/50" : "text-muted"
+              }`}
+            >
+              Akyaka
+            </span>
+          </Link>
+
+          {/* Desktop links */}
+          <div className="hidden md:flex md:items-center md:gap-8">
+            {navLinks.map((link) => {
+              const active = pathname === link.href;
+              return (
+                <Link
+                  key={link.name}
+                  href={link.href}
+                  className={`text-[13px] font-medium transition-colors relative group ${
+                    scrolled
+                      ? active ? "text-primary" : "text-foreground hover:text-primary"
+                      : isHome
+                        ? active ? "text-accent" : "text-white/85 hover:text-white"
+                        : active ? "text-primary" : "text-foreground hover:text-primary"
+                  }`}
+                >
+                  {link.name}
+                  <span
+                    className={`absolute -bottom-0.5 left-0 h-px bg-current transition-all duration-300 ${
+                      active ? "w-full" : "w-0 group-hover:w-full"
+                    }`}
+                  />
+                </Link>
+              );
+            })}
+
+            <Link
+              href="/iletisim"
+              className="btn-shimmer bg-accent text-white px-6 py-2.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-md"
+            >
+              Rezervasyon
+            </Link>
+          </div>
+
+          {/* Mobile toggle */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className={`flex md:hidden p-1 transition-colors ${
+              scrolled ? "text-dark" : isHome ? "text-white" : "text-dark"
+            }`}
+            aria-label="Menü"
+          >
+            {isOpen ? <X size={26} /> : <Menu size={26} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            key="mobile-menu"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            className="md:hidden overflow-hidden bg-white border-t border-sand"
+          >
+            <div className="px-5 py-5 flex flex-col gap-1">
+              {navLinks.map((link, i) => (
+                <motion.div
+                  key={link.name}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: i * 0.05 }}
+                >
+                  <Link
+                    href={link.href}
+                    className={`block py-3 text-base font-medium border-b border-sand/60 transition-colors ${
+                      pathname === link.href ? "text-primary" : "text-dark hover:text-primary"
+                    }`}
+                  >
+                    {link.name}
+                  </Link>
+                </motion.div>
+              ))}
+              <Link
+                href="/iletisim"
+                className="mt-4 block w-full text-center bg-accent text-white px-6 py-3.5 rounded-full text-sm font-bold uppercase tracking-wider"
+              >
+                Rezervasyon Yap
+              </Link>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}