diff --git a/website/components/basic-hero/img/right-arrow-icon.svg b/website/components/basic-hero/img/right-arrow-icon.svg
new file mode 100644
index 000000000..49131e4dd
--- /dev/null
+++ b/website/components/basic-hero/img/right-arrow-icon.svg
@@ -0,0 +1 @@
+
diff --git a/website/components/basic-hero/index.jsx b/website/components/basic-hero/index.jsx
index 597c7be09..dd3b2f174 100644
--- a/website/components/basic-hero/index.jsx
+++ b/website/components/basic-hero/index.jsx
@@ -1,4 +1,6 @@
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,
@@ -13,26 +15,41 @@ export default function BasicHero({
{heading}
{content && {content}
}
{links && links.length > 0 && (
-
- {links.map((link, stableIdx) => {
- const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
- const linkType = link.type || 'inbound'
- return (
-
- )
- })}
-
+ <>
+
+ {links.slice(0, 2).map((link, stableIdx) => {
+ const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
+ const linkType = link.type || 'inbound'
+
+ return (
+
+ )
+ })}
+
+ {links[2] && (
+
+ )}
+ >
)}
diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css
index 167682088..ab40f1b85 100644
--- a/website/components/basic-hero/style.css
+++ b/website/components/basic-hero/style.css
@@ -45,6 +45,23 @@
}
}
+ & .third-link {
+ display: flex;
+ justify-content: center;
+ margin-top: 32px;
+
+ & a {
+ display: flex;
+ align-items: center;
+ color: var(--gray-4);
+
+ & .icon {
+ margin-left: 8px;
+ height: 24px;
+ }
+ }
+ }
+
&.has-background {
background-repeat: no-repeat;
background-color: var(--gray-7);
diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index b3f15c8d3..d0de91ad2 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -14,14 +14,19 @@ export default function HomePage() {
heading="Service Networking Across Any Cloud"
content="Automate network configurations, discover services, and enable secure connectivity across any cloud or runtime."
links={[
+ {
+ text: 'Get Started',
+ url: 'https://learn.hashicorp.com/consul',
+ type: 'outbound',
+ },
{
text: 'Download',
url: '/downloads',
type: 'download',
},
{
- text: 'Get Started',
- url: 'https://learn.hashicorp.com/consul',
+ text: 'Try HasiCorp Consul Service on Azure',
+ url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
type: 'outbound',
},
]}