bender/a4c1330d-3e91-42f3-9af5-dfe53150d105
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-13 08:16:16 +00:00
parent bec3db438a
commit fa0ca0b4c9
1 changed files with 140 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

540
src/app/page.tsx
View File

@@ -29,415 +29,155 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Collection",
id: "products",
},
{
name: "Process",
id: "about",
},
{
name: "Story",
id: "features",
},
{
name: "Reviews",
id: "testimonials",
},
]}
brandName="Zyora"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Collection", id: "products" },
{ name: "Process", id: "about" },
{ name: "Story", id: "features" },
{ name: "Reviews", id: "testimonials" },
]}
brandName="Zyora"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
title="The Essence of Unspoken Elegance"
description="Zyora Perfumes captures the fleeting moments of beauty, bottled into timeless scents that define your unique aura."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-bottles-with-dispensers-liquid-soap_169016-23454.jpg",
imageAlt: "Lux Perfume",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/flower_1308-5009.jpg",
imageAlt: "Essence Art",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262906.jpg",
imageAlt: "Golden Glow",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-compostable-beauty-product-flowers_23-2149353143.jpg",
imageAlt: "Floral Mist",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/crispy-potato-chips-with-tomato-sauce-snack-concept_1150-23578.jpg",
imageAlt: "Botanicals",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg",
imageAlt: "Liquid Motion",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types_114579-7737.jpg",
imageAlt: "Botanicals",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669103.jpg",
imageAlt: "Floral Mist",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-charcoal-different-forms_23-2149654126.jpg",
imageAlt: "Golden Glow",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/purple-carnation-falling-into-water_23-2148151473.jpg",
imageAlt: "Essence Art",
},
]}
buttons={[
{
text: "Explore Collection",
href: "#products",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/high-angle-girly-composition-table_23-2148229244.jpg",
alt: "User 1",
},
{
src: "http://img.b2bpic.net/free-photo/high-angle-arrangement-still-life-items_23-2148229273.jpg",
alt: "User 2",
},
{
src: "http://img.b2bpic.net/free-photo/girly-composition-table_23-2148229230.jpg",
alt: "User 3",
},
{
src: "http://img.b2bpic.net/free-photo/high-angle-empty-perfume-bottle_23-2149234374.jpg",
alt: "User 4",
},
{
src: "http://img.b2bpic.net/free-photo/lily-flower-sky_23-2149417254.jpg",
alt: "User 5",
},
]}
avatarText="Join 10,000+ scent enthusiasts"
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/french-marigold-tagetes-patula-close-up-macro-shot_169016-24865.jpg",
alt: "Logo 1",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/pink-beige-flower-macro_209303-112.jpg",
alt: "Logo 2",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/pink-white-flower-macro_417767-657.jpg",
alt: "Logo 3",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/monochromatic-still-life-glass-object-composition_23-2148869775.jpg",
alt: "Logo 4",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/still-life-stacked-aesthetic-objects_23-2150185341.jpg",
alt: "Logo 5",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "gradient-bars" }}
title="The Essence of Unspoken Elegance"
description="Zyora Perfumes captures the fleeting moments of beauty, bottled into timeless scents that define your unique aura."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-bottles-with-dispensers-liquid-soap_169016-23454.jpg", imageAlt: "Lux Perfume" },
{ imageSrc: "http://img.b2bpic.net/free-photo/flower_1308-5009.jpg", imageAlt: "Essence Art" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262906.jpg", imageAlt: "Golden Glow" },
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-compostable-beauty-product-flowers_23-2149353143.jpg", imageAlt: "Floral Mist" },
{ imageSrc: "http://img.b2bpic.net/free-photo/crispy-potato-chips-with-tomato-sauce-snack-concept_1150-23578.jpg", imageAlt: "Botanicals" },
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg", imageAlt: "Liquid Motion" },
{ imageSrc: "http://img.b2bpic.net/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types_114579-7737.jpg", imageAlt: "Botanicals" },
{ imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669103.jpg", imageAlt: "Floral Mist" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-charcoal-different-forms_23-2149654126.jpg", imageAlt: "Golden Glow" },
{ imageSrc: "http://img.b2bpic.net/free-photo/purple-carnation-falling-into-water_23-2148151473.jpg", imageAlt: "Essence Art" },
]}
buttons={[{ text: "Explore Collection", href: "#products" }]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Crafting Artistry"
metrics={[
{
icon: Sparkles,
label: "Botanical Extracts",
value: "200+",
},
{
icon: Droplet,
label: "Perfumers World-wide",
value: "50",
},
{
icon: Award,
label: "Years Experience",
value: "15",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Crafting Artistry"
metrics={[
{ icon: Sparkles, label: "Botanical Extracts", value: "200+" },
{ icon: Droplet, label: "Perfumers World-wide", value: "50" },
{ icon: Award, label: "Years Experience", value: "15" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
features={[
{
title: "Artisan Distillation",
description: "Centuries-old techniques for modern scents.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-beer-factory_23-2150573933.jpg",
},
{
title: "Rare Essences",
description: "Sourced from the most hidden gardens.",
imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle_74190-5175.jpg",
},
{
title: "Eco-Conscious",
description: "Bottled in sustainable elegance.",
imageSrc: "http://img.b2bpic.net/free-photo/glass-texture-background-beige_53876-145163.jpg",
},
]}
title="Why Zyora?"
description="Discover the meticulous craftsmanship behind every drop."
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
features={[
{ title: "Artisan Distillation", description: "Centuries-old techniques for modern scents.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-beer-factory_23-2150573933.jpg" },
{ title: "Rare Essences", description: "Sourced from the most hidden gardens.", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle_74190-5175.jpg" },
{ title: "Eco-Conscious", description: "Bottled in sustainable elegance.", imageSrc: "http://img.b2bpic.net/free-photo/glass-texture-background-beige_53876-145163.jpg" },
]}
title="Why Zyora?"
description="Discover the meticulous craftsmanship behind every drop."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Velvet Amber",
price: "$120",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-light-bottle-with-golden-cap-isolated-white-floor_140725-11640.jpg",
},
{
id: "p2",
name: "Midnight Iris",
price: "$145",
imageSrc: "http://img.b2bpic.net/free-vector/minimalist-wedding-wine-label-template_742173-7439.jpg",
},
{
id: "p3",
name: "Golden Bloom",
price: "$110",
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669153.jpg",
},
{
id: "p4",
name: "Dark Musk",
price: "$160",
imageSrc: "http://img.b2bpic.net/free-photo/man-s-accessories-wooden-surface_8353-10515.jpg",
},
{
id: "p5",
name: "Travel Atomizer",
price: "$45",
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420736.jpg",
},
{
id: "p6",
name: "Floral Essence",
price: "$95",
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420729.jpg",
},
]}
title="Our Signature Scents"
description="Exquisite blends for every personality."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Velvet Amber", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/front-view-light-bottle-with-golden-cap-isolated-white-floor_140725-11640.jpg" },
{ id: "p2", name: "Midnight Iris", price: "$145", imageSrc: "http://img.b2bpic.net/free-vector/minimalist-wedding-wine-label-template_742173-7439.jpg" },
{ id: "p3", name: "Golden Bloom", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669153.jpg" },
{ id: "p4", name: "Dark Musk", price: "$160", imageSrc: "http://img.b2bpic.net/free-photo/man-s-accessories-wooden-surface_8353-10515.jpg" },
{ id: "p5", name: "Travel Atomizer", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420736.jpg" },
{ id: "p6", name: "Floral Essence", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420729.jpg" },
]}
title="Our Signature Scents"
description="Exquisite blends for every personality."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "s1",
badge: "Discovery",
price: "$30/mo",
subtitle: "Monthly Samples",
buttons: [
{
text: "Get Started",
},
],
features: [
"3x 5ml vials",
"Free shipping",
],
},
{
id: "s2",
badge: "Signature",
price: "$95/mo",
subtitle: "Full Size",
buttons: [
{
text: "Get Started",
},
],
features: [
"1x 50ml bottle",
"Member discounts",
],
},
{
id: "s3",
badge: "Collector",
price: "$150/mo",
subtitle: "Customized",
buttons: [
{
text: "Get Started",
},
],
features: [
"1x 100ml bottle",
"Exclusive events",
],
},
]}
title="Select Your Fragrance Experience"
description="Subscriptions tailored to your aromatic taste."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{ id: "s1", badge: "Discovery", price: "$30/mo", subtitle: "Monthly Samples", buttons: [{ text: "Get Started" }], features: ["3x 5ml vials", "Free shipping"] },
{ id: "s2", badge: "Signature", price: "$95/mo", subtitle: "Full Size", buttons: [{ text: "Get Started" }], features: ["1x 50ml bottle", "Member discounts"] },
{ id: "s3", badge: "Collector", price: "$150/mo", subtitle: "Customized", buttons: [{ text: "Get Started" }], features: ["1x 100ml bottle", "Exclusive events"] },
]}
title="Select Your Fragrance Experience"
description="Subscriptions tailored to your aromatic taste."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "100k+",
title: "Scent Profiles",
items: [
"Unique creations",
"Hand-crafted",
],
},
{
id: "m2",
value: "45",
title: "Global Boutiques",
items: [
"Exclusive locations",
"Paris to Tokyo",
],
},
{
id: "m3",
value: "99%",
title: "Satisfaction",
items: [
"Loyal members",
"Trusted brand",
],
},
]}
title="Global Impact"
description="Touching lives through fine fragrances."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "100k+", title: "Scent Profiles", items: ["Unique creations", "Hand-crafted"] },
{ id: "m2", value: "45", title: "Global Boutiques", items: ["Exclusive locations", "Paris to Tokyo"] },
{ id: "m3", value: "99%", title: "Satisfaction", items: ["Loyal members", "Trusted brand"] },
]}
title="Global Impact"
description="Touching lives through fine fragrances."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Elena R.",
handle: "@elena_scents",
testimonial: "The Velvet Amber is life-changing.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg",
},
{
id: "t2",
name: "Marcus L.",
handle: "@ml_frag",
testimonial: "Simply the best craftsmanship.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-modern-female_23-2148415853.jpg",
},
{
id: "t3",
name: "Sofia G.",
handle: "@sofiag_perfume",
testimonial: "The travel atomizer is so convenient.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-wearing-hat_23-2149213184.jpg",
},
{
id: "t4",
name: "Liam T.",
handle: "@liamt_scents",
testimonial: "Customer service is top-notch.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/deaf-woman-communicating-through-sign-language_23-2148590375.jpg",
},
{
id: "t5",
name: "Nina W.",
handle: "@ninaw_perfume",
testimonial: "Sophisticated and elegant scents.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015525.jpg",
},
]}
showRating={true}
title="Customer Stories"
description="What our scent enthusiasts are saying."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showRating={true}
testimonials={[
{ id: "t1", name: "Elena R.", handle: "@elena_scents", testimonial: "The Velvet Amber is life-changing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg" },
{ id: "t2", name: "Marcus L.", handle: "@ml_frag", testimonial: "Simply the best craftsmanship.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-modern-female_23-2148415853.jpg" },
{ id: "t3", name: "Sofia G.", handle: "@sofiag_perfume", testimonial: "The travel atomizer is so convenient.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-wearing-hat_23-2149213184.jpg" },
{ id: "t4", name: "Liam T.", handle: "@liamt_scents", testimonial: "Customer service is top-notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/deaf-woman-communicating-through-sign-language_23-2148590375.jpg" },
{ id: "t5", name: "Nina W.", handle: "@ninaw_perfume", testimonial: "Sophisticated and elegant scents.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015525.jpg" },
]}
title="Customer Stories"
description="What our scent enthusiasts are saying."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={true}
background={{
variant: "sparkles-gradient",
}}
title="Stay In the Know"
description="Join our newsletter for exclusive fragrance launches and members-only events."
tag="Newsletter"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={true}
background={{ variant: "sparkles-gradient" }}
title="Stay In the Know"
description="Join our newsletter for exclusive fragrance launches and members-only events."
tag="Newsletter"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Zyora"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Contact Us",
href: "#contact",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Zyora"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Contact Us", href: "#contact" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);