ADCE.vue

<template>
  <div class="adce">
    <PageHeader
      title="The Party Bus"
      :subtextComponent="headerSubtextTooltip"
      description="The environment and services you need to develop and deploy your software application"
      :logoSource="pbLogo"
    />
    <v-container class="px-8">
      <h2>Why Party Bus?</h2>

      <div class="row text-left my-8">
        <div class="col-md-6 px-6">
          <h3 class="pl-0 mb-4">
            PARTY BUS - ABMS ADCE IS A
            <span style="text-transform: lowercase;">c</span>ATO ENABLED
            DEVSECOPS SERVICE
          </h3>
          <ul>
            <li>
              For government software programs who need rapid development of
              approved, working mission applications to warfighter.
            </li>
            <li>
              We provide a non-vendor locked,
              <Tooltip
                text="CNCF"
                tooltip="Cloud Native Computing Foundation"
              />
              kubernetes based platform.
            </li>
            <li>
              We provide a secure, multi-tenant and multi-classification with
              Develop, Test, and Production environments.
            </li>
            <li>
              We stand out by allowing our customers to field applications with
              cATOd templatized pipelines
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <img
            class="img-fluid mt-2 mb-3"
            src="@/assets/images/party-bus/Party_Bus_Graphics.png"
            alt="party bus graphics"
          />
        </div>
      </div>
      <div class="container my-4 px-8">
        <h2 class="my-4 mt-sm-8 px-0">Onboarding Workshops</h2>
        <p class="text-center">
          Get hands-on experience and training with our rapid workshop to stand
          up a hello world pipeline with a templated app through Party Bus -
          <Tooltip text="ABMS" tooltip="Advanced Battle Management System" />
          <Tooltip
            text="ADCE"
            tooltip="All Domain Common Environment"
            :spaceAfter="false"
          />.
        </p>
      </div>
    </v-container>

    <div class="row justify-center mt-8">
      <div
        class="col-md-10 white--text pa-md-12"
        style="border-radius:10px; height:100%;width:100%;background-color: #031726 !important;"
      >
        <div class="row">
          <div class="col-md-5 text-left pr-md-16 pa-12 pa-md-0">
            <h2 class="ma-auto px-0 pb-10 white--text">
              Save With Party Bus
            </h2>
            <p>
              The cost of each program office standing up their own
              <Tooltip
                text="DevSecOps"
                tooltip="Development, Security, and Operations"
                light
              />
              environment can be saved by using Party Bus. Check out the service
              catalog to see what is included when you are a Party Bus customer.
            </p>
            <v-btn
              class="my-6 black--text"
              color="light"
              href="/#/products/abms-adce/onboarding"
              target="_blank"
            >
              Service Catalog
            </v-btn>
          </div>
          <div
            class="col-md-7 text-left pl-md-16 pa-12 pa-md-0"
            :style="
              $vuetify.breakpoint.mdAndUp ? 'border-left: solid white 1px' : ''
            "
          >
            <h2 class="ma-auto px-0 pb-10 white--text">
              What You'll Learn
            </h2>
            <p>
              Get hands-on experience and training with our rapid workshop to
              stand up a hello world pipeline with a templated app through Party
              Bus -
              <Tooltip
                text="ABMS"
                tooltip="Advanced Battle Management System"
                light
              />
              <Tooltip
                text="ADCE"
                tooltip="All Domain Common Environment"
                light
                :spaceAfter="false"
              />.
            </p>
            <div class="row">
              <div class="col-6 col-md-3" style="font-size:14px;">
                <AgileIcon />
                <p class="pt-2">
                  Agile &
                  <Tooltip text="UCD" tooltip="User Centered Design" light />
                  Methodologies
                </p>
              </div>
              <div class="col-6 col-md-3" style="font-size:14px;">
                <PairedProgrammingIcon class="mt-n1" />
                <p class="pt-1 pt-md-0">
                  Paired Programming
                </p>
              </div>
              <div class="col-6 col-md-3" style="font-size:14px;">
                <TestDrivenDevelopmentIcon class="mt-n1" />
                <p>
                  Test-Driven Development
                </p>
              </div>
              <div class="col-6 col-md-3" style="font-size:14px;">
                <CyberIcon />
                <p class="pt-2">
                  Certificate to Field (CtF)
                </p>
              </div>
            </div>
            <div :class="$vuetify.breakpoint.smAndDown ? 'text-center' : ''">
              <v-btn
                :class="
                  $vuetify.breakpoint.smAndDown ? 'my-3 my-md-6 mx-3' : 'my-6'
                "
                color="primary"
                href="/#/products/abms-adce/onboarding"
                target="_blank"
              >
                Explore Classes
              </v-btn>
            </div>
          </div>
        </div>
      </div>
    </div>

    <ADCETabSection />
    <ADCECollapsiblesSection />

    <div class="row justify-center pa-16">
      <div
        class="image-wrapper"
        style="border:solid 1px #BDC931"
        @click="() => showImg(0)"
      >
        <img
          class="img-fluid"
          src="@/assets/images/party-bus/Party_Bus_Graphics_Process.png"
          alt="Party Bus Graphics Process"
        />
      </div>
    </div>

    <div class="mx-auto mb-10 mt-n6">
      <DownloadButton
        text="Party Bus Process"
        :internalFilePath="pbGraphicsProcess"
      />
    </div>

    <div class="container mt-4 mb-10 px-8">
      <h2 class="my-4 mt-sm-8 px-0">We Move Fast, But We Move Smart</h2>
      <p class="text-center">
        The Party Bus team will be measuring twice and cutting once. We believe
        the sooner we can get you squared away on our level of 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.
      </p>
    </div>

    <Wave :bottom="false">
      <div class="container">
        <div class="row justify-content-center px-8">
          <div class="col-md-6">
            <div>
              <h2 class="mx-auto">
                Have More Questions About The Party Bus Environment?
              </h2>
            </div>
            <p class="mx-auto">
              You'll be able to find most of your answers in the FAQ page. For
              more specific inquiries, click Contact Us.
            </p>
          </div>
        </div>
        <div>
          <v-btn
            class="mx-2 mt-6 black--text"
            color="light"
            href="https://confluence.il2.dso.mil/cq/questions.action?spaceKey=P1"
            target="_blank"
            >FAQ</v-btn
          >
          <v-btn
            class="mx-2 mt-6"
            color="primary"
            href="https://jira.il2.dso.mil/servicedesk/customer/portal/36/create/202"
            target="_blank"
            >Contact Us</v-btn
          >
        </div>
      </div>
    </Wave>

    <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 PBLogo from "@/assets/images/logos/Party_Bus_logo_low_res-01.png";
