Support tertiary-styled third links

Get the tertiary links to wrap below buttons

Adjust color/spacing of tertiary via override

Remove overrides, implement custom link

Extract arrow icon to file

Increase top margin for third link

Apply Brandon's fixes

Co-authored-by: Brandon Romano <BrandonRRomano@gmail.com>

website/components/basic-hero/img/right-arrow-icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12l-6 6M4 12h16H4zm16 0l-6-6 6 6z" stroke="#76767D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

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({
         <h1 className="g-type-display-1">{heading}</h1>
         {content && <p className="g-type-body-large">{content}</p>}
         {links && links.length > 0 && (
-          <div className="links">
+          <>
-            {links.map((link, stableIdx) => {
+            <div className="links">
-              const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
+              {links.slice(0, 2).map((link, stableIdx) => {
-              const linkType = link.type || 'inbound'
+                const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
-              return (
+                const linkType = link.type || 'inbound'
-                <Button
+
-                  // eslint-disable-next-line react/no-array-index-key
+                return (
-                  key={stableIdx}
+                  <Button
-                  linkType={linkType}
+                    // eslint-disable-next-line react/no-array-index-key
-                  theme={{
+                    key={stableIdx}
-                    variant: buttonVariant,
+                    linkType={linkType}
-                    brand,
+                    theme={{
-                    background: 'light',
+                      variant: buttonVariant,
-                  }}
+                      brand,
-                  title={link.text}
+                      background: 'light',
-                  url={link.url}
+                    }}
-                />
+                    title={link.text}
-              )
+                    url={link.url}
-            })}
+                  />
-          </div>
+                )
+              })}
+            </div>
+            {links[2] && (
+              <div className="third-link">
+                <a href={links[2].url} rel="noopener" target="_blank">
+                  <span className="g-type-buttons-and-standalone-links">
+                    {links[2].text}
+                  </span>
+                  <span className="icon">
+                    <InlineSvg src={RightArrowIcon} />
+                  </span>
+                </a>
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

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);

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',
+            text: 'Try HasiCorp Consul Service on Azure',
-            url: 'https://learn.hashicorp.com/consul',
+            url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
             type: 'outbound',
           },
         ]}