feat: add project files

2026-06-03 17:31:50 +03:00
parent 8050d67b18
commit a952f571b9
26 changed files with 1661 additions and 113 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Menu, X } from "lucide-react";
+
+export default function Header({ dict, lang }: { dict: any, lang: string }) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { name: dict.nav.about, href: "#about" },
+    { name: dict.nav.services, href: "#services" },
+    { name: dict.nav.gallery, href: "#gallery" },
+    { name: dict.nav.contact, href: "#contact" },
+  ];
+
+  return (
+    <header
+      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+        isScrolled ? "bg-white/95 backdrop-blur-md shadow-sm py-4" : "bg-transparent py-6"
+      }`}
+    >
+      <div className="container mx-auto px-4 md:px-6 flex justify-between items-center">
+        <a href="#" className="flex items-center">
+          <img 
+            src="/logo.png" 
+            alt="Moy Beach Logo" 
+            className={`h-12 w-auto transition-all duration-300 ${!isScrolled ? "brightness-0 invert opacity-90" : ""}`} 
+          />
+        </a>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center space-x-8">
+          {navLinks.map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className={`text-sm tracking-wide hover:text-coral transition-colors ${
+                isScrolled ? "text-sea-dark" : "text-white"
+              }`}
+            >
+              {link.name}
+            </a>
+          ))}
+          <div className={`flex items-center gap-2 text-sm font-medium ${isScrolled ? "text-sea-dark" : "text-white"}`}>
+            <a href="/tr" className={`cursor-pointer hover:text-coral ${lang === 'tr' ? 'opacity-100 font-bold' : 'opacity-70'}`}>TR</a>
+            <span className="opacity-50">/</span>
+            <a href="/en" className={`cursor-pointer hover:text-coral ${lang === 'en' ? 'opacity-100 font-bold' : 'opacity-70'}`}>EN</a>
+          </div>
+        </nav>
+
+        {/* Mobile Menu Toggle */}
+        <button
+          className="md:hidden"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+        >
+          {mobileMenuOpen ? (
+            <X className={isScrolled ? "text-sea-dark" : "text-white"} />
+          ) : (
+            <Menu className={isScrolled ? "text-sea-dark" : "text-white"} />
+          )}
+        </button>
+      </div>
+
+      {/* Mobile Nav */}
+      {mobileMenuOpen && (
+        <div className="md:hidden absolute top-full left-0 w-full bg-white shadow-xl flex flex-col py-4 px-6 space-y-4">
+          {navLinks.map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className="text-sea-dark text-lg py-2 border-b border-gray-100"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              {link.name}
+            </a>
+          ))}
+          <div className="flex gap-4 pt-2">
+            <a href="/tr" className={`font-medium cursor-pointer ${lang === 'tr' ? 'text-sea-dark font-bold' : 'text-gray-400'}`}>TR</a>
+            <a href="/en" className={`font-medium cursor-pointer ${lang === 'en' ? 'text-sea-dark font-bold' : 'text-gray-400'}`}>EN</a>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}