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 0000000000..49131e4dd9 --- /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 597c7be099..dd3b2f174b 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] && ( +
+ + + {links[2].text} + + + + + +
+ )} + )} diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css index 1676820880..ab40f1b85e 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 7158254c9b..b52d37a58d 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', }, ]}