From 3dd17f7d352865f96c6bc980e50b4a973680634e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 13:34:48 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 439 +++++++++--------------------------------------
 1 file changed, 83 insertions(+), 356 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9c925f7..bf66da1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import { Award, Star, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -23,419 +23,146 @@ export default function LandingPage() {
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
         background="fluid"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Over ons",
-          id: "about",
-        },
-        {
-          name: "Diensten",
-          id: "features",
-        },
-        {
-          name: "Prijzen",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Over ons", id: "about" },
+        { name: "Diensten", id: "features" },
+        { name: "Prijzen", id: "pricing" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="STER MODE"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDoubleCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
+      <HeroBillboardRotatedCarousel
+      background={{ variant: "gradient-bars" }}
       title="STER MODE: Specialist in Kledingreparatie & Stomerij"
-      description="Uw kleding in vertrouwde handen. Wij bieden vakkundige reparaties en professionele stomerij voor al uw textiel, van alledaagse kleding tot haute couture."
-      leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/creative-atelier-shop-workspace_482257-95822.jpg",
-          imageAlt: "Reperatie",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-tailor-working-studio_23-2148834119.jpg",
-          imageAlt: "Stomerij",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/elements-fashion-designing-studio_23-2150407894.jpg",
-          imageAlt: "Kwaliteit",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg",
-          imageAlt: "Service",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/client-examining-tie-shirt-store_482257-78702.jpg",
-          imageAlt: "Vakmanschap",
-        },
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/racks-filled-with-basic-shirt_482257-78330.jpg",
-          imageAlt: "Stomerij",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142190.jpg",
-          imageAlt: "Reperatie",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-man-performing-housework-gentle-dreamy-atmosphere_23-2151469347.jpg",
-          imageAlt: "Service",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/different-pieces-materials-different-colors_23-2148742280.jpg",
-          imageAlt: "Kwaliteit",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/suitcase-packed-with-travel-paraphernalia_23-2149433947.jpg",
-          imageAlt: "Betrouwbaar",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Bekijk diensten",
-          href: "#features",
-        },
-        {
-          text: "Contact",
-          href: "#contact",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/scene-with-miscellaneous-items-being-sold-yard-sale-bargains_23-2151216782.jpg",
-          alt: "Klant 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-clothing-store-with-casual-formal-wear-design-retail-shop-with-clothes-hangers-racks-department-store-inside-shopping-center-fashion-merchandise-sale_482257-59961.jpg",
-          alt: "Klant 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-sitting-thrift-shop-full-shot_23-2149726861.jpg",
-          alt: "Klant 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/atelier-shop-full-sartorial-outfits_482257-90452.jpg",
-          alt: "Klant 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-tailor-working-his-factory_1303-28516.jpg",
-          alt: "Klant 5",
-        },
-      ]}
-      avatarText="Vertrouwd door duizenden tevreden klanten."
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/close-up-client-measurement_482257-101884.jpg",
-          alt: "Merk 1",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/female-designer-looking-fashion-sketch_23-2147874999.jpg",
-          alt: "Merk 2",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/professional-beautiful-asian-female-fashion-designer-working-measuring-dress-mannequin-clothing_7861-786.jpg",
-          alt: "Merk 3",
-        },
-        {
-          type: "text",
-          text: "Kwaliteit",
-        },
-        {
-          type: "text",
-          text: "Duurzaamheid",
-        },
+      description="Uw kleding in vertrouwde handen. Wij bieden vakkundige reparaties en professionele stomerij voor al uw textiel."
+      carouselItems={[
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/creative-atelier-shop-workspace_482257-95822.jpg" },
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-tailor-working-studio_23-2148834119.jpg" },
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/elements-fashion-designing-studio_23-2150407894.jpg" },
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg" },
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/client-examining-tie-shirt-store_482257-78702.jpg" },
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/racks-filled-with-basic-shirt_482257-78330.jpg" }
       ]}
