Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, Building, Users } from "lucide-react";
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { Award, Building, Users, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,26 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Over ons",
-          id: "about",
-        },
-        {
-          name: "Diensten",
-          id: "services",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Over ons", id: "about" },
+        { name: "Diensten", id: "services" },
+        { name: "Reviews", id: "testimonials" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="JWBouw"
     />
@@ -58,17 +43,10 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="JWBouw - Uw Betrouwbare Bouwpartner in Zwolle"
       description="Van nieuwbouw en verbouw tot complete renovatie: wij realiseren uw woonwensen met vakmanschap en oog voor detail."
-      buttons={[
-        {
-          text: "Vrijblijvende offerte",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Vrijblijvende offerte", href: "#contact" }]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15669.jpg?_wi=1"
     />
   </div>
@@ -78,21 +56,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Vakmanschap sinds 2017"
       metrics={[
-        {
-          icon: Building,
-          label: "Projecten succesvol afgerond",
-          value: "100+",
-        },
-        {
-          icon: Award,
-          label: "Gemiddelde beoordeling",
-          value: "4.9",
-        },
-        {
-          icon: Users,
-          label: "Tevreden klanten",
-          value: "75+",
-        },
+        { icon: Building, label: "Projecten succesvol afgerond", value: "100+" },
+        { icon: Award, label: "Gemiddelde beoordeling", value: "4.9" },
+        { icon: Users, label: "Tevreden klanten", value: "75+" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -104,21 +70,9 @@ export default function LandingPage() {
       title="Onze Specialisaties"
       description="Wij bieden een breed scala aan bouwdiensten voor zowel particulieren als bedrijven in Zwolle en omgeving."
       accordionItems={[
-        {
-          id: "s1",
-          title: "Nieuwbouw",
-          content: "Wij regelen de complete bouw van uw woning of bedrijfspand van begin tot eind.",
-        },
-        {
-          id: "s2",
-          title: "Verbouw & Aanbouw",
-          content: "Expertise in alle soorten verbouwingen en realisatie van extra woonruimte aan uw woning.",
-        },
-        {
-          id: "s3",
-          title: "Onderhoud",
-          content: "Behoud de waarde van uw pand met vakkundig onderhoud en kleine klussen.",
-        },
+        { id: "s1", title: "Nieuwbouw", content: "Wij regelen de complete bouw van uw woning of bedrijfspand van begin tot eind." },
+        { id: "s2", title: "Verbouw & Aanbouw", content: "Expertise in alle soorten verbouwingen en realisatie van extra woonruimte aan uw woning." },
+        { id: "s3", title: "Onderhoud", content: "Behoud de waarde van uw pand met vakkundig onderhoud en kleine klussen." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-15.jpg?_wi=1"
       mediaAnimation="blur-reveal"
@@ -132,42 +86,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Ervaren Vaklieden",
-          price: "Professioneel",
-          imageSrc: "http://img.b2bpic.net/free-photo/sunny-summer-morning-young-athletic-woman-doing-handstand-city-park-street-modern-urban-buildings-exercise-outdoors-healthy-lifestyle_146671-15176.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Helder Advies",
-          price: "Eerlijk",
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-working-modern-office_23-2148242893.jpg?_wi=1",
-        },
-        {
-          id: "p3",
-          name: "Betaalbare Kwaliteit",
-          price: "Transparant",
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-working-blueprints-her-desk-working-new-projects-architecture-design_482257-33181.jpg",
-        },
-        {
-          id: "p4",
-          name: "Op Tijd Afgerond",
-          price: "Betrouwbaar",
-          imageSrc: "http://img.b2bpic.net/free-photo/architects-front-brick-wall_23-2147813094.jpg",
-        },
-        {
-          id: "p5",
-          name: "Netjes Afgewerkt",
-          price: "Strak",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-different-construction-tools-wooden-background_169016-24026.jpg",
-        },
-        {
-          id: "p6",
-          name: "Lokale Expertise",
-          price: "Zwolle",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk-still-life_23-2150440922.jpg",
-        },
+        { id: "p1", name: "Ervaren Vaklieden", price: "Professioneel", imageSrc: "http://img.b2bpic.net/free-photo/portrait-of-a-professional-construction-worker-with-tools_23-2148731336.jpg?_wi=1" },
+        { id: "p2", name: "Helder Advies", price: "Eerlijk", imageSrc: "http://img.b2bpic.net/free-photo/architect-working-modern-office_23-2148242893.jpg?_wi=1" },
+        { id: "p3", name: "Betaalbare Kwaliteit", price: "Transparant", imageSrc: "http://img.b2bpic.net/free-photo/architect-working-blueprints-her-desk-working-new-projects-architecture-design_482257-33181.jpg" },
       ]}
       title="Waarom kiezen voor JWBouw?"
       description="Kwaliteit, betrouwbaarheid en heldere afspraken staan bij ons centraal."
@@ -175,128 +96,60 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Rogier Cappon",
-          date: "5 jaar geleden",
-          title: "Klant",
-          quote: "Zeer tevreden over de complete zolderverbouwing. Netjes gewerkt en prima prijs.",
-          tag: "Top",
-          avatarSrc: "http://img.b2bpic.net/free-photo/crazy-young-man-jumping-happy-expression_1194-4849.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15669.jpg?_wi=2",
-          imageAlt: "happy customer portrait",
-        },
-        {
-          id: "t2",
-          name: "Jan Joost",
-          date: "5 jaar geleden",
-          title: "Klant",
-          quote: "Jan heeft ons fantastisch geholpen met nieuwe trappen. Zeer tevreden over de kwaliteit.",
-          tag: "Top",
-          avatarSrc: "http://img.b2bpic.net/free-photo/lovely-senior-couple-dancing-together_23-2148268622.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-builder-orange-work-clothes-yellow-hardhat-with-pencil-ear-dreamily-looking-camera-with-scaffolding-background_574295-1578.jpg",
-          imageAlt: "happy customer portrait",
-        },
-        {
-          id: "t3",
-          name: "Suzanne Drees",
-          date: "5 jaar geleden",
-          title: "Klant",
-          quote: "Zeer professioneel voor een betaalbare prijs. Tevens goed advies ontvangen.",
-          tag: "Aanrader",
-          avatarSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-15.jpg?_wi=2",
-          imageAlt: "happy customer portrait",
-        },
-        {
-          id: "t4",
-          name: "Klant 4",
-          date: "2023",
-          title: "Klant",
-          quote: "Top gozer! Weet precies waar hij over praat. Zou hem iedereen adviseren.",
-          tag: "Top",
-          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-father-daughter-with-christmas_23-2148730788.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/sunny-summer-morning-young-athletic-woman-doing-handstand-city-park-street-modern-urban-buildings-exercise-outdoors-healthy-lifestyle_146671-15176.jpg?_wi=2",
-          imageAlt: "happy customer portrait",
-        },
-        {
-          id: "t5",
-          name: "Klant 5",
-          date: "2023",
-          title: "Klant",
-          quote: "Snel, vakkundig en meedenkend met het bouwproces.",
-          tag: "Super",
-          avatarSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12819.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-working-modern-office_23-2148242893.jpg?_wi=2",
-          imageAlt: "happy customer portrait",
-        },
-      ]}
+      <TestimonialCardThirteen
       title="Wat onze klanten zeggen"
       description="Ervaringen van tevreden klanten uit Zwolle."
+      showRating={true}
+      animationType="slide-up"
+      textboxLayout="split-description"
+      useInvertedBackground={false}
+      testimonials={[
+        { id: "t1", name: "Rogier Cappon", handle: "@rogier", testimonial: "Zeer tevreden over de complete zolderverbouwing. Netjes gewerkt en prima prijs.", rating: 5, icon: Star },
+        { id: "t2", name: "Jan Joost", handle: "@janj", testimonial: "Jan heeft ons fantastisch geholpen met nieuwe trappen. Zeer tevreden over de kwaliteit.", rating: 5, icon: Star },
+        { id: "t3", name: "Suzanne Drees", handle: "@suzanned", testimonial: "Zeer professioneel voor een betaalbare prijs. Tevens goed advies ontvangen.", rating: 5, icon: Star }
+      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "Waar is JWBouw gevestigd?",
-          content: "Wij zijn gevestigd aan de Lichtmisweg 4 in Zwolle.",
-        },
-        {
-          id: "f2",
-          title: "Kan ik een vrijblijvende offerte aanvragen?",
-          content: "Zeker, neem contact met ons op via telefoon of e-mail voor de mogelijkheden.",
-        },
-        {
-          id: "f3",
-          title: "Welke diensten bieden jullie aan?",
-          content: "Wij doen nieuwbouw, verbouw, aanbouw, onderhoud en kleine klussen.",
-        },
-      ]}
+      <FaqSplitMedia
       title="Veelgestelde Vragen"
       description="Hier vindt u antwoorden op de meest voorkomende vragen over onze diensten."
-      faqsAnimation="blur-reveal"
+      faqsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      faqs={[
+        { id: "f1", title: "Waar is JWBouw gevestigd?", content: "Wij zijn gevestigd aan de Lichtmisweg 4 in Zwolle." },
+        { id: "f2", title: "Kan ik een vrijblijvende offerte aanvragen?", content: "Zeker, neem contact met ons op via telefoon of e-mail voor de mogelijkheden." },
+        { id: "f3", title: "Welke diensten bieden jullie aan?", content: "Wij doen nieuwbouw, verbouw, aanbouw, onderhoud en kleine klussen." },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/architects-front-brick-wall_23-2147813094.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      tag="Contact"
+      title="Laten we bouwen"
+      description="Heeft u plannen voor een verbouwing? Neem contact op voor een kennismaking."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
-      background={{
-        variant: "cell-wave",
-      }}
-      text="Heeft u plannen voor een verbouwing? Neem vrijblijvend contact met ons op: info@jwbouw-zwolle.nl | 06-510 691 98"
-      buttons={[
-        {
-          text: "Stuur ons een bericht",
-          href: "mailto:info@jwbouw-zwolle.nl",
-        },
-      ]}
+      buttonText="Stuur bericht"
+      onSubmit={(email) => console.log(email)}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterLogoEmphasis
       logoText="JWBouw Zwolle"
-      leftLink={{
-        text: "Lichtmisweg 4, 8035 PL Zwolle",
-        href: "#",
-      }}
-      rightLink={{
-        text: "© 2024 JWBouw-Zwolle",
-        href: "#",
-      }}
+      columns={[
+        { items: [{ label: "Nieuwbouw", href: "#services" }, { label: "Verbouw", href: "#services" }] },
+        { items: [{ label: "Over ons", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { items: [{ label: "Lichtmisweg 4, Zwolle", href: "#" }, { label: "06-510 691 98", href: "#" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}