[Homepage] <IoHomePreFooter /> component (#13182)

* adds <IoHomePreFooter /> * adds interfaces * [Homepage] `<IoHomeHero />` component (#13160) * init <Hero /> component * adds loading animation * updates variable naming * makes index optional * Update hero-pattern.svg * prefix with IoHome * updates usage * adds <IoHomePreFooter /> * adds interfaces * adds key
hashicorp · Dec 3, 2021 · 269a7c5 · 269a7c5
1 parent 7b362f2
commit 269a7c5
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 2 deletions.
diff --git a/website/components/io-home-hero/index.tsx b/website/components/io-home-hero/index.tsx
@@ -38,9 +38,10 @@ export default function IoHomeHero({
           <p className={s.description}>{description}</p>
           {ctas && (
             <div className={s.ctas}>
-              {ctas.map((cta) => {
+              {ctas.map((cta, index) => {
                 return (
                   <Button
+                    key={index}
                     title={cta.title}
                     url={cta.url}
                     linkType="inbound"

diff --git a/website/components/io-home-pre-footer/index.tsx b/website/components/io-home-pre-footer/index.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+interface IoHomePreFooterProps {
+  brand: string
+  heading: string
+  description: string
+  ctas: [IoHomePreFooterCard, IoHomePreFooterCard, IoHomePreFooterCard]
+}
+
+export default function IoHomePreFooter({
+  brand,
+  heading,
+  description,
+  ctas,
+}: IoHomePreFooterProps) {
+  return (
+    <div className={s.preFooter}>
+      <div className={s.container}>
+        <div className={s.content}>
+          <h2 className={s.heading}>{heading}</h2>
+          <p className={s.description}>{description}</p>
+        </div>
+        <div className={s.cards}>
+          {ctas.map((cta, index) => {
+            return (
+              <IoHomePreFooterCard
+                key={index}
+                brand={brand}
+                link={cta.link}
+                heading={cta.heading}
+                description={cta.description}
+                label={cta.label}
+              />
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface IoHomePreFooterCard {
+  brand?: string
+  link: string
+  heading: string
+  description: string
+  label: string
+}
+
+function IoHomePreFooterCard({
+  brand,
+  link,
+  heading,
+  description,
+  label,
+}: IoHomePreFooterCard) {
+  return (
+    <a
+      href={link}
+      className={s.card}
+      style={
+        {
+          '--primary': `var(--${brand})`,
+          '--secondary': `var(--${brand}-secondary)`,
+        } as React.CSSProperties
+      }
+    >
+      <h3 className={s.cardHeading}>{heading}</h3>
+      <p className={s.cardDescription}>{description}</p>
+      <span className={s.cardCta}>
+        {label} <IconArrowRight16 />
+      </span>
+    </a>
+  )
+}
diff --git a/website/components/io-home-pre-footer/style.module.css b/website/components/io-home-pre-footer/style.module.css
@@ -0,0 +1,113 @@
+.preFooter {
+  padding: 96px 0 64px;
+}
+
+.container {
+  --columns: 1;
+
+  composes: g-grid-container from global;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.content {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 1 / 6;
+  }
+
+  @media (--large) {
+    grid-column: 1 / 4;
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-1 from global;
+}
+
+.description {
+  margin: 24px 0 0;
+  composes: g-type-body from global;
+  color: var(--gray-3);
+}
+
+.cards {
+  grid-column: 1 / -1;
+
+  --columns: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 3;
+
+    grid-column: 1 / -1;
+  }
+
+  @media (--large) {
+    grid-column: 5 / -1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 32px 24px;
+  background-color: var(--primary);
+  color: var(--black);
+  border-radius: 6px;
+  box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1),
+    0 8px 16px -10px rgba(101, 106, 118, 0.2);
+  transition: ease-in-out 0.2s;
+  transition-property: box-shadow;
+
+  &:hover {
+    box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
+      0 16px 16px -10px rgba(101, 106, 118, 0.2);
+  }
+
+  &:nth-of-type(2) {
+    background-color: var(--secondary);
+  }
+
+  &:nth-of-type(3) {
+    background-color: var(--gray-6);
+  }
+}
+
+.cardHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.cardDescription {
+  margin: 8px 0 0;
+  padding-bottom: 48px;
+  composes: g-type-display-6 from global;
+}
+
+.cardCta {
+  margin-top: auto;
+  display: inline-flex;
+  align-items: center;
+  composes: g-type-buttons-and-standalone-links from global;
+
+  & svg {
+    margin-left: 12px;
+    transition: transform 0.2s;
+  }
+
+  @nest .card:hover & svg {
+    transform: translate(2px);
+  }
+}
diff --git a/website/next.config.js b/website/next.config.js
@@ -3,6 +3,7 @@ const redirects = require('./redirects.next')
 
 module.exports = withHashicorp({
   nextOptimizedImages: true,
+  transpileModules: ['@hashicorp/flight-icons'],
 })({
   svgo: { plugins: [{ removeViewBox: false }] },
   rewrites: () => [

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
+    "@hashicorp/flight-icons": "^1.3.0",
     "@hashicorp/mktg-global-styles": "^4.0.0",
     "@hashicorp/mktg-logos": "^1.2.0",
     "@hashicorp/platform-analytics": "^0.2.0",

diff --git a/website/pages/home/index.tsx b/website/pages/home/index.tsx
@@ -1,5 +1,5 @@
 import IoHomeHero from 'components/io-home-hero'
-import RAW_CONTENT from './content.json'
+import IoHomePreFooter from 'components/io-home-pre-footer'
 
 export async function getStaticProps() {
   return { props: {} }
@@ -45,6 +45,32 @@ export default function Homepage({ content }) {
           },
         ]}
       />
+
+      <IoHomePreFooter
+        brand="vault"
+        heading="Next steps"
+        description="HCP Vault simplifies cloud security automation on fully managed infrastructure. Get started for free, and pay only for what you use."
+        ctas={[
+          {
+            link: '#TODO',
+            heading: 'Open Source',
+            description: 'Self-managed | always free',
+            label: 'Download',
+          },
+          {
+            link: '#TODO',
+            heading: 'Cloud',
+            description: 'Self-managed',
+            label: 'Compare plans',
+          },
+          {
+            link: '#TODO',
+            heading: 'Enterprise',
+            description: 'Self-Managed custom deployments',
+            label: 'Learn more',
+          },
+        ]}
+      />
     </>
   )
 }