Home.vue

<template>
  <div class="home">
    <Visitor v-if="displayVisitorComponent" />
    <PageHeader v-else>
      <template slot="imageSlot">
        <v-img :src="p1Logo" />
      </template>
      <template slot="button">
        <v-btn color="primary" :href="buttonHeaderURL"> Learn More </v-btn>
      </template>
    </PageHeader>
    <AmaAnnouncement />
    <IntroVideo
      class="video-section-margin"
      header="What can Platform One do for you?"
      link="https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/PlatformOne-90sec-Initial-V1-1.mp4"
    />
    <ServicesSummary class="service-section-margin" />
    <div class="container my-16">
      <div class="row">
        <div class="col-md-6 text-md-left text-xs-center">
          <div>
            <h2 class="pl-8 h2-section-styling">
              Explore The
              <span :class="{ sectionTitles: $vuetify.breakpoint.lgAndUp }"
                >Products</span
              >
            </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="container my-16">
      <div class="row">
        <div class="col-md-6 text-md-left text-xs-center">
          <h2 class="pl-8 h2-section-styling">
            Platform One and Kessel Run
            <span :class="{ sectionTitles: $vuetify.breakpoint.lgAndUp }"
              >Joining forces</span
            >
          </h2>
          <v-btn
            id="memoBtn"
            data-cy="download"
            class="ml-lg-8 ml-md-8 mt-4"
            color="primary"
            href="https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/docs/We%20Believe%20Memo%20-%20P1%20and%20KR%20Signed.pdf"
            target="_blank"
            rel="noopener noreferrer"
          >
            Download the Memo
          </v-btn>
        </div>
        <div class="col-md-6 text-left">
          <h3 class="pl-6 pb-4">
            Platform One, Kessel Run, We “Believe” Software Principles
          </h3>
          <p class="pl-6 pb-2">
            The USAF's Platform One and Kessel Run teams have been hard at work
            to converge our technology, services, and data to ensure rapid
            application portability across key software systems that support our
            warfighters.
          </p>
          <p class="pl-6">
            To do so, we believe it is important to document shared core beliefs
            that we are pursuing through collaboration of our limited pool of
            talented software personnel. These principles guide our
            collaboration, technology decisions, and engagement with industry.
          </p>
        </div>
      </div>
    </div>
    <Awards class="my-16" />

    <Wave :bottom="false">
      <WhoWeServe />
    </Wave>
  </div>
</template>

<script>
import Awards from "@/components/Awards.vue";
import PageHeader from "@/components/PageHeader.vue";
import Visitor from "@/components/Visitor.vue";
import IntroVideo from "@/components/IntroVideo.vue";
import ServicesSummary from "@/components/ServicesSummary.vue";
import WhoWeServe from "@/components/WhoWeServe.vue";
import Wave from "@/components/Wave.vue";
import AmaAnnouncement from "@/components/AmaAnnouncement.vue";

export default {
  name: "HomeComponent",
  components: {
    AmaAnnouncement,
    Awards,
    IntroVideo,
    PageHeader,
    ServicesSummary,
    Visitor,
    Wave,
    WhoWeServe,
  },
  data: () => ({
    displayVisitorComponent: false,
    p1Logo: "/static/p1-logo.webp",
    buttonHeaderURL: "/services",
  }),
};
</script>

<style lang="scss" scoped>
#memoBtn {
  text-transform: none;
}
.h2-section-styling {
  margin-top: -5px !important;
}
.sectionTitles {
  display: block;
  margin-top: 0px !important;
  margin-left: -4px;
  font-weight: 800;
  word-break: break-word;
  font-size: 4.675rem;
  line-height: 1.3em !important;
}
.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>