Update src/app/reservations/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -32,83 +32,89 @@ export default function BuffetPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Epicure Buffet"
           navItems={[
-            { name: "Menu", id: "menu" },
-            { name: "Pricing", id: "pricing" },
+            { name: "Menu", id: "#menu" },
+            { name: "Pricing", id: "#pricing" },
             { name: "Our Story", id: "/our-story" },
             { name: "Careers", id: "/careers" },
             { name: "Contact Us", id: "/contact-us" },
           ]}
           button={{ text: "Book Now", href: "#contact" }}
         />
-        <HeroSplitDoubleCarousel
-          title="A Global Feast, Fresh Daily"
-          description="Indulge in an endless variety of premium sushi, fresh-caught seafood, and chef-curated international cuisines. Always freshly refilled for your perfect dining experience."
-          tag="🔥 87 people dining right now"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "canvas-reveal" }}
-          buttons={[
-            { text: "Reserve Your Table", href: "#contact" },
-            { text: "View Menu", href: "#menu" },
-          ]}
-          buttonAnimation="slide-up"
-          carouselPosition="right"
-          leftCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-variety-fish-delivery-sushi-package-different-types-rolls_132075-14235.jpg", imageAlt: "Freshly prepared sushi rolls" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/crawfish-plate_23-2150346588.jpg", imageAlt: "Premium crab and shrimp" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake_114579-16589.jpg", imageAlt: "Decadent dessert selection" },
-          ]}
-          rightCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1851.jpg", imageAlt: "Family dining atmosphere" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/waiter-carries-dish-with-snacks-walking-backyard_8353-9017.jpg", imageAlt: "Live refill stations" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/male-chef-kitchen-cooking_23-2148934672.jpg", imageAlt: "Chef at work" },
-          ]}
-          carouselItemClassName="!aspect-[4/5]"
-        />
-        <FeatureBento
-          title="The Epicure Experience"
-          description="We combine culinary variety with premium service to redefine the buffet concept."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            { 
-              title: "Live Refill Stations", 
-              description: "Our chefs monitor every tray, ensuring hot food is served at the perfect temperature.",              bentoComponent: "reveal-icon",              icon: Utensils
-            },
-            { 
-              title: "Always Fresh", 
-              description: "Sourcing premium seafood and seasonal produce daily for quality you can taste.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "http://img.b2bpic.net/free-photo/vegetables-stall-market-sanarysurmer_268835-3890.jpg", imageAlt: "Fresh ingredients" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/beef-with-pistachio-topping-served-with-fruits-berries_7502-7390.jpg", imageAlt: "Plated dishes" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/culinary-expert-commercial-kitchen-prepares-dish-with-fresh-basil-parsley_482257-124314.jpg", imageAlt: "Chef station" }
-              ]
-            },
-            { 
-              title: "Improved Desserts", 
-              description: "Discover our expanded dessert bar with artisan pastries and seasonal fruits.",              bentoComponent: "reveal-icon",              icon: Smile
-            }
-          ]}
-        />
-        <PricingCardFive
-          title="Transparent Value"
-          description="Choose the perfect dining time for you and your family."
-          textboxLayout="split-actions"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          plans={[
-            {
-                id: "lunch",                tag: "Most Popular",                tagIcon: Star,
-                price: "$15.99",                period: "per person",                description: "Full access to our lunch selection until 4:00 PM.",                button: { text: "Reserve Lunch", href: "#contact" },
-                featuresTitle: "Includes:",                features: ["All Lunch Stations", "Soft Drinks", "Fresh Sushi Bar"]
-            },
-            {
-                id: "dinner",                tag: "Premium Choice",                tagIcon: Award,
-                price: "$29.99",                period: "per person",                description: "Complete dinner experience with full seafood bar.",                button: { text: "Reserve Dinner", href: "#contact" },
-                featuresTitle: "Includes:",                features: ["All Lunch Features", "Premium Crab Legs", "Chef Specials"]
-            }
-          ]}
-        />
+        <div id="hero">
+          <HeroSplitDoubleCarousel
+            title="A Global Feast, Fresh Daily"
+            description="Indulge in an endless variety of premium sushi, fresh-caught seafood, and chef-curated international cuisines. Always freshly refilled for your perfect dining experience."
+            tag="🔥 87 people dining right now"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            background={{ variant: "canvas-reveal" }}
+            buttons={[
+              { text: "Reserve Your Table", href: "#contact" },
+              { text: "View Menu", href: "#menu" },
+            ]}
+            buttonAnimation="slide-up"
+            carouselPosition="right"
+            leftCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-variety-fish-delivery-sushi-package-different-types-rolls_132075-14235.jpg", imageAlt: "Freshly prepared sushi rolls" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/crawfish-plate_23-2150346588.jpg", imageAlt: "Premium crab and shrimp" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake_114579-16589.jpg", imageAlt: "Decadent dessert selection" },
+            ]}
+            rightCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1851.jpg", imageAlt: "Family dining atmosphere" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/waiter-carries-dish-with-snacks-walking-backyard_8353-9017.jpg", imageAlt: "Live refill stations" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/male-chef-kitchen-cooking_23-2148934672.jpg", imageAlt: "Chef at work" },
+            ]}
+            carouselItemClassName="!aspect-[4/5]"
+          />
+        </div>
+        <div id="menu">
+          <FeatureBento
+            title="The Epicure Experience"
+            description="We combine culinary variety with premium service to redefine the buffet concept."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            features={[
+              { 
+                title: "Live Refill Stations", 
+                description: "Our chefs monitor every tray, ensuring hot food is served at the perfect temperature.",              bentoComponent: "reveal-icon",              icon: Utensils
+              },
+              { 
+                title: "Always Fresh", 
+                description: "Sourcing premium seafood and seasonal produce daily for quality you can taste.",              bentoComponent: "media-stack",              items: [
+                  { imageSrc: "http://img.b2bpic.net/free-photo/vegetables-stall-market-sanarysurmer_268835-3890.jpg", imageAlt: "Fresh ingredients" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/beef-with-pistachio-topping-served-with-fruits-berries_7502-7390.jpg", imageAlt: "Plated dishes" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/culinary-expert-commercial-kitchen-prepares-dish-with-fresh-basil-parsley_482257-124314.jpg", imageAlt: "Chef station" }
+                ]
+              },
+              { 
+                title: "Improved Desserts", 
+                description: "Discover our expanded dessert bar with artisan pastries and seasonal fruits.",              bentoComponent: "reveal-icon",              icon: Smile
+              }
+            ]}
+          />
+        </div>
+        <div id="pricing">
+          <PricingCardFive
+            title="Transparent Value"
+            description="Choose the perfect dining time for you and your family."
+            textboxLayout="split-actions"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            plans={[
+              {
+                  id: "lunch",                tag: "Most Popular",                tagIcon: Star,
+                  price: "$15.99",                period: "per person",                description: "Full access to our lunch selection until 4:00 PM.",                button: { text: "Reserve Lunch", href: "#contact" },
+                  featuresTitle: "Includes:",                features: ["All Lunch Stations", "Soft Drinks", "Fresh Sushi Bar"]
+              },
+              {
+                  id: "dinner",                tag: "Premium Choice",                tagIcon: Award,
+                  price: "$29.99",                period: "per person",                description: "Complete dinner experience with full seafood bar.",                button: { text: "Reserve Dinner", href: "#contact" },
+                  featuresTitle: "Includes:",                features: ["All Lunch Features", "Premium Crab Legs", "Chef Specials"]
+              }
+            ]}
+          />
+        </div>
         <TestimonialCardTwelve
           cardTitle="Join 10,000+ Happy Guests"
           cardTag="Testimonials"
