bender/8e3c22a5-552f-433d-8696-71ef3f8decfb
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-12 08:18:26 +00:00
parent 8a9bfc7377
commit ecab6e09b2
1 changed files with 137 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
src/app/page.tsx
View File

@@ -27,356 +27,152 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Products",
id: "products",
},
{
name: "Shop",
id: "bestsellers",
},
{
name: "Offers",
id: "bundles",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Coca-Cola Store"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "Categories", id: "categories" },
{ name: "Features", id: "features" },
{ name: "Bestsellers", id: "bestsellers" },
{ name: "Bundles", id: "bundles" },
{ name: "Contact", id: "contact" }
]}
brandName="Coca-Cola Store"
button={{ text: "Contact Us", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Real Magic"
description="Choose your vibe. Coca-Cola, Fanta, Sprite — taste the feeling."
buttons={[
{
text: "Shop Now",
href: "#bestsellers",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/drinks-fresh-summer-drink-refreshing-summer-vibes-concept_185193-111002.jpg"
imageAlt="Real Magic Coca-Cola Hero"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Real Magic"
description="Choose your vibe. Coca-Cola, Fanta, Sprite — taste the feeling."
buttons={[{ text: "Shop Now", href: "#bestsellers" }]}
imageSrc="http://img.b2bpic.net/free-photo/drinks-fresh-summer-drink-refreshing-summer-vibes-concept_185193-111002.jpg"
imageAlt="Real Magic Coca-Cola Hero"
/>
</div>
<div id="categories" data-section="categories">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
features={[
{
title: "Coca-Cola",
description: "The original taste you love.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-beverage-can_52683-144132.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/view-alcoholic-beverage-with-cbd-oil-infusion_23-2150762262.jpg",
buttonText: "View",
},
{
title: "Fanta",
description: "Bold fruit flavor experience.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bottle-with-orange-juice_23-2148858602.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-summer-concept-with-copy-space_23-2148545836.jpg",
buttonText: "View",
},
{
title: "Sprite",
description: "Clean, crisp lemon-lime.",
imageSrc: "http://img.b2bpic.net/free-photo/lemonade-drink-jar-glass-isolated-white-background_123827-23109.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/plastic-straw-collection-can_23-2148877870.jpg",
buttonText: "View",
},
{
title: "Bundles",
description: "Mix & match your favorites.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-wine-carafe-table_23-2149631757.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436497.jpg",
buttonText: "Build",
},
]}
title="Explore Collections"
description="Discover our signature flavors and premium beverage bundles."
/>
</div>
<div id="categories" data-section="categories">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
features={[
{ title: "Coca-Cola", description: "The original taste you love.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-beverage-can_52683-144132.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/view-alcoholic-beverage-with-cbd-oil-infusion_23-2150762262.jpg", buttonText: "View" },
{ title: "Fanta", description: "Bold fruit flavor experience.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bottle-with-orange-juice_23-2148858602.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-summer-concept-with-copy-space_23-2148545836.jpg", buttonText: "View" },
{ title: "Sprite", description: "Clean, crisp lemon-lime.", imageSrc: "http://img.b2bpic.net/free-photo/lemonade-drink-jar-glass-isolated-white-background_123827-23109.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/plastic-straw-collection-can_23-2148877870.jpg", buttonText: "View" },
{ title: "Bundles", description: "Mix & match your favorites.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wine-carafe-table_23-2149631757.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436497.jpg", buttonText: "Build" }
]}
title="Explore Collections"
description="Discover our signature flavors and premium beverage bundles."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Fast Delivery",
description: "Get it chilled fast.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-ecstatic-woman-with-soda-can_23-2148751486.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436480.jpg",
buttonText: "Learn",
},
{
title: "Secure Payments",
description: "Safe and encrypted checkout.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238296.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/front-view-summer-concept-with-copy-space_23-2148545827.jpg",
buttonText: "Learn",
},
{
title: "Originals",
description: "100% authentic products.",
imageSrc: "http://img.b2bpic.net/free-photo/gin-fizz-cocktail-with-lime_123827-36142.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436499.jpg",
buttonText: "Learn",
},
]}
title="Why Choose Us"
description="Premium service for the perfect refreshment."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{ title: "Fast Delivery", description: "Get it chilled fast.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-ecstatic-woman-with-soda-can_23-2148751486.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436480.jpg", buttonText: "Learn" },
{ title: "Secure Payments", description: "Safe and encrypted checkout.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238296.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/front-view-summer-concept-with-copy-space_23-2148545827.jpg", buttonText: "Learn" },
{ title: "Originals", description: "100% authentic products.", imageSrc: "http://img.b2bpic.net/free-photo/gin-fizz-cocktail-with-lime_123827-36142.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436499.jpg", buttonText: "Learn" }
]}
title="Why Choose Us"
description="Premium service for the perfect refreshment."
/>
</div>
<div id="bestsellers" data-section="bestsellers">
<ProductCardFour
animationType="scale-rotate"
textboxLayout="split"
gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Coke Classic",
price: "$2.50",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-vector/summer-sale-instagram-stories-templates_23-2148191687.jpg",
},
{
id: "p2",
name: "Coke Zero",
price: "$2.50",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436528.jpg",
},
{
id: "p3",
name: "Fanta Orange",
price: "$2.20",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-photo/floating-sliced-lemon-with-clear-background_23-2149675108.jpg",
},
{
id: "p4",
name: "Fanta Grape",
price: "$2.20",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-photo/orange-blue-table-isolated-orange_171337-13115.jpg",
},
{
id: "p5",
name: "Sprite",
price: "$2.20",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-photo/lemonade-with-lemon-herbs-mason-jar-glass-white-plaster_176474-7418.jpg",
},
{
id: "p6",
name: "Coke Cherry",
price: "$2.60",
variant: "330ml",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-soda-can-her-head_23-2148751484.jpg",
},
]}
title="Shop Bestsellers"
description="The most loved refreshers in the world."
/>
</div>
<div id="bestsellers" data-section="bestsellers">
<ProductCardFour
animationType="scale-rotate"
textboxLayout="split"
gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Coke Classic", price: "$2.50", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-vector/summer-sale-instagram-stories-templates_23-2148191687.jpg" },
{ id: "p2", name: "Coke Zero", price: "$2.50", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-photo/recycled-aluminium-cans_23-2149436528.jpg" },
{ id: "p3", name: "Fanta Orange", price: "$2.20", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-photo/floating-sliced-lemon-with-clear-background_23-2149675108.jpg" },
{ id: "p4", name: "Fanta Grape", price: "$2.20", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-photo/orange-blue-table-isolated-orange_171337-13115.jpg" },
{ id: "p5", name: "Sprite", price: "$2.20", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-photo/lemonade-with-lemon-herbs-mason-jar-glass-white-plaster_176474-7418.jpg" },
{ id: "p6", name: "Coke Cherry", price: "$2.60", variant: "330ml", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-soda-can-her-head_23-2148751484.jpg" }
]}
title="Shop Bestsellers"
description="The most loved refreshers in the world."
/>
</div>
<div id="bundles" data-section="bundles">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "basic",
title: "The Taster",
price: "$15",
period: "/pack",
features: [
"6 Cans",
"Mix & Match",
"Fast Shipping",
],
button: {
text: "Build Bundle",
},
imageSrc: "http://img.b2bpic.net/free-photo/composition-juice-bottles-with-straws_23-2148037108.jpg",
},
{
id: "pro",
title: "The Party",
price: "$35",
period: "/pack",
features: [
"24 Cans",
"Mix & Match",
"Free Delivery",
],
button: {
text: "Build Bundle",
},
imageSrc: "http://img.b2bpic.net/free-photo/jars-collection-with-fresh-smoothie-desk_23-2148569949.jpg",
},
{
id: "elite",
title: "The Vibe",
price: "$60",
period: "/pack",
features: [
"48 Cans",
"All Flavors",
"VIP Access",
],
button: {
text: "Build Bundle",
},
imageSrc: "http://img.b2bpic.net/free-photo/colorful-italian-soda_1339-6693.jpg",
},
]}
title="Build Your Own Bundle"
description="Mix your favorites and get up to 20% off"
/>
</div>
<div id="bundles" data-section="bundles">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "basic", title: "The Taster", price: "$15", period: "/pack", features: ["6 Cans", "Mix & Match", "Fast Shipping"], button: { text: "Build Bundle" }, imageSrc: "http://img.b2bpic.net/free-photo/composition-juice-bottles-with-straws_23-2148037108.jpg" },
{ id: "pro", title: "The Party", price: "$35", period: "/pack", features: ["24 Cans", "Mix & Match", "Free Delivery"], button: { text: "Build Bundle" }, imageSrc: "http://img.b2bpic.net/free-photo/jars-collection-with-fresh-smoothie-desk_23-2148569949.jpg" },
{ id: "elite", title: "The Vibe", price: "$60", period: "/pack", features: ["48 Cans", "All Flavors", "VIP Access"], button: { text: "Build Bundle" }, imageSrc: "http://img.b2bpic.net/free-photo/colorful-italian-soda_1339-6693.jpg" }
]}
title="Build Your Own Bundle"
description="Mix your favorites and get up to 20% off"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Alice M.",
role: "Designer",
company: "Creative Hub",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg",
},
{
id: "2",
name: "Bob D.",
role: "Developer",
company: "Tech Labs",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
},
{
id: "3",
name: "Charlie P.",
role: "Marketer",
company: "Growth Agency",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg",
},
{
id: "4",
name: "Diana K.",
role: "Manager",
company: "Startup Inc",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/interested-gorgeous-man-with-black-eyes-looking-indoor-photo-fashionable-well-dressed-african-guy-glasses_197531-22079.jpg",
},
{
id: "5",
name: "Evan G.",
role: "Creative",
company: "Design Co",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-dressed-suit-dark-grey-background_613910-14130.jpg",
},
]}
kpiItems={[
{
value: "1M+",
label: "Happy Fans",
},
{
value: "50+",
label: "Global Markets",
},
{
value: "99%",
label: "Satisfaction",
},
]}
title="Real Fans, Real Magic"
description="See why everyone loves our drinks."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Alice M.", role: "Designer", company: "Creative Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg" },
{ id: "2", name: "Bob D.", role: "Developer", company: "Tech Labs", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg" },
{ id: "3", name: "Charlie P.", role: "Marketer", company: "Growth Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg" },
{ id: "4", name: "Diana K.", role: "Manager", company: "Startup Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/interested-gorgeous-man-with-black-eyes-looking-indoor-photo-fashionable-well-dressed-african-guy-glasses_197531-22079.jpg" },
{ id: "5", name: "Evan G.", role: "Creative", company: "Design Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-dressed-suit-dark-grey-background_613910-14130.jpg" }
]}
kpiItems={[
{ value: "1M+", label: "Happy Fans" },
{ value: "50+", label: "Global Markets" },
{ value: "99%", label: "Satisfaction" }
]}
title="Real Fans, Real Magic"
description="See why everyone loves our drinks."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How to track?",
content: "Via your order dashboard.",
},
{
id: "f2",
title: "Delivery time?",
content: "2-3 business days.",
},
{
id: "f3",
title: "Easy returns?",
content: "Yes, within 30 days.",
},
]}
title="Need Help?"
description="Answers to common questions."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How to track?", content: "Via your order dashboard." },
{ id: "f2", title: "Delivery time?", content: "2-3 business days." },
{ id: "f3", title: "Easy returns?", content: "Yes, within 30 days." }
]}
title="Need Help?"
description="Answers to common questions."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="Let's Chat"
title="Join the Movement"
description="Connect with us for updates and news."
buttons={[
{
text: "Contact Us",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
tag="Let's Chat"
title="Join the Movement"
description="Connect with us for updates and news."
buttons={[{ text: "Contact Us", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Coca-Cola Store"
copyrightText="© 2025 | Premium Beverage Store"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Coca-Cola Store"
copyrightText="© 2025 | Premium Beverage Store"
/>
</div>
</ReactLenis>
</ThemeProvider>
);