Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactText from '@/components/sections/contact/ContactText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, Shield, Star, Briefcase } from "lucide-react";
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 
 export default function LandingPage() {
   return (
@@ -53,23 +52,20 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <TestimonialAboutCard
+      <MediaAbout
       tag="Our Essence"
       title="Legacy in Every Stitch"
       description="We blend generational leather techniques with contemporary luxury design."
-      subdescription="Every piece is a testament to our commitment to quality, durability, and elegance."
-      icon={Briefcase}
       imageSrc="http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg"
       useInvertedBackground={true}
-      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="products" data-section="products">
       <ProductCardThree
       animationType="slide-up"
+      gridVariant="bento-grid"
       textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
         { id: "p1", name: "The Executive Jacket", price: "$899", imageSrc: "http://img.b2bpic.net/free-photo/black-white-nude-woman-side-view_23-2149428731.jpg?_wi=1" },
@@ -82,41 +78,43 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardSeven
       animationType="depth-3d"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       title="Our Impact"
       description="Delivering excellence through dedication."
       metrics={[
-        { id: "m1", value: "15+", title: "Years Experience", description: "Defining luxury standards.", icon: Award },
-        { id: "m2", value: "100%", title: "Genuine Leather", description: "Sourced ethically.", icon: Shield },
-        { id: "m3", value: "5k+", title: "Satisfied Clients", description: "Worldwide delivery.", icon: Star }
+        { id: "m1", value: "15+", title: "Years Experience", items: ["Defining luxury standards."] },
+        { id: "m2", value: "100%", title: "Genuine Leather", items: ["Sourced ethically."] },
+        { id: "m3", value: "5k+", title: "Satisfied Clients", items: ["Worldwide delivery."] }
       ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
+      <TestimonialCardOne
       testimonials={[]}
       title="Distinguished Perspectives"
       description="Our clients share their experience with Zellwears."
       textboxLayout="default"
+      gridVariant="bento-grid"
+      animationType="slide-up"
       useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
       faqs={[
         { id: "f1", title: "What leather do you use?", content: "We source only top-tier full-grain European leather." },
         { id: "f2", title: "Do you ship worldwide?", content: "Yes, we provide expedited global shipping." },
         { id: "f3", title: "What is your return policy?", content: "We offer a 30-day return policy for unused items." },
       ]}
-      sideTitle="Need Clarity?"
-      sideDescription="Explore our frequently asked questions for immediate assistance."
+      title="Need Clarity?"
+      description="Explore our frequently asked questions for immediate assistance."
       faqsAnimation="blur-reveal"
+      textboxLayout="default"
       useInvertedBackground={false}
     />
   </div>
@@ -132,20 +130,15 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
-      title="Inquire About Bespoke Pieces"
-      description="Our artisans are ready to bring your unique design vision to life."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Full Name" },
-        { name: "email", type: "email", placeholder: "Email Address" }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/tailor-sketching-leather-tissue-high-quality-photo_114579-12211.jpg"
+      <ContactText
+      text="Our artisans are ready to bring your unique design vision to life."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBase
       logoText="Zellwears"
       columns={[
         { title: "Catalog", items: [{ label: "Jackets", href: "#" }, { label: "Wallets", href: "#" }] },
@@ -156,4 +149,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}