Added form, yet needs submission handling.

public/contact.html

@@ -21,12 +21,71 @@
   </header>
 
   <main>
-    <section class="container-xxl pb-0">
+    <section class="container-xxl">
       <h1 id="contact" class="text-center">Contact</h1>
-      <!--# include file='/includes/components/contact-row.html' -->
+      <div class="row justify-content-center">
+        <div class="col-lg-8 mt-0">
+          <form id="quote-form">
+            <div class="row mb-3">
+              <div class="col">
+                <label for="nameInput" class="form-label">Voornaam *</label>
+                <input type="text" class="form-control" id="nameInput" required>
+              </div>
+              <div class="col">
+                <label for="surnameInput" class="form-label">Achternaam *</label>
+                <input type="text" class="form-control" id="surnameInput" required>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label for="companyInput" class="form-label">Bedrijfsnaam</label>
+              <input type="text" class="form-control" id="companyInput">
+            </div>
+            <div class="mb-3">
+              <label for="messageInput" class="form-label">Korte toelichting *</label>
+              <!-- <label for="messageInput" class="form-label">Licht kort jouw aanvraag toe *</label> -->
+              <!-- <label for="messageInput" class="form-label">Vertel iets meer over jouw aanvraag *</label> -->
+              <!-- <label for="messageInput" class="form-label">Beschrijf kort jouw project *</label> -->
+              <textarea class="form-control" id="messageInput" rows="4" required></textarea>
+            </div>
+            <div class="mb-3">
+              <label for="emailInput" class="form-label">Email *</label>
+              <input type="email" class="form-control" id="emailInput" required>
+            </div>
+            <div class="mb-3">
+              <label for="phoneInput" class="form-label">Telefoon</label>
+              <input type="tel" class="form-control" id="phoneInput">
+            </div>
+            <div class="mt-2 text-center">
+              <button type="submit" class="btn btn-primary mt-2">Verstuur</button>
+              <p><small>Ik ontvang een email met de gegevens van jouw aanvraag. Ook gebruik ik deze gegevens ter aanvulling van mijn self-hosted CRM.</small></p>
+            </div>
+          </form>
+        </div>
+      </div>
     </section>
 
-    <!-- Nothing more here yet, contact form will be added later.. -->
+    <section id="prijzen" class="container-xxl">
+      <h2 class="text-center">Prijzen en tarieven</h2>
+      <p class="text-center">Wat kost een dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
+
+      <div class="row justify-content-center">
+        <div class="col-sm-6 col-lg-4">
+          <!--# include file="/includes/pricing/cat-open.html" -->
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <!--# include file="/includes/pricing/cat-specific.html" -->
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-lg-8">
+          <!--# include file="/includes/pricing/post-edit.html" -->
+        </div>
+      </div>
+    </section>
+
+    <section class="container-xxl pb-0">
+      <!--# include file='/includes/components/contact-row.html' -->
+    </section>
   </main>
 
   <footer class="bg-secondary-subtle">

public/includes/pricing/cat-open.html

@@ -4,8 +4,8 @@
     <p class="card-text fs-4 ff-header">vanaf €350,-</p>
     <p class="card-text">Geschikt voor indoor drone tours en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
     <ul>
-      <li>Bedrijfsvideo</li>
+      <li><a href="/bedrijfsvideo#">Bedrijfsvideo</a></li>
-      <li>Vastgoed</li>
+      <li><a href="/vastgoed#">Vastgoed</a></li>
     </ul>
     <p class="card-text">Inclusief:</p>
     <ul>

public/index.html

@@ -43,7 +43,7 @@
         <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">
+            <div class="card-body d-flex flex-column bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-industry"></i>
                 <br>Bedrijfsvideo
@@ -51,13 +51,16 @@
               <p class="card-text">
                 Laat productieprocessen, kantoren of werkplaatsen van binnenuit zien met een vloeiende indoor drone tour door jouw bedrijf.
               </p>
+              <p style="margin-top: auto !important; padding-top: 1rem !important;">
+                <a href="/bedrijfsvideo#" class="btn btn-primary stretched-link">Lees meer</a>
+              </p>
             </div>
           </div>
         </div>
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
             <img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/sa-rapita-2483668_640.jpg" alt="Afbeelding van een moderne woning.">
-            <div class="card-body bg-light text-dark">
+            <div class="card-body d-flex flex-column bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-house"></i>
                 <br>Vastgoed
@@ -65,13 +68,16 @@
               <p class="card-text">
                 Een virtuele rondleiding door jouw (vakantie)woning geeft potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
               </p>
