bender/a0c4c434-575b-4df8-8a39-afa979f01ebf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1782152166181 into main #2

Merged
bender merged 1 commits from version_2_1782152166181 into main 2026-06-22 18:18:03 +00:00
Conversation 0 Commits 1 Files Changed 11 +338 -158
11 changed files with 338 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.tsx
View File

@@ -35,7 +35,7 @@ export default function Layout() {
<SiteBackgroundSlot />
<SectionErrorBoundary name="navbar">
<NavbarFloatingLogo
logo="Gloss & Beads"
logo="Lumina Lips & Gems"
logoImageSrc="http://img.b2bpic.net/free-vector/set-cute-messages-badges-vector_53876-61473.jpg"
ctaButton={{
text: "Shop Now", href: "#products"}}

183
src/pages/HomePage.tsx
View File

@@ -1,169 +1,38 @@
import AboutText from '@/components/sections/about/AboutText';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// 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.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import FeaturesSection from './HomePage/sections/Features';
import ProductsSection from './HomePage/sections/Products';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialSection from './HomePage/sections/Testimonial';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
import CustomGlossSection from './HomePage/sections/CustomGloss';export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardTiltedCarousel
tag="Natural & Handmade"
title="Glow with Love, Wear Your Style"
description="Infused with vitamins and beneficial oils, our glosses keep you shining naturally. Plus, browse our unique, handmade clay bead bracelets."
primaryButton={{
text: "Shop Glosses", href: "#products"}}
secondaryButton={{
text: "Shop Bracelets", href: "#products"}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/person-holding-spoon-round-frame-from-cereals_23-2147961731.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/person-eating-sweet-candy-desert_23-2149675167.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/diversity-concept-with-hands_23-2149176164.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-young-female-flower-designed-shirt-doing-make-up-pink-background_140725-26707.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-woman-biting-her-finger_23-2148341355.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/crop-girl-applying-lipstick-friend_23-2147764678.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutText
title="Crafted with Care, Packed with Joy"
primaryButton={{
text: "Our Ingredients", href: "#faq"}}
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesDetailedSteps
tag="The Experience"
title="Why You'll Love Us"
description="We believe beauty and style should feel as good as they look."
steps={[
{
tag: "1", title: "Vitamin Infused", subtitle: "Healthy Glow", description: "Our glosses are packed with nourishing oils and vitamins.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-argan-oil-care-product_23-2148955842.jpg"},
{
tag: "2", title: "Unique Designs", subtitle: "Handmade Clay", description: "Every bead and charm is chosen with love and precision.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-christmas-presents-arrangement_23-2149180940.jpg"},
{
tag: "3", title: "Cute Freebies", subtitle: "Unboxing Joy", description: "Every order includes hand-picked stickers and treats.", imageSrc: "http://img.b2bpic.net/free-photo/round-frame-from-cereals-with-bright-bowls-table_23-2147961738.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesRevealCardsBento
tag="Our Collection"
title="Beauty & Accessories"
description="Find your perfect match in our collection."
items={[
{
title: "Vitamin Gloss", description: "Nourishing formula.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-horizontal-line-christmas-balls-pink-background_23-2148346487.jpg"},
{
title: "Pearl Bracelet", description: "Elegant clay beads.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-different-lip-balm-shades-texture_23-2149518362.jpg"},
{
title: "Sticker Pack", description: "Included as freebie.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bowls-with-powder-brushes_23-2148774927.jpg"},
{
title: "Mini Gloss", description: "Perfect for travel.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/christmas-tree-celebration-tinsel-concept_53876-133639.jpg"},
{
title: "Clay Choker", description: "Custom handmade style.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-products-treatment-desk_23-2148574966.jpg"},
{
title: "Gloss Duo Set", description: "The perfect bundle.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-father-s-day-gift-coffee-cup_23-2147683484.jpg"},
{
title: "Surprise Gift", description: "Handmade with love.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/person-holding-gift-box-with-hearts-hands_23-2148017469.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<ProductsSection />
<CustomGlossSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Trusted Quality"
title="Our Small Batch Impact"
description="Handmade isn't just a label, it's our promise."
metrics={[
{
value: "100+", description: "Handmade Bracelets"},
{
value: "500+", description: "Gloss Tubes Sold"},
{
value: "99%", description: "Happy Customers"},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialColumnMarqueeCards
tag="Feedback"
title="What Our Glow Girls Say"
description="Read what our happy customers think about our products."
testimonials={[
{
name: "Chloe M.", role: "Student", quote: "The gloss smells amazing and the stickers are so cute!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-with-copy-space_23-2148673200.jpg"},
{
name: "Maya S.", role: "Collector", quote: "Best clay bracelets ever, they feel very durable.", imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg"},
{
name: "Riley P.", role: "Blogger", quote: "Love the vitamins in the gloss! My lips feel healthier.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-with-festival-look-makeup_23-2151374032.jpg"},
{
name: "Jordan L.", role: "Fan", quote: "Packaging is just top tier. Felt like a real gift.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563229.jpg"},
{
name: "Alex R.", role: "Shopper", quote: "The mini glosses are perfect for carrying around.", imageSrc: "http://img.b2bpic.net/free-photo/positive-dark-skinned-curly-female-with-broad-smile-enjoys-good-recreation-cafeteria-drinks-cocktail-while-sits-comfortable-couch_273609-3224.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Help"
title="Common Questions"
description="Learn more about our ingredients and process."
items={[
{
question: "What oils do you use?", answer: "We use jojoba, sweet almond, and coconut oils."},
{
question: "Are your products cruelty-free?", answer: "Absolutely, always."},
{
question: "How long for shipping?", answer: "Usually 3-5 business days."},
]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286714.jpg"
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get in touch"
text="Have a custom bracelet request? Let's talk!"
primaryButton={{
text: "Email Us", href: "mailto:hello@glossandbeads.com"}}
secondaryButton={{
text: "Follow on IG", href: "#"}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

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

@@ -0,0 +1,20 @@
// 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 AboutText from '@/components/sections/about/AboutText';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutText
title="Crafted with Care, Packed with Joy"
primaryButton={{
text: "Our Ingredients", href: "#faq"}}
/>
</SectionErrorBoundary>
</div>
);
}

23
src/pages/HomePage/sections/Contact.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 "contact" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get in touch"
text="Have a custom bracelet request? Let's talk!"
primaryButton={{
text: "Email Us", href: "mailto:hello@glossandbeads.com"}}
secondaryButton={{
text: "Follow on IG", href: "#"}}
/>
</SectionErrorBoundary>
</div>
);
}

77
src/pages/HomePage/sections/CustomGloss.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { motion } from "motion/react"
import Button from "@/components/ui/Button"
import ScrollReveal from "@/components/ui/ScrollReveal"
import TextAnimation from "@/components/ui/TextAnimation"
import Tag from "@/components/ui/Tag"
import Card from "@/components/ui/Card"
export default function CustomGloss() {
const products = [
{
name: "Custom Gloss Base",
variant: "Clear, Tinted, Shimmer",
price: "$15.00",
imageSrc: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?auto=format&fit=crop&q=80&w=800"
},
{
name: "Flavor Drops",
variant: "Vanilla, Strawberry, Mint",
price: "+$2.00",
imageSrc: "https://images.unsplash.com/photo-1629367305369-0824b2257cb0?auto=format&fit=crop&q=80&w=800"
},
{
name: "Glitter Add-ins",
variant: "Gold, Holographic, Rose Gold",
price: "+$3.00",
imageSrc: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=800"
}
];
return (
<section data-webild-section="custom-gloss" id="custom-gloss" className="relative w-full py-24 bg-background">
<div className="w-content-width mx-auto">
<div className="text-center mb-16">
<ScrollReveal variant="fade">
<Tag text="Customization" className="mb-4" />
</ScrollReveal>
<TextAnimation
text="Design Your Own Gloss"
variant="fade-blur"
tag="h2"
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
gradientText={false}
/>
<ScrollReveal variant="fade" delay={0.2}>
<p className="text-lg text-accent max-w-2xl mx-auto">
Create your perfect shade. Choose your base, flavor, and finish for a lipgloss that is uniquely yours.
</p>
</ScrollReveal>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{products.map((product, index) => (
<ScrollReveal variant="fade" key={index} delay={0.1 * index}>
<Card className="overflow-hidden flex flex-col h-full group">
<div className="relative aspect-square overflow-hidden">
<img
src={product.imageSrc}
alt={product.name}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
/>
</div>
<div className="p-6 flex flex-col flex-grow">
<div className="flex justify-between items-start mb-2">
<h3 className="text-xl font-semibold text-foreground">{product.name}</h3>
<span className="text-lg font-medium text-foreground">{product.price}</span>
</div>
<p className="text-sm text-accent mb-6 flex-grow">{product.variant}</p>
<Button text="Select Options" variant="secondary" className="w-full" />
</div>
</Card>
</ScrollReveal>
))}
</div>
</div>
</section>
);
}

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

@@ -0,0 +1,29 @@
// 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';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Help"
title="Common Questions"
description="Learn more about our ingredients and process."
items={[
{
question: "What oils do you use?", answer: "We use jojoba, sweet almond, and coconut oils."},
{
question: "Are your products cruelty-free?", answer: "Absolutely, always."},
{
question: "How long for shipping?", answer: "Usually 3-5 business days."},
]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286714.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

28
src/pages/HomePage/sections/Features.tsx Normal file
View File

@@ -0,0 +1,28 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesDetailedSteps
tag="The Experience"
title="Why You'll Love Us"
description="We believe beauty and style should feel as good as they look."
steps={[
{
tag: "1", title: "Vitamin Infused", subtitle: "Healthy Glow", description: "Our glosses are packed with nourishing oils and vitamins.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-argan-oil-care-product_23-2148955842.jpg"},
{
tag: "2", title: "Unique Designs", subtitle: "Handmade Clay", description: "Every bead and charm is chosen with love and precision.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-christmas-presents-arrangement_23-2149180940.jpg"},
{
tag: "3", title: "Cute Freebies", subtitle: "Unboxing Joy", description: "Every order includes hand-picked stickers and treats.", imageSrc: "http://img.b2bpic.net/free-photo/round-frame-from-cereals-with-bright-bowls-table_23-2147961738.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

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

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardTiltedCarousel
tag="Natural & Handmade"
title="Glow with Love, Wear Your Style"
description="Infused with vitamins and beneficial oils, our glosses keep you shining naturally. Plus, browse our unique, handmade clay bead bracelets."
primaryButton={{
text: "Shop Glosses", href: "#products"}}
secondaryButton={{
text: "Shop Bracelets", href: "#products"}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/person-holding-spoon-round-frame-from-cereals_23-2147961731.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/person-eating-sweet-candy-desert_23-2149675167.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/diversity-concept-with-hands_23-2149176164.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-young-female-flower-designed-shirt-doing-make-up-pink-background_140725-26707.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-woman-biting-her-finger_23-2148341355.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/crop-girl-applying-lipstick-friend_23-2147764678.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

28
src/pages/HomePage/sections/Metrics.tsx Normal file
View File

@@ -0,0 +1,28 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Trusted Quality"
title="Our Small Batch Impact"
description="Handmade isn't just a label, it's our promise."
metrics={[
{
value: "100+", description: "Handmade Bracelets"},
{
value: "500+", description: "Gloss Tubes Sold"},
{
value: "99%", description: "Happy Customers"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

36
src/pages/HomePage/sections/Products.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 "products" section.
import React from 'react';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProductsSection(): React.JSX.Element {
return (
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesRevealCardsBento
tag="Our Collection"
title="Beauty & Accessories"
description="Find your perfect match in our collection."
items={[
{
title: "Vitamin Gloss", description: "Nourishing formula.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-horizontal-line-christmas-balls-pink-background_23-2148346487.jpg"},
{
title: "Pearl Bracelet", description: "Elegant clay beads.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-different-lip-balm-shades-texture_23-2149518362.jpg"},
{
title: "Sticker Pack", description: "Included as freebie.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bowls-with-powder-brushes_23-2148774927.jpg"},
{
title: "Mini Gloss", description: "Perfect for travel.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/christmas-tree-celebration-tinsel-concept_53876-133639.jpg"},
{
title: "Clay Choker", description: "Custom handmade style.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-products-treatment-desk_23-2148574966.jpg"},
{
title: "Gloss Duo Set", description: "The perfect bundle.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-father-s-day-gift-coffee-cup_23-2147683484.jpg"},
{
title: "Surprise Gift", description: "Handmade with love.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/person-holding-gift-box-with-hearts-hands_23-2148017469.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

32
src/pages/HomePage/sections/Testimonial.tsx Normal file
View File

@@ -0,0 +1,32 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonial" section.
import React from 'react';
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialSection(): React.JSX.Element {
return (
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialColumnMarqueeCards
tag="Feedback"
title="What Our Glow Girls Say"
description="Read what our happy customers think about our products."
testimonials={[
{
name: "Chloe M.", role: "Student", quote: "The gloss smells amazing and the stickers are so cute!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-with-copy-space_23-2148673200.jpg"},
{
name: "Maya S.", role: "Collector", quote: "Best clay bracelets ever, they feel very durable.", imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg"},
{
name: "Riley P.", role: "Blogger", quote: "Love the vitamins in the gloss! My lips feel healthier.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-with-festival-look-makeup_23-2151374032.jpg"},
{
name: "Jordan L.", role: "Fan", quote: "Packaging is just top tier. Felt like a real gift.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563229.jpg"},
{
name: "Alex R.", role: "Shopper", quote: "The mini glosses are perfect for carrying around.", imageSrc: "http://img.b2bpic.net/free-photo/positive-dark-skinned-curly-female-with-broad-smile-enjoys-good-recreation-cafeteria-drinks-cocktail-while-sits-comfortable-couch_273609-3224.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}