From cc36a2abdd7e1876d32b181d2e14557b2330672f Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <35454011+bvandevliet@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:18:38 +0100
Subject: [PATCH] Navigation dropdown, homepage links and pricing links.

Convert Diensten nav link to Bootstrap dropdown with all 5 services.
Enable Bootstrap dropdown SCSS import and add dark-theme styles.
Switch to bootstrap.bundle.min.js (includes Popper.js for dropdown).
Add "Lees meer" links to recreatie, sport, evenementen homepage cards.
Add service page links in cat-specific pricing component.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 public/includes/components/nav.html        | 11 +++++++++--
 public/includes/partials/head-content.html |  2 +-
 public/includes/pricing/cat-specific.html  |  6 +++---
 public/index.html                          |  9 +++++++++
 src/scss/styles.scss                       | 23 +++++++++++++++++++++-
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/public/includes/components/nav.html b/public/includes/components/nav.html
index 8e7619d..9a5b6de 100644
--- a/public/includes/components/nav.html
+++ b/public/includes/components/nav.html
@@ -8,8 +8,15 @@
     </button>
     <div id="navbarNav" class="collapse navbar-collapse">
       <ul class="navbar-nav text-center">
-        <li class="nav-item">
-          <a class="nav-link" href="/#diensten">Diensten</a>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="/#diensten" role="button" data-bs-toggle="dropdown" aria-expanded="false">Diensten</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="/bedrijfsvideo">Bedrijfsvideo</a></li>
+            <li><a class="dropdown-item" href="/vastgoed">Vastgoed</a></li>
+            <li><a class="dropdown-item" href="/recreatie">Recreatie</a></li>
+            <li><a class="dropdown-item" href="/sport">Sport</a></li>
+            <li><a class="dropdown-item" href="/evenementen">Evenementen</a></li>
+          </ul>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="/#prijzen">Prijzen</a>
diff --git a/public/includes/partials/head-content.html b/public/includes/partials/head-content.html
index 546a338..137c68b 100644
--- a/public/includes/partials/head-content.html
+++ b/public/includes/partials/head-content.html
@@ -49,5 +49,5 @@
 </script>
 
 <script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" defer></script>
 <script src="/assets/js/scripts.min.js" async></script>
\ No newline at end of file
diff --git a/public/includes/pricing/cat-specific.html b/public/includes/pricing/cat-specific.html
index a08d146..b25dcd8 100644
--- a/public/includes/pricing/cat-specific.html
+++ b/public/includes/pricing/cat-specific.html
@@ -4,9 +4,9 @@
     <p class="card-text fs-4 ff-header">vanaf €450,-</p>
     <p class="card-text">Vereist voor vluchten met een hoger risico of in gecontroleerd luchtruim:</p>
     <ul>
-      <li>Recreatie</li>
-      <li>Sport</li>
-      <li>Evenementen</li>
+      <li><a href="/recreatie">Recreatie</a></li>
+      <li><a href="/sport">Sport</a></li>
+      <li><a href="/evenementen">Evenementen</a></li>
     </ul>
     <p class="card-text">Inclusief:</p>
     <ul>
diff --git a/public/index.html b/public/index.html
index 47f5ec6..f1ae1c6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -85,6 +85,9 @@
               <p class="card-text">
                 Presenteer jouw attractiepark, camping of recreatiepark vanuit een ander perspectief met adembenemende dronebeelden.
               </p>
+              <p style="margin-top: auto !important; padding-top: 1rem !important;">
+                <a href="/recreatie#" class="btn btn-primary stretched-link">Lees meer</a>
+              </p>
             </div>
           </div>
         </div>
@@ -99,6 +102,9 @@
               <p class="card-text">
                 Breng jouw sportevenement spectaculair in beeld met FPV actiebeelden op hoge snelheden en slechts centimeters van de actie verwijderd.
               </p>
+              <p style="margin-top: auto !important; padding-top: 1rem !important;">
+                <a href="/sport#" class="btn btn-primary stretched-link">Lees meer</a>
+              </p>
             </div>
           </div>
         </div>
@@ -113,6 +119,9 @@
               <p class="card-text">
                 Leg de grootsheid, sfeer en energie van elk evenement vast. Denk aan aftermovie's, festivals en bruiloften, tot privé- en bedrijfsfeesten.
               </p>
+              <p style="margin-top: auto !important; padding-top: 1rem !important;">
+                <a href="/evenementen#" class="btn btn-primary stretched-link">Lees meer</a>
+              </p>
             </div>
           </div>
         </div>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 56b43c0..8079b2b 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -43,12 +43,12 @@ $accordion-icon-width: 1rem;
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/accordion";
+@import "bootstrap/scss/dropdown";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/badge";
 // @import "bootstrap/scss/breadcrumb";
 // @import "bootstrap/scss/button-group";
 // @import "bootstrap/scss/close";
-// @import "bootstrap/scss/dropdown";
 // @import "bootstrap/scss/forms";
 // @import "bootstrap/scss/modal"; // Requires transitions
 // @import "bootstrap/scss/offcanvas"; // Requires transitions
@@ -254,6 +254,23 @@ body.is-scrolled .navbar {
     padding-bottom: var(--bs-nav-link-padding-y);
   }
 
+  .dropdown-menu {
+    border: none;
+    background-color: rgba(22, 23, 25, 0.95);
+    @extend .text-center;
+  }
+
+  .dropdown-item {
+    color: var(--bs-navbar-color);
+    font-family: $ff-header;
+
+    &:hover,
+    &:focus {
+      color: var(--bs-navbar-hover-color);
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+  }
+
   .socials {
     @extend .justify-content-center;
   }
@@ -261,6 +278,10 @@ body.is-scrolled .navbar {
   // navbar-expand-lg
   @include media-breakpoint-up(lg) {
 
+    .dropdown-menu {
+      text-align: left;
+    }
+
     .btn:not(.btn+.btn),
     .socials a:not(a+a) {
       margin-left: var(--bs-navbar-nav-link-padding-x);