From 132e27436f76ff85b5b9752656865887c780afca Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kmacdonald@hashicorp.com>
Date: Mon, 1 Feb 2021 10:24:07 -0500
Subject: [PATCH] Website updates for HCP (2/2)

website: prep hcp ctas

Add in updated HCP section

Fix broken link

website: remove superflous heading

website: add new try cloud cta to nav

website: adjust homepage hero CTAs

Update HCP description to match latest

Clean up Hero CTAs

Updates banner
---
 website/components/basic-hero/index.jsx       | 27 +++---
 website/components/basic-hero/style.css       | 13 +--
 .../enterprise-comparison/consul/index.jsx    | 29 ++++---
 .../enterprise-comparison/index.jsx           | 34 +++++---
 .../HCPCalloutSection.module.css              | 82 +++++++++++++++++++
 .../components/hcp-callout-section/index.jsx  | 44 ++++++++++
 website/components/subnav/index.jsx           |  8 +-
 website/data/alert-banner.js                  | 11 ++-
 website/pages/home/img/hcp-consul.svg         |  1 +
 website/pages/home/index.jsx                  | 67 ++++++---------
 10 files changed, 220 insertions(+), 96 deletions(-)
 create mode 100644 website/components/hcp-callout-section/HCPCalloutSection.module.css
 create mode 100644 website/components/hcp-callout-section/index.jsx
 create mode 100644 website/pages/home/img/hcp-consul.svg

