public/includes/footer.html

@@ -34,7 +34,7 @@
   <div class="text-center py-4">
     <p>
       Vandevliet Aerial Shots &copy; <!--# config timefmt="%Y" --><!--# echo var="date_local" -->
-      &bull; <a href="/privacy#">Privacyverklaring</a>
+      &bull; <a href="/privacy">Privacyverklaring</a>
       &bull; <a href="/assets/static/Vandevliet AS - Algemene Voorwaarden - 250530.pdf" target="_blank">Algemene Voorwaarden</a>
     </p>
   </div>

public/includes/nav.html

@@ -18,7 +18,7 @@
           <a class="nav-link" href="/#over-mij">Over mij</a>
         </li>
         <li class="nav-item">
-          <a class="btn btn-primary" href="#contact">Contact</a>
+          <a class="btn btn-primary" href="/#contact">Contact</a>
         </li>
       </ul>
     </div>

public/includes/pricing/cat-open.html

@@ -1,43 +0,0 @@
-<div class="card h-100 bg-secondary-subtle">
-  <div class="card-body">
-    <h3 class="card-title">Open categorie</h3>
-    <p class="card-text fs-4 ff-header">vanaf €299,-</p>
-    <p class="card-text">Geschikt voor indoor en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
-    <ul>
-      <li>Bedrijfsvideo</li>
-      <li>Vastgoed</li>
-    </ul>
-    <p class="card-text">Inclusief:</p>
-    <ul>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-intake-cat-open" role="button" aria-expanded="false" aria-controls="collapse-intake-cat-open">
-          Intake gesprek
-        </a>
-        <div class="collapse pb-1" id="collapse-intake-cat-open">
-          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>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-vluchtplan-cat-open" role="button" aria-expanded="false" aria-controls="collapse-vluchtplan-cat-open">
-          Script of draaiboek
-        </a>
-        <div class="collapse pb-1" id="collapse-vluchtplan-cat-open">
-          Samen maken 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 voorbereid zijn en precies weten wat ze moeten doen.
-        </div>
-      </li>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-opname-cat-open" role="button" aria-expanded="false" aria-controls="collapse-opname-cat-open">
-          Max. 4 uur op locatie, daarna +€75,- /uur
-        </a>
-        <div class="collapse pb-1" id="collapse-opname-cat-open">
-          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>Kwaliteit tot 4K, 60FPS</li>
-      <li>Binnen filmen is altijd mogelijk</li>
-      <li>Buiten filmen in open categorie A3</li>
-      <li>Reiskosten à €0.35 /km vanuit Arnhem</li>
-      <li>Binnen 3 werkdagen geleverd</li>
-    </ul>
-  </div>
-</div>

public/includes/pricing/cat-specific.html

@@ -1,51 +0,0 @@
-<div class="card h-100 bg-secondary-subtle">
-  <div class="card-body">
-    <h3 class="card-title">Specifieke categorie (binnenkort mogelijk)</h3>
-    <p class="card-text fs-4 ff-header">vanaf €399,-</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>
-    </ul>
-    <p class="card-text">Inclusief:</p>
-    <ul>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-intake-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-intake-cat-spec">
-          Intake gesprek
-        </a>
-        <div class="collapse pb-1" id="collapse-intake-cat-spec">
-          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>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-script-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-script-cat-spec">
-          Script of draaiboek
-        </a>
-        <div class="collapse pb-1" id="collapse-script-cat-spec">
-          Samen maken 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 voorbereid zijn en precies weten wat ze moeten doen.
-        </div>
-      </li>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-administratie-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-administratie-cat-spec">
-          Administratiekosten, totaal €60,-
-        </a>
-        <div class="collapse pb-1" id="collapse-administratie-cat-spec">
-          Om te mogen vliegen in de specifieke categorie is vaak extra administratie nodig. Denk aan het maken van een operationeel vluchtplan en het verkrijgen van ontheffingen.
-        </div>
-      </li>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-opname-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-opname-cat-spec">
-          Max. 4 uur op locatie, daarna +€85,- /uur
-        </a>
-        <div class="collapse pb-1" id="collapse-opname-cat-spec">
-          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>Kwaliteit tot 4K, 60FPS</li>
-      <li>Buiten filmen in specifieke categorie</li>
-      <li>Reiskosten à €0.35 /km vanuit Arnhem</li>
-      <li>Binnen 3 werkdagen geleverd</li>
-    </ul>
-  </div>
-</div>

public/includes/pricing/post-edit.html

@@ -1,22 +0,0 @@
-<div class="card h-100 bg-secondary-subtle">
-  <div class="card-body">
-    <h3 class="card-title">Nabewerking (optioneel)</h3>
-    <p class="card-text">
-      <span class="fs-4 ff-header">vanaf €389,-</span><br>
-      <i>Meerprijs wordt bepaald door de hoeveelheid beeldmateriaal, lengte van de video en complexiteit van de montage.</i>
-    </p>
-    <p>
-    <ul>
-      <li>
-        <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#collapse-montage" role="button" aria-expanded="false" aria-controls="collapse-montage">
-          Inclusief montage en kleurcorrectie + 2x feedback
-        </a>
-        <div class="collapse pb-1" id="collapse-montage">
-          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>
-      </li>
-      <li>Levertermijn in overleg</li>
-    </ul>
-    </p>
-  </div>
-</div>

