From ab097190a7f928f2f5450c4c3a2ca4ff448c8438 Mon Sep 17 00:00:00 2001
From: Brandon Romano <BrandonRRomano@gmail.com>
Date: Wed, 6 May 2020 17:50:26 -0700
Subject: [PATCH] Plug in proper content for when enterprise component

---
 .../img/consul-enterprise.svg                 | 26 +++++++++
 .../img/consul-oss.svg                        | 10 ++++
 .../consul-enterprise-comparison/index.jsx    | 56 +++++++++----------
 .../enterprise-comparison/index.jsx           |  7 ++-
 website/pages/home/index.jsx                  |  4 +-
 5 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 website/components/consul-enterprise-comparison/img/consul-enterprise.svg
 create mode 100644 website/components/consul-enterprise-comparison/img/consul-oss.svg

diff --git a/website/components/consul-enterprise-comparison/img/consul-enterprise.svg b/website/components/consul-enterprise-comparison/img/consul-enterprise.svg
new file mode 100644
index 0000000000..0139d8d470
--- /dev/null
+++ b/website/components/consul-enterprise-comparison/img/consul-enterprise.svg
@@ -0,0 +1,26 @@
+<svg width="160" height="96" viewBox="0 0 160 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="90" cy="6" r="6" fill="#BDBEC2"/>
+<circle cx="70" cy="6" r="6" fill="#CA2171"/>
+<circle cx="70" cy="26" r="6" fill="#CA2171"/>
+<circle cx="90" cy="26" r="6" fill="#CA2171"/>
+<circle cx="154" cy="6" r="6" fill="#CA2171"/>
+<circle cx="134" cy="6" r="6" fill="#CA2171"/>
+<circle cx="134" cy="26" r="6" fill="#CA2171"/>
+<circle cx="154" cy="26" r="6" fill="#CA2171"/>
+<circle cx="90" cy="70" r="6" fill="#CA2171"/>
+<circle cx="70" cy="70" r="6" fill="#CA2171"/>
+<circle cx="70" cy="90" r="6" fill="#BDBEC2"/>
+<circle cx="90" cy="90" r="6" fill="#BDBEC2"/>
+<circle cx="154" cy="70" r="6" fill="#CA2171"/>
+<circle cx="134" cy="70" r="6" fill="#CA2171"/>
+<circle cx="134" cy="90" r="6" fill="#CA2171"/>
+<circle cx="154" cy="90" r="6" fill="#BDBEC2"/>
+<circle cx="26" cy="6" r="6" fill="#CA2171"/>
+<circle cx="6" cy="6" r="6" fill="#CA2171"/>
+<circle cx="6" cy="26" r="6" fill="#CA2171"/>
+<circle cx="26" cy="26" r="6" fill="#BDBEC2"/>
+<circle cx="26" cy="70" r="6" fill="#BDBEC2"/>
+<circle cx="6" cy="70" r="6" fill="#BDBEC2"/>
+<circle cx="6" cy="90" r="6" fill="#BDBEC2"/>
+<circle cx="26" cy="90" r="6" fill="#BDBEC2"/>
+</svg>
diff --git a/website/components/consul-enterprise-comparison/img/consul-oss.svg b/website/components/consul-enterprise-comparison/img/consul-oss.svg
new file mode 100644
index 0000000000..8a05d36067
--- /dev/null
+++ b/website/components/consul-enterprise-comparison/img/consul-oss.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="96" viewBox="0 0 32 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="6" r="6" fill="#CA2171"/>
+<circle cx="6" cy="6" r="6" fill="#CA2171"/>
+<circle cx="6" cy="26" r="6" fill="#CA2171"/>
+<circle cx="26" cy="26" r="6" fill="#BDBEC2"/>
+<circle cx="26" cy="70" r="6" fill="#BDBEC2"/>
+<circle cx="6" cy="70" r="6" fill="#BDBEC2"/>
+<circle cx="6" cy="90" r="6" fill="#BDBEC2"/>
+<circle cx="26" cy="90" r="6" fill="#BDBEC2"/>
+</svg>
\ No newline at end of file
diff --git a/website/components/consul-enterprise-comparison/index.jsx b/website/components/consul-enterprise-comparison/index.jsx
index ff705678d0..ad9184e180 100644
--- a/website/components/consul-enterprise-comparison/index.jsx
+++ b/website/components/consul-enterprise-comparison/index.jsx
@@ -1,39 +1,33 @@
 import EnterpriseComparison from '../enterprise-comparison'
 