import VueEasyLightbox from "vue-easy-lightbox";
import Tooltip from "@/components/Base/Tooltip";
import ADCETabSection from "@/components/ADCE/ADCETabSection";
import ADCECollapsiblesSection from "@/components/ADCE/ADCECollapsiblesSection";
import AgileIcon from "@/assets/images/icons/Icon_Agile.svg";
import CyberIcon from "@/assets/images/icons/Icon_Cyber.svg";
import PairedProgrammingIcon from "@/assets/images/icons/Icon_PairedProgramming.svg";
import TestDrivenDevelopmentIcon from "@/assets/images/icons/Icon_TestDrivenDevelopment.svg";
import PBGraphicsProcess from "@/assets/images/party-bus/Party_Bus_Graphics_Process.png";
import DownloadButton from "@/components/Base/DownloadButton";
import HeaderSubtextTooltip from "@/components/ADCE/HeaderSubtextTooltip";

export default {
  name: "ADCE",
  components: {
    PageHeader,
    Wave,
    VueEasyLightbox,
    Tooltip,
    ADCETabSection,
    ADCECollapsiblesSection,
    AgileIcon,
    CyberIcon,
    PairedProgrammingIcon,
    TestDrivenDevelopmentIcon,
    DownloadButton,
  },
  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 {
      currentTab: "",
      pbLogo: PBLogo,
      headerSubtextTooltip: HeaderSubtextTooltip,
      pbGraphicsProcess: PBGraphicsProcess,
      // lightbox state
      lightbox: {
        visible: false,
        index: 0, // default: 0
        imgs: [
          require("@/assets/images/party-bus/Party_Bus_Graphics_Process.png"),
        ],
      },
    };
  },
};
</script>
<style lang="scss">
.adce {
  .image-wrapper {
    cursor: pointer;
  }

  // lightbox stuff
  .vel-modal {
    .vel-img {
      background-color: #ffffff;
    }
    .vel-toolbar {
      .toobar-btn.toolbar-btn__rotate {
        display: none;
      }
    }
  }
}
</style>