Merge pull request #8076 from hashicorp/nq.basic-hero-tertiary-link-support

[Website] Support tertiary-styled third links

Author: Mike Wickett

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

@@ -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) => {
-              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}
-                  theme={{
-                    variant: buttonVariant,
-                    brand,
-                    background: 'light',
-                  }}
-                  title={link.text}
-                  url={link.url}
-                />
-              )
-            })}
-          </div>
+          <>
+            <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}
+                    theme={{
+                      variant: buttonVariant,
+                      brand,
+                      background: 'light',
+                    }}
+                    title={link.text}
+                    url={link.url}
+                  />
+                )
+              })}
+            </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/index.jsx

@@ -44,6 +44,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/components/basic-hero/style.css

@@ -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',
           },
         ]}