Merge version_4 into main

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="blurBottom"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+              navItems={[
+                { name: "Our Story", id: "/about" },
+                { name: "Menu", id: "/menu" },
+                { name: "Events", id: "/events" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="The Table"
+              button={{ text: "Order Now", href: "/menu" }}
+            />
+        </div>
+
+        <div id="about" data-section="about">
+            <TextSplitAbout
+              useInvertedBackground={true}
+              title="Our Story"
+              description={[
+                "The Table was born from a simple desire: to bring people together through the art of fine dining.",                "Our community-focused philosophy ensures that every ingredient we serve is locally sourced, seasonal, and prepared with love.",                "We believe that great food is the cornerstone of great memories."
+              ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterCard logoText="The Table" copyrightText="© 2025 The Table Restaurant" />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="The Table"
+            button={{ text: "Book Now", href: "/contact" }}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Get In Touch"
+            title="We'd Love to Hear From You"
+            description="Whether you have questions about our menu, want to book a private event, or just want to say hi, we're here to help."
+            buttons={[{ text: "Call Us", href: "tel:+1234567890" }, { text: "Email Us", href: "mailto:hello@thetable.com" }]}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/events/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function EventsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="The Table"
+            button={{ text: "Book Now", href: "/contact" }}
+          />
+        </div>
+        <div className="pt-24">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Upcoming Events"
+            description="Join us for exclusive dining events, tastings, and community gatherings."
+            metrics={[
+              { id: "e1", value: "Wine Tasting", title: "Friday, 7:00 PM", items: ["Fine wine", "Cheese pairings"] },
+              { id: "e2", value: "Coffee Workshop", title: "Saturday, 10:00 AM", items: ["Learn to brew", "Expert tips"] },
+            ]}
+          />
+        </div>
+        <FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/menu/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="The Table"
+            button={{ text: "Book Now", href: "/contact" }}
+          />
+        </div>
+        <div className="pt-24">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="Our Menu"
+            description="Discover our curated selection of fine coffees and exquisite wines."
+            products={[
+              { id: "c1", name: "Signature Espresso", price: "$4", imageSrc: "https://images.unsplash.com/photo-1510707577719-ae7c14805e3a?q=80&w=600" },
+              { id: "c2", name: "Pour Over Coffee", price: "$6", imageSrc: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?q=80&w=600" },
+              { id: "w1", name: "Pinot Noir", price: "$12/glass", imageSrc: "https://images.unsplash.com/photo-1553361371-9b22f780351d?q=80&w=600" },
+            ]}
+          />
+        </div>
+        <FooterBaseReveal logoText="The Table" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,214 +2,143 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Sparkles } from "lucide-react";
+import ContactForm from '@/components/form/ContactForm';
+import { Sparkles, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
-    <ThemeProvider
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
-        contentWidth="compact"
-        sizing="largeSmall"
-        background="blurBottom"
-        cardStyle="glass-depth"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
-    >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Our Story",          id: "about"},
+              { name: "Menu", id: "/menu" },
-        {
+              { name: "Events", id: "/events" },
-          name: "Menu",          id: "menu"},
+              { name: "Contact", id: "/contact" },
-        {
+            ]}
-          name: "Events",          id: "events"},
+            brandName="The Table"
-        {
+            button={{ text: "Book Now", href: "/contact" }}
-          name: "Contact",          id: "contact"},
+          />
-      ]}
+        </div>
-      brandName="The Table"
-      button={{
-        text: "Order Now",        href: "#menu"}}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+          <HeroSplitDualMedia
-      background={{
+            title="A Tableside Tradition"
-        variant: "gradient-bars"}}
+            description="Fine dining reimagined."
-      title="A Tableside Tradition"
+            tag="Voted Best in Town"
-      description="Experience fine dining reimagined with fresh local ingredients and a warm, welcoming atmosphere in the heart of the city."
+            rating={5}
-      tag="Voted Best in Town"
+            ratingText="Based on 500+ reviews"
-      buttons={[
+            mediaItems={[
-        {
+              { imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg" },
-          text: "Book Table",          href: "#contact"},
+              { imageSrc: "http://img.b2bpic.net/free-photo/steamed-bao-bun-with-braised-pork-belly-fresh-asian-slaw_84443-85877.jpg" }
-        {
+            ]}
-          text: "View Menu",          href: "#menu"},
+            tagIcon={Sparkles}
-      ]}
+            background={{ variant: "sparkles-gradient" }}
-      mediaItems={[
+          />
-        {
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg",          imageAlt: "Restaurant Interior"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/steamed-bao-bun-with-braised-pork-belly-fresh-asian-slaw_84443-85877.jpg",          imageAlt: "Chef Plating Dish"}
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Based on 500+ glowing reviews"
-      tagIcon={Sparkles}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TextSplitAbout
+          <TextSplitAbout
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      title="Our Philosophy"
+            title="Our Philosophy"
-      description={[
+            description={["Fresh ingredients.", "Modern culinary magic."]}
-        "Founded on a love for community, our kitchen celebrates the journey of fresh, seasonal ingredients from local farms directly to your table.",        "Every dish is crafted with purpose, passion, and a touch of modern culinary magic."]}
+          />
-    />
+        </div>
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyEight
+          <FeatureCardTwentyEight
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      features={[
+            title="Modern Restaurant Experience"
-        {
+            description="Designed for your comfort."
-          id: "f1",          title: "Mobile Responsive",          subtitle: "View our menu effortlessly on any device.",          category: "Service",          value: "100%"},
+            features={[
-        {
+              { id: "f1", title: "Mobile Responsive", subtitle: "Seamless.", category: "Design", value: "Smooth" },
-          id: "f2",          title: "Online Ordering",          subtitle: "Order your favorite meals ahead with one click.",          category: "Convenience",          value: "Fast"},
+              { id: "f2", title: "Online Ordering", subtitle: "Quick.", category: "Ordering", value: "Fast" }
-        {
+            ]}
-          id: "f3",          title: "Event RSVP",          subtitle: "Manage your event attendance with ease.",          category: "Booking",          value: "Easy"},
+          />
-        {
+        </div>
-          id: "f4",          title: "Newsletter Signup",          subtitle: "Join our community for updates and perks.",          category: "Community",          value: "Join"},
-        {
-          id: "f5",          title: "Social Feed",          subtitle: "Follow our culinary journey on Instagram.",          category: "Social",          value: "Live"},
-      ]}
-      title="Modern Restaurant Amenities"
-      description="Designed for your comfort and connection, our digital-first approach ensures a seamless experience from booking to dining."
-    />
-  </div>
 
-  <div id="menu" data-section="menu">
+        <div id="menu" data-section="menu">
-      <ProductCardOne
+          <ProductCardOne
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      products={[
+            title="Seasonal Menu"
-        {
+            description="Carefully crafted dishes."
-          id: "p1",          name: "Artisan Bread Basket",          price: "$12",          imageSrc: "http://img.b2bpic.net/free-photo/sliced-greenery-vegetables-pomegranate-arils-plate_114579-86474.jpg"},
+            products={[
-        {
+              { id: "p1", name: "Bread", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/sliced-greenery-vegetables-pomegranate-arils-plate_114579-86474.jpg" },
-          id: "p2",          name: "Seared Prime Steak",          price: "$48",          imageSrc: "http://img.b2bpic.net/free-photo/fried-eggplant-with-tomatoes-sesame-seeds-plate_140725-9191.jpg"},
+              { id: "p2", name: "Steak", price: "$48", imageSrc: "http://img.b2bpic.net/free-photo/fried-eggplant-with-tomatoes-sesame-seeds-plate_140725-9191.jpg" },
-        {
+              { id: "p3", name: "Pasta", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/vegan-pasta-white-plate_23-2148305758.jpg" },
-          id: "p3",          name: "Homemade Basil Pasta",          price: "$28",          imageSrc: "http://img.b2bpic.net/free-photo/vegan-pasta-white-plate_23-2148305758.jpg"},
+            ]}
-        {
+          />
-          id: "p4",          name: "Pan-Seared Sea Bass",          price: "$36",          imageSrc: "http://img.b2bpic.net/free-photo/delicious-dish-with-quinoa-meat_181624-28743.jpg"},
+        </div>
-        {
-          id: "p5",          name: "Dark Chocolate Mousse",          price: "$14",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-little-delicious-cake-with-chocolate-raisins-light-dark-background_140725-132620.jpg"},
-        {
-          id: "p6",          name: "Fresh Harvest Salad",          price: "$18",          imageSrc: "http://img.b2bpic.net/free-photo/bowl-salad-with-fried-potatoes-arugula-cucumber-lettuce-yoghurt_140725-1500.jpg"},
-      ]}
-      title="Seasonal Menu Highlights"
-      description="Artisanal ingredients meet culinary expertise in every curated plate we serve."
-    />
-  </div>
 
-  <div id="events" data-section="events">
+        <div id="newsletter" data-section="newsletter">
-      <MetricCardEleven
+          <ContactForm
-      animationType="slide-up"
+            title="Stay Connected"
-      textboxLayout="split"
+            description="Join our newsletter."
-      useInvertedBackground={false}
+            tag="Join Us"
-      metrics={[
+            tagIcon={Mail}
-        {
+            useInvertedBackground={false}
-          id: "m1",          value: "15K+",          title: "Happy Guests Served",          description: "Delivering excellence at every seat.",          imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-having-dinner-together_23-2148454081.jpg"},
+          />
-        {
+        </div>
-          id: "m2",          value: "24",          title: "Industry Awards",          description: "Celebrating culinary excellence and innovation.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-black-plates-with-golden-spoons-dark-background-color-food-cutlery-restaurant-dinner-cafe_179666-19702.jpg"},
-        {
-          id: "m3",          value: "12",          title: "Local Farms Partners",          description: "Directly sourcing sustainable ingredients.",          imageSrc: "http://img.b2bpic.net/free-photo/girl-slices-vegetables-board-prepares-salad-nature-sunny-day-cooking-close-up-view_78826-3100.jpg"},
-      ]}
-      title="Community Milestones"
-      description="Our passion drives impact in our local community through shared dining and meaningful gathering."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+          <TestimonialCardFifteen
-      useInvertedBackground={true}
+            testimonial="An absolute treasure!"
-      testimonial="An absolute treasure in the city! Every visit feels like coming home. The service, the food, and the vibe are unmatched."
+            rating={5}
-      rating={5}
+            author="Samantha W."
-      author="Samantha W."
+            avatars={[{ src: "http://img.b2bpic.net/free-photo/women-eating-traditional-italian-pizza-together_52683-110888.jpg", alt: "Customer" }]}
-      avatars={[
+            ratingAnimation="slide-up"
-        {
+            avatarsAnimation="slide-up"
-          src: "http://img.b2bpic.net/free-photo/women-eating-traditional-italian-pizza-together_52683-110888.jpg",          alt: "Customer"},
+            useInvertedBackground={true}
-        {
+          />
-          src: "http://img.b2bpic.net/free-photo/low-angle-friends-shaking-hands_23-2148395404.jpg",          alt: "Customer"},
+        </div>
-        {
-          src: "http://img.b2bpic.net/free-photo/high-angle-friends-restaurant_23-2148395392.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/salad-with-oil-fresh-tomatoes-colourful-bell-peppers-red-beans_140725-10631.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/good-humoured-caucasian-woman-enjoying-healthy-food-indoor-shot-smiling-girl-eating-salad_197531-17196.jpg",          alt: "Customer"},
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqSplitMedia
+          <FaqSplitMedia
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      faqs={[
+            faqs={[
-        {
+              { id: "q1", title: "Do you take reservations?", content: "Yes, book online." },
-          id: "q1",          title: "Do you take reservations?",          content: "Yes, we highly recommend booking in advance through our website."},
+              { id: "q2", title: "How do I RSVP?", content: "Use the website." },
-        {
+            ]}
-          id: "q2",          title: "Are you pet friendly?",          content: "Our patio area is pet friendly, though indoors is reserved for human diners."},
+            title="FAQ"
-        {
+            description="Common questions."
-          id: "q3",          title: "Do you offer private dining?",          content: "Absolutely! Contact us for private event packages and availability."},
+            faqsAnimation="slide-up"
-      ]}
+          />
-      imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-working-service-industry_23-2150722790.jpg"
+        </div>
-      mediaAnimation="slide-up"
-      title="Got Questions?"
-      description="Here is everything you need to know about dining at The Table."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactText
+          <ContactCTA
-      useInvertedBackground={true}
+            tag="Visit Us"
-      background={{
+            title="Reserve Your Seat"
-        variant: "sparkles-gradient"}}
+            description="We are ready for you."
-      text="Ready for your next favorite meal? Let us save you a seat."
+            buttons={[{ text: "Book" }]}
-      buttons={[
+            background={{ variant: "sparkles-gradient" }}
-        {
+            useInvertedBackground={false}
-          text: "Contact Us",          href: "mailto:hello@thetable.com"},
+          />
-      ]}
+        </div>
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterCard
+          <FooterBaseReveal
-      logoText="The Table"
+            logoText="The Table"
-      copyrightText="© 2025 The Table Restaurant"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-    />
+          />
-  </div>
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,14 +10,14 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #fdfaf6;
-  --card: #dad6cd;
+  --card: #f3eee7;
-  --foreground: #2a2928;
+  --foreground: #4a3b32;
-  --primary-cta: #2a2928;
+  --primary-cta: #7a5c48;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #e8e0d5;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #b8a89c;
   --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */