From a7945d9600fcc81d4d5c4374c241efe16ff20a6f Mon Sep 17 00:00:00 2001
From: Graham Smith <gsmith@skye.local>
Date: Fri, 10 Jul 2020 13:41:02 -0400
Subject: [PATCH] initial video section
---
src/components/IntroVideo.vue | 65 +++++++++++++++++++++++++++++++++++
src/views/Home.vue | 13 ++-----
2 files changed, 68 insertions(+), 10 deletions(-)
create mode 100644 src/components/IntroVideo.vue
diff --git a/src/components/IntroVideo.vue b/src/components/IntroVideo.vue
new file mode 100644
index 00000000..63e50422
--- /dev/null
+++ b/src/components/IntroVideo.vue
@@ -0,0 +1,65 @@
+<template>
+ <div class="intro-video">
+ <div class="row mt-5 mb-xl-3 justify-content-center">
+ <h2 class="col-12">What can Platform One do for you?</h2>
+ <p class="col-xl-6 col-lg-8 text-center">
+ Watch our 90 second video to learn more about P1 capabilities
+ </p>
+ </div>
+
+ <div class="container">
+ <div class="row justify-content-center">
+ <div
+ class="col-lg-6 col-md-8 embed-responsive embed-responsive-16by9 order-lg-2 px-5 mb-4 mb-lg-0"
+ >
+ <iframe
+ class="embed-responsive-item"
+ src="https://www.youtube.com/embed/yUOjL7G9mIg?rel=0"
+ allowfullscreen
+ ></iframe>
+ </div>
+
+ <div class="col-lg-6 text-left px-5 d-flex">
+ <ul class="my-auto">
+ <li class="my-3">
+ P1 accelerates your deployment capabilities by providing an 85%
+ solution to get you started faster
+ </li>
+ <li class="my-3">Provides a common code base for reusability</li>
+ <li class="my-3">
+ Creates a collaborative environment to break down silos and enable
+ government-wide cross-functionality
+ </li>
+ <li class="my-3">
+ P1 helps deploy your mission code to the warfighter quickly and
+ securely
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ name: "IntroVideo",
+ components: {}
+};
+</script>
+<style lang="scss" scoped>
+.intro-video {
+ padding-bottom: 5rem;
+
+ .p1-logo {
+ max-height: 180px;
+ max-width: 180px;
+ margin-bottom: 2rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ .embed-responsive {
+ min-height: 330px;
+ }
+ }
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0fd608eb..f479f91d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,7 +4,7 @@
title="PLATFORM ONE"
description="An official DoD DevSecOps Enterprise Services team"
/>
- <img class="img-fluid p1-logo" :src="`${publicPath}/static/p1-logo.png`" />
+ <IntroVideo />
<ProductsSummary />
<ServicesSummary />
<BottomWave>
@@ -15,6 +15,7 @@
<script>
import PageHeader from "@/components/PageHeader";
+import IntroVideo from "@/components/IntroVideo";
import ServicesSummary from "@/components/ServicesSummary";
import ProductsSummary from "@/components/ProductsSummary";
import WhoWeServe from "@/components/WhoWeServe";
@@ -24,25 +25,17 @@ export default {
name: "Home",
components: {
PageHeader,
+ IntroVideo,
ServicesSummary,
ProductsSummary,
BottomWave,
WhoWeServe
- },
- data() {
- return {
- publicPath: process.env.BASE_URL
- };
}
};
</script>
<style lang="scss" scoped>
.home {
- .p1-logo {
- max-height: 180px;
- margin-bottom: 2rem;
- }
.page-header {
margin-bottom: 5rem !important;
}
--
GitLab