first commit

2026-06-03 16:13:15 +03:00
parent a3b76fa65d
commit 716bad9d7c
40 changed files with 2698 additions and 135 deletions
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X, Globe } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Locale } from "../dictionaries";
+
+export default function Navbar({ lang, dict }: { lang: Locale; dict: any }) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+  const isHome = pathname === `/${lang}` || pathname === `/${lang}/`;
+
+  const navLinks = [
+    { name: dict.home, href: `/${lang}` },
+    { name: dict.corporate, href: `/${lang}/kurumsal` },
+    { name: dict.venues, href: `/${lang}/#mekanlar` },
+    { name: dict.gallery, href: `/${lang}/galeri` },
+    { name: dict.contact, href: `/${lang}/iletisim` },
+  ];
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const switchLanguage = (newLang: string) => {
+    if (!pathname) return '/';
+    // Replace the current lang code in the URL with the new one
+    const segments = pathname.split('/');
+    if (segments[1] === 'tr' || segments[1] === 'en') {
+      segments[1] = newLang;
+    } else {
+      segments.splice(1, 0, newLang);
+    }
+    return segments.join('/');
+  };
+
+  return (
+    <header
+      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+        isScrolled || !isHome
+          ? "bg-[var(--color-moy-dark)]/90 backdrop-blur-md py-4 shadow-lg"
+          : "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={`/${lang}`} className="flex-shrink-0">
+            <img src="/logo.png" alt="Moy Group Logo" className="h-10 w-auto" />
+          </Link>
+
+          {/* Desktop Nav */}
+          <nav className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.name}
+                href={link.href}
+                className="text-white hover:text-[var(--color-moy-gold)] transition-colors text-sm uppercase tracking-wider font-medium"
+              >
+                {link.name}
+              </Link>
+            ))}
+            
+            {/* Language Switcher */}
+            <div className="flex items-center gap-2 ml-4 border-l border-gray-600 pl-4">
+              <Globe size={16} className="text-[var(--color-moy-gold)]" />
+              <Link href={switchLanguage('tr')} className={`text-sm font-medium ${lang === 'tr' ? 'text-white' : 'text-gray-400 hover:text-white'}`}>TR</Link>
+              <span className="text-gray-600">|</span>
+              <Link href={switchLanguage('en')} className={`text-sm font-medium ${lang === 'en' ? 'text-white' : 'text-gray-400 hover:text-white'}`}>EN</Link>
+            </div>
+          </nav>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden text-white"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Nav */}
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <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-[var(--color-moy-dark)] border-t border-gray-800 shadow-xl md:hidden"
+          >
+            <div className="px-4 pt-2 pb-6 space-y-1">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.name}
+                  href={link.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="block px-3 py-4 text-white border-b border-gray-800 hover:text-[var(--color-moy-gold)] uppercase tracking-wider text-sm"
+                >
+                  {link.name}
+                </Link>
+              ))}
+              <div className="flex items-center gap-4 px-3 py-4 text-white">
+                <Globe size={18} className="text-[var(--color-moy-gold)]" />
+                <Link href={switchLanguage('tr')} onClick={() => setMobileMenuOpen(false)} className={`text-sm ${lang === 'tr' ? 'text-[var(--color-moy-gold)] font-bold' : ''}`}>Türkçe</Link>
+                <Link href={switchLanguage('en')} onClick={() => setMobileMenuOpen(false)} className={`text-sm ${lang === 'en' ? 'text-[var(--color-moy-gold)] font-bold' : ''}`}>English</Link>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </header>
+  );
+}