first commit

2026-06-03 04:27:40 +03:00
parent dcfaf2723c
commit 48277fe8d2
22 changed files with 1610 additions and 117 deletions
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Menu, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { name: "Hakkımızda", href: "#about" },
+    { name: "Etkinlikler", href: "#events" },
+    { name: "Kokteyller", href: "#cocktails" },
+    { name: "Galeri", href: "#gallery" },
+    { name: "Rezervasyon", href: "#contact" },
+  ];
+
+  return (
+    <nav
+      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
+        isScrolled ? "bg-primary/95 backdrop-blur-md py-4 shadow-lg border-b border-white/5" : "bg-transparent py-6"
+      }`}
+    >
+      <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
+        {/* Left Side Links (Desktop) */}
+        <div className="hidden md:flex space-x-8 w-1/3 justify-start">
+          {navLinks.slice(0, 2).map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
+            >
+              {link.name}
+            </a>
+          ))}
+        </div>
+
+        {/* Logo (Centered) */}
+        <div className="w-1/3 flex justify-center text-center">
+          <a href="#" className="flex flex-col items-center group">
+            <span className="font-serif text-3xl md:text-4xl text-text-main group-hover:text-accent1 transition-colors border-2 border-transparent group-hover:border-accent1 rounded-full px-6 py-2">
+              LUNA
+            </span>
+            <span className="text-[10px] uppercase tracking-[0.3em] text-accent1 mt-1 font-light opacity-80">
+              Cocktail and More
+            </span>
+          </a>
+        </div>
+
+        {/* Right Side Links (Desktop) */}
+        <div className="hidden md:flex space-x-8 w-1/3 justify-end items-center">
+          {navLinks.slice(2, 4).map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
+            >
+              {link.name}
+            </a>
+          ))}
+          <a
+            href="#contact"
+            className="bg-accent1 text-primary px-6 py-2 uppercase tracking-widest text-xs font-bold hover:bg-accent2 transition-colors"
+          >
+            Rezervasyon
+          </a>
+        </div>
+
+        {/* Mobile Menu Toggle */}
+        <div className="md:hidden w-1/3 flex justify-end">
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="text-text-main hover:text-accent1 focus:outline-none transition-colors"
+          >
+            {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className="absolute top-full left-0 w-full bg-primary/95 backdrop-blur-lg border-t border-white/10 shadow-2xl py-8 flex flex-col items-center space-y-6 md:hidden"
+          >
+            {navLinks.map((link) => (
+              <a
+                key={link.name}
+                href={link.href}
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="text-text-main hover:text-accent1 text-lg uppercase tracking-widest font-medium transition-colors"
+              >
+                {link.name}
+              </a>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}