UNCLASSIFIED - NO CUI

Skip to content
Snippets Groups Projects
BigBang.vue 13.9 KiB
Newer Older
<template>
  <div class="big-bang">
    <PageHeader
      title="Big Bang"
      subtext
      description="Big Bang is the Platform One Infrastructure as Code / Configuration as Code package that deploys a software factory in a customer owned environment. We call this IAC/CAC."
      :logoSource="bbLogo"
    <v-container class="px-md-8 px-auto" fluid>
      <v-container class="px-md-16" fluid>
        <h2 class="my-3 mx-md-16 mx-auto">
          Empowering you to create custom environments for your mission
        </h2>
        <p class="my-3 mx-md-16 mx-auto">
          Big Bang will help you build a custom software factory for your
          specific mission needs to enable faster development and deployment of
          your mission applications.
        </p>
      </v-container>

      <div class="my-16 px-md-8 px-auto card-summary">
        <h2 class="my-4 mt-sm-8 px-auto">The Big Bang Advantage</h2>
        <div class="row justify-center">
          <div class="col-md-6 col-lg-4 card-container">
            <LockOpenVariantIcon class="logo" />
            <h4>AVOID VENDOR LOCK</h4>
            <div class="text">
Luke Glasscock's avatar
Luke Glasscock committed
              Big Bang is Kubernetes distro-agnostic, meaning you can pick
              between Upstream, Rancher, Konvoy, Tanzu Kubernetes Grid, or
              OpenShift Container Partner.
            </div>
          </div>
          <div class="col-md-6 col-lg-4 card-container">
            <ClockEndIcon class="logo" />
            <h4>FASTER ATO VIA RECIPROCITY</h4>
            <div class="text">
              Our Platform is accredited DOD wide and we can work AO to AO to
              ensure reciprocity.
            </div>
          </div>
          <div class="col-md-6 col-lg-4 card-container">
            <HammerWrenchIcon class="logo" />
            <h4>WIDE RANGE OF TOOL CHOICES</h4>
            <div class="text">
              We offer multiple tools at each stage of CI/CD pipeline. The tool
              choices can be customized to your preference and to the
              programming language of your choice.
jtwidt's avatar
jtwidt committed
              <br />
              <v-btn
                text
                class="link"
                :href="getImageUrl('P1 - Tool Chain-2.jpg')"
                target="_blank"
              >
                Platform One's Tool Chain
              </v-btn>
            </div>
          </div>
          <div class="col-md-6 col-lg-4 card-container">
            <PackageVariantIcon class="logo" />
            <h4>OUT OF THE BOX AUTOMATION</h4>
            <div class="text">
              The DSOP platform is deployed using out of the box IaC/CaC
              delivered as a package.
            </div>
          </div>
          <div class="col-md-6 col-lg-4 card-container">
            <KeyboardSettingsIcon class="logo" />
            <h4>P1 TRAINING FOR OPS TEAMS</h4>
            <div class="text">
luke.glasscock's avatar
luke.glasscock committed
              We train platform ops team for
              <Tooltip text="SRE" tooltip="Site Reliability Engineering" />
              work.
            </div>
          </div>
        </div>
      </div>
jtwidt's avatar
jtwidt committed
      <h2 class="mt-sm-16 pt-sm-16">THE BIG BANG STAGES</h2>
jtwidt's avatar
jtwidt committed
      <div class="row justify-center">
        <div class="col-4">
          <strong>Stage 1</strong> - We create your DevSecOps (DSOP) Software
          Factory. We set this up for you.
        </div>
      </div>
jtwidt's avatar
jtwidt committed

      <div class="row justify-center">
        <div class="image-wrapper col-8 col-md-6" @click="() => showImg(0)">
jtwidt's avatar
jtwidt committed
          <img
            class="img-fluid"
            src="@/assets/images/Big Bang Graphics-03.png"
            alt="Big Bang Stage 1"
          />
        </div>
      </div>

      <div class="row justify-center">
        <div class="col-4">
          <strong>Stage 2</strong> - You use the DevSecOps (DSOP) Software
          Factory to build and deploy your mission applications. You run these
          pipelines to build and deploy mission applications any number of
          times.
        </div>
      </div>
jtwidt's avatar
jtwidt committed
      <div class="row justify-center">
        <div class="image-wrapper pt-4 col-6" @click="() => showImg(1)">
jtwidt's avatar
jtwidt committed
          <img
            class="img-fluid"
            src="@/assets/images/Big Bang Graphics-04.png"
            alt="Big Bang Stage 2"
          />
        </div>
      </div>
    </v-container>

    <Wave>
      <div class="container px-8 py-0">
        <div class="row">
          <div class="col-md-6 d-flex text-center text-md-left mb-4 mb-md-0">
            <h2 class="ma-auto px-0">
              We move fast,
              <br />but we move smart.
            </h2>
          </div>
          <div class="col-md-6 text-left">
            The Big Bang team will deploy a Software Factory with tools that are
            built for your specific mission needs. We believe the sooner we can
            get you squared away on our level of automation and security
            standards (which is high, why else would we invite you to join our
            elite team of products and services), the sooner you can serve the
            users and warfighters within DoD that need your product or solution
            yesterday.
          </div>
        </div>
      </div>
    </Wave>

