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

@@ -8,8 +8,15 @@
     </button>
     <div id="navbarNav" class="collapse navbar-collapse">
       <ul class="navbar-nav text-center">
-        <li class="nav-item">
+        <li class="nav-item dropdown">
-          <a class="nav-link" href="/#diensten">Diensten</a>
+          <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>

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>

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><a href="/recreatie">Recreatie</a></li>
-      <li>Sport</li>
+      <li><a href="/sport">Sport</a></li>
-      <li>Evenementen</li>
+      <li><a href="/evenementen">Evenementen</a></li>
     </ul>
     <p class="card-text">Inclusief:</p>
     <ul>

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>

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);