ServicesSummary.vue

<template>
  <div class="services-summary">
    <h2>
      P1 services empower your workforce
    </h2>
    <div class="container">
      <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>
          <div class="text">
            The central repository for the soure code to create hardened and
            evaluated containers for the DoD
          </div>
          <b-button variant="link" href="https://repo1.dsop.io" target="_blank">
            Repo One
            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
          </b-button>
        </div>
        <div class="col-md-6 col-lg-4 service-container">
          <TrainingLogo class="logo" />
          <h6 class="title">
            DEVSECOPS TRAINING <br />
            &amp; ON-BOARDING
          </h6>
          <div class="text">
            The Platform One team recognizes that many teams require training
            resources in order to fully leverage DevSecOps principles
          </div>
          <b-button
            variant="link"
            href="https://software.af.mil/training/"
            target="_blank"
          >
            DevSecOps Training Resources
            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
          </b-button>
        </div>
        <div class="col-md-6 col-lg-4 service-container">
          <ChatLogo class="logo" />
          <h6 class="title">DOD ENTERPRISE COLLABORATION</h6>
          <div class="text">
            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
          </div>
          <b-button
            variant="link"
            href="https://chat.collab.cdl.af.mil/"
            target="_blank"
          >
            Chat
            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
          </b-button>
        </div>
        <div class="col-md-6 col-lg-4 service-container">
          <DsawgLogo class="logo" />
          <h6 class="title">DSAWG WORKGROUPS</h6>
          <div class="text">
            DoD Security Authorization Working Groups where all documents
            created are available on Repo1
          </div>
          <b-button
            variant="link"
            href="https://repo1.dsop.io/dsawg-devsecops/"
            target="_blank"
          >
            DSAWG on Repo1
            <b-icon icon="box-arrow-up-right" aria-hidden="true"></b-icon>
          </b-button>
        </div>
        <router-link to="/services" class="col-md-6 col-lg-4 service-container">
          <LearnMoreLogo class="logo" />
          <h6 class="title">LEARN MORE &gt;</h6>
          <div class="text">
            Click here to find out more about Platform One Services
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
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 DsawgLogo from "@/assets/images/icons/Icon_DSAWG.svg";
import ChatLogo from "@/assets/images/icons/Icon_DoDenterpriseChat.svg";

export default {
  name: "ServicesSummary",
  components: {
    Repo1Logo,
    TrainingLogo,
    LearnMoreLogo,
    DsawgLogo,
    ChatLogo
  }
};
</script>
<style lang="scss" scoped>
.services-summary {
  margin-bottom: 5rem;

  h2 {
    margin-bottom: 4rem;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .service-container {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 2.5rem;
    .logo {
      margin-bottom: 1rem;
    }

    a {
      .btn-link {
        word-wrap: none;
      }
    }
  }
}
</style>