home design updates

src/App.vue

@@ -4,7 +4,7 @@
     <div class="h-100 flex-grow-1 main-content-container">
       <router-view id="main-content" />
     </div>
-    <div class="wisps" :style="styleObject">
+    <div class="wisps">
       <div class="mask"></div>
     </div>
     <Footer />
@@ -14,17 +14,9 @@
 <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 },
-  computed: {
-    styleObject() {
-      return {
-        // backgroundImage: `url(${Wisps})`
-      };
-    }
-  }
+  components: { NavBar, Footer }
 };
 </script>
 
@@ -75,6 +67,8 @@ body {
     text-transform: uppercase;
     font-weight: 800;
     color: #000000;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 
   h1 {

src/components/ProductsSummary.vue

 <template>
   <div class="products-summary">
     <h2>
-      PLATFORM ONE PRODUCTS
+      P1 products enable your mission
     </h2>
 
-    <div class="bg">
-      <div class="bg-mask"></div>
-      <div class="wave-divider">
-        <svg viewBox="0 70 500 60" preserveAspectRatio="none">
-          <rect x="0" y="0" width="500" height="500" />
-          <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
-        </svg>
-      </div>
-    </div>
-
     <div class="container">
       <div class="row">
         <div class="col-lg-4 products-wrapper">
@@ -80,60 +70,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .products-summary {
-  --default-bg: #000000;
-  --bottom-bg: #031727;
+  $default-bg: #000000;
 
   padding-bottom: 5rem;
-  position: relative;
-
-  .bg {
-    position: absolute;
-    overflow: auto;
-    background-image: url(~@/assets/images/tech-bg.jpg);
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-
-    background-color: var(--bottom-bg);
-    width: 100%;
-    height: 62%;
-    bottom: 0;
-
-    .bg-mask {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: $gradient-alpha;
-      background-image: linear-gradient(
-        to bottom,
-        $gradient-alpha -10%,
-        var(--bottom-bg) 100%
-      );
-    }
-
-    .wave-divider {
-      --divider-height: 4rem;
-
-      position: relative;
-      height: var(--divider-height);
-      width: 100%;
-      float: left;
-      z-index: 0;
-      position: relative;
-
-      svg {
-        width: 100%;
-        height: 100%;
-        transform: scale(1, 1);
-        path {
-          fill: $primary-bg-color;
-          stroke: none;
-        }
-        rect {
-          fill: transparent;
-        }
-      }
-    }
-  }
 
   h2 {
     margin-bottom: 3rem;
@@ -158,24 +97,24 @@ export default {
     height: 100%;
     color: $secondary-text-color;
     background-size: cover;
-    background-color: var(--default-bg);
+    background-color: $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($gradient-alpha, var(--default-bg)),
+      background-image: linear-gradient($gradient-alpha, $default-bg),
         url(~@/assets/images/ADCE-bg.jpg);
     }
     &.big-bang {
       background-image: url(~@/assets/images/BigBang-bg.jpg);
-      background-image: linear-gradient($gradient-alpha, var(--default-bg)),
+      background-image: linear-gradient($gradient-alpha, $default-bg),
         url(~@/assets/images/BigBang-bg.jpg);
     }
     &.iron-bank {
       background-image: url(~@/assets/images/IronBank-bg.jpg);
-      background-image: linear-gradient($gradient-alpha, var(--default-bg)),
+      background-image: linear-gradient($gradient-alpha, $default-bg),
         url(~@/assets/images/IronBank-bg.jpg);
     }
 

src/components/ServicesSummary.vue

 <template>
   <div class="services-summary">
     <h2>
-      PLATFORM ONE SERVICES
+      P1 services empower your workforce
     </h2>
     <div class="container">
-      <div class="row">
+      <div class="row justify-content-center">
         <div class="col-md-6 col-lg-4 service-container">
           <Repo1Logo class="logo" />
           <h6 class="title">REPO ONE</h6>
@@ -26,11 +26,11 @@
         </div>
         <div class="col-md-6 col-lg-4 service-container">
           <ChatLogo class="logo" />
-          <h6 class="title">DOD ENTERPRISE CHAT</h6>
+          <h6 class="title">DOD ENTERPRISE COLLABORATION</h6>
           <div class="text">
-            In response to telework conditions due to the COVID-19 pandemic,
-            Platform One released an IL-4 (FOUO) DoD chat app to support DoD
-            users around the world
+            Platform One provides a chat app for IL2 (Public) and IL4 (FOUO)
+            communication to DoD users around the world. No-hassle video
+            teleconferencing for the DoD *coming soon*
           </div>
         </div>
         <div class="col-md-6 col-lg-4 service-container">
@@ -41,15 +41,6 @@
             created are available on Repo1
           </div>
         </div>
-        <div class="col-md-6 col-lg-4 service-container">
-          <JitsiLogo class="logo" />
-          <h6 class="title">ENTERPRISE VTC</h6>
-          <div class="text">
-            No-hassle Video Teleconferencing for the DoD
-            <br />
-            *COMING SOON*
-          </div>
-        </div>
         <router-link to="/services" class="col-md-6 col-lg-4 service-container">
           <LearnMoreLogo class="logo" />
           <h6 class="title">LEARN MORE &gt;</h6>
@@ -65,7 +56,6 @@
 import Repo1Logo from "@/assets/images/icons/Icon_RepoOne.svg";
 import TrainingLogo from "@/assets/images/icons/Icon_Training.svg";
 import LearnMoreLogo from "@/assets/images/icons/Icon_LearnMore.svg";
-import JitsiLogo from "@/assets/images/icons/Icon_JITSI.svg";
 import DsawgLogo from "@/assets/images/icons/Icon_DSAWG.svg";
 import ChatLogo from "@/assets/images/icons/Icon_DoDenterpriseChat.svg";
 
@@ -75,7 +65,6 @@ export default {
     Repo1Logo,
     TrainingLogo,
     LearnMoreLogo,
-    JitsiLogo,
     DsawgLogo,
     ChatLogo
   }

src/components/WhoWeServe.vue

@@ -3,6 +3,17 @@
     <h2>
       WHO WE SERVE
     </h2>
+
+    <div class="bg">
+      <div class="bg-mask"></div>
+      <div class="wave-divider">
+        <svg viewBox="0 70 500 60" preserveAspectRatio="none">
+          <rect x="0" y="0" width="500" height="500" />
+          <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
+        </svg>
+      </div>
+    </div>
+
     <div class="container d-flex flex-wrap justify-content-center">
       <div class="img-wrapper">
         <img class="img-fluid" src="@/assets/images/branches/DoD_seal.png" />
@@ -45,10 +56,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .who-we-serve {
-  background-color: #031727;
+  $bottom-bg: #031727;
+  background-color: $bottom-bg;
   padding-bottom: 6rem;
+  position: relative;
+  z-index: 1;
 
   h2 {
+    padding-top: 140px;
     margin-bottom: 3rem;
     color: $secondary-text-color !important;
   }
@@ -72,5 +87,55 @@ export default {
       width: 25%;
     }
   }
+
+  .bg {
+    position: absolute;
+    overflow: auto;
+    background-image: url(~@/assets/images/tech-bg.jpg);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+
+    background-color: $bottom-bg;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    z-index: -1;
+
+    .bg-mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: $gradient-alpha;
+      background-image: linear-gradient(
+        to bottom,
+        $gradient-alpha -20%,
+        $bottom-bg 90%
+      );
+    }
+
+    .wave-divider {
+      --divider-height: 4rem;
+
+      position: relative;
+      height: var(--divider-height);
+      width: 100%;
+      float: left;
+      z-index: 0;
+      position: relative;
+
+      svg {
+        width: 100%;
+        height: 100%;
+        transform: scale(1, 1);
+        path {
+          fill: $primary-bg-color;
+          stroke: none;
+        }
+        rect {
+          fill: transparent;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/Home.vue

@@ -4,8 +4,9 @@
       title="PLATFORM ONE"
       description="An official DoD DevSecOps Enterprise Services team"
     />
-    <ServicesSummary />
+    <img class="img-fluid p1-logo" :src="`${publicPath}/static/p1-logo.png`" />
     <ProductsSummary />
+    <ServicesSummary />
     <WhoWeServe />
   </div>
 </template>
@@ -17,8 +18,23 @@ import ProductsSummary from "@/components/ProductsSummary";
 import WhoWeServe from "@/components/WhoWeServe";
 export default {
   name: "Home",
-  components: { PageHeader, ServicesSummary, ProductsSummary, WhoWeServe }
+  components: { PageHeader, ServicesSummary, ProductsSummary, WhoWeServe },
+  data() {
+    return {
+      publicPath: process.env.BASE_URL
+    };
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home {
+  .p1-logo {
+    max-height: 180px;
+    margin-bottom: 2rem;
+  }
+  .page-header {
+    margin-bottom: 5rem !important;
+  }
+}
+</style>

src/views/WhoWeAre.vue

@@ -117,7 +117,7 @@ import PageHeader from "@/components/PageHeader";
 import QuotesLogo from "@/assets/images/icons/Quotes.svg";
 
 export default {
-  name: "Home",
+  name: "WhoWeAre",
   components: { PageHeader, QuotesLogo },
   data: function() {
     return {