bender/3a44265b-e674-4d6f-babc-a79984f19ecd
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-04-19 13:20:19 +00:00
parent 6743db6ebf
commit 76b682798d
1 changed files with 188 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

607
src/app/page.tsx
View File

@@ -21,437 +21,206 @@ export default function LandingPage() {
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
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">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Menu",
id: "products",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Café Bar Cappuccino"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "products" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="Café Bar Cappuccino"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "radial-gradient",
}}
title="A Coffee Ritual Worth Savoring"
description="Experience the warmth and rich aroma of freshly roasted beans at Café Bar Cappuccino. Your perfect neighborhood escape awaits."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-tablet_23-2149927583.jpg",
alt: "Customer",
},
{
src: "http://img.b2bpic.net/free-photo/man-cafe_1157-5039.jpg",
alt: "Customer",
},
{
src: "http://img.b2bpic.net/free-photo/blonde-employee-holding-cup-white-background_23-2148180705.jpg",
alt: "Customer",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-casual-clothes-sits-cafe-enjoys-favourite-song-listens-music-wireless-headphones-vibing-relaxing-tunes-earphones-holding-smartphone_1258-314524.jpg",
alt: "Customer",
},
{
src: "http://img.b2bpic.net/free-photo/good-day-only-with-good-coffee_329181-2927.jpg",
alt: "Customer",
},
]}
avatarText="Loved by thousands of coffee lovers"
buttons={[
{
text: "View Our Menu",
href: "#products",
},
{
text: "Find Us",
href: "#contact",
},
]}
buttonAnimation="slide-up"
marqueeItems={[
{
type: "text",
text: "Organic Coffee",
},
{
type: "text-icon",
text: "Locally Roasted",
icon: Coffee,
},
{
type: "text",
text: "Fresh Pastries Daily",
},
{
type: "text-icon",
text: "Sustainable Sourcing",
icon: Leaf,
},
{
type: "text",
text: "Premium Espresso",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "radial-gradient" }}
title="A Coffee Ritual Worth Savoring"
description="Experience the warmth and rich aroma of freshly roasted beans at Café Bar Cappuccino. Your perfect neighborhood escape awaits."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-tablet_23-2149927583.jpg", alt: "Customer" },
{ src: "http://img.b2bpic.net/free-photo/man-cafe_1157-5039.jpg", alt: "Customer" },
{ src: "http://img.b2bpic.net/free-photo/blonde-employee-holding-cup-white-background_23-2148180705.jpg", alt: "Customer" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-casual-clothes-sits-cafe-enjoys-favourite-song-listens-music-wireless-headphones-vibing-relaxing-tunes-earphones-holding-smartphone_1258-314524.jpg", alt: "Customer" },
{ src: "http://img.b2bpic.net/free-photo/good-day-only-with-good-coffee_329181-2927.jpg", alt: "Customer" }
]}
avatarText="Loved by thousands of coffee lovers"
buttons={[{ text: "View Our Menu", href: "#products" }, { text: "Find Us", href: "#contact" }]}
buttonAnimation="slide-up"
marqueeItems={[
{ type: "text", text: "Organic Coffee" },
{ type: "text-icon", text: "Locally Roasted", icon: Coffee },
{ type: "text", text: "Fresh Pastries Daily" },
{ type: "text-icon", text: "Sustainable Sourcing", icon: Leaf },
{ type: "text", text: "Premium Espresso" }
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Crafted with Passion"
description="At Café Bar Cappuccino, we believe coffee is more than just a drink—it's a moment. Every cup is brewed with precision, passion, and the finest quality beans. From our intimate interiors to our handcrafted lattes, we create an environment where you can truly pause and enjoy the day."
tag="Our Story"
imageSrc="http://img.b2bpic.net/free-photo/breakfast-composition-with-blank-slate-father-s-day_23-2147632090.jpg?_wi=1"
imageAlt="Coffee shop interior"
tagIcon={Coffee}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Crafted with Passion"
description="At Café Bar Cappuccino, we believe coffee is more than just a drink—it's a moment. Every cup is brewed with precision, passion, and the finest quality beans. From our intimate interiors to our handcrafted lattes, we create an environment where you can truly pause and enjoy the day."
tag="Our Story"
imageSrc="http://img.b2bpic.net/free-photo/breakfast-composition-with-blank-slate-father-s-day_23-2147632090.jpg"
imageAlt="Coffee shop interior"
tagIcon={Coffee}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Signature Cappuccino",
price: "$4.50",
imageSrc: "http://img.b2bpic.net/free-photo/food-retro-breakfast-cup-restaurant_1172-468.jpg?_wi=1",
},
{
id: "p2",
name: "Cold Brew Americano",
price: "$5.00",
imageSrc: "http://img.b2bpic.net/free-photo/cold-summer-coffee-drink-with-ice-orange-juice_169016-21399.jpg",
},
{
id: "p3",
name: "Double Chocolate Muffin",
price: "$3.75",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-chocolate-muffin-wooden-cutting-board_140725-10234.jpg",
},
{
id: "p4",
name: "Silky Vanilla Latte",
price: "$5.25",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-coffee-cup_23-2148892840.jpg",
},
{
id: "p5",
name: "Flaky Almond Croissant",
price: "$4.25",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-pastries-dark-blue-surface_179666-44498.jpg",
},
{
id: "p6",
name: "Classic Hot Americano",
price: "$3.95",
imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244070.jpg",
},
]}
title="Signature Brews & Bites"
description="Explore our curated selection of specialty coffee, refreshing iced beverages, and artisanal treats."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Signature Cappuccino", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/food-retro-breakfast-cup-restaurant_1172-468.jpg" },
{ id: "p2", name: "Cold Brew Americano", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/cold-summer-coffee-drink-with-ice-orange-juice_169016-21399.jpg" },
{ id: "p3", name: "Double Chocolate Muffin", price: "$3.75", imageSrc: "http://img.b2bpic.net/free-photo/side-view-chocolate-muffin-wooden-cutting-board_140725-10234.jpg" },
{ id: "p4", name: "Silky Vanilla Latte", price: "$5.25", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-coffee-cup_23-2148892840.jpg" },
{ id: "p5", name: "Flaky Almond Croissant", price: "$4.25", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-pastries-dark-blue-surface_179666-44498.jpg" },
{ id: "p6", name: "Classic Hot Americano", price: "$3.95", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244070.jpg" }
]}
title="Signature Brews & Bites"
description="Explore our curated selection of specialty coffee, refreshing iced beverages, and artisanal treats."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Artisan Pastries",
description: "Baked fresh every single morning using premium ingredients.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-delicious-cinnamon-rolls-with-white-glaze-black-table_181624-20278.jpg",
},
items: [
{
icon: Coffee,
text: "Daily fresh batches",
},
{
icon: Award,
text: "Premium sourcing",
},
{
icon: CheckCircle,
text: "100% natural",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/vintage-coffee-with-latte-art-decoration_1150-6331.jpg",
imageAlt: "fresh artisan pastries closeup",
},
{
title: "Ethical Sourcing",
description: "Our beans are sourced directly from sustainable farms.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/roasted-beans-tasteful-coffee-shopping-paper-bag_23-2148441159.jpg",
},
items: [
{
icon: Shield,
text: "Fair trade beans",
},
{
icon: Leaf,
text: "Sustainable practice",
},
{
icon: Star,
text: "Top-tier quality",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/breakfast-composition-with-blank-slate-father-s-day_23-2147632090.jpg?_wi=2",
imageAlt: "fresh artisan pastries closeup",
},
{
title: "Cozy Atmosphere",
description: "A perfect space for working, meeting, or relaxing with a book.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/boy-having-coffee-restaurant_23-2148172666.jpg",
},
items: [
{
icon: Wifi,
text: "High-speed Wi-Fi",
},
{
icon: Coffee,
text: "Comfortable seating",
},
{
icon: Music,
text: "Relaxed ambiance",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/food-retro-breakfast-cup-restaurant_1172-468.jpg?_wi=2",
imageAlt: "fresh artisan pastries closeup",
},
]}
title="Why Coffee Lovers Choose Us"
description="We prioritize quality and comfort to ensure every visit to our café is exceptional."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Artisan Pastries", description: "Baked fresh every single morning using premium ingredients.", media: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-delicious-cinnamon-rolls-with-white-glaze-black-table_181624-20278.jpg" },
items: [
{ icon: Coffee, text: "Daily fresh batches" },
{ icon: Award, text: "Premium sourcing" },
{ icon: CheckCircle, text: "100% natural" }
],
reverse: false
},
{
title: "Ethical Sourcing", description: "Our beans are sourced directly from sustainable farms.", media: { imageSrc: "http://img.b2bpic.net/free-photo/roasted-beans-tasteful-coffee-shopping-paper-bag_23-2148441159.jpg" },
items: [
{ icon: Shield, text: "Fair trade beans" },
{ icon: Leaf, text: "Sustainable practice" },
{ icon: Star, text: "Top-tier quality" }
],
reverse: true
},
{
title: "Cozy Atmosphere", description: "A perfect space for working, meeting, or relaxing with a book.", media: { imageSrc: "http://img.b2bpic.net/free-photo/boy-having-coffee-restaurant_23-2148172666.jpg" },
items: [
{ icon: Wifi, text: "High-speed Wi-Fi" },
{ icon: Coffee, text: "Comfortable seating" },
{ icon: Music, text: "Relaxed ambiance" }
],
reverse: false
}
]}
title="Why Coffee Lovers Choose Us"
description="We prioritize quality and comfort to ensure every visit to our café is exceptional."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15K+",
description: "Happy Customers",
},
{
id: "m2",
value: "20+",
description: "Roast Varieties",
},
{
id: "m3",
value: "5+",
description: "Local Partners",
},
{
id: "m4",
value: "4.9",
description: "Average Rating",
},
]}
title="Our Impact in Numbers"
description="Small beginnings, big smiles, and countless cups served across our community."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15K+", description: "Happy Customers" },
{ id: "m2", value: "20+", description: "Roast Varieties" },
{ id: "m3", value: "5+", description: "Local Partners" },
{ id: "m4", value: "4.9", description: "Average Rating" }
]}
title="Our Impact in Numbers"
description="Small beginnings, big smiles, and countless cups served across our community."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
role: "Local Designer",
testimonial: "The best cappuccino in town, hands down. The vibe is so cozy I could stay all day.",
imageSrc: "http://img.b2bpic.net/free-photo/you-get-it-it-s-so-funny_329181-2916.jpg",
},
{
id: "2",
name: "Michael Chen",
role: "Software Engineer",
testimonial: "My morning go-to. Exceptional coffee and the staff knows me by name. Incredible.",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-having-coffee-meeting_23-2148817110.jpg",
},
{
id: "3",
name: "Emily Rodriguez",
role: "Creative Director",
testimonial: "I love the pastries here! Perfectly flaky and sweet. A true neighborhood gem.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-drinking-coffee_23-2148395402.jpg",
},
{
id: "4",
name: "David Kim",
role: "Journalist",
testimonial: "The atmosphere is unmatched. Quiet, warm, and the espresso is consistently great.",
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-beverage-while-break-time_23-2149256929.jpg",
},
{
id: "5",
name: "Jessica Lee",
role: "Student",
testimonial: "Great place to study. Fast Wi-Fi and plenty of delicious coffee options.",
imageSrc: "http://img.b2bpic.net/free-photo/lovely-women-looking-mobile-phone_23-2148422480.jpg",
},
]}
title="What Our Regulars Say"
description="Authentic feedback from our community members."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah Johnson", role: "Local Designer", testimonial: "The best cappuccino in town, hands down. The vibe is so cozy I could stay all day.", imageSrc: "http://img.b2bpic.net/free-photo/you-get-it-it-s-so-funny_329181-2916.jpg" },
{ id: "2", name: "Michael Chen", role: "Software Engineer", testimonial: "My morning go-to. Exceptional coffee and the staff knows me by name. Incredible.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-having-coffee-meeting_23-2148817110.jpg" },
{ id: "3", name: "Emily Rodriguez", role: "Creative Director", testimonial: "I love the pastries here! Perfectly flaky and sweet. A true neighborhood gem.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-drinking-coffee_23-2148395402.jpg" },
{ id: "4", name: "David Kim", role: "Journalist", testimonial: "The atmosphere is unmatched. Quiet, warm, and the espresso is consistently great.", imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-beverage-while-break-time_23-2149256929.jpg" },
{ id: "5", name: "Jessica Lee", role: "Student", testimonial: "Great place to study. Fast Wi-Fi and plenty of delicious coffee options.", imageSrc: "http://img.b2bpic.net/free-photo/lovely-women-looking-mobile-phone_23-2148422480.jpg" }
]}
title="What Our Regulars Say"
description="Authentic feedback from our community members."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Bean Roast Inc",
"Pastry Masters",
"Local Brews",
"Sustainable Coffee",
"Community Cup",
"Espresso Bar",
"Bakery Co",
]}
title="Proudly Supported By"
description="Building a community through shared quality and appreciation."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Bean Roast Inc", "Pastry Masters", "Local Brews", "Sustainable Coffee", "Community Cup", "Espresso Bar", "Bakery Co"]}
title="Proudly Supported By"
description="Building a community through shared quality and appreciation."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do you offer vegan milk options?",
content: "Yes! We offer soy, almond, and oat milk alternatives for all our drinks.",
},
{
id: "q2",
title: "Do you have free Wi-Fi?",
content: "Absolutely. Feel free to connect and stay as long as you like while you enjoy your coffee.",
},
{
id: "q3",
title: "Can I order online for pickup?",
content: "Yes, our mobile app allows you to place your order ahead and have it ready when you arrive.",
},
]}
mediaAnimation="slide-up"
title="Frequently Asked Questions"
description="Need to know something? We've answered some common queries here."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/person-cafe-enjoying-book_23-2150064701.jpg"
imageAlt="Customer enjoying a book"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Do you offer vegan milk options?", content: "Yes! We offer soy, almond, and oat milk alternatives for all our drinks." },
{ id: "q2", title: "Do you have free Wi-Fi?", content: "Absolutely. Feel free to connect and stay as long as you like while you enjoy your coffee." },
{ id: "q3", title: "Can I order online for pickup?", content: "Yes, our mobile app allows you to place your order ahead and have it ready when you arrive." }
]}
mediaAnimation="slide-up"
title="Frequently Asked Questions"
description="Need to know something? We've answered some common queries here."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/person-cafe-enjoying-book_23-2150064701.jpg"
imageAlt="Customer enjoying a book"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Visit Us"
title="Ready for your next coffee break?"
description="Come visit us at Café Bar Cappuccino and enjoy a unique artisanal experience in the heart of our community."
buttons={[
{
text: "Get Directions",
href: "https://maps.app.goo.gl/X7pZTQM7L1dtWpYh7",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Visit Us"
title="Ready for your next coffee break?"
description="Come visit us at Café Bar Cappuccino and enjoy a unique artisanal experience in the heart of our community."
buttons={[{ text: "Get Directions", href: "https://maps.app.goo.gl/X7pZTQM7L1dtWpYh7" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-girl-pajama-moving-balcony-city-sunny-morning-her-long-hair-flying-wind-she-smiling_197531-2311.jpg"
logoText="Café Bar Cappuccino"
columns={[
{
title: "Navigate",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "About",
href: "#about",
},
{
label: "Menu",
href: "#products",
},
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "#contact",
},
{
label: "FAQ",
href: "#faq",
},
{
label: "Privacy",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-girl-pajama-moving-balcony-city-sunny-morning-her-long-hair-flying-wind-she-smiling_197531-2311.jpg"
logoText="Café Bar Cappuccino"
columns={[
{ title: "Navigate", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Menu", href: "#products" }] },
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Privacy", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);