+      buttons={[{ text: "Bekijk diensten", href: "#features" }, { text: "Contact", href: "#contact" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
+      <SplitAbout
       title="Vakmanschap sinds jaar en dag"
-      description={[
-        "Bij STER MODE combineren we jarenlange ervaring met een passie voor textielonderhoud. Of het nu gaat om een ritssluiting vervangen, een kledingstuk vermaken of een delicate stomerij-opdracht, wij staan garant voor de hoogste kwaliteit.",
-        "Ons team is toegewijd aan het verlengen van de levensduur van uw favoriete kledingstukken door zorgvuldig en duurzaam onderhoud.",
+      description="Bij STER MODE combineren we jarenlange ervaring met een passie voor textielonderhoud."
+      textboxLayout="split"
+      useInvertedBackground={false}
+      bulletPoints={[
+        { title: "Kwaliteit", description: "Hoogste standaard in reparaties." },
+        { title: "Duurzaamheid", description: "Verleng de levensduur van uw kleding." }
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyNine
-      animationType="slide-up"
+      <FeatureCardTwentySix
+      title="Onze Specialisaties"
+      description="Vakkundige zorg voor uw kleding."
       textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Kledingreparatie",
-          description: "Van knopen aanzetten tot ingewikkelde kledingvermaak, wij maken uw kleding weer als nieuw.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vintage-sewing-machine-with-thread-measuring-tape_23-2148739406.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-sewing-supplies-arrangement_23-2149552371.jpg",
-          buttonText: "Meer",
-        },
-        {
-          title: "Professionele Stomerij",
-          description: "Uw delicate textiel en pakken krijgen de zorgvuldige reiniging die ze verdienen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-adult-loading-washing-machine_23-2149535091.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/lady-closing-washing-machine-door_23-2148387010.jpg",
-          buttonText: "Meer",
-        },
-        {
-          title: "Leder & Accessoires",
-          description: "Wij herstellen ook lederen jassen, tassen en andere accessoires met precisie.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-cobbler-doing-measurments-shoe_171337-12243.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimbles-with-thread-buttons_23-2148527945.jpg",
-          buttonText: "Meer",
-        },
+        { title: "Kledingreparatie", description: "Knopen, naden en meer.", buttonIcon: Award },
+        { title: "Professionele Stomerij", description: "Zorgvuldige reiniging.", buttonIcon: Award },
+        { title: "Leder & Accessoires", description: "Leren jassen en tassen.", buttonIcon: Award },
+        { title: "Spoedservice", description: "Snelle service beschikbaar.", buttonIcon: Award }
       ]}
-      title="Onze Specialisaties"
-      description="Een volledig overzicht van onze vakkundige diensten."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",
-          tag: "Basis",
-          price: "€10",
-          period: "Vanaf",
-          description: "Eenvoudige reparaties zoals knopen of kleine naden.",
-          button: {
-            text: "Contact",
-          },
-          featuresTitle: "Inclusief:",
-          features: [
-            "Snel uitgevoerd",
-            "Professionele afwerking",
-          ],
-        },
-        {
-          id: "standard",
-          tag: "Standaard",
-          price: "€25",
-          period: "Vanaf",
-          description: "Vermaken van broeken, jurken en rokken.",
-          button: {
-            text: "Contact",
-          },
-          featuresTitle: "Inclusief:",
-          features: [
-            "Perfecte pasvorm",
-            "Korte levertijd",
-          ],
-        },
-        {
-          id: "premium",
-          tag: "Premium",
-          price: "€45",
-          period: "Vanaf",
-          description: "Reiniging van pakken, jassen en delicate stoffen.",
-          button: {
-            text: "Contact",
-          },
-          featuresTitle: "Inclusief:",
-          features: [
-            "Stoomreiniging",
-            "Opfrisbeurt",
-            "Kwaliteitsgarantie",
-          ],
-        },
-      ]}
+      <PricingCardThree
       title="Transparante Prijzen"
       description="Eerlijke prijzen voor professioneel vakwerk."
+      textboxLayout="split"
+      useInvertedBackground={false}
+      animationType="slide-up"
+      plans={[
+        { id: "basic", name: "Basis", price: "€10", buttons: [{ text: "Contact" }], features: ["Snel uitgevoerd", "Professioneel"] },
+        { id: "standard", name: "Standaard", price: "€25", buttons: [{ text: "Contact" }], features: ["Perfecte pasvorm", "Korte levertijd"] },
+        { id: "premium", name: "Premium", price: "€45", buttons: [{ text: "Contact" }], features: ["Stoomreiniging", "Kwaliteitsgarantie"] }
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "15+",
-          title: "Jaar ervaring",
-          description: "Gespecialiseerd vakmanschap",
-          icon: Award,
-        },
-        {
-          id: "m2",
-          value: "5000+",
-          title: "Tevreden klanten",
-          description: "Met zorg geholpen",
-          icon: Users,
-        },
-        {
-          id: "m3",
-          value: "98%",
-          title: "Klanttevredenheid",
-          description: "Gemiddelde beoordeling",
-          icon: Star,
-        },
-      ]}
+      <MetricCardTwo
       title="Onze Cijfers"
       description="Vertrouwd door velen in de regio."
