ded47ad4-e6aa-426e-98cd-0b109c90d93a/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
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 ContactForm from '@/components/form/ContactForm';
import { Sparkles, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider>
      <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: "Order Now", href: "/menu" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            title="A Tableside Tradition"
            description="Fine dining reimagined."
            tag="Voted Best in Town"
            rating={5}
            ratingText="Based on 500+ reviews"
            mediaItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg" },
              { imageSrc: "http://img.b2bpic.net/free-photo/steamed-bao-bun-with-braised-pork-belly-fresh-asian-slaw_84443-85877.jpg" }
            ]}
            tagIcon={Sparkles}
          />
        </div>

        <div id="about" data-section="about">
          <TextSplitAbout
            useInvertedBackground={true}
            title="Our Philosophy"
            description={["Fresh ingredients.", "Modern culinary magic."]}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            title="Modern Restaurant Experience"
            description="Designed for your comfort."
            features={[
              { id: "f1", title: "Mobile Responsive", subtitle: "Seamless.", category: "Design", value: "Smooth" },
              { id: "f2", title: "Online Ordering", subtitle: "Quick.", category: "Ordering", value: "Fast" }
            ]}
          />
        </div>

        <div id="menu" data-section="menu">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={true}
            title="Seasonal Menu"
            description="Carefully crafted dishes."
            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: "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" },
            ]}
          />
        </div>

        <div id="newsletter" data-section="newsletter">
          <ContactForm
            title="Stay Connected"
            description="Join our newsletter."
            tag="Join Us"
            tagIcon={Mail}
            useInvertedBackground={false}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFifteen
            testimonial="An absolute treasure!"
            rating={5}
            author="Samantha W."
            avatars={[{ src: "http://img.b2bpic.net/free-photo/women-eating-traditional-italian-pizza-together_52683-110888.jpg", alt: "Customer" }]}
            ratingAnimation="slide-up"
            avatarsAnimation="slide-up"
            useInvertedBackground={true}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
            textboxLayout="split"
            useInvertedBackground={false}
            faqs={[
              { id: "q1", title: "Do you take reservations?", content: "Yes, book online." },
              { id: "q2", title: "How do I RSVP?", content: "Use the website." },
            ]}
            title="FAQ"
            description="Common questions."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Visit Us"
            title="Reserve Your Seat"
            description="We are ready for you."
            buttons={[{ text: "Book" }]}
            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>
  );
}