+              <p style="margin-top: auto !important; padding-top: 1rem !important;">
+                <a href="/vastgoed#" class="btn btn-primary stretched-link">Lees meer</a>
+              </p>
             </div>
           </div>
         </div>
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
             <img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/ferris-wheel-7299042_640.jpg" alt="Afbeelding van een attractie in een recreatiepark.">
-            <div class="card-body bg-light text-dark">
+            <div class="card-body d-flex flex-column bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-house"></i>
                 <br>Recreatie (binnenkort mogelijk)
@@ -85,7 +91,7 @@
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
             <img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/motor-cross-1634206_640.jpg" alt="Afbeelding van motorcross sport.">
-            <div class="card-body bg-light text-dark">
+            <div class="card-body d-flex flex-column bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-motorcycle"></i>
                 <br>Sport (binnenkort mogelijk)
@@ -99,7 +105,7 @@
         <div class="col-sm-6 col-lg">
           <div class="card h-100">
             <img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/audience-1850119_640.jpg" alt="Afbeelding van publiek bij een concert.">
-            <div class="card-body bg-light text-dark">
+            <div class="card-body d-flex flex-column bg-light text-dark">
               <h3 class="card-title">
                 <i class="fa-solid fa-guitar"></i>
                 <br>Evenementen (binnenkort mogelijk)

public/pages/bedrijfsvideo.html

@@ -0,0 +1,67 @@
+<!--# set var='title' value='Professionele bedrijfsvideo met een indoor FPV drone tour' -->
+<!--# set var='description' value='Laat jouw bedrijf spreken met een dynamische dronevideo. Ideaal voor social media, website of presentaties. Maak van je merk een beleving.' -->
+
+<!DOCTYPE html>
+<html lang="nl" data-bs-theme="dark">
+
+<head>
+  <!--# include file='/includes/partials/head-content.html' -->
+
+  <title><!--# echo var='title' --> • Vandevliet Aerial Shots</title>
+  <meta name="description" content="<!--# echo var='description' -->">
+
+  <meta property="og:title" content="<!--# echo var='title' --> • Vandevliet Aerial Shots">
+  <meta property="og:description" content="<!--# echo var='description' -->">
+  <meta property="og:type" content="website">
+  <meta property="og:locale" content="nl_NL">
+  <meta property="og:url" content="https://vandevliet-aerialshots.com/bedrijfsvideo">
+  <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+  <header>
+    <!--# include file='/includes/components/nav.html' -->
+
+    <div class="hero position-relative overflow-hidden" style="height: 100vh;">
+      <div class="hero-body position-absolute bottom-0" style="z-index: 1;">
+        <h1 class="lead"><!--# echo var='title' --></h1>
+        <p><!--# echo var='description' --></p>
+        <p>
+          <a class="btn btn-secondary" href="#prijzen">Prijzen</a>
+          <a class="btn btn-primary" href="/contact">Offerte aanvragen</a>
+        </p>
+      </div>
+      <div class="cover parallax ratio ratio-16x9">
+        <iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7346800134644531200?compact=1" frameborder="0" allowfullscreen="" title="Ingevoegde bijdrage"></iframe>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <section id="prijzen" class="container-xxl">
+      <h2 class="text-center">Prijzen en tarieven</h2>
+      <p class="text-center">Wat kost een bedrijfs-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
+
+      <div class="row justify-content-center">
+        <div class="col-lg-8">
+          <!--# include file='/includes/pricing/cat-open.html' -->
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-lg-8">
+          <!--# include file='/includes/pricing/post-edit.html' -->
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="bg-secondary-subtle">
+    <section class="container-xxl">
+      <!--# include file='/includes/components/contact-row.html' -->
+    </section>
+
+    <!--# include file='/includes/partials/footer-bottom.html' -->
+  </footer>
+</body>
+
+</html>

public/pages/vastgoed.html

