BigBang.vue

<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">
              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.
              <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">
              We train platform ops team for
              <Tooltip text="SRE" tooltip="Site Reliability Engineering" />
              work.
            </div>
          </div>
        </div>
      </div>
      <h2 class="mt-sm-16 pt-sm-16">THE BIG BANG STAGES</h2>
      <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>

      <div class="row justify-center">
        <div class="image-wrapper col-8 col-md-6" @click="() => showImg(0)">
          <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>

      <div class="row justify-center">
        <div class="image-wrapper pt-4 col-6" @click="() => showImg(1)">
          <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>

    <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"
            src="@/assets/images/Becoming a BB Customer_2-07.png"
            alt="Become a Big Bang customer"
          />
        </div>
      </div>
      <div class="card-summary">
        <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">
              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" />
            <h4>BIG BANG ENGINEER COHORT</h4>
            <div class="text">
              A multi-week course targeted toward engineers wanting hands-on
              experience deploying Big Bang in our sandbox environment.
              <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">
            Learn more about our Workshop and Engineer Cohort
          </router-link>
        </div>
      </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">
            <v-btn
              class="mx-4 my-2"
              color="primary"
              href="https://jira.il2.dso.mil/servicedesk/customer/portal/36/create/202"
              target="_blank"
              >Contact Us</v-btn
            >
            <v-btn
              class="mx-4 my-2"
              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>

    <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>
        <div class="container my-4">
          <div class="row justify-content-center">
            <div class="col-md-6 px-4 my-auto text-center">
              <h4>
                Have questions about Big Bang?
              </h4>

              <v-btn
                color="primary"
                class="mt-4"
                href="https://confluence.il2.dso.mil/questions/topics/10813444/bigbang"
                target="_blank"
              >
                FAQs
              </v-btn>
            </div>
          </div>
        </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";
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,
    Tooltip,
    VueEasyLightbox,
    WorkshopIcon,
    ResidencyIcon,
    ClockEndIcon,
    HammerWrenchIcon,
    KeyboardSettingsIcon,
    LockOpenVariantIcon,
    PackageVariantIcon,
  },
  methods: {
    showImg(index) {
      this.lightbox.index = index;
      this.lightbox.visible = true;
    },
    handleHide() {
      this.lightbox.visible = false;
    },
    getImageUrl(filename) {
      return require(`@/assets/images/${filename}`);
    },
  },
  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"),
          require("@/assets/images/Becoming a BB Customer_2-07.png"),
        ],
      },
      milestones: [
        {
          done: true,
          text: "Big Bang MVP",
          logo: "",
        },
        {
          done: false,
          text: "coming soon - Azure Support",
          logo: "",
        },
        {
          done: false,
          text: "coming soon - Open Source version",
          logo: "",
        },
      ],
    };
  },
};
</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>