From ff9daff5b7d0ecee1808fb2d0b3f48e723662d6e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 25 May 2026 05:48:29 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 444 ++++++++++++++++-------------------------------
 1 file changed, 145 insertions(+), 299 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0d741c2..ea799b0 100644
--- a/src/app/page.tsx
+++ b/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>
   );
-- 
2.49.1