@@ -0,0 +1,147 @@
+<!--# set var='title' value='Dronevideo voor (vakantie)woning of vastgoedproject' -->
+<!--# set var='description' value='Maak jouw vastgoedobject onweerstaanbaar met een FPV dronevideo. Een virtuele rondleiding geeft potentiële kopers of huurders direct een goed beeld van wat de woning te bieden heeft.' -->
+
+<!DOCTYPE html>
+<html lang="nl" data-bs-theme="dark">
+
+<head>
+  <!--# include file='/includes/partials/head-content.html' -->
+
+  <title><!--# echo var='title' --> • Vandevliet Aerial Shots</title>
+  <meta name="description" content="<!--# echo var='description' -->">
+
+  <meta property="og:title" content="<!--# echo var='title' --> • Vandevliet Aerial Shots">
+  <meta property="og:description" content="<!--# echo var='description' -->">
+  <meta property="og:type" content="website">
+  <meta property="og:locale" content="nl_NL">
+  <meta property="og:url" content="https://vandevliet-aerialshots.com/bedrijfsvideo">
+  <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+  <header>
+    <!--# include file='/includes/components/nav.html' -->
+
+    <div class="hero" style="margin-top: 7rem;">
+      <div class="hero-body">
+        <h1 class="lead"><!--# echo var='title' --></h1>
+        <p><!--# echo var='description' --></p>
+        <p>
+          <a class="btn btn-secondary" href="#prijzen">Prijzen</a>
+          <a class="btn btn-primary" href="/contact">Offerte aanvragen</a>
+        </p>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <section id="waarom-fpv" class="container-xxl">
+      <h1>Waarom kiezen voor FPV dronevideo bij vastgoed?</h1>
+      <ul>
+        <li>
+          <strong>Verhoogt de zichtbaarheid</strong><br>
+          Word gezien op social media en vastgoedwebsites.
+        </li>
+        <li>
+          <strong>Volledig perspectief</strong><br>
+          Toon ligging, perceelgrootte en omgeving in één vloeiende luchtvideo.
+        </li>
+        <li>
+          <strong>Professionele kwaliteit</strong><br>
+          4K/60 FPS-beelden met filmische nabewerking.
+        </li>
+        <li>
+          <strong>Betaalbaar en snel</strong><br>
+          Basispakket vanaf €350, geleverd binnen 3 werkdagen.
+        </li>
+      </ul>
+    </section>
+
+    <section id="prijzen" class="container-xxl">
+      <h2 class="text-center">Prijzen en tarieven</h2>
+      <p class="text-center">Wat kost een vastgoed-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
+
+      <div class="row justify-content-center">
+        <div class="col-lg-8">
+          <!--# include file='/includes/pricing/cat-open.html' -->
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-lg-8">
+          <!--# include file='/includes/pricing/post-edit.html' -->
+        </div>
+      </div>
+    </section>
+
+    <section class="container-xxl text-center">
+      <h2>Klaar om jouw woning beter in beeld te brengen?</h2>
+      <p>Neem vandaag nog contact op voor een prijsindicatie voor jouw dronevideo!</p>
+      <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
+    </section>
+
+    <section id="faq" class="container-xxl">
+      <h1>Veelgestelde vragen (FAQ)</h1>
+      <p></p>
+      <div class="accordion" itemscope itemtype="https://schema.org/FAQPage">
+        <div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+          <h2 class="accordion-header" itemprop="name">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-sales-gain" aria-controls="faq-panel-sales-gain" aria-expanded="false">
+              Helpt een dronevideo echt bij de verkoop van mijn woning?
+            </button>
+          </h2>
+          <div id="faq-panel-sales-gain" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+            <div class="accordion-body" itemprop="text">
+              Absoluut! Objecten met dronebeelden woning krijgen gemiddeld 68% meer views op huizenplatforms, wat vaak leidt tot snellere biedingen.
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+          <h2 class="accordion-header" itemprop="name">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-where-allowed" aria-controls="faq-panel-where-allowed" aria-expanded="false">
+              Mag je overal vliegen voor een vastgoedvideo?
+            </button>
+          </h2>
+          <div id="faq-panel-where-allowed" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+            <div class="accordion-body" itemprop="text">
+              We mogen boven eigen terrein vliegen en kunnen in de meeste woonwijken werken. In gecontroleerd luchtruim regelen we tijdig een ontheffing.
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+          <h2 class="accordion-header" itemprop="name">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-indoor-possible" aria-controls="faq-panel-indoor-possible" aria-expanded="false">
+              Kunnen jullie ook binnen filmen?
+            </button>
+          </h2>
+          <div id="faq-panel-indoor-possible" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+            <div class="accordion-body" itemprop="text">
+              Ja, met lichte cinewhoop-FPV drones vliegen we veilig door kamers en gangen voor een virtuele rondleiding.
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+          <h2 class="accordion-header" itemprop="name">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-lead-time" aria-controls="faq-panel-lead-time" aria-expanded="false">
+              Wat is de levertijd?
+            </button>
+          </h2>
+          <div id="faq-panel-lead-time" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+            <div class="accordion-body" itemprop="text">
+              Je ontvangt de gemonteerde video meestal binnen 3 werkdagen na de shoot.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="bg-secondary-subtle">
+    <section class="container-xxl">
+      <!--# include file='/includes/components/contact-row.html' -->
+    </section>
+
+    <!--# include file='/includes/partials/footer-bottom.html' -->
+  </footer>
+</body>
+
+</html>

src/scss/styles.scss

@@ -43,13 +43,13 @@ $accordion-icon-width: 1rem;
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/accordion";
+@import "bootstrap/scss/forms";
 // @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
 // @import "bootstrap/scss/pagination";