jtwidt's avatar
jtwidt committed
    <div class="container my-4 px-auto">
      <h2>BECOMING A BIG BANG CUSTOMER</h2>
      <div class="row justify-center">
        <div class="image-wrapper pt-4 px-0 col-8" @click="() => showImg(2)">
          <img
            class="img-fluid"
jtwidt's avatar
jtwidt committed
            src="@/assets/images/Becoming a BB Customer_2-07.png"
jtwidt's avatar
jtwidt committed
            alt="Become a Big Bang customer"
          />
        </div>
      </div>
      <div class="card-summary">
jtwidt's avatar
jtwidt committed
        <h2>BIG BANG ONBOARDING</h2>
        <div class="row justify-center">
          <div class="col-md-6 col-lg-4 card-container-bottom">
            <WorkshopIcon class="logo" />
            <h4>BIG BANG WORKSHOP</h4>
            <div class="text">
daniel.cushman's avatar
daniel.cushman committed
              A seminar targed towards anyone interested in learning about the
              big bang tech stack.
            </div>
          </div>
          <div class="col-md-6 col-lg-4 card-container-bottom">
            <ResidencyIcon class="logo" />
daniel.cushman's avatar
daniel.cushman committed
            <h4>BIG BANG ENGINEER COHORT</h4>
            <div class="text">
daniel.cushman's avatar
daniel.cushman committed
              A multi-week course targeted toward engineers wanting hands-on
              experience deploying Big Bang in our sandbox environment.
jtwidt's avatar
jtwidt committed
              <strong>Paid portion of Big Bang offering</strong>
            </div>
          </div>
        </div>
        <div class="row justify-center">
          <router-link class="mt-4" to="/products/big-bang/onboarding">
daniel.cushman's avatar
daniel.cushman committed
            Learn more about our Workshop and Engineer Cohort
          </router-link>
      </div>
    </div>

    <Wave>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <h2 class="mx-auto">
              READY TO TAKE THE NEXT STEP TO GET IN BIG BANG?
            </h2>
          </div>
          <div class="col-12 mt-4">
jtwidt's avatar
jtwidt committed
            <v-btn
daniel.cushman's avatar
daniel.cushman committed
              class="mx-4 my-2"
jtwidt's avatar
jtwidt committed
              color="primary"
Luke Glasscock's avatar
Luke Glasscock committed
              href="https://jira.il2.dso.mil/servicedesk/customer/portal/36/create/202"
jtwidt's avatar
jtwidt committed
              target="_blank"
daniel.cushman's avatar
daniel.cushman committed
              >Contact Us</v-btn
daniel.cushman's avatar
daniel.cushman committed
            <v-btn
daniel.cushman's avatar
daniel.cushman committed
              class="mx-4 my-2"
daniel.cushman's avatar
daniel.cushman committed
              color="primary"
              href="https://repo1.dso.mil/platform-one/big-bang/umbrella/-/blob/master/README.md"
              target="_blank"
            >
              Learn More
            </v-btn>
          </div>
        </div>
      </div>
    </Wave>

jtwidt's avatar
jtwidt committed
    <div class="container my-4 px-8">
      <h2 class="my-4 mt-sm-8 px-0">WHERE WE ARE TODAY</h2>
      <p class="text-center">
        We are working hard, but don't quite have all of our capabilities
        operational.
        <br />Check back often for updates!
      </p>
      <div class="d-flex flex-wrap my-4">
        <div class="mx-auto my-4 text-left">
          <h4 class="mb-4 mx-auto px-0">The Big Bang Milestones</h4>
          <div class="milestones-wrapper mx-2 mb-16">
            <div
              v-for="milestone in milestones"
              :key="milestone.text"
              class="milestone pl-4 mb-4 position-relative"
            >
              <div class="bullet" :class="{ done: milestone.done }"></div>
              <div class="text d-flex align-items-center">
                <div class="img-container mr-2 d-flex justify-content-center">
                  <img
                    v-if="milestone.logo"
                    :src="getImageUrl(`logos/tool-logos/${milestone.logo}`)"
                    class="tool-logo"
                    :alt="milestone.text"
                  />
                </div>
                {{ milestone.text }}
              </div>
              <div v-if="milestone.details">
                <div
                  v-for="detail in milestone.details"
                  :key="detail"
                  class="milestone-detail font-italic"
                >
                  {{ detail }}
                </div>
              </div>
            </div>
          </div>
        </div>
jtwidt's avatar
jtwidt committed
        <div class="container my-4">
jtwidt's avatar
jtwidt committed
          <div class="row justify-content-center">
            <div class="col-md-6 px-4 my-auto text-center">
              <h4>
                Have questions about Big Bang?
              </h4>
jtwidt's avatar
jtwidt committed

