Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
@@ -11,10 +11,17 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { AlertCircle, Search, Smartphone } from "lucide-react";
 
 export default function LandingPage() {
+  const navLinks = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "How it works", id: "/how-it-works" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" },
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -31,76 +38,24 @@ export default function LandingPage() {
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "Portfolio",          id: "portfolio"},
-        {
-          name: "About",          id: "about"},
-      ]}
+      navItems={navLinks}
       brandName="Heemskerk Web Studio"
       button={{
-        text: "Gratis demo",        href: "#contact"}}
+        text: "Gratis demo",        href: "/contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars"}}
       title="Wij bouwen moderne websites die klanten opleveren"
       description="Voor lokale bedrijven die willen groeien. Wij creëren razendsnelle, gebruiksvriendelijke websites die jouw conversie verhogen."
-      testimonials={[
-        {
-          name: "Sarah Jansen",          handle: "@restobar",          testimonial: "Onze nieuwe website trekt eindelijk meer klanten aan!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-korean-barista-pouring-filter-coffee-prepare-batch-brew-client-cafe_1258-203378.jpg"},
-        {
-          name: "Tom Barber",          handle: "@tomsbarber",          testimonial: "De snelheid en uitstraling zijn echt top.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-florist-with-colorful-flowers-shop_23-2148075323.jpg"},
-        {
-          name: "Emma Bakker",          handle: "@cafetaria",          testimonial: "Heemskerk heeft ons enorm geholpen met onze online vindbaarheid.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg"},
-        {
-          name: "Jan de Vries",          handle: "@klusbedrijf",          testimonial: "De service en nazorg zijn uitstekend, zeer aan te raden.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-together_23-2148826969.jpg"},
-        {
-          name: "Sophie Visser",          handle: "@boetiek",          testimonial: "Een website die precies past bij onze unieke stijl.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-glasses-shaking-hands-with-female-partner-meeting-co-working-space_74855-10006.jpg"},
-      ]}
+      background={{ variant: "plain" }}
+      testimonials={[]}
+      mediaAnimation="opacity"
       buttons={[
-        {
-          text: "Gratis demo aanvragen",          href: "#contact"},
+        { text: "Gratis demo aanvragen", href: "/contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/teamwork-makes-dream-work-motivation-quote-message-box_53876-121429.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/healthy-breakfast-concept-with-modern-woman_23-2148115601.jpg",          alt: "Klant"},
-        {
-          src: "http://img.b2bpic.net/free-photo/vertical-shot-friendly-barista-girl-smiling-you-while-preparing-coffee-pouring-milk-making_1258-203425.jpg",          alt: "Klant"},
-        {
-          src: "http://img.b2bpic.net/free-photo/enjoying-process-creation-attractive-successful-young-ginger-female-artisan-artist-designer-with-hair-knot-feeling-happy-excited-about-creating-something-beautiful-new-her-studio_273609-953.jpg",          alt: "Klant"},
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg",          alt: "Klant"},
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-beautiful-asian-girl-barista-working-cafe-holding-cup-tea-giving-client-their-order_1258-199282.jpg",          alt: "Klant"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Razendsnel"},
-        {
-          type: "text",          text: "Responsive"},
-        {
-          type: "text",          text: "SEO Geoptimaliseerd"},
-        {
-          type: "text",          text: "Modern Design"},
-        {
-          type: "text",          text: "Betrouwbaar"},
-      ]}
     />
   </div>
 
@@ -109,35 +64,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
-      features={[
-        {
-          title: "Verouderde uitstraling",          description: "Bezoekers haken direct af door een slechte eerste indruk.",          icon: AlertCircle,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/people-creating-food-content-upload-internet-food-lovers_23-2151461655.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345424.jpg"},
-          ],
-        },
-        {
-          title: "Geen mobiele ervaring",          description: "80% van je bezoekers komt via een telefoon, is jouw site responsive?",          icon: Smartphone,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_23-2147778765.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-middleaged-guy-sports-clothing-pointing-fingers-up-showing-promo-banner-abou_1258-148784.jpg"},
-          ],
-        },
-        {
-          title: "Slechte vindbaarheid",          description: "Een trage website betekent lagere posities in Google.",          icon: Search,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/physical-activity-stats-around-person_23-2150163387.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-tasty-coffee-arrangement_23-2149514292.jpg"},
-          ],
-        },
-      ]}
+      features={[]}
       title="Waarom een goede website essentieel is"
       description="Klanten zoeken online. Als jouw website verouderd is, verlies je direct kansen."
     />
@@ -149,20 +76,7 @@ export default function LandingPage() {
       textboxLayout="split"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Website Design",          price: "Eenmalig",          imageSrc: "http://img.b2bpic.net/free-photo/17-lifestyle-people-ordering-sushi-home_52683-100639.jpg"},
-        {
-          id: "p2",          name: "Hosting & Security",          price: "Maandelijks",          imageSrc: "http://img.b2bpic.net/free-photo/your-best-give-up-life-goes-live-your-life_53876-13852.jpg"},
-        {
-          id: "p3",          name: "Updates & Support",          price: "On-demand",          imageSrc: "http://img.b2bpic.net/free-photo/american-football-player-neon-style_23-2151827436.jpg"},
-        {
-          id: "p4",          name: "SEO Optimalisatie",          price: "Maandelijks",          imageSrc: "http://img.b2bpic.net/free-photo/coffee-ai-generated_23-2150691641.jpg"},
-        {
-          id: "p5",          name: "Copywriting",          price: "Per pagina",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-drinks-coffee-barbershop_613910-14697.jpg"},
-        {
-          id: "p6",          name: "Logo & Branding",          price: "Eenmalig",          imageSrc: "http://img.b2bpic.net/free-photo/neon-style-american-football-player_23-2151827373.jpg"},
-      ]}
+      products={[]}
       title="Onze Diensten"
       description="Alles wat je nodig hebt voor een succesvolle online groei."
     />
