feat: dark luxury redesign with black heart branding

Complete visual overhaul: dark-only mode, rose/crimson accent system,
glassmorphism header, animated hero with floating hearts and glow orbs,
photo-backed cards, infinite team carousel with drag support,
redesigned modals with hero images, black heart logo with rose glow silhouette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/Header.tsx

@@ -3,65 +3,97 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { BRAND, NAV_LINKS } from "@/lib/constants";
-import { ThemeToggle } from "@/components/ui/ThemeToggle";
 
 export function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    function handleScroll() {
+      setScrolled(window.scrollY > 20);
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   return (
-    <header className="surface-glass theme-border fixed top-0 z-50 w-full border-b">
-      <div className="flex h-16 items-center justify-between px-6 sm:px-8">
-        <Link href="/" className="flex items-center gap-2">
-          <Image
-            src="/images/logo.png"
-            alt={BRAND.name}
-            width={32}
-            height={32}
-            unoptimized
-            className="dark:invert"
-          />
-          <span className="font-display text-lg font-bold tracking-tight">
+    <header
+      className={`fixed top-0 z-50 w-full transition-all duration-500 ${
+        scrolled
+          ? "border-b border-white/[0.06] bg-black/40 shadow-none backdrop-blur-xl"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 sm:px-8">
+        <Link href="/" className="group flex items-center gap-2.5">
+          <div className="relative flex h-8 w-8 items-center justify-center">
+            <div
+              className="absolute inset-0 rounded-full transition-all duration-300 group-hover:scale-125"
+              style={{
+                background: "radial-gradient(circle, rgba(225,29,72,0.5) 0%, rgba(225,29,72,0.15) 50%, transparent 70%)",
+              }}
+            />
+            <Image
+              src="/images/logo.png"
+              alt={BRAND.name}
+              width={24}
+              height={24}
+              unoptimized
+              className="relative transition-transform duration-300 group-hover:scale-110"
+              style={{
+                filter: "drop-shadow(0 0 3px rgba(225,29,72,0.5))",
+              }}
+            />
+          </div>
+          <span className="font-display text-lg font-bold tracking-tight text-white">
             {BRAND.shortName}
           </span>
         </Link>
 
         <nav className="hidden items-center gap-8 md:flex">
           {NAV_LINKS.map((link) => (
-            <a key={link.href} href={link.href} className="nav-link">
+            <a
+              key={link.href}
+              href={link.href}
+              className="relative py-1 text-sm font-medium text-neutral-400 transition-all duration-300 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-rose-500 after:transition-all after:duration-300 hover:text-white hover:after:w-full"
+            >
               {link.label}
             </a>
           ))}
-          <ThemeToggle />
         </nav>
 
         <div className="flex items-center gap-2 md:hidden">
-          <ThemeToggle />
           <button
             onClick={() => setMenuOpen(!menuOpen)}
             aria-label="Меню"
-            className="body-text rounded-md p-2"
+            className="rounded-lg p-2 text-neutral-400 transition-colors hover:text-white"
           >
             {menuOpen ? <X size={24} /> : <Menu size={24} />}
           </button>
         </div>
       </div>
 
-      {menuOpen && (
-        <nav className="surface-base theme-border border-t px-6 py-4 sm:px-8 md:hidden">
+      {/* Mobile menu */}
+      <div
+        className={`overflow-hidden transition-all duration-300 md:hidden ${
+          menuOpen ? "max-h-80 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <nav className="border-t border-white/[0.06] bg-black/40 px-6 py-4 backdrop-blur-xl sm:px-8">
           {NAV_LINKS.map((link) => (
             <a
               key={link.href}
               href={link.href}
               onClick={() => setMenuOpen(false)}
-              className="nav-link block py-3"
+              className="block py-3 text-base text-neutral-400 transition-colors hover:text-white"
             >
               {link.label}
             </a>
           ))}
         </nav>
-      )}
+      </div>
     </header>
   );
 }