Home.vue

<template>
  <div class="home">
    <Visitor v-if="displayVisitorComponent"/>
    <PageHeader
      v-else
      :title="PageMetaHome.title"
      :description="PageMetaHome.description"
      buttonText="Learn More"
      buttonUrl="/#/services"
      logoSource="static/p1-logo.png"
      class="intro-video"
    />
    <!--Visitor buttonText="Learn More" buttonUrl="/#/services" /-->
    <IntroVideo class="video-section-margin"/>
    <ServicesSummary class="service-section-margin" />
    <div class="container mt-6">
      <div class="row">
        <div class="col-md-6 text-md-left text-xs-center">
          <div v-if="$vuetify.breakpoint.lgAndUp">
            <h2 class="pl-8">Explore The</h2>
            <h1 class="mt-0 pl-7">Products</h1>
          </div>
          <div v-if="$vuetify.breakpoint.mdAndDown">
            <h2 class="pl-md-8" style="font-size: 2.25rem">
              Explore The Products
            </h2>
          </div>
        </div>
        <div class="col-md-6 text-left">
          <h3 class="pl-6 pb-4">How Our Teams Help</h3>
          <ul>
            <li>
              Manages Software Factories for development teams so they can focus
              on building mission applications
            </li>
            <li>
              Decouples development teams from factory teams with DevSecOps and
              Site Reliability Engineer (SRE) expertise
            </li>
            <li>
              Helps instantiate DevSecOps CI/CD pipelines / software factories
              in days at various classification levels
            </li>
            <li>
              Builds and leverages the DoD hardened containers while avoiding
              one-size-fits-all architectures
            </li>
            <li>
              Fully complies with the DoD Enterprise DevSecOps Initiative (DSOP)
              with DoD-wide reciprocity
            </li>
            <li>
              Centralizes the container hardening of 300+ enterprise containers
              (databases, development tools, CI/CD tools, cybersecurity tools,
              etc.)
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column align-items-center section-padding">
      <v-responsive
        class="px-6"
        :aspect-ratio="16 / 9"
        min-height="315"
        max-width="850"
      >
        <video width="100%" controls>
          <source
            src="https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/cso/DoD%20Enterprise%20DevSecOps%20Initiative%20and%20Platform%201.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
      </v-responsive>
    </div>
    <div class="container pa-0 section-margin">
      <div
        class="d-flex flex-column align-items-center mx-4 mx-md-16 award-padding"
      >
        <h2 class="mx-8 mx-sm-16 pb-6">Platform One Awards</h2>
        <img
          class="img-fluid mx-auto"
          src="@/assets/images/P1_DefenseAcq_Web1_2.jpg"
          alt="2020 Defense Acquisition Workforce Award Winners"
        />
      </div>
    </div>
    <Wave :bottom="false">
      <WhoWeServe />
    </Wave>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import Visitor from "@/components/Visitor";
import IntroVideo from "@/components/IntroVideo";
import ServicesSummary from "@/components/ServicesSummary";
import WhoWeServe from "@/components/WhoWeServe";
import Wave from "@/components/Wave";
import { PageMeta } from "@/constants/PageMeta";

export default {
  name: "Home",
  components: {
    PageHeader,
    Visitor,
    IntroVideo,
    ServicesSummary,
    Wave,
    WhoWeServe,
  },

  data() {
    return {
      PageMetaHome: PageMeta.Home,
      displayVisitorComponent: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.header-position {
  position: -100px;
}
iframe {
  overflow: hidden;
}
.section-margin{
  margin-bottom: 120px;
}
.video-section-margin{
  margin-bottom: 70px;
}
.service-section-margin{
  margin-bottom: 87px;
}
.section-padding{
  padding-top: 105px;
}
.award-padding{
  padding-top: 72px;
  margin-bottom: 120px;
}
</style>