Merge branch 'home-updates' into 'master'

home updates

See merge request platform-one/private/bullhorn/platform1-site!9

src/App.vue

 <template>
-  <div id="app" class="min-vh-100 d-flex flex-column">
+  <div id="app" class="min-vh-100 d-flex flex-column position-relative">
     <NavBar />
-    <div class="h-100 flex-grow-1">
+    <div class="h-100 flex-grow-1 main-content-container">
       <router-view id="main-content" />
     </div>
+    <div class="wisps" :style="styleObject">
+      <div class="mask"></div>
+    </div>
     <Footer />
   </div>
 </template>
@@ -11,9 +14,17 @@
 <script>
 import NavBar from "@/components/NavBar.vue";
 import Footer from "@/components/Footer.vue";
+// import Wisps from "@/assets/images/Background_WH_Texture.svg";
 
 export default {
-  components: { NavBar, Footer }
+  components: { NavBar, Footer },
+  computed: {
+    styleObject() {
+      return {
+        // backgroundImage: `url(${Wisps})`
+      };
+    }
+  }
 };
 </script>
 
@@ -79,6 +90,48 @@ body {
     letter-spacing: 0.07rem;
   }
 
+  .main-content-container {
+    z-index: 2;
+  }
+
+  .wisps {
+    background-image: url(~@/assets/images/Background_WH_Texture.png);
+    background-size: cover;
+    background-size: 100% 770px;
+    background-color: $primary-bg-color;
+    background-repeat: no-repeat;
+    background-position-y: 60px;
+
+    position: absolute;
+    width: 100%;
+    top: 590px;
+    height: 790px;
+    left: 0;
+    opacity: 0.3;
+    z-index: 1;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: $gradient-alpha;
+      background-image: linear-gradient(
+        to bottom,
+        $primary-bg-color 0%,
+        $gradient-alpha 25%,
+        $gradient-alpha 90%,
+        $primary-bg-color 110%
+      );
+    }
+  }
+
+  @include media-breakpoint-only(lg) {
+    .wisps {
+      background-size: 100% 830px;
+      height: 1000px;
+    }
+  }
+
   @include media-breakpoint-only(xs) {
     h1 {
       font-size: 3rem;

src/components/ProductsSummary.vue

@@ -77,7 +77,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .products-summary {
-  --gradient-alpha: #00000000;
   --default-bg: #000000;
   --bottom-bg: #031727;
 
@@ -100,10 +99,10 @@ export default {
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: var(--gradient-alpha);
+      background-color: $gradient-alpha;
       background-image: linear-gradient(
         to bottom,
-        var(--gradient-alpha) -10%,
+        $gradient-alpha -10%,
         var(--bottom-bg) 100%
       );
     }
@@ -156,32 +155,24 @@ export default {
     height: 100%;
     color: $secondary-text-color;
     background-size: cover;
-    background-color: --default-bg;
+    background-color: var(--default-bg);
     display: flex;
     flex-direction: column;
+    box-shadow: 0 2px 10px #000000;
 
     &.adce {
       background-image: url(~@/assets/images/ADCE-bg.jpg);
-      background-image: linear-gradient(
-          var(--gradient-alpha),
-          var(--default-bg)
-        ),
+      background-image: linear-gradient($gradient-alpha, var(--default-bg)),
         url(~@/assets/images/ADCE-bg.jpg);
     }
     &.big-bang {
       background-image: url(~@/assets/images/BigBang-bg.jpg);
-      background-image: linear-gradient(
-          var(--gradient-alpha),
-          var(--default-bg)
-        ),
+      background-image: linear-gradient($gradient-alpha, var(--default-bg)),
         url(~@/assets/images/BigBang-bg.jpg);
     }
     &.iron-bank {
       background-image: url(~@/assets/images/IronBank-bg.jpg);
-      background-image: linear-gradient(
-          var(--gradient-alpha),
-          var(--default-bg)
-        ),
+      background-image: linear-gradient($gradient-alpha, var(--default-bg)),
         url(~@/assets/images/IronBank-bg.jpg);
     }
 

src/components/ServicesSummary.vue

@@ -43,7 +43,7 @@
         </div>
         <div class="col-md-6 col-lg-4 service-container">
           <JitsiLogo class="logo" />
-          <h6 class="title">ENTERPRISE VTC: JITSI</h6>
+          <h6 class="title">ENTERPRISE VTC</h6>
           <div class="text">
             No-hassle Video Teleconferencing for the DoD
             <br />

src/scss/_variables.scss

@@ -11,3 +11,5 @@ $link-color:#14BAFF;
 $primary-bg-color: #FFFFFF;
 $secondary-bg-color: #002743;
 
+$gradient-alpha: #00000000;
+