-const technicalComplexity = {
-  title: 'Technical Complexity',
-  label: 'Open Source',
-  imageUrl:
-    'https://www.datocms-assets.com/2885/1579883486-complexity-basic.png',
-  description:
-    'Consul open source enables individuals to discover services and securely manage connections between them across cloud, on-premise, and hybrid environments.',
-  link: {
-    text: 'View Open Source Features',
-    url: 'https://www.hashicorp.com/products/consul/pricing/',
-    type: 'outbound',
-  },
-}
-
-const organizationalComplexity = {
-  title: 'Organizational Complexity',
-  label: 'Enterprise',
-  imageUrl:
-    'https://www.datocms-assets.com/2885/1579883488-complexity-advanced.png',
-  description:
-    'Consul Enterprise provides the foundation for organizations to build and govern an enterprise-ready service networking environment for multiple teams across multiple clouds',
-  link: {
-    text: 'View Enterprise Features',
-    url: 'https://www.hashicorp.com/products/consul/pricing/',
-    type: 'outbound',
-  },
-}
-
-export default function NomadEnterpriseInfo() {
+export default function ConsulEnterpriseComparison() {
   return (
     <EnterpriseComparison
       title="When to consider Consul Enterprise"
-      itemOne={technicalComplexity}
-      itemTwo={organizationalComplexity}
+      itemOne={{
+        title: 'Technical Complexity',
+        label: 'Open Source',
+        imageUrl: require('./img/consul-oss.svg?url'),
+        description:
+          'Consul open source enables individuals to discover services and securely manage connections between them across cloud, on-premise, and hybrid environments.',
+        link: {
+          text: 'View Open Source Features',
+          url: 'https://www.hashicorp.com/products/consul/pricing/',
+          type: 'outbound',
+        },
+      }}
+      itemTwo={{
+        title: 'Organizational Complexity',
+        label: 'Enterprise',
+        imageUrl: require('./img/consul-enterprise.svg?url'),
+        description:
+          'Consul Enterprise provides the foundation for organizations to build an enterprise-ready service networking environment for multiple teams by enabling governance capabilities.',
+        link: {
+          text: 'View Enterprise Features',
+          url: 'https://www.hashicorp.com/products/consul/pricing/',
+          type: 'outbound',
+        },
+      }}
       brand="consul"
     />
   )
diff --git a/website/components/enterprise-comparison/index.jsx b/website/components/enterprise-comparison/index.jsx
index 1b8784e398..d0b611e91d 100644
--- a/website/components/enterprise-comparison/index.jsx
+++ b/website/components/enterprise-comparison/index.jsx
@@ -3,7 +3,12 @@ import Button from '@hashicorp/react-button'
 import InlineSvg from '@hashicorp/react-inline-svg'
 import ArrowIcon from './img/arrow.svg?include'
 
-export default function EnterpriseInfo({ title, itemOne, itemTwo, brand }) {
+export default function EnterpriseComparison({
+  title,
+  itemOne,
+  itemTwo,
+  brand,
+}) {
   return (
     <div className="g-enterprise-comparison">
       <div className="g-grid-container">
diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index d85603edde..6b19befc73 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -216,8 +216,6 @@ export default function HomePage() {
         />
       </div>
 
-      <ConsulEnterpriseComparison />
-
       <LearnCallout
         headline="Learn the latest Consul skills"
         brand="consul"
@@ -241,6 +239,8 @@ export default function HomePage() {
         ]}
       />
 
+      <ConsulEnterpriseComparison />
+
       <CallToAction
         heading="Ready to get started?"
         content="Consul open source addresses the technical complexity of managing production services by providing a way to discover, secure, automate and connect applications and networking configurations across distributed infrastructure and clouds."