Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,16 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+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 TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Award, Shield, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,22 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Craft", id: "about" },
-          id: "hero",
+        { name: "Collection", id: "products" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "Craft",
-          id: "about",
-        },
-        {
-          name: "Collection",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Zellwears"
     />
@@ -55,178 +42,35 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Timeless Leather, Crafted for Excellence."
       description="Zellwears delivers uncompromising luxury, blending traditional craftsmanship with modern design for the discerning individual."
-      leftCarouselItems={[
+      leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }]}
-        {
+      rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg?_wi=3" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=3" }]}
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1",
+      buttons={[{ text: "Shop Collection", href: "#products" }]}
-          imageAlt: "Premium leather jacket",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1",
-          imageAlt: "Handcrafted wallet",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478945.jpg",
-          imageAlt: "Beautiful blonde woman in blue light",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/student-with-goth-style-school_23-2150576841.jpg",
-          imageAlt: "Student with goth style at school",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186755.jpg",
-          imageAlt: "Close up on engraving art tools",
-        },
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg",
-          imageAlt: "Handcrafted wallet",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg",
-          imageAlt: "Premium leather jacket",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020777.jpg",
-          imageAlt: "Portrait of beautiful woman posing with a blue jacket",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478935.jpg",
-          imageAlt: "Beautiful blonde woman in blue light",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/tailor-sketching-leather-tissue-high-quality-photo_114579-12211.jpg",
-          imageAlt: "Tailor sketching on the leather tissue",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Shop Collection",
-          href: "#products",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-shoemaker-cutting-leather_171337-12266.jpg",
-          alt: "Shoemaker",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement_23-2148897983.jpg",
-          alt: "Tailoring tool",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186735.jpg",
-          alt: "Art tools",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-hand-cutting-leather_23-2148897980.jpg",
-          alt: "Craftsman hand",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-flat-lay_23-2148897982.jpg",
-          alt: "Flat lay tool",
-        },
-      ]}
-      avatarText="Trusted by 5,000+ connoisseurs globally"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jz8fog",
-          alt: "Brand Logo",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/simple-logo-set_53876-94192.jpg",
-          alt: "Brand Logo",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8h70on",
-          alt: "Brand Logo",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8d6a1l",
-          alt: "Brand Logo",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7h6zge",
-          alt: "Brand Logo",
-        },
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <MediaAbout
+      tag="Our Essence"
+      title="Legacy in Every Stitch"
+      description="We blend generational leather techniques with contemporary luxury design."
+      imageSrc="http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg"
       useInvertedBackground={true}
-      heading={[
-        {
-          type: "text",
-          content: "Our Heritage of",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg",
-          alt: "Leatherwork detail",
-        },
-        {
-          type: "text",
-          content: "Fine Craftsmanship",
-        },
-      ]}
     />
   </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" },
-          id: "p1",
+        { id: "p2", name: "The Signature Handbag", price: "$599", imageSrc: "http://img.b2bpic.net/free-photo/retro-brown-man-leather-bag-bright-colorful-summer-park-hanging-leafes_158538-12266.jpg?_wi=1" },
-          name: "The Executive Jacket",
+        { id: "p3", name: "The Minimalist Wallet", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/business-card-with-birds-wallet_53876-94947.jpg" }
-          price: "$899",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-white-nude-woman-side-view_23-2149428731.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "The Signature Handbag",
-          price: "$599",
-          imageSrc: "http://img.b2bpic.net/free-photo/retro-brown-man-leather-bag-bright-colorful-summer-park-hanging-leafes_158538-12266.jpg?_wi=1",
-        },
-        {
-          id: "p3",
-          name: "The Minimalist Wallet",
-          price: "$120",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-card-with-birds-wallet_53876-94947.jpg",
-        },
-        {
-          id: "p4",
-          name: "Classic Leather Trench",
-          price: "$1250",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4336.jpg",
-        },
-        {
-          id: "p5",
-          name: "Everyday Leather Clutch",
-          price: "$350",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hands-with-beautiful-nail-polish-rings-holding-small-black-bag_132075-12203.jpg",
-        },
-        {
-          id: "p6",
-          name: "Premium Leather Belt",
-          price: "$180",
-          imageSrc: "http://img.b2bpic.net/free-photo/morning-groom_1303-11598.jpg",
-        },
       ]}
       title="The Zellwears Collection"
       description="Curated essentials for a lifestyle of sophistication."
@@ -234,213 +78,71 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardSeven
-      animationType="slide-up"
+      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", items: ["Defining luxury standards."] },
-          id: "m1",
+        { id: "m2", value: "100%", title: "Genuine Leather", items: ["Sourced ethically."] },
-          value: "15+",
+        { id: "m3", value: "5k+", title: "Satisfied Clients", items: ["Worldwide delivery."] }
-          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,
-        },
       ]}
