From 7abe38f95044ca1185a58e53bcc058e58028e40b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 23 Apr 2026 22:22:35 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 486 ++++++++++++++---------------------------------
 1 file changed, 146 insertions(+), 340 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6b66809..4aab17f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,357 +19,163 @@ export default function LandingPage() {
         defaultButtonVariant="directional-hover"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Over Ons",
-          id: "about",
-        },
-        {
-          name: "Projecten",
-          id: "features",
-        },
-        {
-          name: "Protocol",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="DNN"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Over Ons", id: "about" },
+              { name: "Projecten", id: "features" },
+              { name: "Protocol", id: "faq" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="DNN"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Samen voor duurzame ontwikkeling en respect voor traditie."
-      description="Stichting Doti & Nora (DNN) zet zich in voor veilige, verantwoorde werkgelegenheid voor de Matawai-gemeenschap."
-      buttons={[
-        {
-          text: "Lees meer over ons werk",
-          href: "#about",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/indian-travel-destination-beautiful-attractive_53876-30996.jpg?_wi=1",
-          imageAlt: "Landschap van Matawai",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/abandoned-mining-track_181624-37537.jpg",
-          imageAlt: "Matawai gemeenschap foto",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/forest-with-autumn-leaves-man-background_23-2147676850.jpg",
-          imageAlt: "Inspirerende natuur",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-panoramic-view-andreevsky-descent-historical-part-city_1153-8574.jpg",
-          imageAlt: "Goudwinning in harmonie",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-wild-plants-growing-tatacoa-desert-colombia-blue-sky_181624-14828.jpg",
-          imageAlt: "Community project",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/mountain-forest-volcanic-soil_23-2148249038.jpg",
-          imageAlt: "Sustainable development",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardRotatedCarousel
+            background={{ variant: "gradient-bars" }}
+            title="Samen voor duurzame ontwikkeling en respect voor traditie."
+            description="Stichting Doti & Nora (DNN) zet zich in voor veilige, verantwoorde werkgelegenheid voor de Matawai-gemeenschap."
+            buttons={[{ text: "Lees meer over ons werk", href: "#about" }]}
+            carouselItems={[
+              { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/indian-travel-destination-beautiful-attractive_53876-30996.jpg", imageAlt: "Landschap van Matawai" },
+              { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/abandoned-mining-track_181624-37537.jpg", imageAlt: "Matawai gemeenschap foto" },
+              { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/forest-with-autumn-leaves-man-background_23-2147676850.jpg", imageAlt: "Inspirerende natuur" },
+              { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/aerial-panoramic-view-andreevsky-descent-historical-part-city_1153-8574.jpg", imageAlt: "Goudwinning in harmonie" },
+              { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-wild-plants-growing-tatacoa-desert-colombia-blue-sky_181624-14828.jpg", imageAlt: "Community project" },
+              { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/mountain-forest-volcanic-soil_23-2148249038.jpg", imageAlt: "Sustainable development" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Onze Missie en Visie"
-      description="Stichting DNN creëert veilige werkgelegenheid door middel van gereguleerde goudwinning, waarbij economische groei hand in hand gaat met traditie en natuur."
-      metrics={[
-        {
-          value: "137K",
-          title: "USD bijgedragen",
-        },
-        {
-          value: "250+",
-          title: "Geregistreerden",
-        },
-        {
-          value: "80",
-          title: "Schoolpakketten",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/people-working-tech-brand-together_23-2150966167.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={false}
+            title="Onze Missie en Visie"
+            description="Stichting DNN creëert veilige werkgelegenheid door middel van gereguleerde goudwinning, waarbij economische groei hand in hand gaat met traditie en natuur."
+            metrics={[
+              { value: "137K", title: "USD bijgedragen" },
+              { value: "250+", title: "Geregistreerden" },
+              { value: "80", title: "Schoolpakketten" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/people-working-tech-brand-together_23-2150966167.jpg"
+            mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardNine
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Infrastructuur",
-          description: "Aanleg van wegen, laadstations en veiligheidsperimeters.",
-          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184919.jpg",
-          },
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/cityscape-night-with-illuminated-roads_23-2151963036.jpg",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/indian-travel-destination-beautiful-attractive_53876-30996.jpg?_wi=2",
-          imageAlt: "technical territory map",
-        },
-        {
-          title: "Educatie",
-          description: "Schoolpakkettenactie en renovatie van lokale scholen.",
-          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184931.jpg",
-          },
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/vertical-high-angle-shot-narrow-asphalt-road-going-through-grass-covered-hills_181624-29136.jpg",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/people-working-tech-brand-together_23-2150966167.jpg?_wi=2",
-          imageAlt: "technical territory map",
-        },
-        {
-          title: "Veiligheid",
-          description: "24/7 bewaking en strenge veiligheidsprotocollen.",
-          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/mountain-path-road-panoramic-landscape_158595-6057.jpg",
-          },
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-road-surrounded-by-mountains-agricultural-field-countryside_181624-15449.jpg",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=1",
-          imageAlt: "technical territory map",
-        },
-      ]}
-      showStepNumbers={true}
-      title="Kernprojecten 2024-2030"
-      description="Een overzicht van onze infrastructurele, sociale en educatieve initiatieven."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardNine
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            showStepNumbers={true}
+            title="Kernprojecten 2024-2030"
+            description="Een overzicht van onze infrastructurele, sociale en educatieve initiatieven."
+            features={[
+              { title: "Infrastructuur", description: "Aanleg van wegen, laadstations en veiligheidsperimeters.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184919.jpg", imageAlt: "map" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/cityscape-night-with-illuminated-roads_23-2151963036.jpg", imageAlt: "map" } },
+              { title: "Educatie", description: "Schoolpakkettenactie en renovatie van lokale scholen.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184931.jpg", imageAlt: "map" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/vertical-high-angle-shot-narrow-asphalt-road-going-through-grass-covered-hills_181624-29136.jpg", imageAlt: "map" } },
+              { title: "Veiligheid", description: "24/7 bewaking en strenge veiligheidsprotocollen.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/mountain-path-road-panoramic-landscape_158595-6057.jpg", imageAlt: "map" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-road-surrounded-by-mountains-agricultural-field-countryside_181624-15449.jpg", imageAlt: "map" } },
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "137,000 USD",
-          title: "Gemeenschapsafdracht",
-          description: "Afgestaan voor ontwikkeling",
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-urban-island-black-white_181624-258.jpg",
-        },
-        {
-          id: "m2",
-          value: "140,000 USD",
-          title: "Security Kosten",
-          description: "Investering in veiligheid",
-          imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-paper_23-2147965760.jpg",
-        },
-        {
-          id: "m3",
-          value: "31,000 USD",
-          title: "Openstaand",
-          description: "Huidige financiële status",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184915.jpg",
-        },
-      ]}
-      title="Financieel Rapport 2024-2025"
-      description="Transparant overzicht van investeringen in veiligheid en gemeenschap."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardEleven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Financieel Rapport 2024-2025"
+            description="Transparant overzicht van investeringen in veiligheid en gemeenschap."
+            metrics={[
+              { id: "m1", value: "137,000 USD", title: "Gemeenschapsafdracht", description: "Afgestaan voor ontwikkeling", imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-urban-island-black-white_181624-258.jpg" },
+              { id: "m2", value: "140,000 USD", title: "Security Kosten", description: "Investering in veiligheid", imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-paper_23-2147965760.jpg" },
+              { id: "m3", value: "31,000 USD", title: "Openstaand", description: "Huidige financiële status", imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184915.jpg" },
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Wat houdt het protocol in?",
-          content: "Het protocol regelt de samenwerking met Rosebel Gold Mines en waarborgt verantwoorde winning.",
-        },
-        {
-          id: "f2",
-          title: "Hoe is de veiligheid geregeld?",
-          content: "Door middel van een badge-systeem, beveiligingsposten en 24/7 patrouilles.",
-        },
-        {
-          id: "f3",
-          title: "Wie kan deelnemen?",
-          content: "Toelating verloopt via een registratiesysteem met een maximum van 250 personen.",
-        },
-      ]}
-      title="Moeroekreek Concessie Protocol"
-      description="Kernpunten van onze afspraken en richtlijnen."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Wat houdt het protocol in?", content: "Het protocol regelt de samenwerking met Rosebel Gold Mines en waarborgt verantwoorde winning." },
+              { id: "f2", title: "Hoe is de veiligheid geregeld?", content: "Door middel van een badge-systeem, beveiligingsposten en 24/7 patrouilles." },
+              { id: "f3", title: "Wie kan deelnemen?", content: "Toelating verloopt via een registratiesysteem met een maximum van 250 personen." },
+            ]}
+            title="Moeroekreek Concessie Protocol"
+            description="Kernpunten van onze afspraken en richtlijnen."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "t1",
-          name: "Locatiemanager",
-          role: "Coördinatie",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=2",
-        },
-        {
-          id: "t2",
-          name: "Graafmachinist",
-          role: "Operaties",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-potted-plants_23-2149412615.jpg",
-        },
-        {
-          id: "t3",
-          name: "Veiligheidsfunctionaris",
-          role: "Toezicht",
-          imageSrc: "http://img.b2bpic.net/free-photo/tractor-operator-workplace_1398-535.jpg",
-        },
-      ]}
-      title="Ons Team"
-      description="Toegewijde professionals die de operaties en veiligheid coördineren."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardSix
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="Ons Team"
+            description="Toegewijde professionals die de operaties en veiligheid coördineren."
+            members={[
+              { id: "t1", name: "Locatiemanager", role: "Coördinatie", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg" },
+              { id: "t2", name: "Graafmachinist", role: "Operaties", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-potted-plants_23-2149412615.jpg" },
+              { id: "t3", name: "Veiligheidsfunctionaris", role: "Toezicht", imageSrc: "http://img.b2bpic.net/free-photo/tractor-operator-workplace_1398-535.jpg" },
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Matawai Elder",
-          role: "Gemeenschap",
-          testimonial: "De stichting zorgt voor een verantwoorde manier van werken die onze tradities respecteert.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-elderly-man_641386-827.jpg",
-        },
-        {
-          id: "2",
-          name: "Lokale Ondernemer",
-          role: "Lid",
-          testimonial: "Dankzij de projecten zie ik de welvaart en veiligheid in onze regio stijgen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-teenage-girl-posing_23-2148672410.jpg",
-        },
-        {
-          id: "3",
-          name: "Schoolhoofd",
-          role: "Educatie",
-          testimonial: "De steun voor onze school heeft de levens van onze kinderen direct verbeterd.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-looking-football-game-sunny-day_23-2149015484.jpg",
-        },
-        {
-          id: "4",
-          name: "Projectdeelnemer",
-          role: "Mijnwerker",
-          testimonial: "Ik voel me veiliger en gewaardeerd door de nieuwe veiligheidsprotocollen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097942.jpg",
-        },
-        {
-          id: "5",
-          name: "Inwoner",
-          role: "Inwoner",
-          testimonial: "Een toekomst voor ons en onze volgende generaties met respect voor de natuur.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-greenhouse_23-2148509894.jpg",
-        },
-      ]}
-      title="Stemmen uit de Gemeenschap"
-      description="Wat anderen zeggen over de impact van Stichting DNN."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Stemmen uit de Gemeenschap"
+            description="Wat anderen zeggen over de impact van Stichting DNN."
+            testimonials={[
+              { id: "1", name: "Matawai Elder", role: "Gemeenschap", testimonial: "De stichting zorgt voor een verantwoorde manier van werken die onze tradities respecteert.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-elderly-man_641386-827.jpg" },
+              { id: "2", name: "Lokale Ondernemer", role: "Lid", testimonial: "Dankzij de projecten zie ik de welvaart en veiligheid in onze regio stijgen.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-teenage-girl-posing_23-2148672410.jpg" },
+              { id: "3", name: "Schoolhoofd", role: "Educatie", testimonial: "De steun voor onze school heeft de levens van onze kinderen direct verbeterd.", imageSrc: "http://img.b2bpic.net/free-photo/people-looking-football-game-sunny-day_23-2149015484.jpg" },
+              { id: "4", name: "Projectdeelnemer", role: "Mijnwerker", testimonial: "Ik voel me veiliger en gewaardeerd door de nieuwe veiligheidsprotocollen.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097942.jpg" },
+              { id: "5", name: "Inwoner", role: "Inwoner", testimonial: "Een toekomst voor ons en onze volgende generaties met respect voor de natuur.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-greenhouse_23-2148509894.jpg" },
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Neem contact op"
-      description="Heeft u vragen of wilt u ondersteunen? Stuur ons een bericht."
-      inputs={[
-        {
-          name: "naam",
-          type: "text",
-          placeholder: "Uw naam",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "E-mailadres",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "bericht",
-        placeholder: "Waarmee kunnen we u helpen?",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/business-person-planning-alternative-energies_23-2149205442.jpg"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            useInvertedBackground={false}
+            title="Neem contact op"
+            description="Heeft u vragen of wilt u ondersteunen? Stuur ons een bericht."
+            inputs={[
+              { name: "naam", type: "text", placeholder: "Uw naam", required: true },
+              { name: "email", type: "email", placeholder: "E-mailadres", required: true },
+            ]}
+            textarea={{ name: "bericht", placeholder: "Waarmee kunnen we u helpen?", rows: 4 }}
+            imageSrc="http://img.b2bpic.net/free-photo/business-person-planning-alternative-energies_23-2149205442.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="DNN"
-      columns={[
-        {
-          title: "Links",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Over Ons",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "21 Bergi, Moeroekriki",
-              href: "#",
-            },
-            {
-              label: "info@stichtingdnn.sr",
-              href: "mailto:info@stichtingdnn.sr",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DNN"
+            columns={[
+              { title: "Links", items: [{ label: "Home", href: "#hero" }, { label: "Over Ons", href: "#about" }] },
+              { title: "Contact", items: [{ label: "21 Bergi, Moeroekriki", href: "#" }, { label: "info@stichtingdnn.sr", href: "mailto:info@stichtingdnn.sr" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1