Added video splash with static image fallback

src/App.svelte

@@ -1,14 +1,12 @@
+<script>
+    import LandingPage from "./LandingPage/LandingPage.svelte";
+    import "./vars.css";
+    import "./styles.css";
+</script>
 
 <div>
-  <LandingPage />
+    <LandingPage />
 </div>
 
-<script>
-import LandingPage from "./LandingPage/LandingPage.svelte";
-import "./vars.css";
-import "./styles.css";
-</script>
-
 <style>
 </style>
-

src/LandingPage/LandingPage.scss

@@ -1,36 +1,54 @@
-  .landing-page,
+.landing-page,
-  .landing-page * {
+.landing-page * {
-    box-sizing: border-box;
+  box-sizing: border-box;
-  }
+}
 
-  .landing-page {
+.landing-page {
-    background: var(--background);
+  background: var(--background);
-    width: 100vw;
+  width: 100vw;
-    min-width: 250px;
+  min-width: 250px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}
+
+.landing-zone-outer {
+  position: relative;
+  min-height: 100vh;
+  height: fit-content;
+  width: 100%;
+
+  // Blend out the background image into the plain bg color
+  &::after {
+    content: '';
     position: absolute;
-    display: flex;
+    bottom: 0;
-    flex-direction: column;
+    left: 0;
-  }
-
-  .landing-zone {
-    position: relative;
-    background-image: url("landing.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
     width: 100%;
+    height: 128px;
+    background: linear-gradient(to bottom,
+        #00000000 0%,
+        var(--background) 100%);
     z-index: 1;
-
-    // Blend out the background image into the plain bg color
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 120px;
-      background: linear-gradient(to bottom,
-          #00000000 0%,
-          var(--background) 100%);
-    }
   }
+}
+
+.landing-zone {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100vh;
+  height: fit-content;
+  z-index: 2;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}

src/LandingPage/LandingPage.svelte

@@ -8,12 +8,36 @@
 
     let className = "";
     export { className as class };
+
+    let useVideo = true;
+    function handleVideoError() {
+        useVideo = false;
+    }
 </script>
 
 <div class={"landing-page " + className}>
-    <div class="landing-zone">
+    <div class="landing-zone-outer">
-        <NavigationHeader />
+        {#if useVideo}
-        <Splash />
+            <video
+                class="background"
+                autoplay
+                muted
+                playsinline
+                on:error={handleVideoError}
+            >
+                <source src="landing.webm" type="video/webm" />
+            </video>
+        {:else}
+            <img
+                class="background"
+                src="landing.webp"
+                alt="Landing background of L-PBF print in progress"
+            />
+        {/if}
+        <div class="landing-zone">
+            <NavigationHeader />
+            <Splash />
+        </div>
     </div>
     <InfoScroll />
     <BottomCall />

src/LandingPage/NavigationHeader.scss

@@ -1,7 +1,8 @@
 .navigation-header {
   position: relative;
-  height: 116.03px;
+  height: 128px;
   width: 100%;
+  padding-bottom: 120px;
 }
 
 .navigation-header-items {
@@ -11,7 +12,7 @@
   align-items: center;
   justify-content: flex-end;
   position: absolute;
-  right: 79.79px;
+  right: 96px;
   top: 28px;
 }
 

src/LandingPage/Splash.scss

@@ -1,9 +1,11 @@
 .splash {
   position: relative;
   max-width: 95%;
-  top: 0px;
+  bottom: 0;
+  padding-top: 128px;
   padding-bottom: 128px;
-  padding-right: 32px
+  padding-right: 32px;
+  z-index: 3;
 }
 
 .splash-copy {
@@ -44,6 +46,9 @@
 
 .splash-button {
   background: var(--background);
+  outline-style: solid;
+  outline-width: 2px;
+  outline-color: var(--cpalettemedium);
   border-radius: 8px;
   padding: 18px 32px 18px 32px;
   position: relative;