Switch to version 2: modified src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Award, Clock, Star } from "lucide-react";
 
 export default function LandingPage() {
@@ -69,38 +69,58 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="A Legacy of Taste"
-      description={["Rooted in generations of culinary expertise, we source the finest hand-harvested ingredients to ensure every dish honors the authentic spirit of Mediterranean cooking."]}
+      description="Rooted in generations of culinary expertise, we source the finest hand-harvested ingredients to ensure every dish honors the authentic spirit of Mediterranean cooking."
+      metrics={[
+        { value: "15+", title: "Years of Tradition" },
+        { value: "100%", title: "Natural Ingredients" },
+        { value: "5000+", title: "Happy Guests" },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/chef-putting-ingredients-bowl_23-2148491238.jpg"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSixteen
+      <FeatureCardNine
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      negativeCard={{ items: ["Mass production", "Artificial preservatives", "Standardized flavors"] }}
-      positiveCard={{ items: ["Handcrafted small batches", "100% natural ingredients", "Proprietary spice blends"] }}
+      features={[
+        {
+          title: "Farm to Table",          description: "Sourced daily from sustainable mediterranean family farms.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-salad-with-fresh-vegetables-wooden-table-cooking-tasty-healthy-food-black-background-vegetarian-food-healthy-cooking-concept-close-up_639032-429.jpg" },
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/grilled-vegetables-white-ceramic-pan-with-ingredients-rustic-surface_127032-1884.jpg" }
+        },
+        {
+          title: "Authentic Blends",          description: "Proprietary spice blends refined over centuries.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-food-ingredients-with-garlic-dough_23-2148834737.jpg" },
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/spices-near-cheese_23-2147772130.jpg" }
+        },
+        {
+          title: "Artisanal Preparation",          description: "Hand-kneaded and stone-baked with passion.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/salad-near-oil-vegetables_23-2147778438.jpg" },
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/azerbaijani-gutab-stuffed-flatbread-with-herbs-garnished-with-pomegranate-seeds-yogurt_140725-6896.jpg" }
+        },
+      ]}
+      showStepNumbers={true}
       title="The Zaatar Difference"
       description="Crafting excellence through quality and heritage."
     />
   </div>
 
   <div id="menu" data-section="menu">
-      <ProductCardFour
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        { id: "1", name: "Classic Zaatar Flatbread", price: "$12.00", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sauces-near-rolled-dough_23-2147772103.jpg" },
-        { id: "2", name: "Herb-Infused Pastry", price: "$8.50", variant: "Gourmet", imageSrc: "http://img.b2bpic.net/free-photo/fresh-mediterranean-appetizer-plate-with-olive-variation-generated-by-ai_188544-24667.jpg" },
-        { id: "3", name: "Mediterranean Garden Salad", price: "$15.00", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/top-view-healthy-salad-with-apple_23-2148515420.jpg" },
-        { id: "4", name: "Dips Platter", price: "$18.00", variant: "Gourmet", imageSrc: "http://img.b2bpic.net/free-photo/fish-salad-with-fillet-vegetables_114579-2035.jpg" },
-        { id: "5", name: "Artisan Spice Bowl", price: "$10.00", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/pita-stuffed-with-chicken-tomato-lettuce_2829-10669.jpg" },
-        { id: "6", name: "Zaatar Infused Medley", price: "$14.00", variant: "Gourmet", imageSrc: "http://img.b2bpic.net/free-photo/dark-background-with-fresh-products-space-messages_23-2147612103.jpg" },
+        { id: "1", brand: "Signature", name: "Classic Zaatar Flatbread", price: "$12.00", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sauces-near-rolled-dough_23-2147772103.jpg" },
+        { id: "2", brand: "Gourmet", name: "Herb-Infused Pastry", price: "$8.50", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/fresh-mediterranean-appetizer-plate-with-olive-variation-generated-by-ai_188544-24667.jpg" },
+        { id: "3", brand: "Signature", name: "Mediterranean Garden Salad", price: "$15.00", rating: 5, reviewCount: "92", imageSrc: "http://img.b2bpic.net/free-photo/top-view-healthy-salad-with-apple_23-2148515420.jpg" },
+        { id: "4", brand: "Gourmet", name: "Dips Platter", price: "$18.00", rating: 5, reviewCount: "64", imageSrc: "http://img.b2bpic.net/free-photo/fish-salad-with-fillet-vegetables_114579-2035.jpg" },
+        { id: "5", brand: "Signature", name: "Artisan Spice Bowl", price: "$10.00", rating: 4, reviewCount: "55", imageSrc: "http://img.b2bpic.net/free-photo/pita-stuffed-with-chicken-tomato-lettuce_2829-10669.jpg" },
+        { id: "6", brand: "Gourmet", name: "Zaatar Infused Medley", price: "$14.00", rating: 5, reviewCount: "110", imageSrc: "http://img.b2bpic.net/free-photo/dark-background-with-fresh-products-space-messages_23-2147612103.jpg" },
       ]}
       title="Signature Specialties"
       description="Curated selection of our most beloved culinary traditions."
@@ -108,16 +128,18 @@ export default function LandingPage() {
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
+      <PricingCardTwo
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
         {
-          id: "starter", badge: "Introduction", price: "$45", subtitle: "A curated introduction to our signature flavors.", buttons: [{ text: "Select", href: "#contact" }], features: ["3 Course Tasting", "Signature Zaatar Dish", "Selection of Dips"],
+          id: "starter",          badge: "Introduction",          price: "$45",          subtitle: "A curated introduction to our signature flavors.",          buttons: [{ text: "Select", href: "#contact" }],
+          features: ["3 Course Tasting", "Signature Zaatar Dish", "Selection of Dips"],
         },
         {
-          id: "premium", badge: "Chef Selection", price: "$85", subtitle: "The ultimate culinary journey through the Mediterranean.", buttons: [{ text: "Select", href: "#contact" }], features: ["7 Course Tasting", "Signature Zaatar Dish", "Exclusive Spice Sampler", "Wine Pairing"],
+          id: "premium",          badge: "Chef Selection",          price: "$85",          subtitle: "The ultimate culinary journey through the Mediterranean.",          buttons: [{ text: "Select", href: "#contact" }],
+          features: ["7 Course Tasting", "Signature Zaatar Dish", "Exclusive Spice Sampler", "Wine Pairing"],
         },
       ]}
       title="Tasting Menus"
@@ -126,15 +148,14 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardThree
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", icon: Award, title: "Awards Won", value: "12", description: "Prestigious culinary recognition" },
-        { id: "m2", icon: Star, title: "Avg Rating", value: "4.9", description: "From our satisfied guests" },
-        { id: "m3", icon: Clock, title: "Kitchen Hours", value: "10k+", description: "Years of service in tradition" },
+        { id: "m1", icon: Award, title: "Awards Won", value: "12" },
+        { id: "m2", icon: Star, title: "Avg Rating", value: "4.9" },
+        { id: "m3", icon: Clock, title: "Kitchen Hours", value: "10k+" },
       ]}
       title="Our Impact"
       description="The numbers behind our dedication to flavor."
