src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactForm from '@/components/form/ContactForm';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import { Pizza, ShoppingBag, Timer, Star } from "lucide-react";
 
 export default function DominoLandingPage() {
@@ -29,7 +28,7 @@ export default function DominoLandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-        <div id="nav">
+        <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             navItems={[
               { name: "Menu", id: "products" },
@@ -42,106 +41,85 @@ export default function DominoLandingPage() {
           />
         </div>
 
-        <div id="hero">
+        <div id="hero" data-section="hero">
-          <HeroOverlay
+          <HeroBillboard
             title="Domino's: Hot, Fresh, Delivered."
             description="Authentic pizza recipes delivered to your door in 30 minutes or less. Quality ingredients, perfected crusts."
-            buttons={[{ text: "Start Your Order", href: "#products" }, { text: "View Our Deals", href: "#products" }]}
+            background={{ variant: "gradient-bars" }}
-            showBlur={true}
+            buttons={[{ text: "Start Your Order", href: "#products" }]}
-            textPosition="bottom"
             imageSrc="https://img.freepik.com/free-photo/fresh-tasty-pizza_144627-148.jpg"
           />
         </div>
 
-        <div id="about">
+        <div id="products" data-section="products">
-          <InlineImageSplitTextAbout
+          <ProductCardOne
-            heading={[{ type: 'text', content: "The Original Pizza Experts" }]}
-            useInvertedBackground={false}
-            buttons={[{ text: "Our History" }]}
-          />
-        </div>
-
-        <div id="features">
-          <FeatureHoverPattern
-            animationType="slide-up"
-            title="What Makes Us Different"
-            description="Quality you can taste in every single bite."
-            textboxLayout="split"
-            useInvertedBackground={false}
-            features={[
-              { icon: Pizza, title: "Fresh Dough", description: "Hand-stretched every single morning." },
-              { icon: ShoppingBag, title: "Fast Delivery", description: "GPS tracking for your hot meal." },
-              { icon: Timer, title: "Consistent Quality", description: "Perfect ovens for perfect results." }
-            ]}
-          />
-        </div>
-
-        <div id="products">
-          <ProductCardTwo
             title="Our Best Sellers"
             description="Fan favorites that keep the world coming back."
-            animationType="slide-up"
             gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
             textboxLayout="split"
             useInvertedBackground={false}
             products={[
-              { id: "p1", brand: "Domino's", name: "Pepperoni Passion", price: "$14.99", rating: 5, reviewCount: "2k", imageSrc: "https://img.freepik.com/free-photo/pepperoni-pizza_144627-164.jpg" },
+              { id: "p1", name: "Pepperoni Passion", price: "$14.99", imageSrc: "https://img.freepik.com/free-photo/pepperoni-pizza_144627-164.jpg" },
-              { id: "p2", brand: "Domino's", name: "Veggie Delite", price: "$13.99", rating: 4, reviewCount: "1.5k", imageSrc: "https://img.freepik.com/free-photo/vegetable-pizza_144627-152.jpg" }
+              { id: "p2", name: "Veggie Delite", price: "$13.99", imageSrc: "https://img.freepik.com/free-photo/vegetable-pizza_144627-152.jpg" },
+              { id: "p3", name: "Cheese Feast", price: "$12.99", imageSrc: "https://img.freepik.com/free-photo/fresh-tasty-pizza_144627-148.jpg" }
             ]}
           />
         </div>
 
-        <div id="metrics">
+        <div id="metrics" data-section="metrics">
-          <MetricCardFourteen
+          <MetricCardSeven
             title="Domino's By The Numbers"
             tag="Our Impact"
-            metricsAnimation="slide-up"
-            metrics={[
-              { id: "m1", value: "5000+", description: "Global store locations" },
-              { id: "m2", value: "30m", description: "Average delivery time" }
-            ]}
-          />
-        </div>
-
-        <div id="testimonials">
-          <TestimonialCardThirteen
-            title="Hear From Our Fans"
-            description="Stories from our happy pizza lovers."
-            showRating={true}
             animationType="slide-up"
             textboxLayout="split"
-            testimonials={[
+            useInvertedBackground={false}
-              { id: "t1", name: "Alex R.", handle: "@alexr", testimonial: "Always hot, always delicious!", rating: 5, icon: Star }
+            metrics={[
+              { id: "m1", value: "5000+", title: "Global store locations", items: [] },
+              { id: "m2", value: "30m", title: "Average delivery time", items: [] }
             ]}
           />
         </div>
 
-        <div id="faq">
+        <div id="testimonials" data-section="testimonials">
-          <FaqDouble
+          <TestimonialCardTwelve
-            title="Frequently Asked Questions"
+            cardTitle="Hear From Our Fans"
-            description="Got questions? We have answers."
+            cardTag="Reviews"
-            faqsAnimation="slide-up"
+            cardAnimation="slide-up"
-            textboxLayout="split"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Alex R.", imageSrc: "https://img.freepik.com/free-photo/happy-customer_123.jpg" }
+            ]}
+          />
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqSplitText
             faqs={[
               { id: "q1", title: "Is there a delivery fee?", content: "Standard delivery rates apply based on distance." },
               { id: "q2", title: "Can I change my order?", content: "Updates are possible before the kitchen starts baking." }
             ]}
+            sideTitle="Frequently Asked Questions"
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
 
-        <div id="contact">
+        <div id="contact" data-section="contact">
-          <ContactForm
+          <ContactSplitForm
             title="Support Center"
             description="Need help with a recent order? Our team is here to assist you."
-            tag="Contact Support"
+            inputs={[
-            buttonText="Send Message"
+              { name: "name", type: "text", placeholder: "Full Name" },
+              { name: "email", type: "email", placeholder: "Email Address" }
+            ]}
+            useInvertedBackground={false}
           />
         </div>
 
-        <div id="footer">
+        <div id="footer" data-section="footer">
-          <FooterBaseCard
+          <FooterCard
             logoText="Domino's"
-            columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }]}
           />
         </div>
       </ReactLenis>