Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,56 +2,42 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { CalendarDays, Armchair, Users } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
         defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="mediumSmall"
-        sizing="large"
-        background="blurBottom"
-        cardStyle="soft-shadow"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Menu",
-          id: "menu",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Menu", id: "menu" },
+        { name: "About", id: "about" },
+        { name: "Reservation", id: "reservation" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Manga Bistro"
-      button={{
-        text: "Order Online",
-        href: "#menu",
-      }}
+      button={{ text: "Order Online", href: "#menu" }}
     />
   </div>
 
@@ -60,71 +46,14 @@ export default function LandingPage() {
       title="Authentic Japanese Fusion in the Heart of Montreal"
       description="Experience the perfect balance of traditional Japanese culinary techniques and modern Montreal flair at Manga Bistro."
       testimonials={[
-        {
-          name: "Sarah L.",
-          handle: "@sarahlmtl",
-          testimonial: "The best sushi I have had in Montreal! Absolutely incredible flavors.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-attractive-smiling-woman-retro-vintage-50-s-cafe-pink-color-sitting-table_285396-10361.jpg?_wi=1",
-        },
-        {
-          name: "Marc T.",
-          handle: "@marct",
-          testimonial: "Authentic, fresh, and such a great vibe. Will be back.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-pink-jacket-spending-time-cafe_1157-32554.jpg",
-        },
-        {
-          name: "Chloe B.",
-          handle: "@chloeb",
-          testimonial: "Hidden gem in the city. The fusion rolls are unique and delicious.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg",
-        },
-        {
-          name: "Alex R.",
-          handle: "@alexr",
-          testimonial: "Staff was welcoming and the food was presented beautifully.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-friends-taking-selfie_23-2149212129.jpg",
-        },
-        {
-          name: "Julia M.",
-          handle: "@juliamtl",
-          testimonial: "The perfect spot for a date night. Everything was exceptional.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269176.jpg",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View Menu",
-          href: "#menu",
-        },
+        { name: "Sarah L.", handle: "@sarahlmtl", testimonial: "The best sushi I have had in Montreal! Absolutely incredible flavors.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-attractive-smiling-woman-retro-vintage-50-s-cafe-pink-color-sitting-table_285396-10361.jpg?_wi=1" },
+        { name: "Marc T.", handle: "@marct", testimonial: "Authentic, fresh, and such a great vibe. Will be back.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-pink-jacket-spending-time-cafe_1157-32554.jpg" },
+        { name: "Chloe B.", handle: "@chloeb", testimonial: "Hidden gem in the city. The fusion rolls are unique and delicious.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg" },
+        { name: "Alex R.", handle: "@alexr", testimonial: "Staff was welcoming and the food was presented beautifully.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-friends-taking-selfie_23-2149212129.jpg" },
+        { name: "Julia M.", handle: "@juliamtl", testimonial: "The perfect spot for a date night. Everything was exceptional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269176.jpg" },
       ]}
+      buttons={[{ text: "View Menu", href: "#menu" }]}
       imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-eating-japanese-street-food-restaurant_23-2149410155.jpg?_wi=1"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-senior-woman-posing_23-2149069164.jpg",
-          alt: "Medium shot senior woman posing",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149405999.jpg",
-          alt: "Beautiful woman with trendy hairstyle",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beauty-woman-s-with-blue-eyes-portrait_633478-325.jpg",
-          alt: "Beauty woman's with a blue eyes portrait",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1466.jpg",
-          alt: "Attractive girl portrait in a white shirt",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-model-posing_23-2149154619.jpg",
-          alt: "Close up model posing",
-        },
-      ]}
       avatarText="Join 10,000+ satisfied diners"
     />
   </div>