@@ -142,35 +163,64 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardFifteen
       useInvertedBackground={true}
-      cardTitle="What Guests Say"
-      cardTag="Testimonials"
-      testimonials={[
-        { id: "t1", name: "Elena Rossi", imageSrc: "http://img.b2bpic.net/free-photo/person-eating-seaweed-snacks_23-2150520019.jpg" },
-        { id: "t2", name: "Mark Smith", imageSrc: "http://img.b2bpic.net/free-photo/chef-standing-by-counter-serving-salad-from-cabbage-holding-chilli-pepper_1303-32139.jpg" }
+      testimonial="An incredible journey for the senses. Every bite reminded me of my childhood visits to the Mediterranean. Truly an authentic experience."
+      rating={5}
+      author="Elena Rossi, Culinary Critic"
+      avatars={[
+        { src: "http://img.b2bpic.net/free-photo/person-eating-seaweed-snacks_23-2150520019.jpg", alt: "Elena Rossi" },
+        { src: "http://img.b2bpic.net/free-photo/chef-standing-by-counter-serving-salad-from-cabbage-holding-chilli-pepper_1303-32139.jpg", alt: "Customer 2" },
+        { src: "http://img.b2bpic.net/free-photo/attractive-young-woman-hands-holds-two-burgers-blurred-background_169016-43765.jpg", alt: "Customer 3" },
+        { src: "http://img.b2bpic.net/free-photo/woman-eating-salad-home_1301-7057.jpg", alt: "Customer 4" },
+        { src: "http://img.b2bpic.net/free-photo/portrait-waitress-holding-plate-with-muffin_107420-12322.jpg", alt: "Customer 5" },
       ]}
-      cardAnimation="slide-up"
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactSplitForm
       title="Visit Us & Reserve"
       description="Join us for an authentic Mediterranean experience. Located in the heart of the city, we are open daily to serve you."
-      tag="Reservations"
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name" },
+        { name: "email", type: "email", placeholder: "Email Address" },
+        { name: "phone", type: "tel", placeholder: "Phone Number" }
+      ]}
+      textarea={{ name: "message", placeholder: "Reservation details (Date, time, party size)", rows: 4 }}
       buttonText="Send Reservation"
       useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Zaatar"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{ text: "Contact: info@zaatar.com", href: "mailto:info@zaatar.com" }}
+      <FooterBaseCard
+      logoText="Zaatar Restaurant"
+      columns={[
+        { 
+            title: "Location", 
+            items: [
+                { label: "123 Mediterranean Ave", href: "#" },
+                { label: "City Center, NY", href: "#" }
+            ]
+        },
+        { 
+            title: "Hours", 
+            items: [
+                { label: "Mon-Fri: 11am - 10pm", href: "#" },
+                { label: "Sat-Sun: 10am - 11pm", href: "#" }
+            ]
+        },
+        { 
+            title: "Contact", 
+            items: [
+                { label: "(555) 123-4567", href: "tel:5551234567" },
+                { label: "contact@zaatar.com", href: "mailto:contact@zaatar.com" }
+            ]
+        }
+      ]}
     />
   </div>
       </ReactLenis>