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({
{links.slice(0, 2).map((link, stableIdx) => {
const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
- const linkType = link.type || 'inbound'
-
return (
@@ -38,12 +43,17 @@ export default function EnterpriseComparison({
{itemTwo.title}
{itemTwo.description}
-
+ {itemTwo.links.map((link) => (
+
+
+
+ ))}
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 (
+
+
+
{header}
+
+
+
+
+
{title}
+
{chin}
+
{description}
+
+ {links.map((link, index) => {
+ const variant = index === 0 ? 'primary' : 'tertiary'
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
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 (
\ 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() {
/>
-
-
- Learn more about Consul cloud offerings
-
-
-
+ 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',
+ },
+ ]}
+ />