Plug in proper content for when enterprise component

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>

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>

website/components/consul-enterprise-comparison/index.jsx

@@ -1,39 +1,33 @@
 import EnterpriseComparison from '../enterprise-comparison'
 
-const technicalComplexity = {
+export default function ConsulEnterpriseComparison() {
-  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() {
   return (
     <EnterpriseComparison
       title="When to consider Consul Enterprise"
-      itemOne={technicalComplexity}
+      itemOne={{
-      itemTwo={organizationalComplexity}
+        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"
     />
   )

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">

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."