diff --git a/website/components/basic-hero/index.jsx b/website/components/basic-hero/index.jsx
index 16a80d78af..a33bcb0c8c 100644
--- a/website/components/basic-hero/index.jsx
+++ b/website/components/basic-hero/index.jsx
@@ -1,6 +1,4 @@
 import Button from '@hashicorp/react-button'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import RightArrowIcon from './img/right-arrow-icon.svg?include'
 
 export default function BasicHero({
   heading,
@@ -19,13 +17,11 @@ export default function BasicHero({
             <div className="links">
               {links.slice(0, 2).map((link, stableIdx) => {
                 const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
-                const linkType = link.type || 'inbound'
-
                 return (
                   <Button
                     // eslint-disable-next-line react/no-array-index-key
                     key={stableIdx}
-                    linkType={linkType}
+                    linkType={link.type}
                     theme={{
                       variant: buttonVariant,
                       brand,
@@ -39,16 +35,17 @@ export default function BasicHero({
             </div>
             {links[2] && (
               <div className="third-link">
-                <a
-                  href={links[2].url}
-                >
-                  <span className="g-type-buttons-and-standalone-links">
-                    {links[2].text}
-                  </span>
-                  <span className="icon">
-                    <InlineSvg src={RightArrowIcon} />
-                  </span>
-                </a>
+                <Button
+                  // eslint-disable-next-line react/no-array-index-key
+                  linkType={links[2].type}
+                  theme={{
+                    variant: 'tertiary-neutral',
+                    brand,
+                    background: 'light',
+                  }}
+                  title={links[2].text}
+                  url={links[2].url}
+                />
               </div>
             )}
           </>
diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css
index ab40f1b85e..0e3ae640cc 100644
--- a/website/components/basic-hero/style.css
+++ b/website/components/basic-hero/style.css
@@ -49,16 +49,11 @@
     display: flex;
     justify-content: center;
     margin-top: 32px;
-
     & a {
-      display: flex;
-      align-items: center;
-      color: var(--gray-4);
-
-      & .icon {
-        margin-left: 8px;
-        height: 24px;
-      }
+      color: var(--gray-3);
+    }
+    & svg * {
+      stroke: var(--gray-2) !important;
     }
   }
 
diff --git a/website/components/enterprise-comparison/consul/index.jsx b/website/components/enterprise-comparison/consul/index.jsx
index dbd1c8ae83..f16342dc12 100644
--- a/website/components/enterprise-comparison/consul/index.jsx
+++ b/website/components/enterprise-comparison/consul/index.jsx
@@ -10,11 +10,13 @@ export default function ConsulEnterpriseComparison() {
         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-prem, and hybrid environments.',
-        link: {
-          text: 'View Open Source Features',
-          url: 'https://www.hashicorp.com/products/consul/pricing/',
-          type: 'outbound',
-        },
+        links: [
+          {
+            text: 'View Open Source Features',
+            url: 'https://www.hashicorp.com/products/consul/pricing/',
+            type: 'outbound',
+          },
+        ],
       }}
       itemTwo={{
         title: 'Organizational Complexity',
@@ -22,11 +24,18 @@ export default function ConsulEnterpriseComparison() {
         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',
-        },
+        links: [
+          {
+            text: 'View Cloud Features',
+            url: 'https://cloud.hashicorp.com',
+            type: 'outbound',
+          },
+          {
+            text: 'View Self-Managed 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 d0b611e91d..810f2acca7 100644
--- a/website/components/enterprise-comparison/index.jsx
+++ b/website/components/enterprise-comparison/index.jsx
@@ -21,12 +21,17 @@ export default function EnterpriseComparison({
             <h4 className="g-type-display-4">{itemOne.title}</h4>
 
             <p className="g-type-body">{itemOne.description}</p>
-            <Button
-              url={itemOne.link.url}
-              title={itemOne.link.text}
-              linkType={itemOne.link.type}
-              theme={{ variant: 'tertiary', brand }}
-            />
+
+            {itemOne.links.map((link) => (
+              <div key="stable">
+                <Button
+                  url={link.url}
+                  title={link.text}
+                  linkType={link.type}
+                  theme={{ variant: 'tertiary', brand }}
+                />
+              </div>
+            ))}
           </div>
           <div className="spacer">
             <div className="vertical-spacer"></div>
@@ -38,12 +43,17 @@ export default function EnterpriseComparison({
             <h4 className="g-type-display-4">{itemTwo.title}</h4>
 
             <p className="g-type-body">{itemTwo.description}</p>
-            <Button
-              url={itemTwo.link.url}
-              title={itemTwo.link.text}
-              linkType={itemTwo.link.type}
-              theme={{ variant: 'tertiary', brand }}
-            />
+            {itemTwo.links.map((link) => (
+              <div key="stable">
+                <Button
+                  key="stable"
+                  url={link.url}
+                  title={link.text}
+                  linkType={link.type}
+                  theme={{ variant: 'tertiary', brand }}
+                />
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/website/components/hcp-callout-section/HCPCalloutSection.module.css b/website/components/hcp-callout-section/HCPCalloutSection.module.css
new file mode 100644
index 0000000000..ed3c303e94
--- /dev/null
+++ b/website/components/hcp-callout-section/HCPCalloutSection.module.css
@@ -0,0 +1,82 @@
+.hcpCalloutSection {
+  composes: g-grid-container from global;
+  padding-top: 88px;
+  padding-bottom: 88px;
+
+  & .header {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 88px;
+    @media (max-width: 1120px) {
+      margin-bottom: 48px;
+    }
+    & h2 {
+      margin: 0;
+      text-align: center;
+      max-width: 450px;
+    }
+  }
+
+  & .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @media (max-width: 1120px) {
+      flex-direction: column-reverse;
+
+      & .info {
+        margin-top: 32px;
+      }
+    }
+
+    & .info {
+      max-width: 488px;
+      margin-right: 32px;
+
+      & h1 {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      & .chin {
+        color: var(--gray-4);
+      }
+      & .description {
+        color: var(--gray-4);
+        margin-top: 28px;
+        margin-bottom: 0;
+
+        @media (max-width: 900px) {
+          margin-top: 18px;
+        }
+      }
+      & .links {
+        margin-top: 32px;
+        display: inline-flex;
+        flex-direction: column;
+
+        & > * {
+          &:not(:last-child) {
+            margin-bottom: 24px;
+          }
+        }
+      }
+    }
+
+    & > img {
+      align-self: center;
+      margin-right: -48px;
+      @media (max-width: 670px) {
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+.chin {
+  composes: g-type-label from global;
+}
+
+.description {
+  composes: g-type-long-body from global;
+}
diff --git a/website/components/hcp-callout-section/index.jsx b/website/components/hcp-callout-section/index.jsx
new file mode 100644
index 0000000000..7aa6ea6e77
--- /dev/null
+++ b/website/components/hcp-callout-section/index.jsx
@@ -0,0 +1,44 @@
+import styles from './HCPCalloutSection.module.css'
+import Button from '@hashicorp/react-button'
+
+export default function HcpCalloutSection({
+  id,
+  header,
+  title,
+  description,
+  chin,
+  image,
+  links,
+}) {
+  return (
+    <div className={styles.hcpCalloutSection} id={id}>
+      <div className={styles.header}>
+        <h2>{header}</h2>
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.info}>
+          <h1>{title}</h1>
+          <span className={styles.chin}>{chin}</span>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.links}>
+            {links.map((link, index) => {
+              const variant = index === 0 ? 'primary' : 'tertiary'
+              return (
+                <div key={link.text}>
+                  <Button
+                    title={link.text}
+                    linkType={link.type}
+                    url={link.url}
+                    theme={{ variant, brand: 'neutral', background: 'light' }}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </div>
+        <img alt={title} src={image} />
+      </div>
+    </div>
+  )
+}
diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx
index 049e04cafe..5cc324fb94 100644
--- a/website/components/subnav/index.jsx
+++ b/website/components/subnav/index.jsx
@@ -6,13 +6,19 @@ export default function ConsulSubnav() {
   const router = useRouter()
   return (
     <Subnav
+      hideGithubStars={true}
       titleLink={{
         text: 'consul',
         url: '/',
       }}
       ctaLinks={[
-        { text: 'GitHub', url: 'https://www.github.com/hashicorp/consul' },
+        {
+          text: 'GitHub',
+          url: 'https://www.github.com/hashicorp/consul',
+        },
+
         { text: 'Download', url: '/downloads' },
+        { text: 'Try Cloud', url: 'https://cloud.hashicorp.com' },
       ]}
       currentPath={router.pathname}
       menuItemsAlign="right"
diff --git a/website/data/alert-banner.js b/website/data/alert-banner.js
index 5c6788e255..0aa0eebdd3 100644
--- a/website/data/alert-banner.js
+++ b/website/data/alert-banner.js
@@ -2,12 +2,11 @@ export const ALERT_BANNER_ACTIVE = true
 
 // https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
 export default {
-  tag: 'Webinar',
-  url:
-    'https://www.hashicorp.com/events/webinars/cloud-service-networking-secrets-management',
-  text: 'Getting Started with Service Networking & Secrets Management on Cloud',
-  linkText: 'Register Now',
+  tag: 'Announcement',
+  url: 'https://cloud.hashicorp.com',
+  text: 'HashiCorp Consul is now generally available on HCP',
+  linkText: 'Learn More',
   // Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
   // if you'd like the component to stop showing at or after a certain date
-  expirationDate: '2021-02-09T11:59:00-05:00',
+  expirationDate: '2021-02-14T11:59:00-05:00',
 }
diff --git a/website/pages/home/img/hcp-consul.svg b/website/pages/home/img/hcp-consul.svg
new file mode 100644
index 0000000000..767ebbb19a
--- /dev/null
+++ b/website/pages/home/img/hcp-consul.svg
@@ -0,0 +1 @@
+<svg width="677" height="414" viewBox="0 0 677 414" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="477.789" height="368.91" rx="2" fill="#1D1E23"/><rect y="42.271" width="477.789" height="326.639" rx="2" fill="url(#paint0_radial)"/><path opacity=".8" fill="#000" d="M0 42.271h147.308V368.91H0z"/><path d="M0 2a2 2 0 012-2h473.789a2 2 0 012 2v40.27H0V2z" fill="#000"/><circle cx="30.526" cy="21.039" r="6.188" fill="#1D1E23"/><circle cx="48.979" cy="21.039" r="6.188" fill="#1D1E23"/><circle cx="66.912" cy="21.039" r="6.188" fill="#1D1E23"/><rect x="24.338" y="114.003" width="81.98" height="11.528" rx="5.764" fill="#1D1E23"/><rect x="24.338" y="138.341" width="66.609" height="8.967" rx="4.483" fill="#1D1E23"/><rect x="178.05" y="114.003" width="66.609" height="11.528" rx="5.764" fill="#1D1E23"/><path d="M32.594 54.836l-6.767 3.903v9.377l2.542 1.468v-9.377l4.225-2.439v-2.932z" fill="#4C4C53"/><path d="M35.295 54.836v7.467h-2.7v-2.786l-2.544 1.467v9.568l2.543 1.47v-7.446h2.701v2.768l2.542-1.467v-9.573l-2.542-1.468z" fill="#4C4C53"/><path d="M35.295 72.025l6.768-3.903v-9.377l-2.544-1.468v9.378l-4.224 2.438v2.932z" fill="#4C4C53"/><rect x="56.361" y="324.077" width="65.328" height="5.124" rx="2.562" fill="#1D1E23"/><circle cx="33.945" cy="327.279" r="13.45" fill="#1D1E23"/><path fill="url(#paint1_linear)" d="M170.365 67.89h176.769v98.632H170.365z"/><path fill="url(#paint2_radial)" d="M170.365 67.89h176.769v98.632H170.365z"/><g opacity=".4" clip-path="url(#clip0)" fill="#DC477D"><path d="M344.647 67.89h-.458c0 2.319 1.894 4.224 4.247 4.224v-.456c-2.103-.02-3.789-1.698-3.789-3.768zm-4.017 0h-.458c0 4.535 3.705 8.2 8.243 8.2v-.456c-4.288 0-7.785-3.478-7.785-7.744zm-3.997 0h-.458c0 6.73 5.496 12.197 12.261 12.197v-.456c-6.516-.02-11.803-5.28-11.803-11.741zm-4.017 0h-.458c0 8.925 7.285 16.173 16.257 16.173v-.456c-8.701 0-15.799-7.061-15.799-15.717zm-3.997 0h-.457c0 11.12 9.096 20.17 20.274 20.17v-.456c-10.928-.021-19.817-8.863-19.817-19.714zm-4.017 0h-.458c0 13.315 10.887 24.145 24.271 24.145v-.455c-13.114 0-23.813-10.644-23.813-23.69zm-3.996 0h-.458c0 15.51 12.676 28.121 28.267 28.121v-.456c-15.341 0-27.809-12.404-27.809-27.665zm-3.997 0h-.458c0 17.705 14.488 32.118 32.285 32.118v-.456c-17.569-.02-31.827-14.206-31.827-31.662z"/><path d="M308.595 67.89h-.458c0 22.095 18.068 40.09 40.298 40.09v-.455c-21.98-.021-39.84-17.788-39.84-39.635zm-4.017 0h-.458c0 24.31 19.878 44.066 44.295 44.066v-.455c-24.167 0-43.837-19.57-43.837-43.611zm10.012 33.65c-9.034-8.987-14.009-20.936-14.009-33.65h-.458c0 12.839 5.017 24.911 14.155 33.981 9.138 9.071 21.252 14.082 34.157 14.082v-.456c-12.801-.02-24.811-4.97-33.845-13.957zm0 0c-9.034-8.987-14.009-20.936-14.009-33.65h-.458c0 12.839 5.017 24.911 14.155 33.981 9.138 9.071 21.252 14.082 34.157 14.082v-.456c-12.801-.02-24.811-4.97-33.845-13.957zm-2.831 2.816c-9.804-9.753-15.195-22.696-15.195-36.466h-.458c0 13.895 5.433 26.961 15.32 36.798 9.887 9.836 23.022 15.241 36.989 15.241v-.456c-13.842 0-26.873-5.363-36.656-15.117zm-2.831 2.817c-10.553-10.5-16.361-24.436-16.361-39.283h-.457c0 14.972 5.849 29.032 16.485 39.614 10.637 10.582 24.77 16.401 39.82 16.401v-.456c-14.925 0-28.933-5.777-39.487-16.276zm-2.831 2.816c-11.302-11.245-17.526-26.196-17.526-42.1h-.458c0 16.029 6.265 31.104 17.672 42.431 11.386 11.328 26.54 17.581 42.65 17.581v-.455c-16.006-.021-31.035-6.213-42.338-17.457zm-2.831 2.816c-12.072-11.99-18.712-27.935-18.712-44.915h-.458c0 17.084 6.681 33.174 18.837 45.247 12.157 12.093 28.309 18.74 45.482 18.74v-.455c-17.069 0-33.097-6.606-45.149-18.617zm-2.83 2.817c-12.823-12.736-19.879-29.696-19.879-47.732h-.458c0 18.16 7.098 35.224 20.004 48.063 12.905 12.839 30.078 19.9 48.312 19.9v-.455c-18.13 0-35.178-7.02-47.979-19.776z"/></g><circle cx="206.475" cy="111.058" fill="#8E134A" r="3.709"/><circle cx="213.692" cy="111.05" fill="#CA2171" r="1.712"/><circle cx="218.338" cy="108.306" fill="#CA2171" r="1.712"/><circle cx="220.778" cy="102.905" fill="#CA2171" r="1.712"/><circle cx="223.178" cy="108.235" r="1.681" fill="#CA2171"/><circle cx="218.355" cy="113.927" fill="#CA2171" r="1.661"/><circle cx="223.283" cy="113.79" fill="#CA2171" r="1.59"/><circle cx="220.715" cy="119.266" r="1.732" fill="#CA2171"/><path d="M206.543 128.28a17.186 17.186 0 01-13.943-7.184 17.188 17.188 0 012.017-22.335 17.176 17.176 0 0122.386-1.314l-2.097 2.71a13.732 13.732 0 00-22.072 10.913 13.733 13.733 0 0022.072 10.912l2.097 2.77a17.021 17.021 0 01-10.46 3.528z" fill="#CA2171"/><g opacity=".15" filter="url(#filter0_f)"><path fill="#000" d="M296 114h325v244H296z"/></g><path d="M284 123a2 2 0 012-2h317a2 2 0 012 2v225a2 2 0 01-2 2H286a2 2 0 01-2-2V123z" fill="#000"/><rect x="307.425" y="135.779" width="84.542" height="84.542" rx="2" fill="#000"/><rect x="307" y="261" width="60" height="60" rx="2" fill="#1D1E23"/><circle cx="307.955" cy="261.952" r="5.764" fill="#00BC7F"/><g clip-path="url(#clip1)"><path d="M328.251 300.246l-2.973.677v-19.214l2.973.678v17.859zm3.709 1.134l-3.709 1.052v-22.206l3.709 1.05v20.104zm4.758 1.166l-4.758 1.737v-25.908l4.758 1.737v22.434zm12.721-2.242l-12.721 6.349V276l12.721 6.348v17.956z" fill="#76767D"/><path d="M334.183 277.266l2.536-1.266v30.653l-2.536-1.266v-28.121zm-4.185 2.088l1.963-.98v25.904l-1.963-.979v-23.945zm-3.309 1.652l1.563-.781v22.202l-1.563-.781v-20.64zm-1.409.703l-1.276.636v17.963l1.276.636v-19.235z" fill="#545459"/></g><rect x="379" y="261" width="60" height="60" rx="2" fill="#1D1E23"/><circle cx="379.935" cy="261.952" r="5.764" fill="#00BC7F"/><path d="M408.578 288.576l.206-3.487a7.902 7.902 0 00-.739.122 7.23 7.23 0 00-3.439 1.797l2.981 2.026.006-.003a.623.623 0 00.36.113.6.6 0 00.61-.561l.015-.007zm6.095-1.567a7.332 7.332 0 00-4.152-1.92l.205 3.481.003.001c.006.12.05.239.134.34a.63.63 0 00.838.108l.01.004 2.962-2.014zm-8.426 3.636l-2.722-2.335a6.629 6.629 0 00-1.013 4.333l3.489-.966.003-.011a.62.62 0 00.317-.2.569.569 0 00-.077-.807l.003-.014zm10.404-.242a6.784 6.784 0 00-.893-2.092l-2.707 2.324.002.007a.575.575 0 00-.194.311.586.586 0 00.434.696l.003.014 3.506.968a6.653 6.653 0 00-.151-2.228zm-6.443.422h-1.115l-.694.829.248 1.037 1.004.463 1.001-.461.249-1.037-.693-.831zm2.6 2.853a.63.63 0 00-.374.048.577.577 0 00-.296.76l-.005.006 1.401 3.245a6.914 6.914 0 002.889-3.481l-3.609-.585-.006.007zm-5.615.46a.606.606 0 00-.706-.446l-.006-.007-3.578.582a6.948 6.948 0 002.881 3.457l1.386-3.212-.011-.013a.555.555 0 00.034-.361zm2.722 1.01a.617.617 0 00-.286-.058.615.615 0 00-.517.309h-.003l-1.759 3.051a7.455 7.455 0 003.911.193c.241-.053.476-.115.705-.189l-1.764-3.056h-.013a.597.597 0 00-.274-.25z" fill="#76767D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M408.688 276.084a2.31 2.31 0 011.922 0l11.58 5.303c.3.137.563.337.77.584.208.248.354.536.428.845l2.861 11.917a2.01 2.01 0 010 .938 2.08 2.08 0 01-.428.845l-8.011 9.557a2.201 2.201 0 01-.771.583 2.31 2.31 0 01-.96.208l-12.852.003c-.332 0-.661-.071-.96-.209a2.192 2.192 0 01-.771-.584l-8.014-9.556a2.057 2.057 0 01-.448-.946 1.998 1.998 0 01.022-.836l2.856-11.917c.074-.309.22-.598.428-.845.207-.247.47-.447.77-.584l11.578-5.306zm.27 4.589c0-.408.311-.739.693-.739.383 0 .693.331.693.739l.001.067c.001.043.002.087.001.122-.006.155-.032.286-.057.419a4.226 4.226 0 00-.038.212l-.004.036c-.057.448-.104.822-.074 1.17.023.155.108.228.188.299l.038.033c.002.049.01.209.016.297a9.238 9.238 0 015.753 2.666l.264-.181.036.003c.099.007.266.02.384-.047.303-.195.579-.464.91-.786l.025-.024c.052-.054.1-.106.147-.158.094-.103.186-.204.31-.307l.112-.086.042-.032c.333-.254.795-.227 1.034.06.239.287.162.726-.17.98a3.672 3.672 0 00-.051.039c-.035.028-.072.058-.102.079-.129.091-.252.153-.376.217a4.863 4.863 0 00-.2.105c-.415.246-.758.449-1.031.695-.111.114-.119.223-.126.328l-.004.048a8.072 8.072 0 01-.105.09l-.141.121a8.413 8.413 0 011.299 2.879 8.243 8.243 0 01.145 3.103l.28.078.02.028c.055.078.151.213.279.26.353.107.75.147 1.228.195l.014.001c.079.007.153.009.227.012.141.006.28.011.438.039.036.007.083.018.127.029l.075.017c.408.094.67.455.586.809-.084.355-.483.571-.894.486l-.005-.001h-.006l-.013-.005-.066-.013a1.227 1.227 0 01-.113-.024c-.156-.04-.284-.093-.413-.146-.068-.028-.136-.057-.209-.084l-.021-.007c-.449-.154-.823-.283-1.187-.333-.163-.013-.256.05-.346.109l-.042.028a12.456 12.456 0 00-.297-.049c-.664 2.001-2.078 3.734-3.995 4.819l.038.094c.028.074.06.155.078.175l-.019.046c-.041.097-.083.197-.035.346.135.334.353.661.615 1.055.043.062.087.119.131.176.083.109.165.217.241.354.019.034.042.082.064.125l.026.054c.178.365.047.786-.295.944-.344.159-.773-.009-.958-.376l-.026-.051c-.021-.041-.044-.085-.06-.12a2.658 2.658 0 01-.139-.404 5.165 5.165 0 00-.062-.205l-.006-.018c-.155-.434-.283-.794-.469-1.1-.092-.129-.202-.161-.306-.191l-.048-.015c-.012-.018-.039-.066-.069-.118a19.293 19.293 0 00-.079-.137 9.32 9.32 0 01-6.396-.016l-.157.273c-.117.03-.229.06-.298.139-.178.203-.28.493-.389.8-.046.13-.093.263-.148.394-.024.072-.043.141-.062.209-.037.131-.073.259-.138.401a2.416 2.416 0 01-.057.113l-.029.056v.001l-.001.001c-.185.367-.613.534-.957.375-.342-.158-.473-.579-.294-.944l.031-.064c.019-.041.04-.083.057-.115.076-.138.159-.246.243-.356.043-.057.086-.113.129-.175.262-.394.493-.747.627-1.081.034-.111-.016-.264-.061-.376l.126-.29c-1.845-1.048-3.302-2.719-3.997-4.786l-.302.05-.031-.017c-.087-.048-.23-.128-.367-.118-.365.051-.739.18-1.189.334l-.02.007c-.072.026-.139.054-.205.081-.131.054-.26.107-.417.148-.035.009-.082.018-.126.027l-.053.011-.006.002-.007.002-.011.002c-.41.085-.809-.131-.894-.486-.084-.355.178-.715.586-.809l.011-.003.003-.001.003-.001.055-.013.13-.028c.158-.029.297-.034.438-.039.074-.003.148-.006.227-.012l.015-.002c.478-.048.874-.087 1.227-.194.1-.039.196-.16.27-.253l.028-.035.29-.081c-.325-2.16.225-4.28 1.414-5.996l-.222-.19-.005-.031c-.014-.093-.039-.256-.134-.353-.273-.245-.616-.449-1.031-.694a4.81 4.81 0 00-.198-.105 2.89 2.89 0 01-.376-.217 3.263 3.263 0 01-.144-.111l-.005-.004-.005-.003c-.333-.255-.409-.693-.171-.98a.682.682 0 01.553-.235.85.85 0 01.482.175l.042.031c.039.03.082.062.112.087.123.102.215.202.308.305.047.052.095.105.148.159l.013.012c.336.328.615.6.922.798.141.079.254.062.362.045l.049-.007c.04.028.174.121.251.171a8.998 8.998 0 014.528-2.481 9.378 9.378 0 011.253-.185l.016-.281c.092-.086.196-.209.225-.344.03-.355-.018-.736-.076-1.196l-.001-.01a4.226 4.226 0 00-.038-.212c-.025-.133-.051-.264-.057-.419-.001-.033 0-.075.001-.116l.001-.055-.001-.009-.001-.009z" fill="#76767D"/><rect x="451" y="261" width="60" height="60" rx="2" fill="#1D1E23"/><g clip-path="url(#clip2)"><path d="M491.484 297.273v2.623c0 2.055-4.969 3.723-10.675 3.723-5.704 0-10.674-1.668-10.674-3.723v-2.623c2.581 1.855 7.477 2.408 10.674 2.408 3.209 0 8.1-.558 10.675-2.408zm-10.675-3.639c-3.208 0-8.099-.559-10.674-2.408v2.598c0 2.056 4.97 3.722 10.674 3.722 5.706 0 10.675-1.667 10.675-3.722v-2.598c-2.581 1.855-7.478 2.408-10.675 2.408zm0-15.634c-5.704 0-10.674 1.667-10.674 3.723s4.97 3.722 10.674 3.722c5.706 0 10.675-1.667 10.675-3.722 0-2.056-4.969-3.723-10.675-3.723zm0 9.58c-3.208 0-8.099-.558-10.674-2.408v2.605c0 2.056 4.97 3.722 10.674 3.722 5.706 0 10.675-1.668 10.675-3.722v-2.605c-2.581 1.855-7.478 2.408-10.675 2.408z" fill="#76767D"/></g><rect x="523" y="261" width="59" height="60" rx="2" fill="#1D1E23"/><path fill-rule="evenodd" clip-rule="evenodd" d="M551.809 292.944a2.135 2.135 0 100-4.27 2.135 2.135 0 000 4.27zm8.54 0a2.135 2.135 0 100-4.27 2.135 2.135 0 000 4.27zm-17.079 0a2.135 2.135 0 100-4.27 2.135 2.135 0 000 4.27z" fill="#76767D"/><path d="M418.056 175h1.356l-3.324-8.4h-1.668l-3.324 8.4h1.356l.804-2.04h3.996l.804 2.04zm-4.356-3.192l1.56-3.972 1.548 3.972H413.7zm16.312-5.208l-1.944 6.576-1.944-6.576h-1.176l-1.944 6.588-1.944-6.588h-1.368l2.592 8.4h1.368l1.884-6.24 1.872 6.24h1.368l2.604-8.4h-1.368zm6.139 8.556c1.968 0 3.288-1.14 3.288-2.544 0-1.296-.9-1.836-2.196-2.244l-2.064-.66c-.756-.228-1.068-.516-1.068-.996 0-.6.648-1.116 1.596-1.116 1.092 0 1.932.528 2.316 1.296l1.212-.36c-.48-1.14-1.74-2.088-3.528-2.088-1.692 0-2.904 1.056-2.904 2.304 0 1.056.768 1.704 1.884 2.052l2.112.672c.984.312 1.332.672 1.332 1.224 0 .66-.744 1.308-1.908 1.308-1.32 0-2.256-.78-2.616-1.752l-1.236.372c.444 1.32 1.8 2.532 3.78 2.532zm9.072 1.344h1.128v-11.16h-1.128v11.16zm13.182-9.9l-2.628 6.78-2.628-6.78h-1.428l3.348 8.4h1.404l3.348-8.4h-1.416zm6.916 0h-3.816v8.4h1.296v-2.772h2.46c1.884 0 2.904-1.452 2.904-2.808 0-1.356-1.02-2.82-2.844-2.82zm-.084 4.452h-2.436v-3.276h2.496c.96 0 1.608.792 1.608 1.644 0 .84-.624 1.632-1.668 1.632zm8.801 4.104c2.1 0 3.528-1.236 3.972-2.604l-1.26-.324c-.336.948-1.344 1.704-2.724 1.704-1.848 0-3.048-1.452-3.048-3.156 0-1.692 1.2-3.12 3.048-3.12 1.392 0 2.388.792 2.736 1.728l1.26-.312c-.444-1.38-1.872-2.628-3.996-2.628-2.496 0-4.368 1.872-4.368 4.344 0 2.484 1.872 4.368 4.38 4.368zM186.08 269.7h-2.952v6.3h1.224v-1.926h1.674c1.449 0 2.241-1.125 2.241-2.187 0-1.044-.801-2.187-2.187-2.187zm-.09 3.276h-1.638v-2.16h1.692c.603 0 1.026.522 1.026 1.08 0 .549-.414 1.08-1.08 1.08zm8.228-2.16V269.7h-4.644v6.3h4.635v-1.116h-3.429v-1.548h2.979v-1.08h-2.979v-1.44h3.438zm6.174 0V269.7h-4.644v6.3h4.635v-1.116h-3.429v-1.548h2.979v-1.08h-2.979v-1.44h3.438zm5.526 5.184h1.422l-1.566-2.331a1.998 1.998 0 001.377-1.917c0-.999-.792-2.052-2.16-2.052h-3.069v6.3h1.224v-2.205h1.341l1.431 2.205zm-2.772-5.193h1.809c.585 0 .999.441.999.945 0 .522-.405.963-1.044.963h-1.764v-1.908zM208.72 276h1.251v-6.3h-1.251v6.3zm7.142-6.3v4.086l-3.168-4.086h-1.017v6.3h1.233v-4.095l3.168 4.095h1.017v-6.3h-1.233zm9.229 2.799h-3.213v1.062h1.935c-.108.783-.756 1.413-1.818 1.413-1.413 0-2.196-1.008-2.196-2.142s.828-2.097 2.061-2.097c.972 0 1.557.441 1.872 1.089l1.143-.324c-.396-1.053-1.467-1.926-3.024-1.926-1.872 0-3.303 1.413-3.303 3.267 0 1.863 1.422 3.285 3.357 3.285 1.89 0 3.186-1.215 3.186-2.997v-.63z" fill="#fff"/><rect x="409" y="186" width="81.98" height="8.967" rx="4.483" fill="#2A2B30"/><circle cx="452.196" cy="261.952" r="5.764" fill="#00BC7F"/><circle cx="524.176" cy="261.952" r="5.764" fill="#00BC7F"/><path d="M332.657 172.792c0 .559.06 1.013.165 1.346.119.332.269.695.479 1.088a.662.662 0 01.105.348c0 .152-.09.303-.285.454l-.943.635a.713.713 0 01-.39.136c-.15 0-.299-.075-.449-.212a4.555 4.555 0 01-.539-.71c-.15-.257-.3-.545-.465-.892-1.168 1.391-2.636 2.086-4.403 2.086-1.258 0-2.262-.363-2.996-1.088-.734-.726-1.108-1.694-1.108-2.904 0-1.285.449-2.329 1.363-3.115.914-.786 2.127-1.18 3.669-1.18.51 0 1.034.046 1.588.121.554.076 1.123.197 1.723.333v-1.104c0-1.149-.24-1.951-.704-2.42-.48-.468-1.288-.695-2.442-.695-.524 0-1.063.06-1.617.196-.555.137-1.094.303-1.618.515a4.36 4.36 0 01-.524.196.93.93 0 01-.24.046c-.21 0-.314-.152-.314-.469v-.741c0-.242.03-.424.104-.53.075-.105.21-.211.42-.317.524-.272 1.153-.499 1.887-.681a9.027 9.027 0 012.337-.287c1.782 0 3.085.408 3.924 1.225.824.817 1.243 2.057 1.243 3.72v4.9h.03zm-6.081 2.298c.494 0 1.003-.09 1.543-.272.539-.181 1.018-.514 1.422-.968.24-.287.42-.605.51-.968.09-.362.15-.801.15-1.315v-.635a12.297 12.297 0 00-1.378-.257 11.1 11.1 0 00-1.408-.091c-1.004 0-1.738.196-2.232.605-.494.408-.734.983-.734 1.739 0 .711.18 1.24.554 1.603.36.378.884.559 1.573.559zm12.027 1.634c-.27 0-.449-.046-.569-.152-.12-.09-.225-.302-.315-.589l-3.519-11.69c-.09-.302-.135-.499-.135-.605 0-.242.12-.378.359-.378h1.468c.285 0 .479.045.584.151.12.091.21.303.3.59l2.516 10.011 2.337-10.011c.074-.302.164-.499.284-.59.12-.09.33-.151.599-.151h1.198c.285 0 .48.045.6.151.119.091.224.303.284.59l2.367 10.132 2.591-10.132c.09-.302.194-.499.299-.59.12-.09.315-.151.584-.151h1.393c.24 0 .375.121.375.378 0 .076-.015.151-.03.242a2.15 2.15 0 01-.105.378l-3.61 11.69c-.089.302-.194.499-.314.589-.12.091-.315.152-.569.152h-1.288c-.285 0-.48-.046-.6-.152-.119-.105-.224-.302-.284-.604l-2.322-9.754-2.306 9.738c-.075.303-.165.5-.285.605-.12.106-.329.152-.599.152h-1.288zm19.246.408a9.847 9.847 0 01-2.306-.272c-.749-.182-1.333-.378-1.723-.605-.239-.136-.404-.288-.464-.424a1.073 1.073 0 01-.09-.423v-.771c0-.318.12-.469.345-.469.09 0 .179.015.269.045.09.031.225.091.375.151a8.076 8.076 0 001.647.53 8.916 8.916 0 001.783.181c.943 0 1.677-.166 2.186-.499.51-.332.779-.816.779-1.436 0-.424-.135-.772-.404-1.059-.27-.287-.779-.544-1.513-.786l-2.172-.681c-1.093-.348-1.902-.862-2.396-1.542-.494-.666-.749-1.407-.749-2.193 0-.635.135-1.195.404-1.679.27-.484.629-.907 1.079-1.24a4.718 4.718 0 011.557-.786 6.461 6.461 0 011.888-.257 7.5 7.5 0 011.003.06c.345.046.659.106.974.167.299.075.584.151.853.242.27.09.48.181.63.272.209.121.359.242.449.378.09.121.135.287.135.499v.711c0 .317-.12.484-.345.484-.12 0-.314-.061-.569-.182-.854-.393-1.812-.59-2.876-.59-.853 0-1.527.136-1.992.424-.464.287-.704.726-.704 1.346 0 .423.15.786.45 1.073.299.288.853.575 1.647.832l2.127.681c1.078.347 1.857.831 2.322 1.451.464.62.689 1.331.689 2.117 0 .651-.135 1.241-.39 1.755a4.043 4.043 0 01-1.093 1.33c-.465.379-1.019.651-1.663.847a7.051 7.051 0 01-2.142.318z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M360.68 184.482c-4.927 3.674-12.087 5.625-18.243 5.625-8.627 0-16.4-3.221-22.271-8.574-.465-.424-.045-.998.509-.666 6.35 3.72 14.184 5.974 22.287 5.974 5.467 0 11.473-1.15 16.999-3.509.824-.378 1.528.545.719 1.15z" fill="#F90"/><path fill-rule="evenodd" clip-rule="evenodd" d="M362.732 182.122c-.629-.816-4.164-.393-5.766-.196-.48.06-.554-.363-.12-.681 2.816-1.996 7.444-1.421 7.983-.756.539.681-.15 5.353-2.786 7.592-.404.347-.794.166-.614-.288.599-1.497 1.932-4.869 1.303-5.671z" fill="#F90"/><path stroke="#323339" d="M307 240.5h275"/><path d="M203.028 176.769v73.654h67.25" stroke="#CA2171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 8"/><circle cx="203.028" cy="165.881" r="4.483" fill="#CA2171"/><rect x="189" y="230" width="28.749" height="28.749" rx="1" fill="#000"/><path clip-rule="evenodd" d="M197.385 244.709a1 1 0 011-1h9.979a1 1 0 011 1v5.321a1 1 0 01-1 1h-9.979a1 1 0 01-1-1v-5.321z" stroke="#fff" stroke-width=".8" stroke-linecap="round" stroke-linejoin="round"/><path d="M200.047 243.709v-2.662a3.327 3.327 0 016.655 0v2.662" stroke="#fff" stroke-width=".8" stroke-linecap="round" stroke-linejoin="round"/><path d="M367.909 63.7l-2.061 2.979-2.061-2.979h-1.179V70h1.233v-4.149l2.007 2.781 2.007-2.781V70h1.233v-6.3h-1.179zm5.937 6.426c1.899 0 3.303-1.422 3.303-3.285 0-1.854-1.404-3.267-3.303-3.267-1.908 0-3.312 1.413-3.312 3.267 0 1.863 1.404 3.285 3.312 3.285zm0-1.143c-1.251 0-2.061-.936-2.061-2.142 0-1.179.81-2.124 2.061-2.124 1.242 0 2.061.945 2.061 2.124 0 1.206-.819 2.142-2.061 2.142zm8.934-5.283v4.086l-3.168-4.086h-1.017V70h1.233v-4.095L382.996 70h1.017v-6.3h-1.233zm2.946 6.3h1.251v-6.3h-1.251V70zm7.97-6.3h-5.463v1.116h2.115V70h1.233v-5.184h2.115V63.7zm3.861 6.426c1.899 0 3.303-1.422 3.303-3.285 0-1.854-1.404-3.267-3.303-3.267-1.908 0-3.312 1.413-3.312 3.267 0 1.863 1.404 3.285 3.312 3.285zm0-1.143c-1.251 0-2.061-.936-2.061-2.142 0-1.179.81-2.124 2.061-2.124 1.242 0 2.061.945 2.061 2.124 0 1.206-.819 2.142-2.061 2.142zM406.301 70h1.422l-1.566-2.331a1.998 1.998 0 001.377-1.917c0-.999-.792-2.052-2.16-2.052h-3.069V70h1.224v-2.205h1.341L406.301 70zm-2.772-5.193h1.809c.585 0 .999.441.999.945 0 .522-.405.963-1.044.963h-1.764v-1.908zm10.218.009V63.7h-4.644V70h4.635v-1.116h-3.429v-1.548h2.979v-1.08h-2.979v-1.44h3.438zm4.266-1.116h-2.736V70h2.736c1.854 0 3.015-1.332 3.015-3.15 0-1.854-1.179-3.15-3.015-3.15zm-.027 5.184h-1.485v-4.077h1.485c1.08 0 1.8.819 1.8 2.016 0 1.215-.72 2.061-1.8 2.061zM431.057 70l-1.296-1.386a4.372 4.372 0 00.639-1.494l-1.044-.297a3.603 3.603 0 01-.369.963l-1.575-1.683c-.18-.189-.423-.45-.423-.765 0-.414.324-.711.783-.711.45 0 .747.288.855.729l1.062-.306c-.126-.774-.846-1.476-1.89-1.476-1.161 0-1.98.63-1.98 1.746 0 .45.198.801.486 1.143-.783.459-1.161 1.134-1.161 1.818 0 1.125.936 1.845 2.025 1.845a2.83 2.83 0 001.881-.72l.558.594h1.449zm-3.762-.954c-.594 0-.963-.405-.963-.855 0-.387.207-.693.657-.972l1.332 1.413c-.306.252-.657.414-1.026.414zM367.909 74.7l-2.061 2.979-2.061-2.979h-1.179V81h1.233v-4.149l2.007 2.781 2.007-2.781V81h1.233v-6.3h-1.179zm7.485 6.3h1.287l-2.421-6.3h-1.602l-2.412 6.3h1.278l.522-1.368h2.835l.513 1.368zm-2.943-2.457l1.008-2.664 1.008 2.664h-2.016zM377.83 81h1.251v-6.3h-1.251V81zm7.142-6.3v4.086l-3.168-4.086h-1.017V81h1.233v-4.095L385.188 81h1.017v-6.3h-1.233zm7.96 0h-5.463v1.116h2.115V81h1.233v-5.184h2.115V74.7zm5.18 6.3h1.287l-2.421-6.3h-1.602l-2.412 6.3h1.278l.522-1.368h2.835l.513 1.368zm-2.943-2.457l1.008-2.664 1.008 2.664h-2.016zM400.548 81h1.251v-6.3h-1.251V81zm7.142-6.3v4.086l-3.168-4.086h-1.017V81h1.233v-4.095L407.906 81h1.017v-6.3h-1.233zm7.59 1.116V74.7h-4.644V81h4.635v-1.116h-3.429v-1.548h2.979v-1.08h-2.979v-1.44h3.438zm4.266-1.116h-2.736V81h2.736c1.854 0 3.015-1.332 3.015-3.15 0-1.854-1.179-3.15-3.015-3.15zm-.027 5.184h-1.485v-4.077h1.485c1.08 0 1.8.819 1.8 2.016 0 1.215-.72 2.061-1.8 2.061z" fill="#fff"/><g filter="url(#filter1_d)"><path fill="#fff" d="M318.763 57.642h33.304v33.304h-33.304z"/></g><path d="M333.974 65.152l-7.218 4.164v10.003l2.711 1.565V70.88l4.507-2.6v-3.129z" fill="#000"/><path d="M336.856 65.152v7.966h-2.882v-2.972l-2.713 1.565v10.205l2.713 1.569v-7.943h2.882v2.953l2.711-1.566V66.718l-2.711-1.566z" fill="#000"/><path d="M336.856 83.488l7.218-4.163V69.322l-2.713-1.565v10.002l-4.505 2.601v3.128z" fill="#000"/><defs><clipPath id="clip0"><path fill="#fff" transform="translate(265.154 67.89)" d="M0 0h83.261v71.732H0z"/></clipPath><clipPath id="clip1"><path fill="#fff" transform="translate(324 276)" d="M0 0h25.442v30.742H0z"/></clipPath><clipPath id="clip2"><path fill="#fff" transform="translate(468 278)" d="M0 0h25.619v25.619H0z"/></clipPath><radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-281.99833 -229.00226 334.97167 -412.49136 410 298)"><stop stop-color="#2A2B30"/><stop offset="1" stop-color="#1D1E23" stop-opacity="0"/></radialGradient><radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(163.397 176.945 52.491) scale(238.738 144.838)"><stop stop-color="#CA2171" stop-opacity=".52"/><stop offset="1" stop-color="#18191B" stop-opacity="0"/></radialGradient><filter id="filter0_f" x="240" y="58" width="437" height="356" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="28" result="effect1_foregroundBlur"/></filter><filter id="filter1_d" x="303.763" y="46.642" width="63.304" height="63.304" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="7.5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient id="paint1_linear" x1="258.749" y1="145.945" x2="258.749" y2="67.89" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index 7341e3d245..36be0493b2 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -1,11 +1,11 @@
 import UseCases from '@hashicorp/react-use-cases'
 import BasicHero from '../../components/basic-hero'
 import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
-import CloudOfferingsList from '../../components/cloud-offerings-list'
 import PrefooterCTA from '../../components/prefooter-cta'
 import LearnCallout from '../../components/learn-callout'
 import CaseStudyCarousel from '../../components/case-study-carousel'
 import ProductFeaturesList from '@hashicorp/react-product-features-list'
+import HcpCalloutSection from 'components/hcp-callout-section'
 import MiniCTA from '../../components/mini-cta'
 
 export default function HomePage() {
@@ -19,17 +19,15 @@ export default function HomePage() {
           {
             text: 'Get Started',
             url: 'https://learn.hashicorp.com/consul',
-            type: 'outbound',
           },
           {
-            text: 'Download',
-            url: '/downloads',
-            type: 'download',
+            text: 'Try Cloud',
+            url: 'https://cloud.hashicorp.com/',
           },
           {
-            text: 'Learn more about Consul cloud offerings',
-            url: '/#cloud-offerings',
-            type: 'inbound',
+            text: 'Download CLI',
+            url: '/downloads',
+            type: 'download',
           },
         ]}
         backgroundImage
@@ -93,8 +91,7 @@ export default function HomePage() {
             title: 'Secure Consul with Vault',
             category: 'Step-by-Step Tutorials',
             time: '45 mins',
-            link:
-              'https://learn.hashicorp.com/collections/consul/vault-secure',
+            link: 'https://learn.hashicorp.com/collections/consul/vault-secure',
             image: require('./img/learn/Vault.svg?url'),
           },
         ]}
@@ -221,40 +218,24 @@ export default function HomePage() {
         />
       </div>
 
-      <section
+      <HcpCalloutSection
         id="cloud-offerings"
-        className="cloud-offerings g-grid-container"
-      >
-        <h2 className="g-type-display-2">
-          Learn more about Consul cloud offerings
-        </h2>
-        <CloudOfferingsList
-          offerings={[
-            {
-              image: require('./img/cloud/hcs.jpg?url'),
-              eyebrow: 'General Availability',
-              title: 'HashiCorp Consul Service on Azure',
-              description: 'Native Azure Experience',
-              link: {
-                text: 'Get Started',
-                url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
-                type: 'outbound',
-              },
-            },
-            {
-              image: require('./img/cloud/hcp.jpg?url'),
-              eyebrow: 'General Availability',
-              title: 'HCP Consul on AWS',
-              description: 'HashiCorp Cloud Platform',
-              link: {
-                text: 'Get Started',
-                url: 'https://portal.cloud.hashicorp.com',
-                type: 'outbound',
-              },
-            },
-          ]}
-        />
-      </section>
+        title="HCP Consul"
+        chin="Available on AWS"
+        description="A fully managed service mesh to discover and securely connect any service."
+        image={require('./img/hcp-consul.svg?url')}
+        links={[
+          {
+            text: 'Learn More',
+            url: 'https://cloud.hashicorp.com/',
+          },
+          {
+            text: 'Looking for Consul Service on Azure?',
+            url: 'https://www.hashicorp.com/products/consul/service-on-azure',
+            type: 'inbound',
+          },
+        ]}
+      />
 
       <ConsulEnterpriseComparison />
       <PrefooterCTA />