jtwidt's avatar
jtwidt committed
              <v-btn
                color="primary"
                class="mt-4"
Luke Glasscock's avatar
Luke Glasscock committed
                href="https://confluence.il2.dso.mil/questions/topics/10813444/bigbang"
jtwidt's avatar
jtwidt committed
                target="_blank"
              >
                FAQs
              </v-btn>
            </div>
          </div>
jtwidt's avatar
jtwidt committed
        </div>
      </div>
    </div>

    <vue-easy-lightbox
      escDisabled
      moveDisabled
      :visible="lightbox.visible"
      :imgs="lightbox.imgs"
      :index="lightbox.index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import Wave from "@/components/Wave";
luke.glasscock's avatar
luke.glasscock committed
import Tooltip from "@/components/Base/Tooltip";
import VueEasyLightbox from "vue-easy-lightbox";
import WorkshopIcon from "@/assets/images/icons/Icon_Workshop.svg";
import ResidencyIcon from "@/assets/images/icons/Icon_Residency.svg";
import ClockEndIcon from "@/assets/images/icons/Icon_ClockEnd.svg";
import HammerWrenchIcon from "@/assets/images/icons/Icon_HammerWrench.svg";
import KeyboardSettingsIcon from "@/assets/images/icons/Icon_KeyboardSettings.svg";
import LockOpenVariantIcon from "@/assets/images/icons/Icon_LockOpenVariant.svg";
import PackageVariantIcon from "@/assets/images/icons/Icon_PackageVariant.svg";
import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_White_text.png";

export default {
  name: "BigBang",
  components: {
    PageHeader,
    Wave,
luke.glasscock's avatar
luke.glasscock committed
    Tooltip,
    VueEasyLightbox,
    WorkshopIcon,
    ResidencyIcon,
    ClockEndIcon,
    HammerWrenchIcon,
    KeyboardSettingsIcon,
    LockOpenVariantIcon,
Luke Glasscock's avatar
Luke Glasscock committed
    PackageVariantIcon,
  },
  methods: {
    showImg(index) {
      this.lightbox.index = index;
      this.lightbox.visible = true;
    },
    handleHide() {
      this.lightbox.visible = false;
    },
    getImageUrl(filename) {
      return require(`@/assets/images/${filename}`);
Luke Glasscock's avatar
Luke Glasscock committed
    },
jtwidt's avatar
jtwidt committed
  data: function() {
    return {
      bbLogo: BBLogo,
      // lightbox state
      lightbox: {
        visible: false,
        index: 0, // default: 0
        imgs: [
          require("@/assets/images/Big Bang Graphics-03.png"),
          require("@/assets/images/Big Bang Graphics-04.png"),
Luke Glasscock's avatar
Luke Glasscock committed
          require("@/assets/images/Becoming a BB Customer_2-07.png"),
        ],
      },
      milestones: [
        {
          done: true,
          text: "Big Bang MVP",
Luke Glasscock's avatar
Luke Glasscock committed
          logo: "",
          done: false,
          text: "coming soon - Azure Support",
Luke Glasscock's avatar
Luke Glasscock committed
          logo: "",
        },
        {
          done: false,
          text: "coming soon - Open Source version",
Luke Glasscock's avatar
Luke Glasscock committed
          logo: "",
        },
      ],
Luke Glasscock's avatar
Luke Glasscock committed
  },
};
</script>
<style lang="scss">
.big-bang {
  .mm-logo {
    width: 250px;
  }
  .milestones-wrapper {
    background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 3px 10px;
    background-repeat: repeat-y;
    padding-top: 8px;
    position: relative;

    .bullet {
      border: 1px solid black;
      background-color: #ffffff;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: -7px;
      top: 3px;
      height: 17px;
      width: 17px;

      &.done {
        background-color: $p1-light-green;
      }
    }

    .img-container {
      width: 24px;
      min-height: 24px;

      .tool-logo {
        max-width: 24px;
        max-height: 24px;
      }
    }

    .text {
      font-weight: 600;
    }

    .milestone:last-child {
      background-color: #ffffff;
      margin-bottom: 0 !important;
    }
    .milestone:first-child {
      margin-top: -12px;
    }
  }

  .image-wrapper {
    cursor: pointer;
  }

  .bb-logo {
    max-width: 200px;
  }

  // lightbox stuff
  .vel-modal {
    .vel-img {
      background-color: #ffffff;
    }
    .vel-toolbar {
      .toobar-btn.toolbar-btn__rotate {
        display: none;
      }
    }
  }
  .card-summary {
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .card-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-bottom: 1rem;

      a {
        .btn-link {
          word-wrap: none;
        }
      }

      h4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      @include xs {
        align-items: flex-start;
        text-align: left;
        h4 {
          margin-left: 0;
          padding-left: 0;
        }
      }
    }
    .card-container-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1rem;

      @include xs {
        align-items: flex-start;
        text-align: left;
        h4 {
          margin-left: 0;
          padding-left: 0;
        }
      }
    }
  }
}
</style>