Footer.vue

<template>
  <footer class="footer dark px-8 py-8">
    <v-container>
      <v-row class="text-left">
        <v-col class="text-center text-sm-left" cols="12" sm="6" lg="3">
          <PlatformOneWordMarkLogo />
          <div class="my-4">
            <a
              class="social-logo hvr-grow linkedin"
              href="https://www.linkedin.com/company/dodplatformone"
              target="_blank"
              rel="noopener noreferrer"
            >
              <LinkedInLogo width="32" class="mr-3" />
            </a>
            <a
              class="social-logo hvr-grow youtube"
              href="https://www.youtube.com/channel/UCJYa7FHdC-4iQMvSb5uEraw"
              target="_blank"
              rel="noopener noreferrer"
            >
              <YouTubeLogo width="32" class="mr-3" />
            </a>
            <a
              class="social-logo hvr-grow medium"
              href="https://medium.com/@platformone"
              target="_blank"
              rel="noopener noreferrer"
            >
              <MediumLogo width="32" />
            </a>
          </div>
        </v-col>
        <v-col
          class="order-lg-3 text-center text-sm-left text-md-center text-lg-right"
          cols="12"
          sm="6"
          lg="2"
        >
          <a
            class="hvr-grow"
            id="af-logo"
            href="https://www.af.mil/"
            target="_blank"
            rel="noopener noreferrer"
          >
            <AirForceLogo />
          </a>
        </v-col>

        <v-col class="mt-4 mt-lg-0" lg="7" cols="12">
          <v-row class="py-0 link-wrapper">
            <v-col class="d-none d-lg-flex" lg="1"></v-col>
            <v-col
              class="py-0 d-flex flex-column link-column text-left"
              cols="12"
              sm="6"
              md="4"
              lg="3"
            >
              <router-link to="/">
                <h4 class="px-0 mb-3 mt-1">HOME</h4>
              </router-link>
              <router-link to="/services"> Services </router-link>
              <router-link to="/who-we-are"> Who We Are </router-link>
              <router-link to="/contact-us"> Contact Us </router-link>
            </v-col>
            <v-col
              class="py-0 d-flex flex-column mt-4 mt-sm-0 link-column text-left"
              cols="12"
              sm="6"
              md="4"
            >
              <h4 class="mb-3 mt-1">RESOURCES</h4>
              <a
                href="https://software.af.mil"
                target="_blank"
                rel="noopener noreferrer"
              >
                Chief Software Officer Site
              </a>
              <a
                href="https://software.af.mil/training/"
                target="_blank"
                rel="noopener noreferrer"
              >
                DevSecOps Training
              </a>
              <a
                href="https://repo1.dso.mil"
                target="_blank"
                rel="noopener noreferrer"
              >
                Repo One
              </a>
              <a
                href="https://repo1.dso.mil/dsawg-devsecops/"
                target="_blank"
                rel="noopener noreferrer"
              >
                DSAWG on Repo One
              </a>
              <a
                href="https://ironbank.dso.mil"
                target="_blank"
                rel="noopener noreferrer"
              >
                Iron Bank
                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
                  >mdi-lock</v-icon
                >
              </a>
              <a
                href="https://registry1.dso.mil/"
                target="_blank"
                rel="noopener noreferrer"
                >Registry One
                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
                  >mdi-lock</v-icon
                >
              </a>
            </v-col>
            <v-col
              class="py-0 d-flex flex-column mt-4 mt-md-0 link-column text-left"
              cols="12"
              sm="6"
              md="4"
            >
              <h4 class="mb-3 mt-1">INFORMATION</h4>
              <!-- <a href="https://software.af.mil" target="_blank">
              Privacy Statements
            </a>
            <a href="https://software.af.mil/training/" target="_blank">
              Site Map
            </a>
            <a href="https://repo1.dso.mil" target="_blank">
              FAQs
            </a> -->
              <a
                href="https://chat.il2.dso.mil/platform-one/channels/town-square"
                target="_blank"
                rel="noopener noreferrer"
              >
                Chat
                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
                  >mdi-lock</v-icon
                >
              </a>
              <a
                href="https://learn.apps.dso.mil/cohorts/4/self_register"
                target="_blank"
                rel="noopener noreferrer"
                >Self Learning
                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
                  >mdi-lock</v-icon
                >
              </a>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </footer>
</template>
<script>
import PlatformOneWordMarkLogo from "@/assets/images/logos/P1_Wordmark_WH.svg";
import LinkedInLogo from "@/assets/images/logos/social/linkedin.svg";
import YouTubeLogo from "@/assets/images/logos/social/youtube.svg";
import MediumLogo from "@/assets/images/logos/social/medium.svg";
import AirForceLogo from "@/assets/images/branches/AF-logo.svg";

export default {
  name: "FooterComponent",
  components: {
    PlatformOneWordMarkLogo,
    LinkedInLogo,
    YouTubeLogo,
    AirForceLogo,
    MediumLogo,
  },
};
</script>
<style lang="scss" scoped>
.footer {
  $hover-color: #ececec;
  border-top: 1px solid $footer-border-color;
  background-color: $footer-bg-color !important;
  z-index: 1;

  #af-logo {
    svg {
      width: 120px;
    }
    &:hover {
      svg ::v-deep path {
        fill: $hover-color !important;
      }
    }
  }
  .link-wrapper {
    .link-column {
      line-height: 2rem;
      a {
        color: $light-text-color !important;
        line-height: 2rem;
        &:hover {
          color: $hover-color !important;
        }
      }
      h4 {
        padding: 0;
      }
    }
  }

  .social-logo {
    &.linkedin,
    &.youtube {
      path {
        fill: $footer-bg-color !important;
      }
      ::v-deep :hover {
        circle,
        rect {
          fill: $hover-color !important;
        }
      }
    }
    &.medium {
      ::v-deep .path-1 {
        fill: $light-text-color;
      }
      ::v-deep .path-2 {
        fill: $footer-bg-color;
      }
      ::v-deep :hover {
        .path-1 {
          fill: $hover-color;
        }
      }
    }
  }
}
</style>