BULL-2078 Direct Links

src/components/WhoWeServe.vue

@@ -4,53 +4,91 @@
 
     <div class="container d-flex flex-wrap justify-content-center">
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/dod-seal.webp"
-          alt="US Department of Defense"
-        />
+        <a
+          href="https://www.defense.gov"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/dod-seal.webp"
+            alt="US Department of Defense"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/af-seal.webp"
-          alt="US Air Force"
-        />
+        <a href="https://www.af.mil" target="_blank" rel="noopener noreferrer">
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/af-seal.webp"
+            alt="US Air Force"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/marines-seal.webp"
-          alt="US Marine Corps"
-        />
+        <a
+          href="https://www.marines.mil"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/marines-seal.webp"
+            alt="US Marine Corps"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/navy-seal.webp"
-          alt="US Navy"
-        />
+        <a
+          href="https://www.marines.mil"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/navy-seal.webp"
+            alt="US Navy"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/army-seal.webp"
-          alt="US Army"
-        />
+        <a
+          href="https://www.marines.mil"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/army-seal.webp"
+            alt="US Army"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/cg-seal.webp"
-          alt="US Coast Guard"
-        />
+        <a
+          href="https://www.uscg.mil"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/cg-seal.webp"
+            alt="US Coast Guard"
+          />
+        </a>
       </div>
       <div class="img-wrapper">
-        <img
-          class="img-fluid"
-          src="@/assets/images/branches/sf-seal.webp"
-          alt="US Space Force"
-        />
+        <a
+          href="https://www.spaceforce.mil"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            class="img-fluid hvr-grow"
+            src="@/assets/images/branches/sf-seal.webp"
+            alt="US Space Force"
+          />
+        </a>
       </div>
     </div>
   </div>
@@ -62,6 +100,22 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.hvr-grow {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  transition-duration: 0.3s;
+  transition-property: transform;
+  cursor: pointer;
+}
+.hvr-grow:hover,
+.hvr-grow:focus,
+.hvr-grow:active {
+  transform: scale(1.1);
+}
 .who-we-serve {
   .container {
     max-width: 1080px;