Moved hero to bottom and removed WIP notice.

public/index.html

@@ -9,13 +9,11 @@
     <!--# include file="includes/nav.html" -->
 
     <div class="hero position-relative overflow-hidden">
-      <div class="position-absolute top-50 start-50 translate-middle text-center text-white" style="z-index: 1;">
-        <h1 class="text-shadow"><img src="assets/static/logo-aerialshots-v1-s.png" alt="Vandevliet Aerial Shots logo" height="72"></h1>
-        <p class="fs-5 text-shadow">
-          FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.<br>
-          Let op: deze website alsook de showreel is nog in ontwikkeling.
-        </p>
-        <p><a class="btn btn-primary" href="#section-services">Ontdek meer</a></p>
+      <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>
+        <p><a class="btn btn-primary" href="#section-services">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">
         <source src="assets/static/showreel-sketch.mp4" type="video/mp4">

src/scss/styles.scss

@@ -16,9 +16,9 @@ $primary: $red; // Default: $blue
 @import "bootstrap/scss/variables-dark";
 
 // Include any default map overrides here
-$carousel-dark-indicator-active-bg:  $white;
-$carousel-dark-caption-color:        $white;
-$carousel-dark-control-icon-filter:  unset;
+$carousel-dark-indicator-active-bg: $white;
+$carousel-dark-caption-color:       $white;
+$carousel-dark-control-icon-filter: unset;
 
 // Include remainder of required parts
 @import "bootstrap/scss/maps";
@@ -190,7 +190,8 @@ h6:hover .anchor-link {
   color: var(--bs-primary);
 }
 
-.navbar {
+.navbar,
+.hero-body {
   background-image: none !important;
   background-color: rgba(22, 23, 25, 0.6) !important;
   transition: background-color 0.5s;
@@ -204,11 +205,38 @@ body.is-scrolled .navbar {
   max-width: fit-content;
 }
 
-.nav-item,
-.nav-link {
+.hero {
+  height: 100vh;
+}
+
+.hero-body {
+  width: 100%;
+  padding: 1rem;
+  @extend .h5;
+  @extend .text-center;
   @extend .text-white;
-  font-family: 'Eras ITC',
-  var(--#{$prefix}font-sans-serif);
+
+  .btn {
+    @extend .text-white;
+    @extend .h5;
+  }
+}
+
+.nav-item {
+
+  .nav-link,
+  .btn {
+    @extend .text-white;
+    @extend .h5;
+  }
+}
+
+.btn {
+
+  .fa-regular,
+  .fa-solid {
+    color: inherit;
+  }
 }
 
 .navbar-nav .btn {
@@ -218,10 +246,6 @@ body.is-scrolled .navbar {
   padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
-.hero {
-  height: 100vh;
-}
-
 .row {
   margin-top: unset;
   --bs-gutter-y: var(--bs-gutter-x);