@@ -145,45 +74,42 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Dragon Roll",
-          price: "$18",
-          imageSrc: "http://img.b2bpic.net/free-photo/asian-ramen-noodle-soup-copy-space_23-2148494834.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Spicy Salmon Nigiri",
-          price: "$12",
-          imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-salmon-eggs_74190-5960.jpg?_wi=1",
-        },
-        {
-          id: "p3",
-          name: "Miso Soup",
-          price: "$6",
-          imageSrc: "http://img.b2bpic.net/free-photo/chocolate-dessert-cup-black-tea_140725-3381.jpg?_wi=1",
-        },
-        {
-          id: "p4",
-          name: "Tempura Shrimp",
-          price: "$15",
-          imageSrc: "http://img.b2bpic.net/free-photo/kumquats-piled-ornate-platter-marble-background-high-quality-photo_114579-53299.jpg",
-        },
-        {
-          id: "p5",
-          name: "Wakame Salad",
-          price: "$8",
-          imageSrc: "http://img.b2bpic.net/free-photo/tempura_74190-7415.jpg",
-        },
-        {
-          id: "p6",
-          name: "Matcha Mochi",
-          price: "$7",
-          imageSrc: "http://img.b2bpic.net/free-photo/cups-bottle-with-sake-drink_23-2149869779.jpg",
-        },
+        { id: "p1", name: "Dragon Roll", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/asian-ramen-noodle-soup-copy-space_23-2148494834.jpg?_wi=1" },
+        { id: "p2", name: "Spicy Salmon Nigiri", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-salmon-eggs_74190-5960.jpg?_wi=1" },
+        { id: "p3", name: "Miso Soup", price: "$6", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-dessert-cup-black-tea_140725-3381.jpg?_wi=1" },
+        { id: "p4", name: "Tempura Shrimp", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/kumquats-piled-ornate-platter-marble-background-high-quality-photo_114579-53299.jpg" },
       ]}
       title="Signature Menu"
-      description="Discover our collection of handcrafted rolls, appetizers, and warm dishes, all available for order."
+      description="Discover our collection of handcrafted rolls, appetizers, and warm dishes."
+    />
+  </div>
+
+  <div id="reservation" data-section="reservation">
+      <FeatureBento
+      title="Book Your Table"
+      description="Choose your preferred table directly from our floor plan for a perfect dining experience."
+      animationType="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      features={[
+        { 
+          title: "Interactive Map", 
+          description: "Browse available tables and select your favorite spot using our real-time seating plan.", 
+          bentoComponent: "map"
+        },
+        { 
+          title: "Booking Flexibility", 
+          description: "Easily change your reservation or add special requests for anniversaries or birthdays.", 
+          bentoComponent: "reveal-icon",          icon: CalendarDays
+        },
+        { 
+          title: "Seating Selection", 
+          description: "Choose from window-side, intimate corners, or our vibrant bar seating area.", 
+          bentoComponent: "reveal-icon",          icon: Armchair
+        }
+      ]}
+      tag="Reservation"
+      tagIcon={Users}
     />
   </div>
 