@@ -143,22 +149,24 @@ export default function BuffetPage() {
             { id: "4", title: "Do I need to reserve?", content: "While walk-ins are welcome, weekend dining fills up fast. We recommend booking in advance to ensure your table is waiting." }
           ]}
         />
-        <ContactCTA
-          tag="Hurry, Seats Filling Fast"
-          title="Join Us Tonight"
-          description="Urgency Alert: Peak hours filling up. Book now to guarantee your spot for an exceptional evening."
-          background={{ variant: "rotated-rays-animated" }}
-          buttons={[
-            { text: "Reserve Now", href: "#contact" }
-          ]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
+        <div id="contact">
+          <ContactCTA
+            tag="Hurry, Seats Filling Fast"
+            title="Join Us Tonight"
+            description="Urgency Alert: Peak hours filling up. Book now to guarantee your spot for an exceptional evening."
+            background={{ variant: "rotated-rays-animated" }}
+            buttons={[
+              { text: "Reserve Now", href: "/contact-us" }
+            ]}
+            buttonAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
         <FooterBase
           logoText="Epicure Buffet"
           copyrightText="© 2026 | Epicure Buffet"
           columns={[
-            { title: "Dining", items: [{ label: "Lunch Menu", href: "#" }, { label: "Dinner Menu", href: "#" }] },
+            { title: "Dining", items: [{ label: "Lunch Menu", href: "#menu" }, { label: "Dinner Menu", href: "#menu" }] },
             { title: "Company", items: [{ label: "Our Story", href: "/our-story" }, { label: "Careers", href: "/careers" }] },
             { title: "Support", items: [{ label: "Reservations", href: "#contact" }, { label: "Contact Us", href: "/contact-us" }] },
           ]}

src/app/reservations/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ReactLenis from "lenis/react";
+
+export default function ReservationsPage() {
+  const [formData, setFormData] = useState({ name: "", date: "", guests: "" });
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name || !formData.date || !formData.guests) {
+      setStatus("error");
+      return;
+    }
+    localStorage.setItem("booking", JSON.stringify(formData));
+    setStatus("success");
+  };
+
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      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
+            brandName="Epicure Buffet"
+            navItems={[{ name: "Home", id: "/" }, { name: "Reservations", id: "/reservations" }]}
+          />
+        </div>
+        <main className="min-h-screen pt-32 flex flex-col items-center justify-center p-6">
+          <h1 className="text-4xl font-bold mb-8">Book Your Table</h1>
+          <form onSubmit={handleSubmit} className="bg-card p-8 rounded-xl shadow-lg w-full max-w-md space-y-4">
+            <input 
+              type="text" placeholder="Name" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, name: e.target.value})}
+            />
+            <input 
+              type="date" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, date: e.target.value})}
+            />
+            <input 
+              type="number" placeholder="Guests" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, guests: e.target.value})}
+            />
+            <button type="submit" className="w-full bg-primary-cta text-white py-2 rounded">Confirm Booking</button>
+          </form>
+          {status === "success" && <p className="mt-4 text-green-600">Booking successful!</p>}
+          {status === "error" && <p className="mt-4 text-red-600">Please fill in all fields.</p>}
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}