Merge pull request #8367 from hashicorp/br.cloud-offerings

Adds a cloud offerings section to website

website/components/basic-hero/index.jsx

@@ -41,8 +41,6 @@ export default function BasicHero({
               <div className="third-link">
                 <a
                   href={links[2].url}
-                  rel="noopener noreferrer"
-                  target="_blank"
                 >
                   <span className="g-type-buttons-and-standalone-links">
                     {links[2].text}

website/components/cloud-offerings-list/index.jsx

@@ -0,0 +1,28 @@
+import Button from '@hashicorp/react-button'
+
+export default function CloudOfferingsList({ offerings }) {
+  return (
+    <ul className="g-cloud-offerings-list">
+      {offerings.map(offering => (
+        <li key={offering.title}>
+          <a
+            href={offering.link.url}
+            rel={offering.link.type === 'outbound' ? 'noopener' : undefined}
+            target={offering.link.type === 'outbound' ? '_blank' : undefined}
+          >
+            <img src={offering.image} alt={offering.title}/>
+            <span className="g-type-label-strong">{offering.eyebrow}</span>
+            <h4>{offering.title}</h4>
+            <p>{offering.description}</p>
+            <Button
+              title={offering.link.text}
+              linkType={offering.link.type}
+              theme={{ variant: 'tertiary' }}
+              url={offering.link.url}
+            />
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}

website/components/cloud-offerings-list/style.css

@@ -0,0 +1,57 @@
+ul.g-cloud-offerings-list {
+  list-style: none;
+  padding: 0;
+  margin: -16px;
+  display: flex;
+
+  @media (width < 769px) {
+    flex-direction: column;
+  }
+
+  & li {
+    flex-grow: 1;
+    margin: 16px;
+    background: var(--white);
+    border: 1px solid var(--gray-6);
+    border-radius: 2px;
+    text-align: center;
+    transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
+
+    &:hover {
+      box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
+      transform: translateY(-4px);
+      cursor: pointer;
+    }
+
+    & > a {
+      display: block;
+      padding: 32px;
+      color: inherit;
+
+      & > img {
+        display: block;
+        width: 400px;
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 14px;
+      }
+
+      & > span {
+        color: var(--gray-4);
+      }
+
+      & > h4 {
+        text-decoration: none;
+        margin-top: 8px;
+        margin-bottom: 0;
+      }
+
+      & > p {
+        font-size: 19px;
+        margin-top: 8px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+}

website/pages/home/index.jsx

@@ -1,6 +1,7 @@
 import UseCases from '@hashicorp/react-use-cases'
 import BasicHero from '../../components/basic-hero'
 import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
+import CloudOfferingsList from '../../components/cloud-offerings-list'
 import PrefooterCTA from '../../components/prefooter-cta'
 import LearnCallout from '../../components/learn-callout'
 import CaseStudyCarousel from '../../components/case-study-carousel'
@@ -25,9 +26,9 @@ export default function HomePage() {
             type: 'download',
           },
           {
-            text: 'Try HashiCorp Consul Service on Azure',
-            url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
-            type: 'outbound',
+            text: 'Learn more about Consul cloud offerings',
+            url: '/#cloud-offerings',
+            type: 'inbound',
           },
         ]}
         backgroundImage
@@ -207,6 +208,37 @@ export default function HomePage() {
           },
         ]}
       />
+
+      <section id="cloud-offerings" className="cloud-offerings g-grid-container">
+        <h2 className="g-type-display-2">Learn more about Consul cloud offerings</h2>
+        <CloudOfferingsList
+          offerings={[
+            {
+              image: require('./img/cloud/hcs.jpg?url'),
+              eyebrow: "General Availability",
+              title: "HashiCorp Consul Service on Azure",
+              description: "Native Azure Experience",
+              link: {
+                text: "Get Started",
+                url: "https://learn.hashicorp.com/consul/hcs-azure/deploy",
+                type: "outbound"
+              }
+            },
+            {
+              image: require('./img/cloud/hcp.jpg?url'),
+              eyebrow: "Private Beta",
+              title: "HCP Consul on AWS",
+              description: "HashiCorp Cloud Platform",
+              link: {
+                text: "Request Access",
+                url: "https://www.hashicorp.com/cloud-platform/request-access/",
+                type: "outbound"
+              }
+            }
+          ]}
+        />
+      </section>
+
       <ConsulEnterpriseComparison />
       <PrefooterCTA />
     </div>

website/pages/home/style.css

@@ -28,4 +28,19 @@
       }
     }
   }
+
+  & section.cloud-offerings {
+    padding-top: 88px;
+    padding-bottom: 88px;
+
+    & h2 {
+      margin: 0 auto;
+      text-align: center;
+      max-width: 475px;
+      margin-bottom: 64px;
+      @media (max-width: 800px) {
+        margin-bottom: 48px;
+      }
+    }
+  }
 }

website/pages/style.css

@@ -42,6 +42,7 @@
 @import '../components/footer/style.css';
 @import '../components/learn-callout/style.css';
 @import '../components/case-study-carousel/style.css';
+@import '../components/cloud-offerings-list/style.css';
 
 /* Layouts */
 @import '../layouts/use-cases/style.css';