@@ -193,141 +119,21 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",
-          value: "500+",
-          title: "Daily Orders",
-          description: "Crafted fresh every day.",
-          imageSrc: "http://img.b2bpic.net/free-photo/salmon-salad_1203-8815.jpg",
-        },
-        {
-          id: "m2",
-          value: "15+",
-          title: "Local Suppliers",
-          description: "Fresh, local ingredients.",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-sushi-with-caviar-ginger-vasabi-wooden-plate_114579-31736.jpg",
-        },
-        {
-          id: "m3",
-          value: "4.9",
-          title: "Customer Rating",
-          description: "Based on 1,000+ reviews.",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-attractive-smiling-woman-retro-vintage-50-s-cafe-pink-color-sitting-table_285396-10361.jpg?_wi=2",
-        },
+        { id: "m1", value: "500+", title: "Daily Orders", description: "Crafted fresh every day.", imageSrc: "http://img.b2bpic.net/free-photo/salmon-salad_1203-8815.jpg" },
+        { id: "m2", value: "15+", title: "Local Suppliers", description: "Fresh, local ingredients.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-sushi-with-caviar-ginger-vasabi-wooden-plate_114579-31736.jpg" },
+        { id: "m3", value: "4.9", title: "Customer Rating", description: "Based on 1,000+ reviews.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-attractive-smiling-woman-retro-vintage-50-s-cafe-pink-color-sitting-table_285396-10361.jpg?_wi=2" },
       ]}
       title="Our Culinary Commitment"
       description="We prioritize quality, speed, and freshness in every single plate."
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Johnson",
-          date: "Jan 2025",
-          title: "Frequent Guest",
-          quote: "The quality is unmatched. I love the atmosphere!",
-          tag: "Favorite",
-          avatarSrc: "http://img.b2bpic.net/free-photo/pretty-blonde-woman-white-sweater-eating-sushi-lunch-small-caffe_231208-5220.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-eating-japanese-street-food-restaurant_23-2149410155.jpg?_wi=2",
-          imageAlt: "happy diner restaurant interior",
-        },
-        {
-          id: "2",
-          name: "Michael Chen",
-          date: "Dec 2024",
-          title: "Foodie",
-          quote: "The fusion rolls are inventive and delicious.",
-          tag: "Recommended",
-          avatarSrc: "http://img.b2bpic.net/free-photo/elegant-woman-pink-jacket-spending-time-cafe_1157-32554.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/rice-sushi-with-crab-sticks_140725-1069.jpg?_wi=2",
-          imageAlt: "happy diner restaurant interior",
-        },
-        {
-          id: "3",
-          name: "Emily Rodriguez",
-          date: "Nov 2024",
-          title: "Regular",
-          quote: "Great service and even better sushi. Always reliable.",
-          tag: "Great Service",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/asian-ramen-noodle-soup-copy-space_23-2148494834.jpg?_wi=2",
-          imageAlt: "happy diner restaurant interior",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          date: "Oct 2024",
-          title: "First Timer",
-          quote: "My go-to spot for sushi nights now.",
-          tag: "New Fan",
-          avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-friends-taking-selfie_23-2149212129.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-salmon-eggs_74190-5960.jpg?_wi=2",
-          imageAlt: "happy diner restaurant interior",
-        },
-        {
-          id: "5",
-          name: "Laura Smith",
-          date: "Sep 2024",
-          title: "Local",
-          quote: "Authentic flavors with a lovely Montreal touch.",
-          tag: "Authentic",
-          avatarSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-30888.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/chocolate-dessert-cup-black-tea_140725-3381.jpg?_wi=2",
-          imageAlt: "happy diner restaurant interior",
-        },
-      ]}
-      title="Voices of Manga Bistro"
-      description="Hear what our loyal community says about their experience."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "What are your opening hours?",
-          content: "We are open Tuesday through Sunday from 11:30 AM to 10:00 PM.",
-        },
-        {
-          id: "f2",
-          title: "Where are you located?",
-          content: "We are located at 123 Sushi Lane, Montreal, QC.",
-        },
-        {
-          id: "f3",
-          title: "Can I order online?",
-          content: "Yes! You can order directly through our website menu section.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/happy-waiter-giving-beer-his-customers-while-serving-them-bar_637285-4028.jpg"
-      mediaAnimation="slide-up"
-      title="Common Questions"
-      description="Information regarding our hours, location, and ordering process."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       text="Have questions or need to reserve a table? Get in touch with us at Manga Bistro Montreal."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "mailto:hello@mangabistro.com",
-        },
-      ]}
+      buttons={[{ text: "Contact Us", href: "mailto:hello@mangabistro.com" }]}
     />
   </div>
 
@@ -335,45 +141,9 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Manga Bistro"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "123 Sushi Lane, Montreal",
-              href: "#",
-            },
-            {
-              label: "hello@mangabistro.com",
-              href: "mailto:hello@mangabistro.com",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Menu", href: "#menu" }] },
+        { title: "Contact", items: [{ label: "123 Sushi Lane, Montreal", href: "#" }, { label: "hello@mangabistro.com", href: "mailto:hello@mangabistro.com" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #1b0c25;
+  --primary-cta: #1b0c25;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #ff93e4;
+  --background-accent: #e8a8c3;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);