-      title="A Standard of Quality"
-      description="Our commitment to excellence reflected in every stitch."
     />
   </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}
-      testimonials={[
-        {
-          id: "t1",
-          name: "James Anderson",
-          date: "Oct 2023",
-          title: "CEO",
-          quote: "The leather quality is unmatched.",
-          tag: "Elite",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-stylish-brunette-man-with-coat-shoulders-intently-looking-camera-outdoor_574295-1313.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=2",
-          imageAlt: "man wearing leather jacket",
-        },
-        {
-          id: "t2",
-          name: "Sarah Miller",
-          date: "Sep 2023",
-          title: "Designer",
-          quote: "Sophistication in every stitch.",
-          tag: "Fashion",
-          avatarSrc: "http://img.b2bpic.net/free-photo/full-length-young-fashionable-caucasian-brunette-woman-with-red-lipstick-wears-black-clothes-glasses-holds-glass-booze-indoors_197531-32093.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=2",
-          imageAlt: "man wearing leather jacket",
-        },
-        {
-          id: "t3",
-          name: "Robert Chen",
-          date: "Aug 2023",
-          title: "Architect",
-          quote: "Perfectly structured and elegant.",
-          tag: "Style",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-walking-sunny-day_1303-24613.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg",
-          imageAlt: "man wearing leather jacket",
-        },
-        {
-          id: "t4",
-          name: "Elena Rossi",
-          date: "Jul 2023",
-          title: "Business Owner",
-          quote: "A timeless piece of luxury.",
-          tag: "Quality",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-male-cobbler-working-with-leather-textile_171337-12274.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-white-nude-woman-side-view_23-2149428731.jpg?_wi=2",
-          imageAlt: "man wearing leather jacket",
-        },
-        {
-          id: "t5",
-          name: "Marcus Thorne",
-          date: "Jun 2023",
-          title: "Editor",
-          quote: "Zellwears never disappoints.",
-          tag: "Luxury",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-black-leather-jacket-standing-against-wall-looking-away_23-2148148137.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/retro-brown-man-leather-bag-bright-colorful-summer-park-hanging-leafes_158538-12266.jpg?_wi=2",
-          imageAlt: "man wearing leather jacket",
-        },
-      ]}
-      title="Client Perspectives"
-      description="Hear what our distinguished clients say about Zellwears."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={true}
       faqs={[
-        {
+        { id: "f1", title: "What leather do you use?", content: "We source only top-tier full-grain European leather." },
-          id: "f1",
+        { id: "f2", title: "Do you ship worldwide?", content: "Yes, we provide expedited global shipping." },
-          title: "What leather do you use?",
+        { id: "f3", title: "What is your return policy?", content: "We offer a 30-day return policy for unused items." },
-          content: "We source only top-tier full-grain European leather.",
-        },
-        {
-          id: "f2",
-          title: "Do you ship worldwide?",
-          content: "Yes, we provide expedited global shipping for all orders.",
-        },
-        {
-          id: "f3",
-          title: "What is your return policy?",
-          content: "We offer a 30-day return policy for unused items in original condition.",
-        },
       ]}
-      title="Frequently Asked Questions"
+      title="Need Clarity?"
-      description="Answers to your queries about our craftsmanship."
+      description="Explore our frequently asked questions for immediate assistance."
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
+      names={["Vogue", "GQ", "Forbes", "Elle", "Wallpaper"]}
+      title="Industry Recognition"
+      description="Featured in global fashion publications."
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "Vogue",
-        "GQ",
-        "Harper's Bazaar",
-        "Forbes",
-        "Elle",
-        "Drapers",
-        "Wallpaper",
-      ]}
-      title="Trusted by Leaders"
-      description="Featured in leading global publications."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactText
-      useInvertedBackground={true}
+      text="Our artisans are ready to bring your unique design vision to life."
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "rotated-rays-static",
+      useInvertedBackground={false}
-      }}
-      text="Have a bespoke requirement or specific inquiry? Our concierge team is ready to assist."
-      buttons={[
-        {
-          text: "Contact Concierge",
-          href: "mailto:hello@zellwears.com",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterBase
       logoText="Zellwears"
       columns={[
-        {
+        { title: "Catalog", items: [{ label: "Jackets", href: "#" }, { label: "Wallets", href: "#" }] },
-          title: "Collection",
+        { title: "Brand", items: [{ label: "About", href: "#about" }, { label: "Concierge", href: "#contact" }] }
-          items: [
-            {
-              label: "Jackets",
-              href: "#products",
-            },
-            {
-              label: "Wallets",
-              href: "#products",
-            },
-            {
-              label: "Accessories",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Concierge",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Shipping",
-              href: "#",
-            },
-            {
-              label: "Returns",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>