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 />
 </div>
 
-<script>
-import LandingPage from "./LandingPage/LandingPage.svelte";
-import "./vars.css";
-import "./styles.css";
-</script>
-
 <style>
 </style>
-

src/LandingPage/LandingPage.scss

@@ -1,25 +1,22 @@
-  .landing-page,
-  .landing-page * {
+.landing-page,
+.landing-page * {
   box-sizing: border-box;
-  }
+}
 
-  .landing-page {
+.landing-page {
   background: var(--background);
   width: 100vw;
   min-width: 250px;
   position: absolute;
   display: flex;
   flex-direction: column;
-  }
+}
 
-  .landing-zone {
+.landing-zone-outer {
   position: relative;
-    background-image: url("landing.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+  min-height: 100vh;
+  height: fit-content;
   width: 100%;
-    z-index: 1;
 
   // Blend out the background image into the plain bg color
   &::after {
@@ -28,9 +25,30 @@
     bottom: 0;
     left: 0;
     width: 100%;
-      height: 120px;
+    height: 128px;
     background: linear-gradient(to bottom,
         #00000000 0%,
         var(--background) 100%);
+    z-index: 1;
   }
-  }
+}
+
+.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,13 +8,37 @@
 
     let className = "";
     export { className as class };
+
+    let useVideo = true;
+    function handleVideoError() {
+        useVideo = false;
+    }
 </script>
 
 <div class={"landing-page " + className}>
+    <div class="landing-zone-outer">
+        {#if useVideo}
+            <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 />
     <NavigationFooter />

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;