Update src/app/reservations/page.tsx

Merge version_5 into main

src/app/careers/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBase from "@/components/sections/footer/FooterBase";
+
+export default function CareersPage() {
+  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: "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" }}
+          />
+        </div>
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-5xl font-bold mb-8">Careers</h1>
+          <p className="text-lg mb-6">Join our team of passionate culinary enthusiasts. We're always looking for talented individuals who value fresh, quality ingredients and exceptional customer service.</p>
+          <h2 className="text-2xl font-semibold mt-10 mb-4">Open Positions</h2>
+          <ul className="list-disc pl-6 space-y-2">
+            <li>Line Cook</li>
+            <li>Front of House Manager</li>
+            <li>Server Assistant</li>
+          </ul>
+        </div>
+        <FooterBase
+          logoText="Epicure Buffet"
+          copyrightText="© 2026 | Epicure Buffet"
+          columns={[
+            { 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" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact-us/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBase from "@/components/sections/footer/FooterBase";
+
+export default function ContactUsPage() {
+  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: "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" }}
+          />
+        </div>
+        <div className="pt-32 pb-20" id="contact" data-section="contact">
+            <ContactSplitForm
+                title="Get in Touch"
+                description="Have a special request or a question about your upcoming reservation? Let us know."
+                inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]} 
+                textarea={{ name: "message", placeholder: "How can we help?", rows: 4 }}
+                useInvertedBackground={false}
+            />
+        </div>
+        <FooterBase
+          logoText="Epicure Buffet"
+          copyrightText="© 2026 | Epicure Buffet"
+          columns={[
+            { 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" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/our-story/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBase from "@/components/sections/footer/FooterBase";
+
+export default function OurStoryPage() {
+  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: "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" }}
+          />
+        </div>
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-5xl font-bold mb-8">Our Story</h1>
+          <p className="text-lg mb-6 leading-relaxed">Founded in 2015, Epicure Buffet began with a single vision: to transform the way people experience all-you-can-eat dining. We believed that quality shouldn't be sacrificed for variety.</p>
+          <p className="text-lg leading-relaxed">Today, we source our ingredients from local farmers and premium global suppliers to bring you a dining experience that feels both indulgent and fresh.</p>
+        </div>
+        <FooterBase
+          logoText="Epicure Buffet"
+          copyrightText="© 2026 | Epicure Buffet"
+          columns={[
+            { 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" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,33 +1,20 @@
 "use client";
 
-import ReactLenis, { useLenis } from "lenis/react";
+import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
+import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
+import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
 import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import { Sparkles, Award, Star } from "lucide-react";
+import { Sparkles, Utensils, Award, Star, Smile } from "lucide-react";
 
 export default function BuffetPage() {
-  const lenis = useLenis();
-
-  const handleScroll = (id: string) => {
-    const targetId = id.replace(/^#+/, "");
-    const element = document.getElementById(targetId);
-    if (element && lenis) {
-      lenis.scrollTo(element);
-    } else {
-      const target = document.getElementById(targetId);
-      if (target) {
-        target.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -37,7 +24,7 @@ export default function BuffetPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="metallic"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -45,17 +32,15 @@ export default function BuffetPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Epicure Buffet"
           navItems={[
-            { name: "Menu", id: "menu" },
-            { name: "Pricing", id: "pricing" },
-            { name: "Experience", id: "about" },
-            { name: "Reserve", id: "contact" },
+            { 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", 
-            onClick: () => handleScroll("#contact") 
-          }}
+          button={{ text: "Book Now", href: "#contact" }}
         />
-        <div id="home">
+        <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."
@@ -64,15 +49,15 @@ export default function BuffetPage() {
             tagAnimation="slide-up"
             background={{ variant: "canvas-reveal" }}
             buttons={[
-              { text: "Reserve Your Table", onClick: () => handleScroll("#contact") },
-              { text: "View Menu", onClick: () => handleScroll("#menu") },
+              { 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?_wi=1", imageAlt: "Freshly prepared sushi rolls" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/crawfish-plate_23-2150346588.jpg?_wi=1", imageAlt: "Premium crab and shrimp" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake_114579-16589.jpg?_wi=1", imageAlt: "Decadent dessert selection" },
+              { 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" },
@@ -82,24 +67,33 @@ export default function BuffetPage() {
             carouselItemClassName="!aspect-[4/5]"
           />
         </div>
-
         <div id="menu">
-          <ProductCardThree
-            title="Our Premium Menu Selection"
-            description="From fresh ocean catches to artisanal desserts, discover our curated culinary selection."
-            gridVariant="four-items-2x2-equal-grid"
-            animationType="slide-up"
+          <FeatureBento
+            title="The Epicure Experience"
+            description="We combine culinary variety with premium service to redefine the buffet concept."
             textboxLayout="default"
             useInvertedBackground={false}
-            products={[
-              { id: "1", name: "Signature Sushi Roll", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-variety-fish-delivery-sushi-package-different-types-rolls_132075-14235.jpg?_wi=2" },
-              { id: "2", name: "Alaskan Crab Legs", price: "$24.00", imageSrc: "http://img.b2bpic.net/free-photo/crawfish-plate_23-2150346588.jpg?_wi=2" },
-              { id: "3", name: "Artisan Cheesecake", price: "$8.00", imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake_114579-16589.jpg?_wi=2" },
-              { id: "4", name: "Seasonal Fruit Platter", price: "$9.00", imageSrc: "http://img.b2bpic.net/free-photo/fresh-fruit-platter_144627-26478.jpg" }
+            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"
@@ -108,51 +102,76 @@ export default function BuffetPage() {
             animationType="slide-up"
             useInvertedBackground={false}
             plans={[
-              { id: "lunch", period: "per person", description: "Great for quick lunches.", featuresTitle: "Lunch Amenities", tag: "Most Popular", tagIcon: Star, price: "$15.99", button: { text: "Reserve Lunch", onClick: () => handleScroll("#contact") }, features: ["All Lunch Stations", "Soft Drinks", "Fresh Sushi Bar"] },
-              { id: "dinner", period: "per person", description: "Full evening indulgence.", featuresTitle: "Dinner Amenities", tag: "Premium Choice", tagIcon: Award, price: "$29.99", button: { text: "Reserve Dinner", onClick: () => handleScroll("#contact") }, features: ["All Lunch Features", "Premium Crab Legs", "Chef Specials"] }
+              {
+                  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>
-
-        <div id="about">
-          <TestimonialCardTwelve
-            cardTitle="Join 10,000+ Happy Guests"
-            cardTag="Testimonials"
-            cardTagIcon={Star}
-            cardAnimation="slide-up"
-            useInvertedBackground={true}
-            testimonials={[
-              { id: "1", name: "Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-enjoying-dining-table-while-communicating-with-her-husband_637285-3516.jpg" },
-              { id: "2", name: "Mark Thompson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man_23-2148213458.jpg" }
-            ]}
-          />
-        </div>
-
+        <TestimonialCardTwelve
+          cardTitle="Join 10,000+ Happy Guests"
+          cardTag="Testimonials"
+          cardTagIcon={Star}
+          cardAnimation="slide-up"
+          useInvertedBackground={true}
+          testimonials={[
+            { id: "1", name: "Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-enjoying-dining-table-while-communicating-with-her-husband_637285-3516.jpg" },
+            { id: "2", name: "Mark Thompson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man_23-2148213458.jpg" },
+            { id: "3", name: "Elena Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-looking-away_23-2148213451.jpg" }
+          ]}
+        />
+        <FeatureCardSixteen
+          title="Our Commitment to Excellence"
+          description="We prioritize your satisfaction above all else."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          negativeCard={{ items: ["Cold dishes in the past", "Long queues", "Service delays", "Limited dessert variety"] }}
+          positiveCard={{ items: ["Steaming hot food always", "Live kitchen support", "Attentive hospitality", "Upgraded dessert collection"] }}
+        />
         <FaqBase
           title="Frequently Asked Questions"
           description="Have questions about your reservation?"
-          faqsAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          faqs={[{ id: "1", title: "Do you offer senior discounts?", content: "Yes, we offer special rates for seniors available during our lunch hours upon request." }]}
+          faqsAnimation="slide-up"
+          faqs={[
+            { id: "1", title: "Do you offer senior discounts?", content: "Yes, we offer special rates for seniors available during our lunch hours upon request." },
+            { id: "2", title: "How often is the food replaced?", content: "Our team operates a live kitchen system, meaning trays are monitored and replaced the moment they drop below capacity." },
+            { id: "3", title: "Is the buffet kid-friendly?", content: "Absolutely! We have dedicated stations with family favorites that children love, alongside our premium seafood and sushi options." },
+            { 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." }
+          ]}
         />
-        
         <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}
-            buttons={[{ text: "Reserve Now", onClick: () => handleScroll("#contact") }]}
           />
         </div>
-
         <FooterBase
           logoText="Epicure Buffet"
-          columns={[{ title: "Dining", items: [{ label: "Lunch Menu", href: "#" }] }]}
+          copyrightText="© 2026 | Epicure Buffet"
+          columns={[
+            { 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" }] },
+          ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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>
+  );
+}