+      textboxLayout="default"
+      gridVariant="uniform-all-items-equal"
+      animationType="slide-up"
+      useInvertedBackground={true}
+      metrics={[
+        { id: "1", value: "15+", description: "Jaar ervaring" },
+        { id: "2", value: "5000+", description: "Tevreden klanten" },
+        { id: "3", value: "98%", description: "Klanttevredenheid" }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
+      <TestimonialCardTwelve
+      cardTitle="Klantervaringen"
+      cardTag="Recensies"
+      cardAnimation="slide-up"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Jan de Vries",
-          handle: "@janv",
-          testimonial: "Fantastische service. Mijn pak is weer als nieuw!",
-          imageSrc: "http://img.b2bpic.net/free-photo/frustrated-handsome-business-man-wearing-suit-looking-camera-going-wild-by-taking-off-his-suit-standing-white-background_141793-53852.jpg",
-        },
-        {
-          id: "2",
-          name: "Sophie Janssen",
-          handle: "@sophie",
-          testimonial: "Zeer deskundig in het vermaken van mijn trouwjurk.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-helping-his-wife-iron-shirt_23-2149117079.jpg",
-        },
-        {
-          id: "3",
-          name: "Mark Peters",
-          handle: "@markp",
-          testimonial: "Snelle reparatie en altijd vriendelijk geholpen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/serviceman-does-checkup-client-car_482257-76119.jpg",
-        },
-        {
-          id: "4",
-          name: "Lisa Bakker",
-          handle: "@lisab",
-          testimonial: "Top stomerij! Mijn jas ziet er weer fris uit.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg",
-        },
-        {
-          id: "5",
-          name: "Koen Smit",
-          handle: "@koens",
-          testimonial: "Al jaren de beste in de regio voor al mijn kleding.",
-          imageSrc: "http://img.b2bpic.net/free-photo/wardrobe-renovation-winter_23-2149183991.jpg",
-        },
+        { id: "1", name: "Jan de Vries", imageSrc: "http://img.b2bpic.net/free-photo/frustrated-handsome-business-man-wearing-suit-looking-camera-going-wild-by-taking-off-his-suit-standing-white-background_141793-53852.jpg" },
+        { id: "2", name: "Sophie Janssen", imageSrc: "http://img.b2bpic.net/free-photo/man-helping-his-wife-iron-shirt_23-2149117079.jpg" }
       ]}
-      title="Klantervaringen"
-      description="Wat onze klanten over ons zeggen."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
+      title="Veelgestelde vragen"
+      description="Antwoorden op veelgestelde vragen."
+      faqsAnimation="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "Wat zijn de levertijden?",
-          content: "Gemiddeld duurt een kleine reparatie 2-3 werkdagen. Voor stomerij is dit meestal 48 uur.",
-        },
-        {
-          id: "f2",
-          title: "Moet ik een afspraak maken?",
-          content: "Nee, u kunt altijd langskomen tijdens onze openingstijden voor advies of het inleveren van kleding.",
-        },
-        {
-          id: "f3",
-          title: "Kunnen jullie alle stoffen reinigen?",
-          content: "Wij zijn getraind in het behandelen van de meeste materialen. Bij twijfel adviseren we u graag vooraf.",
-        },
+        { id: "1", title: "Wat zijn de levertijden?", content: "Gemiddeld 2-3 werkdagen." },
+        { id: "2", title: "Moet ik een afspraak maken?", content: "Nee, loop gerust binnen." }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-woman-garage-sale_23-2150540755.jpg"
-      title="Veelgestelde vragen"
-      description="Antwoorden op de meest gestelde vragen over onze service."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCTA
+      tag="Contact"
+      title="Direct contact"
+      description="Wij helpen u graag verder."
+      buttons={[{ text: "Bel nu", href: "tel:+3100000000" }]}
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Neem gerust contact op voor al uw vragen of kom langs in onze winkel. Wij helpen u graag verder met professioneel kledingonderhoud."
-      buttons={[
-        {
-          text: "Bel ons direct",
-          href: "tel:+3100000000",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/man-brown-tshirt-ironing_23-2149400046.jpg"
+      <FooterLogoReveal
       logoText="STER MODE"
-      columns={[
-        {
-          title: "Navigatie",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Over ons",
-              href: "#about",
-            },
-            {
-              label: "Diensten",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Service",
-          items: [
-            {
-              label: "Prijzen",
-              href: "#pricing",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
+      leftLink={{ text: "Privacy", href: "/privacy" }}
+      rightLink={{ text: "Contact", href: "#contact" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1