Merge branch 'development'

public/includes/footer.html

@@ -6,8 +6,8 @@
         <div class="card h-100">
           <div class="card-body">
             <h2 class="section fs-4 card-title" id="section-contact">Contact</h2>
-            <h3 style="font-family: Century Gothic;">Bob Vandevliet</h3>
+            <h3 class="ff-header">Bob Vandevliet</h3>
-            <p>Gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2).</p>
+            <p>FPV-dronepiloot gecertificeert voor open categorie A1, A2 en A3 (binnenkort ook Specific STS).</p>
             <h4 class="fs-5">Email</h4>
             <p><a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a></p>
             <!-- <h3 class="fs-5">Telefoon</h3>

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,16 +25,16 @@
 
   <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.">
             <div class="card-body bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-industry"></i>
-                <br>Bedrijfsvideo (binnenkort mogelijk)
+                <br>Bedrijfsvideo
               </h3>
               <p class="card-text">
                 Laat jouw bedrijf opvallen met unieke dronebeelden, zowel binnen als buiten. Ik leg de bijzondere kenmerken van jouw locatie vast en breng interacties met jouw team in beeld.
@@ -48,7 +48,7 @@
             <div class="card-body bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-house"></i>
-                <br>Vastgoed (binnenkort mogelijk)
+                <br>Vastgoed
               </h3>
               <p class="card-text">
                 Met een vloeiende fly-through door jouw pand en van de omgeving, geef je jouw potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
@@ -136,7 +136,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.">
@@ -144,7 +144,7 @@
           <div class="col-lg-6">
             <div class="card-body">
               <p>
-                Hi, ik ben Bob Vandevliet, gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2). Ik maak FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen. Met mijn creatieve en technische achtergrond zorg ik ervoor dat jouw dronevideo er professioneel uitziet en jouw verhaal op een unieke manier verteld wordt.
+                Hi, ik ben Bob Vandevliet, FPV-dronepiloot gecertificeert voor open categorie A1, A2 en A3 (binnenkort ook Specific STS). Ik maak FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen. Met mijn creatieve en technische achtergrond zorg ik ervoor dat jouw dronevideo er professioneel uitziet en jouw verhaal op een unieke manier verteld wordt.
               </p>
               <p>
                 Als kind wilde ik luchtvaartpiloot worden en droomde ik regelmatig dat ik kon vliegen zoals Superman. Ik was ook altijd bezig met filmen, videobewerking en elektronisch muziek maken. Deze hobby's gaven me veel plezier, maar ik koos uiteindelijk voor een carrière in de techniek als industrieel productontwerper. Naast mijn werk ontwikkelde ik een passie voor web- en softwareontwikkeling, wat later mijn beroep werd.
@@ -161,44 +161,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>
+              <p class="card-text fs-4 ff-header">v.a. €299,-</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.
-          </p>
                 </div>
-        <div class="col-sm-6 col-lg">
+              </li>
-          <h3>
+              <li class="list-group-item">
-            <i class="fa-solid fa-plane"></i>
+                <a data-bs-toggle="collapse" href="#collapse-vluchtplan" role="button" aria-expanded="false" aria-controls="collapse-vluchtplan">
-            <br>Vluchtplan
+                  Script of vluchtplan tegen meerprijs
-          </h3>
+                </a>
-          <p>
+                <div class="collapse" id="collapse-vluchtplan">
-            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.
+                  <i class="fa-solid fa-plane"></i><br>
-          </p>
+                  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>
-        <div class="col-sm-6 col-lg">
+              </li>
-          <h3>
+              <li class="list-group-item">
-            <i class="fa-solid fa-video"></i>
+                <a data-bs-toggle="collapse" href="#collapse-opname" role="button" aria-expanded="false" aria-controls="collapse-opname">
-            <br>Opname
+                  Max. 4 uur op locatie
-          </h3>
+                </a>
-          <p>
+                <div class="collapse" id="collapse-opname">
-            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-video"></i><br>
-          </p>
+                  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>
-        <div class="col-sm-6 col-lg">
+              </li>
-          <h3>
+              <li class="list-group-item">Extra op locatie à €75,- /uur</li>
-            <i class="fa-solid fa-wand-magic-sparkles"></i>
+              <li class="list-group-item">Kwaliteit tot 4K, 60 FPS</li>
-            <br>Montage
+              <li class="list-group-item">Binnen en buiten filmen mogelijk</li>
-          </h3>
+              <li class="list-group-item">Alleen open categorie A3<br>(Binnenkort ook Specific STS)</li>
-          <p>
+              <li class="list-group-item">Reiskosten à €0.35 /km vanuit Arnhem</li>
+              <li class="list-group-item">Binnen 3 werkdagen 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-6 col-lg-3">
+          <div class="card h-100 bg-secondary-subtle">
+            <div class="card-body"><!-- bg-light text-dark -->
+              <h3 class="card-title">Dronevideo compleet</h3>
+              <p class="card-text">Inclusief montage en kleurcorrectie.</p>
+              <p class="card-text fs-4 ff-header">v.a. €689,-</p>
+            </div>
+            <ul class="list-group list-group-flush h-100">
+              <li class="list-group-item">Alles in "Ruwe opnames", <b>maar dan</b> ..</li>
+              <li class="list-group-item">
+                <a data-bs-toggle="collapse" href="#collapse-montage" role="button" aria-expanded="false" aria-controls="collapse-montage">
+                  <b>Inclusief montage + 1x feedback</b>
+                </a>
+                <div class="collapse" id="collapse-montage">
+                  <i class="fa-solid fa-wand-magic-sparkles"></i><br>
                   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.
-          </p>
+                </div>
+              </li>
+              <li class="list-group-item">Extra op locatie à <b>€140,- /uur</b>,<br>(<b>Montagekosten ingecalculeerd</b>)</li>
+              <li class="list-group-item">Binnen <b>14 kalenderdagen</b> 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>
     </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";
@@ -113,12 +113,14 @@ main>* {
   transition: opacity 0.2s;
 }
 
+.ff-header,
 h1,
 h2 {
   font-family: 'Century Gothic',
   var(--#{$prefix}font-sans-serif);
 }
 
+.ff-subheader,
 h3,
 h4,
 h5,
@@ -274,6 +276,12 @@ img.grayscale-effect {
   height: 100%;
 }
 
+.list-group-item {
+  background-color: inherit;
+  border: solid var(--bs-body-bg);
+  border-width: 3px 0 0 0 !important;
+}
+
 .socials {
   display: flex;
   gap: .5rem;