Add CNAP to home page

src/components/Base/LogoCard.vue

@@ -5,12 +5,15 @@
     :class="!logoCardUrl ? 'ma-4 hvr-no-grow' : 'hvr-grow ma-4'"
     v-on:click="navigateTo"
   >
-    <div v-if="logoSource" class="mx-auto mt-4 pb-2">
+    <div v-if="logoSource || svgComponent" class="mx-auto mt-4 pb-2">
       <v-img
         :src="logoSource"
         class="mx-auto ma-1"
         :width="logoMaxWidth || 125"
       />
+      <div v-if="svgComponent" style="width:100%" class="mx-auto ma-1">
+        <component v-bind:is="svgComponent" style="max-width: 125px;" />
+      </div>
     </div>
     <h4 class="subhead mt-2 px-2" style="width: 100%">{{ logoCardText }}</h4>
     <v-card-actions v-if="!logoCardUrl">
@@ -30,7 +33,13 @@ export default {
     logoCardLink: String,
     logoCardUrl: String,
     logoCardExternalUrl: String,
-    logoCardUrlExternalTarget: String
+    logoCardUrlExternalTarget: String,
+    logoSvg: Object,
+  },
+  data() {
+    return {
+      svgComponent: this.logoSvg,
+    };
   },
   methods: {
     navigateTo() {
@@ -42,8 +51,8 @@ export default {
           this.logoCardExternalUrlTarget || ""
         );
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/ServicesSummary.vue

@@ -23,6 +23,13 @@
             logoCardUrl="/products/big-bang/"
           />
         </v-flex>
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSvg="cnapLogo"
+            logoCardText="Provide access to development, testing and production enclaves"
+            logoCardUrl="/products/cnap/"
+          />
+        </v-flex>
         <!-- REMAINING FOR: Enterprise Collaboration and Cyber Security
         <v-flex lg2 md3 sm6 xs12>
           <LogoCard
@@ -46,19 +53,21 @@ import LogoCard from "@/components/Base/LogoCard";
 import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.png";
 import PBLogo from "@/assets/images/logos/Party_Bus_logo_low_res-01.png";
 import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_Black_text.png";
+import CNAPlogo from "@/assets/images/logos/CNAP_logo.svg";
 
 export default {
   name: "ServicesSummary",
   components: {
-    LogoCard
+    LogoCard,
   },
   data() {
     return {
       ibLogo: IBLogo,
       pbLogo: PBLogo,
-      bbLogo: BBLogo
+      bbLogo: BBLogo,
+      cnapLogo: CNAPlogo,
     };
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>