Replaced WoW with pricing table.

public/includes/nav.html

@@ -15,7 +15,7 @@
           <a class="nav-link" href="/#section-about">Over mij</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/#section-wow">Werkwijze</a>
+          <a class="nav-link" href="/#section-pricing">Prijzen</a>
         </li>
         <li class="nav-item">
           <a class="btn btn-primary" href="/#section-contact">Contact</a>

public/index.html

@@ -25,9 +25,9 @@
 
   <main>
 
-    <section class="container-xxl">
+    <section class="container-xxl text-center">
-      <h2 class="text-center" id="section-services">FPV drone opnames laten maken</h2>
+      <h2 id="section-services">FPV drone opnames laten maken</h2>
-      <div class="row text-center">
+      <div class="row">
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
             <img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/fittings-2784899_640.jpg" alt="Abstracte close-up afbeelding van een machine.">
@@ -150,7 +150,7 @@
     <section class="container-xxl">
       <div id="section-about"></div>
       <div class="card h-100 bg-light text-dark">
-        <h2 class="card-title text-center mt-4">Over mij</h2>
+        <h2 class="card-title mt-4 text-center">Over mij</h2>
         <div class="row g-0">
           <div class="col-lg-6 gradient-to-top-light">
             <img class="card-img" style="object-position: left;" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
@@ -175,44 +175,86 @@
       </div>
     </section>
 
-    <section class="container-xxl">
+    <section class="container-xxl text-center">
-      <h2 class="text-center" id="section-wow">Werkwijze</h2>
+      <h2 id="section-pricing">Prijzen en tarieven</h2>
-      <div class="row text-center">
+      <p>Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
-        <div class="col-sm-6 col-lg">
+      <div class="row justify-content-center">
-          <h3>
+        <div class="col-6 col-lg-3">
-            <i class="fa-solid fa-handshake-simple"></i>
+          <div class="card h-100 bg-secondary-subtle">
-            <br>Intake
+            <div class="card-body"><!-- bg-light text-dark -->
-          </h3>
+              <h3 class="card-title">Ruwe opnames</h3>
-          <p>
+              <p class="card-text">De originele beelden, onbewerkt.</p>
-            Elk project begint met een goede voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in. We bespreken jouw doelen, wensen en visie, creatieve ideeën over de inhoud, en de gewenste toon en stijl. Wat wil je bereiken met de dronevideo? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passende offerte binnen jouw budget.
+              <p class="card-text fs-4 ff-header">v.a. €299,-</p>
-          </p>
+            </div>
+            <ul class="list-group list-group-flush h-100">
+              <li class="list-group-item">
+                <a data-bs-toggle="collapse" href="#collapse-intake" role="button" aria-expanded="false" aria-controls="collapse-intake">
+                  Inclusief intake gesprek
+                </a>
+                <div class="collapse" id="collapse-intake">
+                  <i class="fa-solid fa-handshake-simple"></i><br>
+                  Elk project begint met een goede voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in. We bespreken jouw doelen, wensen en visie, creatieve ideeën over de inhoud, en de gewenste toon en stijl. Wat wil je bereiken met de dronevideo? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passende offerte binnen jouw budget.
+                </div>
+              </li>
+              <li class="list-group-item">
+                <a data-bs-toggle="collapse" href="#collapse-vluchtplan" role="button" aria-expanded="false" aria-controls="collapse-vluchtplan">
+                  Script of vluchtplan tegen meerprijs
+                </a>
+                <div class="collapse" id="collapse-vluchtplan">
+                  <i class="fa-solid fa-plane"></i><br>
+                  Samen maken we een vluchtplan en schrijven we een script of draaiboek. Zo komt jouw boodschap optimaal in beeld. Komen er ook mensen in beeld? Dan zorgen we er samen voor dat zij goed geïnstrueerd en voorbereid zijn, en weten wat er van hen verwacht wordt.
+                </div>
+              </li>
+              <li class="list-group-item">
+                <a data-bs-toggle="collapse" href="#collapse-opname" role="button" aria-expanded="false" aria-controls="collapse-opname">
+                  Max. 4 uur op locatie
+                </a>
+                <div class="collapse" id="collapse-opname">
+                  <i class="fa-solid fa-video"></i><br>
+                  Op de afgesproken datum en locatie begin ik met het opnemen van jouw dronevideo. Tijdens het filmen houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er drone opnames buiten gepland en werkt het weer niet mee? Dan plannen we kosteloos een nieuwe datum om de drone opnames te voltooien.
+                </div>
+              </li>
+              <li class="list-group-item">Extra op locatie à €75,- /uur</li>
+              <li class="list-group-item">Kwaliteit tot 4K, 60 FPS</li>
+              <li class="list-group-item">Binnen en buiten filmen mogelijk</li>
+              <li class="list-group-item">No-fly-zones niet mogelijk</li>
+              <li class="list-group-item">Reiskosten à €0.35 /km vanuit Arnhem</li>
+              <li class="list-group-item">Beelden binnen 7 kalenderdagen geleverd</li>
+            </ul>
+            <!-- <div class="card-body">
+              <p class="card-text">Referenties:</p>
+              <a href="#" class="card-link">Some project</a>
+              <a href="#" class="card-link">Another project</a>
+            </div> -->
+          </div>
         </div>
