Bob AI: Updated hero section with IMORA BÈAUTY branding and full-scr

src/pages/HomePage/sections/Hero.tsx

@@ -1,19 +1,88 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "hero" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AutoFillText from "@/components/ui/AutoFillText";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
-import React from 'react';
-import HeroBillboardBrand from "@/components/sections/hero/HeroBillboardBrand";
+const primaryButton = {
+  text: "Call Us",
+  href: "tel:5551234567"
+};
+const secondaryButton = {
+  text: "Email Us",
+  href: "mailto:hello@lumine.com"
+};
 
-export default function HeroSection(): React.JSX.Element {
+type HeroBillboardBrandProps = {
+  brand: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
   return (
-    <div id="hero" data-section="hero">
-              <HeroBillboardBrand
-                brand="Luminé"
-                description="Pure, natural skincare formulated for radiant, healthy skin. Discover the power of botanical ingredients and scientific innovation."
-                primaryButton={{ text: "Call Us", href: "tel:5551234567" }}
-                secondaryButton={{ text: "Email Us", href: "mailto:hello@lumine.com" }}
-                imageSrc="https://storage.googleapis.com/webild/default/templates/skincare/hero.webp"
-              />
-            </div>
+    <div className="relative w-full min-h-screen flex flex-col justify-center items-center overflow-hidden bg-background">
+      <div className="absolute inset-0 z-0">
+        <img 
+          src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=2000&auto=format&fit=crop" 
+          alt="Luxury Beauty" 
+          className="w-full h-full object-cover opacity-80"
+        />
+        <div className="absolute inset-0 bg-background/30 backdrop-blur-[2px]"></div>
+      </div>
+      
+      <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
+        <h1 className="text-[15vw] font-serif tracking-tighter text-foreground/90 leading-none select-none mix-blend-overlay">
+          IMORA
+        </h1>
+      </div>
+
+      <div className="relative z-20 w-content-width mx-auto flex flex-col items-center text-center mt-20">
+        <h2 className="text-5xl md:text-7xl font-serif text-foreground mb-6 max-w-4xl tracking-tight">
+          BEAUTY WITHOUT LIMITS
+        </h2>
+        <p className="text-lg md:text-xl text-foreground/80 max-w-2xl mb-10 font-sans font-light">
+          Discover curated luxury cosmetics, skincare, and beauty essentials designed to celebrate confidence, individuality, and self-expression.
+        </p>
+        
+        <div className="flex flex-col sm:flex-row gap-4">
+          <a href="#products" className="primary-button px-8 py-4 rounded-full text-sm uppercase tracking-widest transition-transform hover:scale-105">
+            Shop Collection
+          </a>
+          <a href="#collections" className="secondary-button px-8 py-4 rounded-full text-sm uppercase tracking-widest transition-transform hover:scale-105 backdrop-blur-md border border-white/30">
+            Discover New Arrivals
+          </a>
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 w-full z-30 bg-foreground/5 backdrop-blur-md border-t border-foreground/10 overflow-hidden py-3">
+        <div className="flex whitespace-nowrap animate-[marquee_20s_linear_infinite]">
+          {[...Array(4)].map((_, i) => (
+            <span key={i} className="text-sm font-sans tracking-widest text-foreground px-4">
+              ✨ Luxury Beauty • Makeup Essentials • Glow Beyond Limits • Beauty For Every Shade • Curated With Love
+            </span>
+          ))}
+        </div>
+      </div>
+      
+      <style dangerouslySetInnerHTML={{__html: `
+        @keyframes marquee {
+          0% { transform: translateX(0%); }
+          100% { transform: translateX(-50%); }
+        }
+      `}} />
+    </div>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
   );
 }