Merge version_1 into main #2
444
src/app/page.tsx
444
src/app/page.tsx
@@ -17,316 +17,162 @@ import { Clock, Coffee, MapPin } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "menu",
|
||||
},
|
||||
{
|
||||
name: "Visit",
|
||||
id: "visit",
|
||||
},
|
||||
]}
|
||||
brandName="Haiku Café"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Visit", id: "visit" },
|
||||
]}
|
||||
brandName="Haiku Café"
|
||||
button={{ text: "Visit", href: "#visit" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Not everything needs to be fast."
|
||||
description="Haiku is built for slow mornings, quiet conversations, and coffee that doesn’t try too hard. No noise. No rush. Just a space to pause."
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Haiku",
|
||||
href: "#visit",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg?_wi=1"
|
||||
imageAlt="minimalist coffee shop interior warm light"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Not everything needs to be fast."
|
||||
description="Haiku is built for slow mornings, quiet conversations, and coffee that doesn’t try too hard. No noise. No rush. Just a space to pause."
|
||||
buttons={[{ text: "Visit Haiku", href: "#visit" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg"
|
||||
imageAlt="minimalist coffee shop interior warm light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="About Haiku"
|
||||
metrics={[
|
||||
{
|
||||
icon: Coffee,
|
||||
label: "Coffee Philosophy",
|
||||
value: "Slow",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Operating Hours",
|
||||
value: "8am-8pm",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Location",
|
||||
value: "Mumbai",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="About Haiku"
|
||||
metrics={[
|
||||
{ icon: Coffee, label: "Coffee Philosophy", value: "Slow" },
|
||||
{ icon: Clock, label: "Operating Hours", value: "8am-8pm" },
|
||||
{ icon: MapPin, label: "Location", value: "Mumbai" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Our Experience"
|
||||
description="We believe in simplicity and quality in every cup."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Coffee",
|
||||
content: "No syrups. No theatrics. Just well-tuned machines and good beans.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Space",
|
||||
content: "Warm light, calm corners, and a room that lets you breathe.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "The Cat",
|
||||
content: "You might meet our most regular guest. It usually approves of people.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-with-coffee-machine_23-2148892898.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Our Experience"
|
||||
description="We believe in simplicity and quality in every cup."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Coffee", content: "No syrups. No theatrics. Just well-tuned machines and good beans." },
|
||||
{ id: "f2", title: "Space", content: "Warm light, calm corners, and a room that lets you breathe." },
|
||||
{ id: "f3", title: "The Cat", content: "You might meet our most regular guest. It usually approves of people." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-with-coffee-machine_23-2148892898.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Espresso",
|
||||
price: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-woman-using-mobile-phone-while-having-cup-coffee_107420-63684.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Americano",
|
||||
price: "140",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-tanned-hands-holds-glass-coffee-with-coconut-milk_197531-18179.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Cappuccino",
|
||||
price: "160",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-with-decorative-heart_1232-1244.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Latte",
|
||||
price: "160",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cup-coffee-latte-with-kettle_23-2148337138.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Baked Eggs",
|
||||
price: "220",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cup-fresh-made-coffee-served-cup_1220-4583.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Toast",
|
||||
price: "100",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-glass-coffee-with-latte-art_140725-5204.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Menu"
|
||||
description="Menu changes based on availability."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Espresso", price: "120", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-woman-using-mobile-phone-while-having-cup-coffee_107420-63684.jpg" },
|
||||
{ id: "p2", name: "Americano", price: "140", imageSrc: "http://img.b2bpic.net/free-photo/female-tanned-hands-holds-glass-coffee-with-coconut-milk_197531-18179.jpg" },
|
||||
{ id: "p3", name: "Cappuccino", price: "160", imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-with-decorative-heart_1232-1244.jpg" },
|
||||
{ id: "p4", name: "Latte", price: "160", imageSrc: "http://img.b2bpic.net/free-photo/close-up-cup-coffee-latte-with-kettle_23-2148337138.jpg" },
|
||||
{ id: "p5", name: "Baked Eggs", price: "220", imageSrc: "http://img.b2bpic.net/free-photo/cup-fresh-made-coffee-served-cup_1220-4583.jpg" },
|
||||
{ id: "p6", name: "Toast", price: "100", imageSrc: "http://img.b2bpic.net/free-photo/top-view-glass-coffee-with-latte-art_140725-5204.jpg" },
|
||||
]}
|
||||
title="Our Menu"
|
||||
description="Menu changes based on availability."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Anonymous",
|
||||
handle: "@haikulovers",
|
||||
testimonial: "No fancy extras. Just a perfect espresso.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-table-holding-fresh-juice-bottle_23-2148784272.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Local Resident",
|
||||
handle: "@mumbaidaily",
|
||||
testimonial: "Quiet, easy to talk. Rare in Mumbai.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-successful-young-businesswoman-working-cafe-restaurant-sit-near-window-enjoy-tasty-coffee-smoothie-use-laptop-prepare-project-student-studying-before-university-exams_197531-30634.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Regular Guest",
|
||||
handle: "@catowner",
|
||||
testimonial: "The cat approves. That says enough.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-cafe-reading-book-while-having-coffee_23-2150064765.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Coffee Enthusiast",
|
||||
handle: "@beans",
|
||||
testimonial: "The best slow brew I've had.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-coffee-cup_23-2149455885.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Frequent Visitor",
|
||||
handle: "@pause",
|
||||
testimonial: "Perfect place to work and relax.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-sitting-cafe_176420-5912.jpg",
|
||||
},
|
||||
]}
|
||||
title="What People Say"
|
||||
description="Shared moments at our cafe."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Anonymous", handle: "@haikulovers", testimonial: "No fancy extras. Just a perfect espresso.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-table-holding-fresh-juice-bottle_23-2148784272.jpg" },
|
||||
{ id: "t2", name: "Local Resident", handle: "@mumbaidaily", testimonial: "Quiet, easy to talk. Rare in Mumbai.", imageSrc: "http://img.b2bpic.net/free-photo/charming-successful-young-businesswoman-working-cafe-restaurant-sit-near-window-enjoy-tasty-coffee-smoothie-use-laptop-prepare-project-student-studying-before-university-exams_197531-30634.jpg" },
|
||||
{ id: "t3", name: "Regular Guest", handle: "@catowner", testimonial: "The cat approves. That says enough.", imageSrc: "http://img.b2bpic.net/free-photo/person-cafe-reading-book-while-having-coffee_23-2150064765.jpg" },
|
||||
{ id: "t4", name: "Coffee Enthusiast", handle: "@beans", testimonial: "The best slow brew I've had.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-coffee-cup_23-2149455885.jpg" },
|
||||
{ id: "t5", name: "Frequent Visitor", handle: "@pause", testimonial: "Perfect place to work and relax.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-sitting-cafe_176420-5912.jpg" },
|
||||
]}
|
||||
title="What People Say"
|
||||
description="Shared moments at our cafe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12",
|
||||
title: "Hours Open",
|
||||
items: [
|
||||
"Daily",
|
||||
"Calm",
|
||||
"Slow",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Coffee Quality",
|
||||
items: [
|
||||
"Fresh",
|
||||
"Beans",
|
||||
"Manual",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "1",
|
||||
title: "Official Mascot",
|
||||
items: [
|
||||
"Cat",
|
||||
"Regular",
|
||||
"Friendly",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Cafe Stats"
|
||||
description="Daily essence of Haiku."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "12", title: "Hours Open", items: ["Daily", "Calm", "Slow"] },
|
||||
{ id: "m2", value: "100%", title: "Coffee Quality", items: ["Fresh", "Beans", "Manual"] },
|
||||
{ id: "m3", value: "1", title: "Official Mascot", items: ["Cat", "Regular", "Friendly"] },
|
||||
]}
|
||||
title="Cafe Stats"
|
||||
description="Daily essence of Haiku."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you serve syrups?",
|
||||
content: "No. We believe in the natural taste of coffee beans.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is it quiet?",
|
||||
content: "Yes. That's our hallmark.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I bring my pet?",
|
||||
content: "Our resident cat decides!",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you serve syrups?", content: "No. We believe in the natural taste of coffee beans." },
|
||||
{ id: "q2", title: "Is it quiet?", content: "Yes. That's our hallmark." },
|
||||
{ id: "q3", title: "Can I bring my pet?", content: "Our resident cat decides!" },
|
||||
]}
|
||||
sideTitle="Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="visit" data-section="visit">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Visit Us"
|
||||
description="Walk in when you need a pause. Open daily • 8 AM – 8 PM"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "message",
|
||||
type: "text",
|
||||
placeholder: "Any specific requests?",
|
||||
},
|
||||
]}
|
||||
mediaPosition="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg?_wi=2"
|
||||
imageAlt="minimalist coffee shop interior warm light"
|
||||
/>
|
||||
</div>
|
||||
<div id="visit" data-section="visit">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Visit Us"
|
||||
description="Walk in when you need a pause. Open daily • 8 AM – 8 PM"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "message", type: "text", placeholder: "Any specific requests?" },
|
||||
]}
|
||||
mediaPosition="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg"
|
||||
imageAlt="minimalist coffee shop interior warm light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Visit",
|
||||
items: [
|
||||
{
|
||||
label: "Mumbai Location",
|
||||
href: "#visit",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Haiku Café"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Visit", items: [{ label: "Mumbai Location", href: "#visit" }],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }],
|
||||
},
|
||||
]}
|
||||
logoText="Haiku Café"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user