public/index.html

@@ -15,13 +15,15 @@
   <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
 </head>
 
-<body class="has-hero">
+<body class="home">
   <header>
     <!--# include file="/includes/nav.html" -->
 
-    <div class="hero position-relative overflow-hidden" style="height: 100vh;">
+    <div class="hero position-relative overflow-hidden">
       <div class="hero-body position-absolute bottom-0" style="z-index: 1;">
-        <h1 class="h5">FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen</h1>
+        <h1 class="h5">
+          FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen
+        </h1>
         <p><a class="btn btn-primary" href="#diensten">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
       </div>
       <video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
@@ -31,6 +33,7 @@
   </header>
 
   <main>
+
     <section class="container-xxl text-center">
       <h2 id="diensten">FPV drone opnames laten maken</h2>
       <div class="row">
@@ -118,15 +121,129 @@
 
       <div class="row justify-content-center">
         <div class="col-sm-6 col-lg-4">
-          <!--# include file="/includes/pricing/cat-open.html" -->
+          <div class="card h-100 bg-secondary-subtle">
+            <div class="card-body">
+              <h3 class="card-title">Open categorie</h3>
+              <p class="card-text fs-4 ff-header">vanaf €299,-</p>
+              <p class="card-text">Geschikt voor indoor en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
+              <ul>
+                <li>Bedrijfsvideo</li>
+                <li>Vastgoed</li>
+              </ul>
+              <p class="card-text">Inclusief:</p>
+              <ul>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-intake-cat-open" role="button" aria-expanded="false" aria-controls="collapse-intake-cat-open">
+                    Intake gesprek
+                  </a>
+                  <div class="collapse" id="collapse-intake-cat-open">
+                    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>
+                  <a data-bs-toggle="collapse" href="#collapse-vluchtplan-cat-open" role="button" aria-expanded="false" aria-controls="collapse-vluchtplan-cat-open">
+                    Script of draaiboek
+                  </a>
+                  <div class="collapse" id="collapse-vluchtplan-cat-open">
+                    Samen maken 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 voorbereid zijn en precies weten wat ze moeten doen.
+                  </div>
+                </li>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-opname-cat-open" role="button" aria-expanded="false" aria-controls="collapse-opname-cat-open">
+                    Max. 4 uur op locatie, daarna +€75,- /uur
+                  </a>
+                  <div class="collapse" id="collapse-opname-cat-open">
+                    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>Kwaliteit tot 4K, 60FPS</li>
+                <li>Binnen filmen is altijd mogelijk</li>
+                <li>Buiten filmen in open categorie A3</li>
+                <li>Reiskosten à €0.35 /km vanuit Arnhem</li>
+                <li>Binnen 3 werkdagen geleverd</li>
+              </ul>
+            </div>
+          </div>
         </div>
         <div class="col-sm-6 col-lg-4">
-          <!--# include file="/includes/pricing/cat-specific.html" -->
+          <div class="card h-100 bg-secondary-subtle">
+            <div class="card-body">
+              <h3 class="card-title">Specifieke categorie (binnenkort mogelijk)</h3>
+              <p class="card-text fs-4 ff-header">vanaf €399,-</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>
+              </ul>
+              <p class="card-text">Inclusief:</p>
+              <ul>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-intake-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-intake-cat-spec">
+                    Intake gesprek
+                  </a>
+                  <div class="collapse" id="collapse-intake-cat-spec">
+                    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>
+                  <a data-bs-toggle="collapse" href="#collapse-vluchtplan-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-vluchtplan-cat-spec">
+                    Script of draaiboek
+                  </a>
+                  <div class="collapse" id="collapse-vluchtplan-cat-spec">
+                    Samen maken 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 voorbereid zijn en precies weten wat ze moeten doen.
+                  </div>
+                </li>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-toestemming-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-toestemming-cat-spec">
+                    Administratiekosten, totaal €60,-
+                  </a>
+                  <div class="collapse" id="collapse-toestemming-cat-spec">
+                    Om te mogen vliegen in de specifieke categorie is vaak extra administratie nodig. Denk aan het maken van een operationeel vluchtplan en het verkrijgen van toestemming.
+                  </div>
+                </li>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-opname-cat-spec" role="button" aria-expanded="false" aria-controls="collapse-opname-cat-spec">
+                    Max. 4 uur op locatie, daarna +€85,- /uur
+                  </a>
+                  <div class="collapse" id="collapse-opname-cat-spec">
+                    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>Kwaliteit tot 4K, 60FPS</li>
+                <li>Buiten filmen in specifieke categorie</li>
+                <li>Reiskosten à €0.35 /km vanuit Arnhem</li>
+                <li>Binnen 3 werkdagen geleverd</li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
+
       <div class="row justify-content-center">
         <div class="col-lg-8">
