From f6967388759fca19d2394d46679e88b9c745effb Mon Sep 17 00:00:00 2001
From: Noel Quiles <3746694+EnMod@users.noreply.github.com>
Date: Fri, 5 Jun 2020 14:45:25 -0400
Subject: [PATCH] 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>
---
 .../basic-hero/img/right-arrow-icon.svg       |  1 +
 website/components/basic-hero/index.jsx       | 57 ++++++++++++-------
 website/components/basic-hero/style.css       | 17 ++++++
 website/pages/home/index.jsx                  |  9 ++-
 4 files changed, 62 insertions(+), 22 deletions(-)
 create mode 100644 website/components/basic-hero/img/right-arrow-icon.svg

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 @@
+<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>
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({
         <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>
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 7158254c9..b52d37a58 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',
           },
         ]}