diff --git a/src/components/Base/LogoCard.vue b/src/components/Base/LogoCard.vue
index 8b200b0c910c8d935cb5cfa9476030dbececca3f..1e877ecc6c90e73ae4eb4cc79856df0a56516a08 100644
--- a/src/components/Base/LogoCard.vue
+++ b/src/components/Base/LogoCard.vue
@@ -5,12 +5,18 @@
: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; margin-bottom: -10px"
+ />
+ </div>
</div>
<h4 class="subhead mt-2 px-2" style="width: 100%">{{ logoCardText }}</h4>
<v-card-actions v-if="!logoCardUrl">
@@ -30,7 +36,13 @@ export default {
logoCardLink: String,
logoCardUrl: String,
logoCardExternalUrl: String,
- logoCardUrlExternalTarget: String
+ logoCardUrlExternalTarget: String,
+ logoSvg: Object,
+ },
+ data() {
+ return {
+ svgComponent: this.logoSvg,
+ };
},
methods: {
navigateTo() {
@@ -42,8 +54,8 @@ export default {
this.logoCardExternalUrlTarget || ""
);
}
- }
- }
+ },
+ },
};
</script>
<style lang="scss" scoped>
diff --git a/src/components/ServicesSummary.vue b/src/components/ServicesSummary.vue
index 8f7dcab133ee494e5cb3ec546da4e43ef74c3814..74057e5339b4f1d6ed20b7db3e738ef22d6b6cbc 100644
--- a/src/components/ServicesSummary.vue
+++ b/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>
diff --git a/src/views/CNAP.vue b/src/views/CNAP.vue
index 848134435ad2538f399089d8245b101f239641a0..25743c5c2a77974477c74238ac363bd932e50f1a 100644
--- a/src/views/CNAP.vue
+++ b/src/views/CNAP.vue
@@ -3,7 +3,7 @@
<PageHeader
title="Cloud Native Access Point"
subtext
- description="CNAP is available on Cloud One to provide access to development, testing and production enclaves at IL-2, IL-4 and IL-5"
+ description="CNAP is available on Cloud One to provide access to development, testing, and production enclaves at IL-2, IL-4, and IL-5"
:logoSvg="cnapLogo"
/>
<v-container class="px-md-8 px-auto" fluid>
@@ -21,8 +21,8 @@
<li class="mb-4">
Brings a full Zero Trust tech stack enforcing device state,
user
- <Tooltip text="RBAC " tooltip="Role Based Access Control" />
- and Software Defined Perimeter/Networks based on Google
+ <Tooltip text="RBAC," tooltip="Role Based Access Control" />
+ and Software Defined Perimeter / Networks based on Google
BeyondCorp concepts
</li>
<li class="mb-4">
@@ -35,8 +35,8 @@
<li class="mb-4">
Allows thick client access from
<Tooltip text="BYOD" tooltip="Bring Your Own Device" />
- Government owned devices (both mobile and desktop) through
- AppGate Zero Trust clients to enforce device states.
+ Government-owned devices (both mobile and desktop) through
+ AppGate Zero Trust clients to enforce device states
</li>
</ul>
</div>
@@ -45,7 +45,7 @@
<li class="mb-4">
Allows for
<Tooltip text="VDI" tooltip="Virtual Desktop Interface" />
- options for zero/thin clients
+ options for zero / thin clients
</li>
<li class="mb-4">
Enables internet egress at
@@ -58,11 +58,11 @@
text="DMZ Network"
tooltip="Demilitarized Zone Network"
/>
- /Perimeter stack with break and inspect,
+ / Perimeter stack with break and inspect,
<Tooltip text="IDS" tooltip="Intrusion Detection Systems" />/
<Tooltip text="IPS" tooltip="Intrusion Prevention System" />,
<Tooltip text="WAF" tooltip="Web Application Firewall" />
- Capability, full packet captures as an elastic cloud based
+ Capability, full packet captures as an elastic Cloud-based
stack
</li>
<li class="mb-4">
@@ -81,57 +81,71 @@
</ul>
</div>
</div>
- <div class="row text-left">
- <div class="col-md-6">
- <h2 class="mb-n4">
- CNAP
- </h2>
- <h1>
- OVERVIEW
- </h1>
- <v-btn
- :class="
- $vuetify.breakpoint.smAndDown
- ? 'my-3 my-md-6 mx-3'
- : 'my-6 mr-6 ml-16'
- "
- color="primary"
- href="https://confluence.il2.dso.mil/display/P1/Platform+One+CNAP+AppGate+SDP+Client"
- target="_blank"
- >CNAP INFO</v-btn
- >
- <v-btn
- :class="
- $vuetify.breakpoint.smAndDown
- ? 'my-3 my-md-6 mx-3'
- : 'my-6 mr-6'
- "
- color="primary"
- href="https://confluence.il2.dso.mil/display/P1/Customer+Onboarding"
- target="_blank"
- >CNAP INSTRUCTIONS</v-btn
- >
- </div>
- <div class="col-md-6">
- <h3>
- More information to enable your mission
- </h3>
- <ul class="col mb-n10 ml-7 mb-md-0">
- <li class="mb-4">
- AWS CNAP deployment overivew
- </li>
- <li class="mb-4">
- Common Components
- </li>
- <li class="mb-4">
- Use cases for IL-2(Internet Accessible Workloads) and
- IL-4/5(Non-internet Accessible Workloads)
- </li>
- <li class="mb-4">
- General Setup
- </li>
- </ul>
- </div>
+ </v-container>
+ </div>
+ <div>
+ <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">
+ CNAP Overview
+ </h2>
+ </v-container>
+ <div class="container text-left">
+ <v-container class="row justify-center">
+ <div class="row text-left px-md-16 mb-16">
+ <div class="col-md-6">
+ <ul>
+ <li class="mb-4">
+ Use cases for IL-2 (Internet accessible workloads) and
+ IL-4/5 (non-Internet accessible workloads)
+ </li>
+ <li class="mb-4">
+ General Setup
+ </li>
+ </ul>
+ </div>
+ <div class="col-md-6 px-pb-8">
+ <ul>
+ <li class="mb-4">
+ AWS CNAP deployment overivew
+ </li>
+ <li class="mb-4">
+ Common Components
+ </li>
+ </ul>
+ </div>
+ </div>
+ </v-container>
+ <v-container>
+ <div class="row justify-content-center">
+ <v-btn
+ :class="
+ $vuetify.breakpoint.smAndDown
+ ? 'my-3 my-md-6 mx-3 black--text'
+ : 'my-6 mr-6 black--text'
+ "
+ color="light"
+ href="https://confluence.il2.dso.mil/display/P1/Customer+Onboarding"
+ target="_blank"
+ outlined
+ >More info</v-btn
+ >
+ <v-btn
+ :class="
+ $vuetify.breakpoint.smAndDown
+ ? 'my-3 my-md-6 mx-3'
+ : 'my-6 mr-6'
+ "
+ color="primary"
+ href="https://confluence.il2.dso.mil/pages/viewpage.action?spaceKey=P1&title=Platform+One+CNAP+AppGate+SDP+Client"
+ target="_blank"
+ >AppGate</v-btn
+ >
+ </div>
+ <div class="row justify-content-center mr-2">
+ ** User will need P1 SSO access to view the pages
+ </div>
+ </v-container>
</div>
</v-container>
</div>