-        <div class="col-sm-6 col-lg">
+        <div class="col-6 col-lg-3">
-          <h3>
+          <div class="card h-100 bg-secondary-subtle">
-            <i class="fa-solid fa-plane"></i>
+            <div class="card-body"><!-- bg-light text-dark -->
-            <br>Vluchtplan
+              <h3 class="card-title">Dronevideo compleet</h3>
-          </h3>
+              <p class="card-text">Inclusief montage en kleurcorrectie.</p>
-          <p>
+              <p class="card-text fs-4 ff-header">v.a. €659,-</p>
-            Zodra de offerte akkoord is, start ik met de preproductiefase. Ik maak een vluchtplan en schrijf een script of draaiboek. Zo zorg ik ervoor dat jouw boodschap optimaal in beeld komt. Komen er ook mensen in beeld? Dan zorgen we er samen voor dat zij goed geïnstrueerd en voorbereid zijn, en weten wat er van hen verwacht wordt.
+            </div>
-          </p>
+            <ul class="list-group list-group-flush h-100">
-        </div>
+              <li class="list-group-item">Alles in "Ruwe opnames",<br>maar dan ..</li>
-        <div class="col-sm-6 col-lg">
+              <li class="list-group-item">Extra op locatie à <u>€90,-</u> /uur</li>
-          <h3>
+              <li class="list-group-item">
-            <i class="fa-solid fa-video"></i>
+                <a data-bs-toggle="collapse" href="#collapse-montage" role="button" aria-expanded="false" aria-controls="collapse-montage">
-            <br>Opname
+                  <u>Inclusief</u> montage + 1x feedback
-          </h3>
+                </a>
-          <p>
+                <div class="collapse" id="collapse-montage">
-            Op de afgesproken datum en locatie begin ik met het opnemen van jouw dronevideo. Tijdens het filmen houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er drone opnames buiten gepland en werkt het weer niet mee? Dan plannen we gewoon een nieuwe datum om de drone opnames te voltooien.
+                  <i class="fa-solid fa-wand-magic-sparkles"></i><br>
-          </p>
+                  Zodra de drone opnames zijn gemaakt, kiezen we samen de beste beelden uit. Daarna breng ik jouw verhaal zorgvuldig tot leven met beeld-, geluids- en kleurbewerking, zodat jouw bedrijf, merk, product of dienst zo goed mogelijk gepresenteerd wordt. Ik zorg ervoor dat de visuele montage aansluit bij je doelgroep en lever jouw dronevideo in de juiste formaten voor de gewenste mediakanalen.
-        </div>
+                </div>
-        <div class="col-sm-6 col-lg">
+              </li>
-          <h3>
+              <li class="list-group-item">Beelden binnen <u>14</u> kalenderdagen geleverd</li>
-            <i class="fa-solid fa-wand-magic-sparkles"></i>
+            </ul>
-            <br>Montage
+            <!-- <div class="card-body">
-          </h3>
+              <p class="card-text">Referenties:</p>
-          <p>
+              <a href="#" class="card-link">Some project</a>
-            Zodra de drone opnames zijn gemaakt, kiezen we samen de beste beelden uit. Daarna breng ik jouw verhaal zorgvuldig tot leven met beeld-, geluids- en kleurbewerking, zodat jouw bedrijf, merk, product of dienst zo goed mogelijk gepresenteerd wordt. Ik zorg ervoor dat de visuele montage aansluit bij je doelgroep en lever jouw dronevideo in de juiste formaten voor de gewenste mediakanalen.
+              <a href="#" class="card-link">Another project</a>
-          </p>
+            </div> -->
+          </div>
         </div>
       </div>
     </section>

src/scss/styles.scss

@@ -36,6 +36,7 @@ $carousel-dark-control-icon-filter:  unset;
 @import "../../node_modules/bootstrap/scss/card";
 @import "../../node_modules/bootstrap/scss/carousel";
 @import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/list-group";
 @import "../../node_modules/bootstrap/scss/transitions";
 // @import "../../node_modules/bootstrap/scss/accordion";
 // @import "../../node_modules/bootstrap/scss/alert";
@@ -45,7 +46,6 @@ $carousel-dark-control-icon-filter:  unset;
 // @import "../../node_modules/bootstrap/scss/close";
 // @import "../../node_modules/bootstrap/scss/dropdown";
 // @import "../../node_modules/bootstrap/scss/forms";
-// @import "../../node_modules/bootstrap/scss/list-group";
 // @import "../../node_modules/bootstrap/scss/modal"; // Requires transitions
 // @import "../../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
 // @import "../../node_modules/bootstrap/scss/pagination";
@@ -276,6 +276,12 @@ img.grayscale-effect {
   height: 100%;
 }
 
+.list-group-item {
+  background-color: inherit;
+  border: solid var(--bs-body-bg);
+  border-width: 2px 0 0 0 !important;
+}
+
 .socials {
   display: flex;
   gap: .5rem;