-          <!--# include file="/includes/pricing/post-edit.html" -->
+          <div class="card h-100 bg-secondary-subtle">
+            <div class="card-body">
+              <h3 class="card-title">Nabewerking (optioneel)</h3>
+              <p class="card-text">
+                <span class="fs-4 ff-header">vanaf €389,-</span><br>
+                <i>Meerprijs wordt bepaald door de hoeveelheid beeldmateriaal, lengte van de video en complexiteit van de montage.</i>
+              </p>
+              <p>
+              <ul>
+                <li>
+                  <a data-bs-toggle="collapse" href="#collapse-montage" role="button" aria-expanded="false" aria-controls="collapse-montage">
+                    Inclusief montage en kleurcorrectie + 2x feedback
+                  </a>
+                  <div class="collapse" id="collapse-montage">
+                    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>
+                </li>
+                <li>Levertermijn in overleg</li>
+              </ul>
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </section>
@@ -179,6 +296,7 @@
         </div>
       </div>
     </section>
+
   </main>
 
   <!--# include file="/includes/footer.html" -->

public/privacy.html

@@ -46,7 +46,7 @@
 
     <section class="container-xxl">
       <h2>Klacht indienen</h2>
-      <p>Indien je van mening bent dat ik jouw privacy niet op de juiste manier waarborg, dan heb je het recht om een klacht in te dienen bij de toezichthouder. In Nederland is dit de Autoriteit Persoonsgegevens. Op <a href="https://www.autoriteitpersoonsgegevens.nl/" target="_blank" rel="noreferrer noopener">autoriteitpersoonsgegevens.nl <i class="fa-solid fa-up-right-from-square"></i></a> vindt je alle informatie over hoe je een klacht in kunt dienen.</p>
+      <p>Indien je van mening bent dat ik jouw privacy niet op de juiste manier waarborg, dan heb je het recht om een klacht in te dienen bij de toezichthouder. In Nederland is dit de Autoriteit Persoonsgegevens. Op <a href="https://www.autoriteitpersoonsgegevens.nl/" target="_blank" rel="noreferrer noopener">autoriteitpersoonsgegevens.nl</a> vindt je alle informatie over hoe je een klacht in kunt dienen.</p>
     </section>
 
     <section class="container-xxl">

src/scss/styles.scss

@@ -19,7 +19,6 @@ $primary: $red; // Default: $blue
 $carousel-indicator-active-bg-dark: $white;
 $carousel-caption-color-dark: $white;
 $carousel-control-icon-filter-dark: unset;
-$accordion-icon-width: 1rem;
 
 // Include remainder of required parts
 @import "bootstrap/scss/maps";
@@ -39,7 +38,7 @@ $accordion-icon-width: 1rem;
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/transitions";
-@import "bootstrap/scss/accordion";
+// @import "bootstrap/scss/accordion";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/badge";
 // @import "bootstrap/scss/breadcrumb";
@@ -91,7 +90,7 @@ main {
   padding-top: 7rem !important;
 }
 
-body.has-hero main {
+body.home main {
   @extend .pt-3;
 }
 
@@ -196,8 +195,8 @@ h6:hover .anchor-link {
     1px 1px 0 rgba(255, 255, 255, 0.4);
 }
 
-:not(a)>.fa-regular,
+.fa-regular,
-:not(a)>.fa-solid {
+.fa-solid {
   color: var(--bs-primary);
 }
 
@@ -216,12 +215,21 @@ body.is-scrolled .navbar {
   max-width: fit-content;
 }
 
+.hero {
+  height: 100vh;
+}
+
 .hero-body {
   width: 100%;
   padding: 1rem;
   @extend .h5;
   @extend .text-center;
   @extend .text-white;
+
+  .btn {
+    @extend .text-white;
+    font-family: $ff-header;
+  }
 }
 
 .nav-item {
@@ -234,8 +242,6 @@ body.is-scrolled .navbar {
 }
 
 .btn {
-  @extend .text-white;
-  font-family: $ff-header;
 
   .fa-regular,
   .fa-solid {
@@ -324,23 +330,6 @@ img.grayscale-effect {
   @extend .p-0;
 }
 
-.accordion-button:not(.accordion .accordion-button) {
-  @extend .accordion;
-
-  padding: unset;
-  color: unset;
-  background-color: unset;
-  box-shadow: unset;
-  border: 0;
-
-  &::after {
-    width: var(--#{$prefix}accordion-btn-icon-width);
-    height: var(--#{$prefix}accordion-btn-icon-width);
-    margin-left: .5rem;
-    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
-  }
-}
-
 .list-group-item {
   background-color: inherit;
   border: solid var(--bs-body-bg);