diff --git a/src/App.vue b/src/App.vue
index 7096652e6a6dc49cae4352ae39f4855ada94c423..64ca47778b3e4c7ff3841ffb3b65e126d37faf19 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components/ProductsSummary.vue b/src/components/ProductsSummary.vue
index 64b1bf4fee57d0177caa50e85191c5b2951f2900..5808dd6f88ae4cedae221307ed84783014a1a2fe 100644
--- a/src/components/ProductsSummary.vue
+++ b/src/components/ProductsSummary.vue
@@ -1,19 +1,9 @@
<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);
}
diff --git a/src/components/ServicesSummary.vue b/src/components/ServicesSummary.vue
index d6b0541b821d855829d16cb2a2a07c75d4f018f1..532bab6c65290632861f24e81e0d961dce060a5a 100644
--- a/src/components/ServicesSummary.vue
+++ b/src/components/ServicesSummary.vue
@@ -1,10 +1,10 @@
<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 ></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
}
diff --git a/src/components/WhoWeServe.vue b/src/components/WhoWeServe.vue
index 1aa7189a848ce270e454e0fb229f6ad61522bf36..ddb595d6da42267a7125d3be98d5842036a3d5d3 100644
--- a/src/components/WhoWeServe.vue
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 23c1b755e9af9b43be46bb7172a4fd03a4588c0b..d23c6d1f2b59c2fdc119524bc5716dec1ccdd9ad 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/WhoWeAre.vue b/src/views/WhoWeAre.vue
index f79d09de9244b52152f6ffcd6384b414c92542ad..8dda9ffcf8ab09b6f3a82a99735a6517572a5184 100644
--- a/src/views/WhoWeAre.vue
+++ b/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 {