Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Flame } from "lucide-react";
+import { Flame, Star, Award, Users, Mail, Phone, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -125,15 +125,14 @@ export default function LandingPage() {
         </div>
 
         <div id="metrics" data-section="metrics">
-          <MetricCardTwo
+          <MetricCardThree
             animationType="slide-up"
             textboxLayout="split"
-            gridVariant="uniform-all-items-equal"
             useInvertedBackground={false}
             metrics={[
-              { id: "m1", value: "500+", description: "Private Events Hosted" },
-              { id: "m2", value: "98%", description: "Guest Satisfaction Rate" },
-              { id: "m3", value: "12+", description: "Signature Pizza Styles" },
+              { id: "m1", icon: Award, title: "Events", value: "500+" },
+              { id: "m2", icon: Star, title: "Satisfaction", value: "98%" },
+              { id: "m3", icon: Users, title: "Styles", value: "12+" },
             ]}
             title="Excellence in Numbers"
             description="A look at the quality and commitment we bring to every private event we host."
@@ -141,39 +140,40 @@ export default function LandingPage() {
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqSplitText
+          <FaqBase
             useInvertedBackground={false}
             faqs={[
               { id: "f1", title: "How many guests can you accommodate?", content: "We can cater private events ranging from intimate gatherings of 10 to larger parties of 100+ guests." },
               { id: "f2", title: "Do you offer vegan options?", content: "Absolutely. We pride ourselves on accommodating all dietary restrictions with delicious, high-quality plant-based options." },
               { id: "f3", title: "How far in advance should I book?", content: "We recommend booking at least 4-6 weeks in advance, especially during the summer and holiday season." },
             ]}
-            sideTitle="Questions? We have answers."
-            sideDescription="Feel free to reach out if your question isn't covered here."
+            title="Frequently Asked Questions"
+            description="Everything you need to know about our private dining service."
             faqsAnimation="slide-up"
+            textboxLayout="default"
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactCTA
+          <ContactSplit
             useInvertedBackground={false}
-            background={{ variant: "plain" }}
             tag="Contact Us"
-            title="Start Planning Your Private Pizza Night"
-            description="Ready to bring the taste of Italy to your next private event? Send us a message and let's craft a bespoke pizza experience for you."
-            buttons={[{ text: "Book Your Date", href: "mailto:info@pizzaioloprivate.com" }]}
+            title="Book Your Experience"
+            description="Send us a message to discuss your next private pizza night."
+            imageSrc="http://img.b2bpic.net/free-photo/chef-preparing-pizza_23-2148766854.jpg"
+            background={{ variant: "plain" }}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterBase
-            columns={[
-              { title: "Explore", items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#menu" }, { label: "Reviews", href: "#reviews" }] },
-              { title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Contact", href: "#contact" }] },
-              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
-            ]}
+          <FooterCard
             logoText="Pizzaiolo Private"
             copyrightText="© 2025 | Pizzaiolo Private Dining"
+            socialLinks={[
+              { icon: Mail, href: "#contact", ariaLabel: "Email" },
+              { icon: Phone, href: "#", ariaLabel: "Phone" },
+              { icon: MapPin, href: "#", ariaLabel: "Location" },
+            ]}
           />
         </div>
       </ReactLenis>