Merge version_1 into main #1
445
src/app/page.tsx
445
src/app/page.tsx
@@ -20,320 +20,159 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Velvet Milk"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Velvet Milk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Indulgence Redefined"
|
||||
description="Experience the pinnacle of flavor with our hand-crafted, premium ingredients. Every sip is a journey into velvet luxury."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/homemade-cake-with-whipped-cream_23-2148395220.jpg"
|
||||
imageAlt="A luxury milkshake topped with gold flakes"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-attractive-redhead-female-drinks-coffee-cafe_613910-10430.jpg",
|
||||
alt: "Happy customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-smiling-woman-with-collected-hair-wearing-white-shirt_291650-656.jpg",
|
||||
alt: "Satisfied patron",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-1382.jpg",
|
||||
alt: "Gourmet enthusiast",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/spectacular-woman-with-dark-long-hair-smiling-coffee-break_291650-641.jpg",
|
||||
alt: "Dessert lover",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-women-sitting-with-glasses-milkshake_23-2147893607.jpg",
|
||||
alt: "Premium cafe client",
|
||||
},
|
||||
]}
|
||||
avatarText="Loved by 5,000+ dessert connoisseurs"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Indulgence Redefined"
|
||||
description="Experience the pinnacle of flavor with our hand-crafted, premium ingredients. Every sip is a journey into velvet luxury."
|
||||
buttons={[{ text: "View Menu", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/homemade-cake-with-whipped-cream_23-2148395220.jpg"
|
||||
imageAlt="A luxury milkshake topped with gold flakes"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-attractive-redhead-female-drinks-coffee-cafe_613910-10430.jpg", alt: "Happy customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-smiling-woman-with-collected-hair-wearing-white-shirt_291650-656.jpg", alt: "Satisfied patron" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-1382.jpg", alt: "Gourmet enthusiast" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/spectacular-woman-with-dark-long-hair-smiling-coffee-break_291650-641.jpg", alt: "Dessert lover" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-women-sitting-with-glasses-milkshake_23-2147893607.jpg", alt: "Premium cafe client" }
|
||||
]}
|
||||
avatarText="Loved by 5,000+ dessert connoisseurs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="The Art of the Shake"
|
||||
description="We believe in the perfect balance of ingredients. From locally sourced dairy to artisan syrups, we create milkshakes that define true luxury."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Premium Ingredients",
|
||||
description: "We only use the finest dairy and natural flavorings.",
|
||||
},
|
||||
{
|
||||
title: "Artisanal Technique",
|
||||
description: "Hand-spun to perfection with a signature velvet texture.",
|
||||
},
|
||||
{
|
||||
title: "Seasonal Creations",
|
||||
description: "Unique, limited-edition flavors inspired by the seasons.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-smiling-korean-barista-female-working-counter-using-tablet-take-orders-cafe_1258-203441.jpg"
|
||||
imageAlt="Artisan ingredients on display"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="The Art of the Shake"
|
||||
description="We believe in the perfect balance of ingredients. From locally sourced dairy to artisan syrups, we create milkshakes that define true luxury."
|
||||
bulletPoints={[
|
||||
{ title: "Premium Ingredients", description: "We only use the finest dairy and natural flavorings." },
|
||||
{ title: "Artisanal Technique", description: "Hand-spun to perfection with a signature velvet texture." },
|
||||
{ title: "Seasonal Creations", description: "Unique, limited-edition flavors inspired by the seasons." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-smiling-korean-barista-female-working-counter-using-tablet-take-orders-cafe_1258-203441.jpg"
|
||||
imageAlt="Artisan ingredients on display"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Midnight Truffle",
|
||||
price: "$12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-milkshake-with-marshmallow_23-2148296085.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Salted Caramel Velvet",
|
||||
price: "$12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mint-milkshake-mint-lime-side-view_141793-2808.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Wild Berry Bliss",
|
||||
price: "$12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blueberry-smoothie-close-up-shot_53876-32291.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Madagascar Vanilla",
|
||||
price: "$10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/summer-smoothie-with-strawberry_23-2147810691.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Honey Spiced Almond",
|
||||
price: "$11",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tasty-coffee-with_23-2149600721.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Pistachio Rose",
|
||||
price: "$13",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chocolate-milkshake-with-whipped-cream-caramel_1150-18523.jpg",
|
||||
},
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Discover our curated range of exquisite milkshake flavors."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Midnight Truffle", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-milkshake-with-marshmallow_23-2148296085.jpg" },
|
||||
{ id: "p2", name: "Salted Caramel Velvet", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/mint-milkshake-mint-lime-side-view_141793-2808.jpg" },
|
||||
{ id: "p3", name: "Wild Berry Bliss", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/blueberry-smoothie-close-up-shot_53876-32291.jpg" },
|
||||
{ id: "p4", name: "Madagascar Vanilla", price: "$10", imageSrc: "http://img.b2bpic.net/free-photo/summer-smoothie-with-strawberry_23-2147810691.jpg" },
|
||||
{ id: "p5", name: "Honey Spiced Almond", price: "$11", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tasty-coffee-with_23-2149600721.jpg" },
|
||||
{ id: "p6", name: "Pistachio Rose", price: "$13", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-milkshake-with-whipped-cream-caramel_1150-18523.jpg" }
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Discover our curated range of exquisite milkshake flavors."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Purest Dairy",
|
||||
description: "Farm-fresh milk from grass-fed cows.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
title: "Vegan Options",
|
||||
description: "Delicious plant-based alternatives available.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Gold Standard",
|
||||
description: "Every shake passes a rigorous taste test.",
|
||||
icon: Award,
|
||||
},
|
||||
]}
|
||||
title="Why Velvet Milk?"
|
||||
description="Quality isn't just a promise; it's our philosophy."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Purest Dairy", description: "Farm-fresh milk from grass-fed cows.", icon: CheckCircle },
|
||||
{ title: "Vegan Options", description: "Delicious plant-based alternatives available.", icon: Shield },
|
||||
{ title: "Gold Standard", description: "Every shake passes a rigorous taste test.", icon: Award }
|
||||
]}
|
||||
title="Why Velvet Milk?"
|
||||
description="Quality isn't just a promise; it's our philosophy."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Food & Wine",
|
||||
"The Epicurean",
|
||||
"Gourmet Gazette",
|
||||
"Dessert Daily",
|
||||
"City Tastes",
|
||||
"Luxury Life",
|
||||
"The Daily Spoon",
|
||||
]}
|
||||
title="Proudly Served At"
|
||||
description="Featured in leading culinary publications globally."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Food & Wine", "The Epicurean", "Gourmet Gazette", "Dessert Daily", "City Tastes", "Luxury Life", "The Daily Spoon"]}
|
||||
title="Proudly Served At"
|
||||
description="Featured in leading culinary publications globally."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice G.",
|
||||
handle: "@aliceg",
|
||||
testimonial: "The Midnight Truffle milkshake is a life-changing experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adorable-lovely-woman-fashion-clothes-is-sitting-open-air-cafe-is-using-smartphone-waiting-friends-city-lights-background_291650-842.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark D.",
|
||||
handle: "@markd",
|
||||
testimonial: "Absolutely the most luxurious dessert I have ever tasted.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena P.",
|
||||
handle: "@elenap",
|
||||
testimonial: "Exquisite ingredients and professional service. My favorite spot.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-woman-holding-muffins-hands_23-2147974707.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Julian R.",
|
||||
handle: "@julianr",
|
||||
testimonial: "Pure indulgence. You can really taste the quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-cheerful-smiling-beautiful-brunette-curly-girl-pink-fur-coat-eating-marshmallow-white-wall_176420-8837.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sophia L.",
|
||||
handle: "@sophial",
|
||||
testimonial: "The pistachio rose flavor is incredibly sophisticated.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/longhaired-girl-with-snowwhite-smile-makes-selfie-holding-glass-milkshake_197531-26363.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="What our patrons say about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice G.", handle: "@aliceg", testimonial: "The Midnight Truffle milkshake is a life-changing experience.", imageSrc: "http://img.b2bpic.net/free-photo/adorable-lovely-woman-fashion-clothes-is-sitting-open-air-cafe-is-using-smartphone-waiting-friends-city-lights-background_291650-842.jpg" },
|
||||
{ id: "t2", name: "Mark D.", handle: "@markd", testimonial: "Absolutely the most luxurious dessert I have ever tasted.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg" },
|
||||
{ id: "t3", name: "Elena P.", handle: "@elenap", testimonial: "Exquisite ingredients and professional service. My favorite spot.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-woman-holding-muffins-hands_23-2147974707.jpg" },
|
||||
{ id: "t4", name: "Julian R.", handle: "@julianr", testimonial: "Pure indulgence. You can really taste the quality.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-cheerful-smiling-beautiful-brunette-curly-girl-pink-fur-coat-eating-marshmallow-white-wall_176420-8837.jpg" },
|
||||
{ id: "t5", name: "Sophia L.", handle: "@sophial", testimonial: "The pistachio rose flavor is incredibly sophisticated.", imageSrc: "http://img.b2bpic.net/free-photo/longhaired-girl-with-snowwhite-smile-makes-selfie-holding-glass-milkshake_197531-26363.jpg" }
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="What our patrons say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you offer delivery?",
|
||||
content: "Yes, through all major premium delivery services.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are ingredients organic?",
|
||||
content: "We prioritize organic, locally sourced ingredients where possible.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I host events?",
|
||||
content: "We provide catering services for private events and parties.",
|
||||
},
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Learn more about our ingredients and store policies."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you offer delivery?", content: "Yes, through all major premium delivery services." },
|
||||
{ id: "q2", title: "Are ingredients organic?", content: "We prioritize organic, locally sourced ingredients where possible." },
|
||||
{ id: "q3", title: "Can I host events?", content: "We provide catering services for private events and parties." }
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Learn more about our ingredients and store policies."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Join the Elite List"
|
||||
description="Be the first to hear about seasonal flavors and private events."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Stay Updated"
|
||||
title="Join the Elite List"
|
||||
description="Be the first to hear about seasonal flavors and private events."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Events",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Velvet Milk"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#products" }] },
|
||||
{ items: [{ label: "Events", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="Velvet Milk"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user