Merge version_1 into main #1
483
src/app/page.tsx
483
src/app/page.tsx
@@ -17,358 +17,159 @@ import { Coffee, Heart, Sun } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
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: "Our Story",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "#menu",
|
||||
},
|
||||
{
|
||||
name: "Rituals",
|
||||
id: "#craft",
|
||||
},
|
||||
{
|
||||
name: "Visit",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Ritual"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Our Story", id: "#about" },
|
||||
{ name: "Menu", id: "#menu" },
|
||||
{ name: "Rituals", id: "#craft" },
|
||||
{ name: "Visit", id: "#contact" },
|
||||
]}
|
||||
brandName="The Ritual"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Your daily ritual, perfected"
|
||||
description="From rich coffee to fresh breakfasts and sweet indulgences—discover the place people accidentally find and never stop coming back to."
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-successful-bearded-south-asian-young-indian-freelancer-blue-jeans-shirt-sitting-cafe-with-chicken-nuggets-lemonade_627829-5095.jpg"
|
||||
imageAlt="cozy cafe atmosphere warm lighting"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cream-liquer_23-2148014925.jpg",
|
||||
alt: "Cream liquer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/group-friends-meeting-restaurant_23-2148395431.jpg",
|
||||
alt: "Group of friends meeting at restaurant",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/interior-cafe-with-brick-walls_53876-32361.jpg",
|
||||
alt: "Interior of a cafe with brick walls",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/best-friends-enjoying-time-together_23-2148395432.jpg",
|
||||
alt: "Best friends enjoying time together",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-man-looking-his-girlfriend_23-2148243181.jpg",
|
||||
alt: "Happy man looking at his girlfriend",
|
||||
},
|
||||
]}
|
||||
avatarText="Join our community of coffee lovers"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Your daily ritual, perfected"
|
||||
description="From rich coffee to fresh breakfasts and sweet indulgences—discover the place people accidentally find and never stop coming back to."
|
||||
buttons={[{ text: "Visit Us", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-successful-bearded-south-asian-young-indian-freelancer-blue-jeans-shirt-sitting-cafe-with-chicken-nuggets-lemonade_627829-5095.jpg"
|
||||
imageAlt="cozy cafe atmosphere warm lighting"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/cream-liquer_23-2148014925.jpg", alt: "Cream liquer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/group-friends-meeting-restaurant_23-2148395431.jpg", alt: "Group of friends meeting at restaurant" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/interior-cafe-with-brick-walls_53876-32361.jpg", alt: "Interior of a cafe with brick walls" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/best-friends-enjoying-time-together_23-2148395432.jpg", alt: "Best friends enjoying time together" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-man-looking-his-girlfriend_23-2148243181.jpg", alt: "Happy man looking at his girlfriend" }
|
||||
]}
|
||||
avatarText="Join our community of coffee lovers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Crafted with Intention"
|
||||
metrics={[
|
||||
{
|
||||
icon: Coffee,
|
||||
label: "Ethical Sourcing",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Sun,
|
||||
label: "Morning Rituals",
|
||||
value: "2k+",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Happy Regulars",
|
||||
value: "500+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Crafted with Intention"
|
||||
metrics={[
|
||||
{ icon: Coffee, label: "Ethical Sourcing", value: "100%" },
|
||||
{ icon: Sun, label: "Morning Rituals", value: "2k+" },
|
||||
{ icon: Heart, label: "Happy Regulars", value: "500+" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "Signature Drip",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-drip-coffee_1339-210.jpg",
|
||||
imageAlt: "specialty pour over coffee closeup",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "Artisan Croissant",
|
||||
price: "$5.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/croissant-wooden-kitchen-towel-high-angle-view_176474-8147.jpg",
|
||||
imageAlt: "cappuccino with latte art closeup",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Avocado Toast",
|
||||
price: "$12.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646423.jpg",
|
||||
imageAlt: "cold brew coffee glass ice",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "Classic Cappuccino",
|
||||
price: "$5.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stack-golden-pancakes-drizzled-with-maple-syrup-topped-with-fresh-blueberries-raspberries-black-plate_9975-124637.jpg",
|
||||
imageAlt: "latte art heart shape closeup",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
name: "Blueberry Muffin",
|
||||
price: "$4.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-filter-funnel-coffee-mug_107420-84974.jpg",
|
||||
imageAlt: "morning drip coffee pour",
|
||||
},
|
||||
{
|
||||
id: "m6",
|
||||
name: "Cold Brew",
|
||||
price: "$5.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/steaming-coffee-cup-table_1373-57.jpg",
|
||||
imageAlt: "steaming tea cup morning",
|
||||
},
|
||||
]}
|
||||
title="Fresh Daily Rituals"
|
||||
description="A curated menu designed to start your day right."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "m1", name: "Signature Drip", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/hand-drip-coffee_1339-210.jpg", imageAlt: "specialty pour over coffee closeup" },
|
||||
{ id: "m2", name: "Artisan Croissant", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/croissant-wooden-kitchen-towel-high-angle-view_176474-8147.jpg", imageAlt: "cappuccino with latte art closeup" },
|
||||
{ id: "m3", name: "Avocado Toast", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646423.jpg", imageAlt: "cold brew coffee glass ice" },
|
||||
{ id: "m4", name: "Classic Cappuccino", price: "$5.50", imageSrc: "http://img.b2bpic.net/free-photo/stack-golden-pancakes-drizzled-with-maple-syrup-topped-with-fresh-blueberries-raspberries-black-plate_9975-124637.jpg", imageAlt: "latte art heart shape closeup" },
|
||||
{ id: "m5", name: "Blueberry Muffin", price: "$4.00", imageSrc: "http://img.b2bpic.net/free-photo/man-holding-filter-funnel-coffee-mug_107420-84974.jpg", imageAlt: "morning drip coffee pour" },
|
||||
{ id: "m6", name: "Cold Brew", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/steaming-coffee-cup-table_1373-57.jpg", imageAlt: "steaming tea cup morning" }
|
||||
]}
|
||||
title="Fresh Daily Rituals"
|
||||
description="A curated menu designed to start your day right."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="craft" data-section="craft">
|
||||
<FeatureCardTwentyFour
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Bean Selection",
|
||||
author: "Direct Trade",
|
||||
description: "We source our beans from small, sustainable farms across the globe.",
|
||||
tags: [
|
||||
"Ethical",
|
||||
"Sustainable",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/double-espresso-coffee-mug-with-cinnamon-sticks-coffee-beans-wooden-board_181624-57349.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Precision Brewing",
|
||||
author: "Barista Craft",
|
||||
description: "Mastering the temperature and time for the perfect extraction.",
|
||||
tags: [
|
||||
"Craft",
|
||||
"Precise",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-breakfast-plate_23-2149214703.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Cozy Ambiance",
|
||||
author: "Designed For You",
|
||||
description: "A space where you can disconnect, read, or connect with friends.",
|
||||
tags: [
|
||||
"Cozy",
|
||||
"Local",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-appetizing-fresh-chocolate-cake-glass-showcase-pastry-shop-cafe_639032-1328.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Art of Coffee"
|
||||
description="Every bean, every brew, and every pour is an expression of our passion."
|
||||
/>
|
||||
</div>
|
||||
<div id="craft" data-section="craft">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Bean Selection", author: "Direct Trade", description: "We source our beans from small, sustainable farms across the globe.", tags: ["Ethical", "Sustainable"], imageSrc: "http://img.b2bpic.net/free-photo/double-espresso-coffee-mug-with-cinnamon-sticks-coffee-beans-wooden-board_181624-57349.jpg" },
|
||||
{ id: "f2", title: "Precision Brewing", author: "Barista Craft", description: "Mastering the temperature and time for the perfect extraction.", tags: ["Craft", "Precise"], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-breakfast-plate_23-2149214703.jpg" },
|
||||
{ id: "f3", title: "Cozy Ambiance", author: "Designed For You", description: "A space where you can disconnect, read, or connect with friends.", tags: ["Cozy", "Local"], imageSrc: "http://img.b2bpic.net/free-photo/closeup-appetizing-fresh-chocolate-cake-glass-showcase-pastry-shop-cafe_639032-1328.jpg" }
|
||||
]}
|
||||
title="The Art of Coffee"
|
||||
description="Every bean, every brew, and every pour is an expression of our passion."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Architect",
|
||||
testimonial: "My morning ritual here makes my day. The coffee is unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark Chen",
|
||||
role: "Explorer",
|
||||
testimonial: "Finally found a local gem that feels authentic and welcoming.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-reading-couch-medium-shot_23-2149141854.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Ross",
|
||||
role: "Regular",
|
||||
testimonial: "Consistency is key, and they deliver every single time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-sitting-home-bed_1157-31059.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "James P.",
|
||||
role: "Local",
|
||||
testimonial: "The staff are wonderful and the atmosphere is perfect.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-traveling-together_23-2149049103.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Chloe West",
|
||||
role: "Regular",
|
||||
testimonial: "My favorite corner for a quiet morning coffee. Simply perfect.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-665.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by the Neighborhood"
|
||||
description="Hear what our regulars have to say about their morning ritual."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", role: "Architect", testimonial: "My morning ritual here makes my day. The coffee is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg" },
|
||||
{ id: "t2", name: "Mark Chen", role: "Explorer", testimonial: "Finally found a local gem that feels authentic and welcoming.", imageSrc: "http://img.b2bpic.net/free-photo/woman-reading-couch-medium-shot_23-2149141854.jpg" },
|
||||
{ id: "t3", name: "Elena Ross", role: "Regular", testimonial: "Consistency is key, and they deliver every single time.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-sitting-home-bed_1157-31059.jpg" },
|
||||
{ id: "t4", name: "James P.", role: "Local", testimonial: "The staff are wonderful and the atmosphere is perfect.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-traveling-together_23-2149049103.jpg" },
|
||||
{ id: "t5", name: "Chloe West", role: "Regular", testimonial: "My favorite corner for a quiet morning coffee. Simply perfect.", imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-665.jpg" }
|
||||
]}
|
||||
title="Loved by the Neighborhood"
|
||||
description="Hear what our regulars have to say about their morning ritual."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"City Foodie",
|
||||
"The Local Guide",
|
||||
"Coffee Enthusiast",
|
||||
"Daily Brunch",
|
||||
"Urban Living",
|
||||
"Neighborhood Gem",
|
||||
"Ritual Experts",
|
||||
]}
|
||||
title="Recognized Excellence"
|
||||
description="Honored to be a staple in our local community."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={["City Foodie", "The Local Guide", "Coffee Enthusiast", "Daily Brunch", "Urban Living", "Neighborhood Gem", "Ritual Experts"]}
|
||||
title="Recognized Excellence"
|
||||
description="Honored to be a staple in our local community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you offer Wi-Fi?",
|
||||
content: "Yes, we offer free high-speed Wi-Fi for all our guests.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I bring my pet?",
|
||||
content: "Our patio is pet-friendly! We welcome your furry friends.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer vegan options?",
|
||||
content: "Absolutely, we have a variety of plant-based pastries and milk alternatives.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "Are you open on weekends?",
|
||||
content: "Yes, we are open seven days a week to fuel your rituals.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our daily rituals."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you offer Wi-Fi?", content: "Yes, we offer free high-speed Wi-Fi for all our guests." },
|
||||
{ id: "q2", title: "Can I bring my pet?", content: "Our patio is pet-friendly! We welcome your furry friends." },
|
||||
{ id: "q3", title: "Do you offer vegan options?", content: "Absolutely, we have a variety of plant-based pastries and milk alternatives." },
|
||||
{ id: "q4", title: "Are you open on weekends?", content: "Yes, we are open seven days a week to fuel your rituals." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our daily rituals."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Join our ritual. Visit us for your perfect morning."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Directions",
|
||||
href: "#map",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Join our ritual. Visit us for your perfect morning."
|
||||
buttons={[{ text: "Get Directions", href: "#map" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Rituals",
|
||||
items: [
|
||||
{
|
||||
label: "Our Coffee",
|
||||
href: "#craft",
|
||||
},
|
||||
{
|
||||
label: "Food Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Visit Us",
|
||||
items: [
|
||||
{
|
||||
label: "Location",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Hours",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 The Ritual Café"
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Rituals", items: [{ label: "Our Coffee", href: "#craft" }, { label: "Food Menu", href: "#menu" }] },
|
||||
{ title: "Visit Us", items: [{ label: "Location", href: "#contact" }, { label: "Hours", href: "#contact" }] },
|
||||
{ title: "Community", items: [{ label: "Instagram", href: "#" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 The Ritual Café"
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user