From 1f43ae2e471abeb5b1e77a34d5b200bd2f6f0b57 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 30 Mar 2026 12:34:10 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 231 ++++++++++++++++++++---------------------------
 1 file changed, 96 insertions(+), 135 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7ae9da5..c5c873e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { CheckCircle, Zap, Shield } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import FooterCard from '@/components/sections/footer/FooterCard';
@@ -13,149 +14,109 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Over Ons",
-          id: "about",
-        },
-        {
-          name: "Klantportal",
-          id: "contact",
-        },
-      ]}
-      brandName="Raamstyling B.V."
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Over Ons", id: "about" },
+              { name: "Klantportal", id: "contact" },
+            ]}
+            brandName="Raamstyling B.V."
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="Raamstyling B.V. Klantportal"
-      description="Log in met je bedrijfsgegevens om direct toegang te krijgen tot je bestellingen, prijzen en exclusieve projectoverzichten."
-      buttons={[
-        {
-          text: "Inloggen",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png?_wi=1"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="Raamstyling B.V. Klantportal"
+            description="Log in met je bedrijfsgegevens om direct toegang te krijgen tot je bestellingen, prijzen en exclusieve projectoverzichten."
+            buttons={[{ text: "Inloggen", href: "#contact" }]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Uw partner in professionele raamstyling"
-      description="Wij bieden zakelijke klanten volledige transparantie en controle over projecten. Met ons portaal beheert u offertes, orders en voorraadbeheer efficiënter dan ooit."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png?_wi=1"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MediaAbout
+            useInvertedBackground={false}
+            title="Uw partner in professionele raamstyling"
+            description="Wij bieden zakelijke klanten volledige transparantie en controle over projecten. Met ons portaal beheert u offertes, orders en voorraadbeheer efficiënter dan ooit."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentySix
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Real-time Orderstatus",
-          description: "Volg uw bestellingen van productie tot aflevering direct via uw persoonlijke dashboard.",
-          buttonIcon: "CheckCircle",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png?_wi=2",
-          imageAlt: "Professional interior styling consultation setting with modern office furniture and window treatment",
-        },
-        {
-          title: "Exclusieve Prijzen",
-          description: "Bekijk altijd uw actuele zakelijke nettoprijzen zonder tussenkomst van onze afdeling.",
-          buttonIcon: "Zap",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png?_wi=2",
-          imageAlt: "Clean software dashboard interface on a laptop screen, B2B styling portal, analytical charts, data m",
-        },
-        {
-          title: "Documentatie & Offertes",
-          description: "Al uw documenten, technische tekeningen en offertes op één veilige plek.",
-          buttonIcon: "Shield",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png?_wi=1",
-          imageAlt: "Professional customer support desk, modern B2B office environment, bright and clean office space, mi",
-        },
-      ]}
-      title="Uw voordelen in het portal"
-      description="Ontdek waarom zakelijke partners kiezen voor onze digitale workflow."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentySix
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              {
+                title: "Real-time Orderstatus",                description: "Volg uw bestellingen van productie tot aflevering direct via uw persoonlijke dashboard.",                buttonIcon: CheckCircle,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png",                imageAlt: "Professional interior styling consultation"
+              },
+              {
+                title: "Exclusieve Prijzen",                description: "Bekijk altijd uw actuele zakelijke nettoprijzen zonder tussenkomst van onze afdeling.",                buttonIcon: Zap,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png",                imageAlt: "Clean software dashboard interface"
+              },
+              {
+                title: "Documentatie & Offertes",                description: "Al uw documenten, technische tekeningen en offertes op één veilige plek.",                buttonIcon: Shield,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png",                imageAlt: "Professional customer support desk"
+              }
+            ]}
+            title="Uw voordelen in het portal"
+            description="Ontdek waarom zakelijke partners kiezen voor onze digitale workflow."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Direct toegang aanvragen"
-      description="Nog geen account? Neem vandaag nog contact met ons op om uw account te activeren."
-      inputs={[
-        {
-          name: "Bedrijfsnaam",
-          type: "text",
-          placeholder: "Bedrijfsnaam",
-          required: true,
-        },
-        {
-          name: "Email",
-          type: "email",
-          placeholder: "offerte@raamstyling.nl",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "Bericht",
-        placeholder: "Wat is uw vraag?",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png?_wi=2"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            useInvertedBackground={false}
+            title="Direct toegang aanvragen"
+            description="Nog geen account? Neem vandaag nog contact met ons op om uw account te activeren."
+            inputs={[
+              { name: "Bedrijfsnaam", type: "text", placeholder: "Bedrijfsnaam", required: true },
+              { name: "Email", type: "email", placeholder: "offerte@raamstyling.nl", required: true },
+            ]}
+            textarea={{
+              name: "Bericht",              placeholder: "Wat is uw vraag?",              rows: 4,
+              required: true,
+            }}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="legal" data-section="legal">
-      <LegalSection
-      layout="section"
-      title="Algemene Voorwaarden"
-      sections={[
-        {
-          heading: "Toegang",
-          content: {
-            type: "paragraph",
-            text: "Dit portaal is uitsluitend bedoeld voor geregistreerde zakelijke relaties van Raamstyling B.V.",
-          },
-        },
-        {
-          heading: "Privacybeleid",
-          content: {
-            type: "list",
-            items: [
-              "Persoonsgegevens worden verwerkt conform de AVG-wetgeving.",
-              "Gegevens worden enkel gebruikt voor offertetrajecten en orderverwerking.",
-              "U heeft recht op inzage en correctie van uw bedrijfsgegevens.",
-            ],
-          },
-        },
-      ]}
-    />
-  </div>
+        <div id="legal" data-section="legal">
+          <LegalSection
+            layout="section"
+            title="Algemene Voorwaarden"
+            sections={[
+              {
+                heading: "Toegang",                content: { text: "Dit portaal is uitsluitend bedoeld voor geregistreerde zakelijke relaties van Raamstyling B.V." }
+              },
+              {
+                heading: "Privacybeleid",                content: { items: ["Persoonsgegevens worden verwerkt conform de AVG-wetgeving.", "Gegevens worden enkel gebruikt voor offertetrajecten en orderverwerking.", "U heeft recht op inzage en correctie van uw bedrijfsgegevens."] }
+              },
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Raamstyling B.V."
-      copyrightText="© 2025 Raamstyling B.V. Alle rechten voorbehouden."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Raamstyling B.V."
+            copyrightText="© 2025 Raamstyling B.V. Alle rechten voorbehouden."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );