[Homepage] <IoHomePreFooter /> component

website/components/io-home-hero/index.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import Button from '@hashicorp/react-button'
+import classNames from 'classnames'
+import s from './style.module.css'
+
+interface IoHomeHeroProps {
+  brand: 'vault' | 'consul'
+  heading: string
+  description: string
+  ctas: Array<{
+    title: string
+    url: string
+  }>
+  cards: Array<IoHomeHeroCardProps>
+}
+
+export default function IoHomeHero({
+  brand,
+  heading,
+  description,
+  ctas,
+  cards,
+}: IoHomeHeroProps) {
+  const [loaded, setLoaded] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setLoaded(true)
+    }, 250)
+  }, [])
+
+  return (
+    <header className={classNames(s.hero, loaded && s.loaded)}>
+      <span className={s.pattern} />
+      <div className={s.container}>
+        <div className={s.content}>
+          <h1 className={s.heading}>{heading}</h1>
+          <p className={s.description}>{description}</p>
+          {ctas && (
+            <div className={s.ctas}>
+              {ctas.map((cta, index) => {
+                return (
+                  <Button
+                    key={index}
+                    title={cta.title}
+                    url={cta.url}
+                    linkType="inbound"
+                    theme={{
+                      brand: 'neutral',
+                      variant: 'tertiary',
+                      background: 'light',
+                    }}
+                  />
+                )
+              })}
+            </div>
+          )}
+        </div>
+        {cards && (
+          <div className={s.cards}>
+            {cards.map((card, index) => {
+              return (
+                <IoHomeHeroCard
+                  index={index}
+                  heading={card.heading}
+                  description={card.description}
+                  cta={{
+                    brand: index === 0 ? 'neutral' : brand,
+                    title: card.cta.title,
+                    url: card.cta.url,
+                  }}
+                  subText={card.subText}
+                />
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
+
+interface IoHomeHeroCardProps {
+  index?: number
+  heading: string
+  description: string
+  cta: {
+    title: string
+    url: string
+    brand?: 'neutral' | 'vault' | 'consul'
+  }
+  subText: string
+}
+
+function IoHomeHeroCard({
+  index,
+  heading,
+  description,
+  cta,
+  subText,
+}: IoHomeHeroCardProps) {
+  return (
+    <article
+      className={s.card}
+      style={
+        {
+          '--index': index,
+        } as React.CSSProperties
+      }
+    >
+      <h2 className={s.cardHeading}>{heading}</h2>
+      <p className={s.cardDescription}>{description}</p>
+      <Button
+        title={cta.title}
+        url={cta.url}
+        theme={{
+          variant: 'primary',
+          brand: cta.brand,
+        }}
+      />
+      <p className={s.cardSubText}>{subText}</p>
+    </article>
+  )
+}

website/components/io-home-hero/style.module.css

@@ -0,0 +1,148 @@
+.hero {
+  position: relative;
+  padding-top: 64px;
+  padding-bottom: 64px;
+  background: linear-gradient(180deg, #f9f9fa 0%, #fff 28.22%, #fff 100%);
+
+  @media (--medium-up) {
+    padding-top: 128px;
+    padding-bottom: 128px;
+  }
+}
+
+.pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 1600px;
+  width: 100%;
+  margin: auto;
+
+  @media (--medium-up) {
+    background-image: url('/img/hero-pattern.svg');
+    background-repeat: no-repeat;
+    background-position: top right;
+  }
+}
+
+.container {
+  --columns: 1;
+
+  composes: g-grid-container from global;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 48px 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.content {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 1 / 6;
+  }
+
+  @media (--large) {
+    grid-column: 1 / 5;
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-1 from global;
+}
+
+.description {
+  margin: 8px 0 0;
+  composes: g-type-body-small from global;
+  color: var(--gray-3);
+}
+
+.ctas {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.cards {
+  --columns: 1;
+
+  grid-column: 1 / -1;
+  align-self: start;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (min-width: 600px) {
+    --columns: 2;
+  }
+
+  @media (--medium-up) {
+    --columns: 1;
+
+    grid-column: 7 / -1;
+  }
+
+  @media (--large) {
+    --columns: 2;
+
+    grid-column: 6 / -1;
+  }
+}
+
+.card {
+  --token-radius: 6px;
+  --token-elevation-mid: 0 2px 3px rgba(101, 106, 118, 0.1),
+    0 8px 16px -10px rgba(101, 106, 118, 0.2);
+
+  opacity: 0;
+  padding: 40px 32px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: var(--white);
+  border-radius: var(--token-radius);
+  box-shadow: 0 0 0 1px rgba(38, 53, 61, 0.1), var(--token-elevation-mid);
+
+  @nest .loaded & {
+    animation-name: slideIn;
+    animation-duration: 0.5s;
+    animation-delay: calc(var(--index) * 0.1s);
+    animation-fill-mode: forwards;
+  }
+}
+
+.cardHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.cardDescription {
+  margin: 8px 0 16px;
+  composes: g-type-display-6 from global;
+}
+
+.cardSubText {
+  margin: 32px 0 0;
+  composes: g-type-body-small from global;
+  color: var(--gray-3);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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>
+  )
+}