@@ -173,71 +87,18 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",          value: "1",          title: "Contact",          items: [
-            "Vul het formulier in",            "Wij bellen je terug"],
-        },
-        {
-          id: "m2",          value: "2",          title: "Concept",          items: [
-            "Bekijk de gratis demo",            "Feedback verwerken"],
-        },
-        {
-          id: "m3",          value: "3",          title: "Live",          items: [
-            "Website online",            "Hosting & beheer"],
-        },
-      ]}
+      metrics={[]}
       title="Hoe wij werken"
       description="Een eenvoudig proces voor maximaal resultaat."
     />
   </div>
 
-  <div id="portfolio" data-section="portfolio">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",          name: "Restaurant Italia",          imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336609.jpg"},
-        {
-          id: "2",          name: "Barbershop Street",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg"},
-        {
-          id: "3",          name: "FitLife Gym",          imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416725.jpg"},
-        {
-          id: "4",          name: "Boutique Café",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-friends-having-lunch-luxury-restaurant_23-2151081450.jpg"},
-        {
-          id: "5",          name: "Style Barber",          imageSrc: "http://img.b2bpic.net/free-photo/simplicity-attitude-be-positive-word_53876-21327.jpg"},
-      ]}
-      cardTitle="Eerder werk"
-      cardTag="Portfolio"
-      cardAnimation="slide-up"
-    />
-  </div>
-
   <div id="pricing" data-section="pricing">
       <PricingCardFive
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
-      plans={[
-        {
-          id: "start",          tag: "Basic",          price: "€499",          period: "eenmalig",          description: "Perfect voor de startende ondernemer.",          button: {
-            text: "Kies pakket",            href: "#contact"},
-          featuresTitle: "Inbegrepen:",          features: [
-            "1 pagina website",            "Mobiel vriendelijk",            "Basis SEO"],
-        },
-        {
-          id: "pro",          tag: "Business",          price: "€999",          period: "eenmalig",          description: "De complete oplossing voor groei.",          button: {
-            text: "Kies pakket",            href: "#contact"},
-          featuresTitle: "Alles uit Basic, plus:",          features: [
-            "Tot 5 pagina's",            "Snelle hosting",            "Google Maps integratie"],
-        },
-        {
-          id: "host",          tag: "Hosting",          price: "€20",          period: "/maand",          description: "Veilige hosting en updates.",          button: {
-            text: "Kies pakket",            href: "#contact"},
-          featuresTitle: "Service:",          features: [
-            "SSL certificaat",            "Dagelijkse backups",            "Uptime garantie"],
-        },
-      ]}
+      plans={[]}
       title="Duidelijke pakketten"
       description="Transparante prijzen zonder verborgen kosten."
     />
@@ -246,57 +107,32 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="Luca Heemskerk"
-      description="Als gedreven webdesigner help ik lokale ondernemers groeien met moderne websites. Geen poespas, gewoon websites die werken."
-      metrics={[
-        {
-          value: "100+",          title: "Projecten"},
-        {
-          value: "100%",          title: "Klanttevredenheid"},
-      ]}
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/enjoying-process-creation-attractive-successful-young-ginger-female-artisan-artist-designer-with-hair-knot-feeling-happy-excited-about-creating-something-beautiful-new-her-studio_273609-953.jpg"
+      title="Over ons"
+      description="Gedreven webdesigner help ik lokale ondernemers groeien met moderne websites."
+      metrics={[]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "rotated-rays-static-grid"}}
-      text="Klaar voor een moderne website die wél klanten oplevert? Vraag nu een gratis demo aan."
-      buttons={[
-        {
-          text: "Vraag gratis demo aan",          href: "mailto:luca@heemskerkweb.nl"},
-      ]}
-    />
+      <ContactSplitForm
+        title="Vraag je demo aan"
+        description="Laat hier je gegevens achter en wij nemen snel contact met je op voor een demo."
+        inputs={[
+            { name: "name", type: "text", placeholder: "Jouw naam" },
+            { name: "email", type: "email", placeholder: "Jouw emailadres" }
+        ]}
+        textarea={{ name: "message", placeholder: "Vertel ons over je project" }}
+        useInvertedBackground={true}
+      />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
-      columns={[
-        {
-          title: "Studio",          items: [
-            {
-              label: "Over ons",              href: "#about"},
-            {
-              label: "Diensten",              href: "#services"},
-          ],
-        },
-        {
-          title: "Contact",          items: [
-            {
-              label: "Email: luca@heemskerkweb.nl",              href: "mailto:luca@heemskerkweb.nl"},
-            {
-              label: "LinkedIn",              href: "#"},
-          ],
-        },
-      ]}
+      columns={[]}
       logoText="Heemskerk Web Studio"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}