bender/04f5e307-4544-409c-b3ed-2101d12e02a5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1782070104876 into main #1

Merged
bender merged 7 commits from version_2_1782070104876 into main 2026-06-21 19:32:19 +00:00
Conversation 0 Commits 7 Files Changed 9 +258 -148
9 changed files with 258 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Layout.tsx
View File

@@ -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>

152
src/pages/HomePage.tsx
View File

@@ -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>

17
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -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>
);
}

19
src/pages/HomePage/sections/Benefits.tsx Normal file
View File

@@ -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>
);
}

19
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -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>
);
}

36
src/pages/HomePage/sections/Faq.tsx Normal file
View File

@@ -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>
);
}

88
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -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>
);
}

18
src/pages/HomePage/sections/Products.tsx Normal file
View File

@@ -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>
);
}

23
src/pages/HomePage/sections/Reviews.tsx Normal file
View File

@@ -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>
);
}