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/sections/Hero.tsx

@@ -1,35 +1,99 @@
+"use client";
+
 import Image from "next/image";
 import { siteContent } from "@/data/content";
 import { BRAND } from "@/lib/constants";
 import { Button } from "@/components/ui/Button";
+import { FloatingHearts } from "@/components/ui/FloatingHearts";
+import { ChevronDown } from "lucide-react";
 
 export function Hero() {
   const { hero } = siteContent;
 
   return (
-    <section className="surface-base section-container flex min-h-svh items-center justify-center">
-      <div className="text-center">
-        <Image
-          src="/images/logo.png"
-          alt={BRAND.name}
-          width={280}
-          height={280}
-          priority
-          unoptimized
-          className="hero-logo mx-auto mb-8 dark:invert"
-        />
+    <section className="relative flex min-h-svh items-center justify-center overflow-hidden bg-[#050505]">
+      {/* Animated gradient background */}
+      <div className="hero-bg-gradient absolute inset-0" />
+
+      {/* Glow orbs */}
+      <div
+        className="hero-glow-orb"
+        style={{
+          width: "500px",
+          height: "500px",
+          top: "-10%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          background: "radial-gradient(circle, rgba(225, 29, 72, 0.12), transparent 70%)",
+        }}
+      />
+      <div
+        className="hero-glow-orb"
+        style={{
+          width: "300px",
+          height: "300px",
+          bottom: "10%",
+          right: "10%",
+          background: "radial-gradient(circle, rgba(225, 29, 72, 0.08), transparent 70%)",
+          animationDelay: "3s",
+        }}
+      />
+
+      {/* Floating hearts */}
+      <FloatingHearts />
+
+      {/* Content */}
+      <div className="section-container relative z-10 text-center">
+        <div className="hero-logo relative mx-auto mb-10 h-[220px] w-[220px]">
+          {/* Outer ambient glow */}
+          <div className="absolute -inset-16 rounded-full bg-rose-500/8 blur-[60px]" />
+          {/* Rose disc — makes black heart visible as silhouette */}
+          <div
+            className="absolute inset-2 rounded-full"
+            style={{
+              background: "radial-gradient(circle, rgba(225,29,72,0.45) 0%, rgba(225,29,72,0.18) 45%, transparent 70%)",
+            }}
+          />
+          <Image
+            src="/images/logo.png"
+            alt={BRAND.name}
+            width={220}
+            height={220}
+            priority
+            unoptimized
+            className="relative"
+            style={{
+              filter:
+                "drop-shadow(0 0 6px rgba(225,29,72,0.5)) drop-shadow(0 0 20px rgba(225,29,72,0.25))",
+            }}
+          />
+        </div>
+
         <h1 className="hero-title font-display text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
-          {hero.headline}
+          <span className="gradient-text">{hero.headline}</span>
         </h1>
-        <p className="hero-subtitle body-text mx-auto mt-6 max-w-md text-lg sm:text-xl">
+
+        <p className="hero-subtitle mx-auto mt-6 max-w-lg text-lg text-neutral-400 sm:text-xl">
           {hero.subheadline}
         </p>
-        <div className="hero-cta mt-10">
+
+        <div className="hero-cta mt-12">
           <Button href={hero.ctaHref} size="lg">
             {hero.ctaText}
           </Button>
         </div>
       </div>
+
+      {/* Scroll indicator */}
+      <div className="hero-cta absolute bottom-8 left-1/2 -translate-x-1/2">
+        <a
+          href="#about"
+          className="flex flex-col items-center gap-1 text-neutral-600 transition-colors hover:text-rose-400"
+        >
+          <span className="text-xs uppercase tracking-widest">Scroll</span>
+          <ChevronDown size={20} className="animate-bounce" />
+        </a>
+      </div>
     </section>
   );
 }