Merge version_2_1782070104876 into main

Merge version_2_1782070104876 into main

src/components/Layout.tsx

@@ -10,38 +10,38 @@ export default function Layout() {
     <StyleProvider buttonVariant="default" siteBackground="none" heroBackground="none">
       <SiteBackgroundSlot />
       <NavbarFloating
-                logo="Luminé Skincare"
+                logo="IMORA BÈAUTY"
                 navItems={[
-                  { name: "Products", href: "#products" },
+                  { name: "Shop", href: "#products" },
+                  { name: "Collections", href: "#collections" },
                   { name: "About", href: "#about" },
-                  { name: "Benefits", href: "#benefits" },
                   { name: "Reviews", href: "#reviews" },
                   { name: "Contact", href: "#contact" },
                 ]}
-                ctaButton={{ text: "Shop Now", href: "#products" }}
+                ctaButton={{ text: "Shop Collection", href: "#products" }}
               />
       <main className="flex-grow">
         <Outlet />
       </main>
       <FooterSimpleCard
-                brand="Luminé"
+                brand="IMORA BÈAUTY"
                 columns={[
                   {
-                    title: "Product",
+                    title: "Shop",
                     items: [
-                      { label: "Moisturizers", href: "#products" },
-                      { label: "Serums", href: "#products" },
-                      { label: "Masks", href: "#products" },
-                      { label: "Bundles", href: "#products" },
+                      { label: "New Arrivals", href: "#products" },
+                      { label: "Best Sellers", href: "#products" },
+                      { label: "Face", href: "#products" },
+                      { label: "Lips", href: "#products" },
                     ],
                   },
                   {
                     title: "Company",
                     items: [
                       { label: "About Us", href: "#about" },
-                      { label: "Sustainability", href: "#about" },
-                      { label: "Blog", href: "#" },
+                      { label: "Our Philosophy", href: "#about" },
                       { label: "Careers", href: "#" },
+                      { label: "Press", href: "#" },
                     ],
                   },
                   {
@@ -49,21 +49,21 @@ export default function Layout() {
                     items: [
                       { label: "Contact Us", href: "#contact" },
                       { label: "FAQ", href: "#faq" },
-                      { label: "Worldwide Shipping", href: "#" },
-                      { label: "Returns", href: "#" },
+                      { label: "Shipping & Returns", href: "#" },
+                      { label: "Track Order", href: "#" },
                     ],
                   },
                   {
                     title: "Connect",
                     items: [
                       { label: "Instagram", href: "#" },
-                      { label: "Facebook", href: "#" },
-                      { label: "Pinterest", href: "#" },
                       { label: "TikTok", href: "#" },
+                      { label: "Pinterest", href: "#" },
+                      { label: "YouTube", href: "#" },
                     ],
                   },
                 ]}
-                copyright="© 2025 Luminé Skincare. All rights reserved."
+                copyright="© 2025 IMORA BÈAUTY. All rights reserved."
                 links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
               />
     </StyleProvider>

src/pages/HomePage.tsx

@@ -1,149 +1,39 @@
-import { Leaf, Droplets, Sprout, Wind, Globe, Truck, Package } from "lucide-react";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
+
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import HeroBillboardBrand from "@/components/sections/hero/HeroBillboardBrand";
-import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
-import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
-import FeaturesBento from "@/components/sections/features/FeaturesBento";
-import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ProductsSection from './HomePage/sections/Products';
+import BenefitsSection from './HomePage/sections/Benefits';
+import ReviewsSection from './HomePage/sections/Reviews';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider heroBackground="none" siteBackground="aurora" buttonVariant="shift">
         <SiteBackgroundSlot />
 
         
 
-        <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>
+        <HeroSection />
 
-        <div id="about" data-section="about">
-          <AboutTextSplit
-            title="Crafted with nature's finest elements"
-            descriptions={[
-              "Our skincare line combines cutting-edge science with natural, sustainably-sourced ingredients to deliver exceptional results for your skin.",
-              "Each product is carefully formulated to nourish, protect, and revitalize your complexion, helping you achieve the radiant, healthy skin you deserve.",
-            ]}
-            primaryButton={{ text: "Learn More", href: "#benefits" }}
-          />
-        </div>
+        <AboutSection />
 
-        <div id="products" data-section="products">
-          <ProductMediaCards
-            tag="Our Collection"
-            title="Our Signature Collection"
-            description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
-            products={[
-              {
-                name: "Hydrating Moisturizer",
-                price: "$68",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image2.webp",
-              },
-              {
-                name: "Radiance Serum",
-                price: "$85",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image3.webp",
-              },
-              {
-                name: "Purifying Face Mask",
-                price: "$52",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image1.webp",
-              },
-            ]}
-          />
-        </div>
+        <ProductsSection />
 
-        <div id="benefits" data-section="benefits">
-          <FeaturesBento
-            tag="Why Luminé"
-            title="Why Choose Luminé"
-            description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
-            features={[
-              {
-                title: "Worldwide Shipping",
-                description: "Fast and reliable delivery to over 150 countries worldwide",
-                bentoComponent: "info-card-marquee",
-                infoCards: [
-                  { icon: Globe, label: "Countries", value: "150+" },
-                  { icon: Truck, label: "Delivery", value: "Fast" },
-                  { icon: Package, label: "Tracking", value: "Live" },
-                ],
-              },
-              {
-                title: "Clinically Proven",
-                description: "Dermatologist-tested and proven effective in clinical trials",
-                bentoComponent: "animated-bar-chart",
-              },
-              {
-                title: "Sustainable",
-                description: "Eco-conscious packaging and ethical sourcing practices",
-                bentoComponent: "orbiting-icons",
-                centerIcon: Leaf,
-                orbitIcons: [Droplets, Sprout, Wind],
-              },
-            ]}
-          />
-        </div>
+        <BenefitsSection />
 
-        <div id="reviews" data-section="reviews">
-          <TestimonialTrustCard
-            quote="Luminé skincare has completely transformed my routine. My skin feels more radiant and healthy than ever before. I love that it's made with natural ingredients I can trust. Plus, worldwide shipping made it so easy to get my products delivered wherever I am."
-            rating={5}
-            author="Sarah Mitchell, Beauty Editor"
-            avatars={[
-              { name: "Sarah Mitchell", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image5.avif" },
-              { name: "Customer 2", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image6.avif" },
-              { name: "Customer 3", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image7.avif" },
-              { name: "Customer 4", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image8.avif" },
-            ]}
-          />
-        </div>
+        <ReviewsSection />
 
-        <div id="faq" data-section="faq">
-          <FaqSplitMedia
-            tag="FAQ"
-            title="Frequently Asked Questions"
-            description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
-            items={[
-              {
-                question: "How long does it take to see results?",
-                answer: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks.",
-              },
-              {
-                question: "Are your products suitable for sensitive skin?",
-                answer: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin.",
-              },
-              {
-                question: "Do you offer worldwide shipping?",
-                answer: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery.",
-              },
-              {
-                question: "What is your return policy?",
-                answer: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners.",
-              },
-            ]}
-            imageSrc="https://storage.googleapis.com/webild/default/templates/skincare/image4.webp"
-          />
-        </div>
+        <FaqSection />
 
-        <div id="contact" data-section="contact">
-          <ContactCenter
-            tag="Newsletter"
-            title="Get Your Glow On"
-            description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox."
-            inputPlaceholder="Enter your email"
-            buttonText="Subscribe"
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+              <AboutTextSplit
+        title="BEAUTY"
+        descriptions={["At IMORA BÈAUTY, we believe beauty is personal. Our collection is thoughtfully curated to inspire confidence, creativity, and self-expression.","From everyday essentials to luxury indulgences, every product is selected to help you look and feel your most radiant self."]}
+        primaryButton={{ text: "Learn More", href: "#benefits" }}
+      />
+            </div>
+  );
+}

src/pages/HomePage/sections/Benefits.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "benefits" section.
+
+import React from 'react';
+import { Leaf, Droplets, Sprout, Wind, Globe, Truck, Package } from "lucide-react";
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+
+export default function BenefitsSection(): React.JSX.Element {
+  return (
+    <div id="benefits" data-section="benefits">
+              <FeaturesBento
+        tag="Philosophy"
+        title="Beauty Without Rules"
+        description="At IMORA BÈAUTY, inclusivity, creativity, and confidence are at the heart of everything we do. We believe beauty should empower, inspire, and reflect every unique individual."
+        features={[{"infoCards":[{"icon":"Sparkles","value":"Radiant","label":"Glow"},{"icon":"Palette","label":"Create","value":"Artistry"},{"icon":"Heart","label":"Inspire","value":"Confidence"}],"title":"Beauty That Celebrates You","description":"Our products are designed to celebrate confidence, individuality, and self-expression.","bentoComponent":"info-card-marquee"},{"bentoComponent":"animated-bar-chart","description":"Premium ingredients and formulations that deliver exceptional results.","title":"Luxury Quality"},{"description":"Beauty for every shade, curated with love and expertise.","bentoComponent":"orbiting-icons","centerIcon":"Sparkles","title":"Inclusive Beauty","orbitIcons":["Palette","Heart","Star"]}]}
+      />
+            </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactCenter
+        tag="GLOW"
+        title="Join the IMORA Beauty Club"
+        description="Receive exclusive beauty launches, makeup tips, trend forecasts, and member-only offers."
+        inputPlaceholder="Enter your email"
+        buttonText="Subscribe"
+      />
+            </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+              <FaqSplitMedia
+                tag="FAQ"
+                title="Frequently Asked Questions"
+                description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
+                items={[
+                  {
+                    question: "How long does it take to see results?",
+                    answer: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks.",
+                  },
+                  {
+                    question: "Are your products suitable for sensitive skin?",
+                    answer: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin.",
+                  },
+                  {
+                    question: "Do you offer worldwide shipping?",
+                    answer: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery.",
+                  },
+                  {
+                    question: "What is your return policy?",
+                    answer: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners.",
+                  },
+                ]}
+                imageSrc="https://storage.googleapis.com/webild/default/templates/skincare/image4.webp"
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,88 @@
+/* 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";
+
+const primaryButton = {
+  text: "Call Us",
+  href: "tel:5551234567"
+};
+const secondaryButton = {
+  text: "Email Us",
+  href: "mailto:hello@lumine.com"
+};
+
+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 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>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,18 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+              <ProductMediaCards
+        tag="NEW"
+        title="Best Sellers"
+        description="Discover our carefully curated luxury cosmetics and beauty essentials designed to celebrate confidence, individuality, and self-expression."
+        products={[{"name":"Luminous Foundation","price":"$68","imageSrc":"https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=800&auto=format&fit=crop"},{"name":"Velvet Matte Lipstick","price":"$45","imageSrc":"https://images.unsplash.com/photo-1586495777744-4413f21062fa?q=80&w=800&auto=format&fit=crop"},{"name":"Radiance Glow Serum","price":"$85","imageSrc":"https://images.unsplash.com/photo-1620916566398-39f1143ab7be?q=80&w=800&auto=format&fit=crop"}]}
+      />
+            </div>
+  );
+}

src/pages/HomePage/sections/Reviews.tsx

@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "reviews" section.
+
+import React from 'react';
+import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+
+export default function ReviewsSection(): React.JSX.Element {
+  return (
+    <div id="reviews" data-section="reviews">
+              <TestimonialTrustCard
+        quote="A beautiful shopping experience with incredible products. My go-to destination for luxury beauty discoveries. Elegant design, premium products, and seamless shopping."
+        rating={5}
+        author="Elena R., Beauty Enthusiast"
+        avatars={[
+                  { name: "Sarah Mitchell", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image5.avif" },
+                  { name: "Customer 2", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image6.avif" },
+                  { name: "Customer 3", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image7.avif" },
+                  { name: "Customer 4", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image8.avif" },
+                ]}
+      />
+            </div>
+  );
+}