[WIP] feat: homepage and use case pages redesign (#11873)

* feat: connect homepage and use case pages

* fix: internalLink usage

* fix: query name

* chore: add homepage patterns

* chore: remove offerings

* chore: add intro features

* chore: bump subnav

* chore: updating patterns

* chore: add use case to the subnav

* chore: cleanup unused import

* chore: remove subnav border

website/components/io-card-container/index.tsx

+import * as React from 'react'
+import classNames from 'classnames'
+import Button from '@hashicorp/react-button'
+import IoCard, { IoCardProps } from 'components/io-card'
+import s from './style.module.css'
+
+interface IoCardContaianerProps {
+  theme?: 'light' | 'dark'
+  heading?: string
+  description?: string
+  label?: string
+  cta?: {
+    url: string
+    text: string
+  }
+  cardsPerRow: 3 | 4
+  cards: Array<IoCardProps>
+}
+
+export default function IoCardContaianer({
+  theme = 'light',
+  heading,
+  description,
+  label,
+  cta,
+  cardsPerRow = 3,
+  cards,
+}: IoCardContaianerProps): React.ReactElement {
+  return (
+    <div className={classNames(s.cardContainer, s[theme])}>
+      {heading || description ? (
+        <header className={s.header}>
+          {heading ? <h2 className={s.heading}>{heading}</h2> : null}
+          {description ? <p className={s.description}>{description}</p> : null}
+        </header>
+      ) : null}
+      {cards.length ? (
+        <>
+          {label || cta ? (
+            <header className={s.subHeader}>
+              {label ? <h3 className={s.label}>{label}</h3> : null}
+              {cta ? (
+                <Button
+                  title={cta.text}
+                  url={cta.url}
+                  linkType="inbound"
+                  theme={{
+                    brand: 'neutral',
+                    variant: 'tertiary',
+                    background: theme,
+                  }}
+                />
+              ) : null}
+            </header>
+          ) : null}
+          <ul
+            className={classNames(
+              s.cardList,
+              cardsPerRow === 3 && s.threeUp,
+              cardsPerRow === 4 && s.fourUp
+            )}
+            style={
+              {
+                '--length': cards.length,
+              } as React.CSSProperties
+            }
+          >
+            {cards.map((card, index) => {
+              return (
+                // Index is stable
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <IoCard variant={theme} {...card} />
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      ) : null}
+    </div>
+  )
+}

website/components/io-card-container/style.module.css

+.cardContainer {
+  position: relative;
+
+  & + .cardContainer {
+    margin-top: 64px;
+
+    @media (--medium-up) {
+      margin-top: 132px;
+    }
+  }
+}
+
+.header {
+  margin: 0 auto 64px;
+  text-align: center;
+  max-width: 600px;
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-2 from global;
+
+  @nest .dark & {
+    color: var(--white);
+  }
+}
+
+.description {
+  margin: 8px 0 0;
+  composes: g-type-body-large from global;
+
+  @nest .dark & {
+    color: var(--gray-5);
+  }
+}
+
+.subHeader {
+  margin: 0 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @nest .dark & {
+    color: var(--gray-5);
+  }
+}
+
+.label {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.cardList {
+  list-style: none;
+
+  --minCol: 250px;
+  --columns: var(--length);
+
+  position: relative;
+  gap: 32px;
+  padding: 0;
+
+  @media (--small) {
+    display: flex;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    margin: 0;
+    padding: 6px 24px;
+    left: 50%;
+    margin-left: -50vw;
+    width: 100vw;
+
+    /* This is to ensure there is overflow padding right on mobile. */
+    &::after {
+      content: '';
+      display: block;
+      width: 1px;
+      flex-shrink: 0;
+    }
+  }
+
+  @media (--medium-up) {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), minmax(var(--minCol), 1fr));
+  }
+
+  &.threeUp {
+    @media (--medium-up) {
+      --columns: 3;
+      --minCol: 0;
+    }
+  }
+
+  &.fourUp {
+    @media (--medium-up) {
+      --columns: 3;
+      --minCol: 0;
+    }
+
+    @media (--large) {
+      --columns: 4;
+    }
+  }
+
+  & > li {
+    display: flex;
+
+    @media (--small) {
+      flex-shrink: 0;
+      width: 250px;
+    }
+  }
+}

website/components/io-card/index.tsx

+import * as React from 'react'
+import Link from 'next/link'
+import InlineSvg from '@hashicorp/react-inline-svg'
+import classNames from 'classnames'
+import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
+import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
+import { productLogos } from './product-logos'
+import s from './style.module.css'
+
+export interface IoCardProps {
+  variant?: 'light' | 'gray' | 'dark'
+  products?: Array<{
+    name: keyof typeof productLogos
+  }>
+  link: {
+    url: string
+    type: 'inbound' | 'outbound'
+  }
+  inset?: 'none' | 'sm' | 'md'
+  eyebrow?: string
+  heading?: string
+  description?: string
+  children?: React.ReactNode
+}
+
+function IoCard({
+  variant = 'light',
+  products,
+  link,
+  inset = 'md',
+  eyebrow,
+  heading,
+  description,
+  children,
+}: IoCardProps): React.ReactElement {
+  const LinkWrapper = ({ className, children }) =>
+    link.type === 'inbound' ? (
+      <Link href={link.url}>
+        <a className={className}>{children}</a>
+      </Link>
+    ) : (
+      <a
+        className={className}
+        href={link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    )
+
+  return (
+    <article className={classNames(s.card)}>
+      <LinkWrapper className={classNames(s[variant], s[inset])}>
+        {children ? (
+          children
+        ) : (
+          <>
+            {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
+            {heading ? <Heading>{heading}</Heading> : null}
+            {description ? <Description>{description}</Description> : null}
+          </>
+        )}
+        <footer className={s.footer}>
+          {products && (
+            <ul className={s.products}>
+              {products.map(({ name }, index) => {
+                const key = name.toLowerCase()
+                const version = variant === 'dark' ? 'neutral' : 'color'
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <li key={index}>
+                    <InlineSvg
+                      className={s.logo}
+                      src={productLogos[key][version]}
+                    />
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+          <span className={s.linkType}>
+            {link.type === 'inbound' ? (
+              <IconArrowRight24 />
+            ) : (
+              <IconExternalLink24 />
+            )}
+          </span>
+        </footer>
+      </LinkWrapper>
+    </article>
+  )
+}
+
+interface EyebrowProps {
+  children: string
+}
+
+function Eyebrow({ children }: EyebrowProps) {
+  return <p className={s.eyebrow}>{children}</p>
+}
+
+interface HeadingProps {
+  as?: 'h2' | 'h3' | 'h4'
+  children: React.ReactNode
+}
+
+function Heading({ as: Component = 'h2', children }: HeadingProps) {
+  return <Component className={s.heading}>{children}</Component>
+}
+
+interface DescriptionProps {
+  children: string
+}
+
+function Description({ children }: DescriptionProps) {
+  return <p className={s.description}>{children}</p>
+}
+
+IoCard.Eyebrow = Eyebrow
+IoCard.Heading = Heading
+IoCard.Description = Description
+
+export default IoCard

website/components/io-card/product-logos.ts

+export const productLogos = {
+  boundary: {
+    color: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/boundary/logomark/white.svg?include'),
+  },
+  consul: {
+    color: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/consul/logomark/white.svg?include'),
+  },
+  nomad: {
+    color: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/nomad/logomark/white.svg?include'),
+  },
+  packer: {
+    color: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/packer/logomark/white.svg?include'),
+  },
+  terraform: {
+    color: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/terraform/logomark/white.svg?include'),
+  },
+  vagrant: {
+    color: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/vagrant/logomark/white.svg?include'),
+  },
+  vault: {
+    color: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/vault/logomark/white.svg?include'),
+  },
+  waypoint: {
+    color: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/waypoint/logomark/white.svg?include'),
+  },
+}

website/components/io-card/style.module.css

+.card {
+  /* Radii */
+  --token-radius: 6px;
+
+  /* Spacing */
+  --token-spacing-03: 8px;
+  --token-spacing-04: 16px;
+  --token-spacing-05: 24px;
+  --token-spacing-06: 32px;
+
+  /* Elevations */
+  --token-elevation-mid: 0 2px 3px rgba(101, 106, 118, 0.1),
+    0 8px 16px -10px rgba(101, 106, 118, 0.2);
+  --token-elevation-high: 0 2px 3px rgba(101, 106, 118, 0.15),
+    0 16px 16px -10px rgba(101, 106, 118, 0.2);
+
+  /* Transition */
+  --token-transition: ease-in-out 0.2s;
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 300px;
+
+  & a {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border-radius: var(--token-radius);
+    box-shadow: 0 0 0 1px rgba(38, 53, 61, 0.1), var(--token-elevation-mid);
+    transition: var(--token-transition);
+    transition-property: background-color, box-shadow;
+
+    &:hover {
+      box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15), var(--token-elevation-high);
+      cursor: pointer;
+    }
+
+    /* Variants */
+    &.dark {
+      background-color: var(--gray-1);
+
+      &:hover {
+        background-color: var(--gray-2);
+      }
+    }
+
+    &.gray {
+      background-color: #f9f9fa;
+    }
+
+    &.light {
+      background-color: var(--white);
+    }
+
+    /* Spacing */
+    &.none {
+      padding: 0;
+    }
+
+    &.sm {
+      padding: var(--token-spacing-05);
+    }
+
+    &.md {
+      padding: var(--token-spacing-06);
+    }
+  }
+}
+
+.eyebrow {
+  margin: 0;
+  composes: g-type-label-small from global;
+  color: var(--gray-3);
+
+  @nest .dark & {
+    color: var(--gray-5);
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-5 from global;
+  color: var(--black);
+
+  @nest * + & {
+    margin-top: var(--token-spacing-05);
+  }
+
+  @nest .dark & {
+    color: var(--white);
+  }
+}
+
+.description {
+  margin: 0;
+  composes: g-type-body-small from global;
+  color: var(--gray-3);
+
+  @nest * + & {
+    margin-top: var(--token-spacing-03);
+  }
+
+  @nest .dark & {
+    color: var(--gray-5);
+  }
+}
+
+.footer {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-top: 32px;
+}
+
+.products {
+  display: flex;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+
+  & > li {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+  }
+
+  & .logo {
+    display: flex;
+
+    & svg {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+.linkType {
+  margin-left: auto;
+  display: flex;
+  color: var(--black);
+
+  @nest .dark & {
+    color: var(--white);
+  }
+}

website/components/io-dialog/index.tsx

+import * as React from 'react'
+import { DialogOverlay, DialogContent, DialogOverlayProps } from '@reach/dialog'
+import { AnimatePresence, motion } from 'framer-motion'
+import s from './style.module.css'
+
+export interface IoDialogProps extends DialogOverlayProps {
+  label: string
+}
+
+export default function IoDialog({
+  isOpen,
+  onDismiss,
+  children,
+  label,
+}: IoDialogProps): React.ReactElement {
+  const AnimatedDialogOverlay = motion(DialogOverlay)
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <AnimatedDialogOverlay
+          className={s.dialogOverlay}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onDismiss={onDismiss}
+        >
+          <div className={s.dialogWrapper}>
+            <motion.div
+              initial={{ y: 50 }}
+              animate={{ y: 0 }}
+              exit={{ y: 50 }}
+              transition={{ min: 0, max: 100, bounceDamping: 8 }}
+              style={{ width: '100%', maxWidth: 800 }}
+            >
+              <DialogContent className={s.dialogContent} aria-label={label}>
+                <button onClick={onDismiss} className={s.dialogClose}>
+                  Close
+                </button>
+                {children}
+              </DialogContent>
+            </motion.div>
+          </div>
+        </AnimatedDialogOverlay>
+      )}
+    </AnimatePresence>
+  )
+}

website/components/io-dialog/style.module.css

+.dialogOverlay {
+  background-color: rgba(0, 0, 0, 0.75);
+  height: 100%;
+  left: 0;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 666666667 /* higher than global nav */;
+}
+
+.dialogWrapper {
+  display: grid;
+  min-height: 100vh;
+  padding: 24px;
+  place-items: center;
+}
+
+.dialogContent {
+  background-color: var(--gray-1);
+  color: var(--white);
+  max-width: 800px;
+  outline: none;
+  overflow-y: auto;
+  padding: 24px;
+  position: relative;
+  width: 100%;
+
+  @media (min-width: 768px) {
+    padding: 48px;
+  }
+}
+
+.dialogClose {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  composes: g-type-display-5 from global;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  color: var(--white);
+  right: 24px;
+  top: 24px;
+  z-index: 1;
+
+  @media (min-width: 768px) {
+    right: 48px;
+    top: 48px;
+  }
+
+  @nest html[dir='rtl'] & {
+    left: 24px;
+    right: auto;
+
+    @media (min-width: 768px) {
+      left: 48px;
+      right: auto;
+    }
+  }
+}

website/components/io-home-call-to-action/index.tsx

+import ReactCallToAction from '@hashicorp/react-call-to-action'
+import { Products } from '@hashicorp/platform-product-meta'
+import s from './style.module.css'
+
+interface IoHomeCallToActionProps {
+  brand: Products
+  heading: string
+  content: string
+  links: Array<{
+    text: string
+    url: string
+  }>
+}
+
+export default function IoHomeCallToAction({
+  brand,
+  heading,
+  content,
+  links,
+}: IoHomeCallToActionProps) {
+  return (
+    <div className={s.callToAction}>
+      <ReactCallToAction
+        variant="compact"
+        heading={heading}
+        content={content}
+        product={brand}
+        theme="dark"
+        links={links.map(({ text, url }, index) => {
+          return {
+            text,
+            url,
+            type: index === 1 ? 'inbound' : null,
+          }
+        })}
+      />
+    </div>
+  )
+}

website/components/io-home-call-to-action/style.module.css

+.callToAction {
+  margin: 60px auto;
+  background-image: linear-gradient(52.3deg, #2c2d2f 39.83%, #626264 96.92%);
+
+  @media (--medium-up) {
+    margin: 120px auto;
+  }
+
+  & > * {
+    background-color: transparent;
+  }
+}

website/components/io-home-case-studies/index.tsx

+import * as React from 'react'
+import Image from 'next/image'
+import { isInternalLink } from 'lib/utils'
+import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+interface IoHomeCaseStudiesProps {
+  heading: string
+  description: string
+  primary: Array<{
+    thumbnail: {
+      url: string
+      alt: string
+    }
+    link: string
+    heading: string
+  }>
+  secondary: Array<{
+    link: string
+    heading: string
+  }>
+}
+
+export default function IoHomeCaseStudies({
+  heading,
+  description,
+  primary,
+  secondary,
+}: IoHomeCaseStudiesProps): React.ReactElement {
+  return (
+    <section className={s.root}>
+      <div className={s.container}>
+        <header className={s.header}>
+          <h2 className={s.heading}>{heading}</h2>
+          <p className={s.description}>{description}</p>
+        </header>
+        <div className={s.caseStudies}>
+          <ul className={s.primary}>
+            {primary.map((item, index) => {
+              return (
+                <li key={index} className={s.primaryItem}>
+                  <a className={s.card} href={item.link}>
+                    <h3 className={s.cardHeading}>{item.heading}</h3>
+                    <Image
+                      className={s.cardThumbnail}
+                      src={item.thumbnail.url}
+                      layout="fill"
+                      objectFit="cover"
+                      alt={item.thumbnail.alt}
+                    />
+                  </a>
+                </li>
+              )
+            })}
+          </ul>
+
+          <ul className={s.secondary}>
+            {secondary.map((item, index) => {
+              return (
+                <li key={index} className={s.secondaryItem}>
+                  <a className={s.link} href={item.link}>
+                    <span className={s.linkInner}>
+                      <h3 className={s.linkHeading}>{item.heading}</h3>
+                      {isInternalLink(item.link) ? (
+                        <IconArrowRight16 />
+                      ) : (
+                        <IconExternalLink16 />
+                      )}
+                    </span>
+                  </a>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}

website/components/io-home-case-studies/style.module.css

+.root {
+  position: relative;
+  margin: 0 auto;
+  margin: 60px auto;
+  max-width: 1600px;
+
+  @media (--medium-up) {
+    margin: 120px auto;
+  }
+}
+
+.container {
+  composes: g-grid-container from global;
+}
+
+.header {
+  margin-bottom: 32px;
+
+  @media (--medium-up) {
+    max-width: calc(100% * 5 / 12);
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-3 from global;
+}
+
+.description {
+  margin: 8px 0 0;
+  composes: g-type-body from global;
+  color: var(--gray-3);
+}
+
+.caseStudies {
+  --columns: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.primary {
+  --columns: 1;
+
+  grid-column: 1 / -1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 2;
+  }
+
+  @media (--large) {
+    grid-column: 1 / 9;
+  }
+}
+
+.primaryItem {
+  display: flex;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  padding: 32px;
+  box-shadow: 0 8px 16px -10px rgba(101, 106, 118, 0.2);
+  background-color: #000;
+  border-radius: 6px;
+  color: var(--white);
+  transition: ease-in-out 0.2s;
+  transition-property: box-shadow;
+  min-height: 300px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    border-radius: 6px;
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.45)
+    );
+    transition: opacity ease-in-out 0.2s;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
+      0 16px 16px -10px rgba(101, 106, 118, 0.2);
+
+    &::before {
+      opacity: 0.75;
+    }
+  }
+}
+
+.cardThumbnail {
+  transition: transform 0.4s;
+
+  @nest .card:hover & {
+    transform: scale(1.04);
+  }
+}
+
+.cardHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+  z-index: 10;
+}
+
+.secondary {
+  grid-column: 1 / -1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media (--large) {
+    margin-top: -32px;
+    grid-column: 9 / -1;
+  }
+}
+
+.secondaryItem {
+  border-bottom: 1px solid var(--gray-5);
+}
+
+.link {
+  display: flex;
+  width: 100%;
+  color: var(--black);
+}
+
+.linkInner {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  transition: transform ease-in-out 0.2s;
+
+  @nest .link:hover & {
+    transform: translateX(4px);
+  }
+
+  & svg {
+    margin-top: 6px;
+    flex-shrink: 0;
+  }
+}
+
+.linkHeading {
+  margin: 0 32px 0 0;
+  composes: g-type-display-6 from global;
+}

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

+import * as React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { isInternalLink } from 'lib/utils'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+export interface IoHomeFeatureProps {
+  isInternalLink: (link: string) => boolean
+  link?: string
+  image: {
+    url: string
+    alt: string
+  }
+  heading: string
+  description: string
+}
+
+export default function IoHomeFeature({
+  isInternalLink,
+  link,
+  image,
+  heading,
+  description,
+}: IoHomeFeatureProps): React.ReactElement {
+  return (
+    <IoHomeFeatureWrap isInternalLink={isInternalLink} href={link}>
+      <div className={s.featureMedia}>
+        <Image
+          src={image.url}
+          width={400}
+          height={200}
+          layout="responsive"
+          alt={image.alt}
+        />
+      </div>
+      <div className={s.featureContent}>
+        <h3 className={s.featureHeading}>{heading}</h3>
+        <p className={s.featureDescription}>{description}</p>
+        {link ? (
+          <span className={s.featureCta} aria-hidden={true}>
+            Learn more{' '}
+            <span>
+              <IconArrowRight16 />
+            </span>
+          </span>
+        ) : null}
+      </div>
+    </IoHomeFeatureWrap>
+  )
+}
+
+function IoHomeFeatureWrap({ isInternalLink, href, children }) {
+  if (!href) {
+    return <div className={s.feature}>{children}</div>
+  }
+
+  if (isInternalLink(href)) {
+    return (
+      <Link href={href}>
+        <a className={s.feature}>{children}</a>
+      </Link>
+    )
+  }
+
+  return (
+    <a className={s.feature} href={href}>
+      {children}
+    </a>
+  )
+}

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

+.feature {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 32px;
+  gap: 24px 64px;
+  border-radius: 6px;
+  background-color: #f9f9fa;
+  color: var(--black);
+  box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1),
+    0 8px 16px -10px rgba(101, 106, 118, 0.2);
+
+  @media (--medium-up) {
+    flex-direction: row;
+  }
+}
+
+.featureLink {
+  transition: box-shadow ease-in-out 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
+      0 16px 16px -10px rgba(101, 106, 118, 0.2);
+  }
+}
+
+.featureMedia {
+  flex-shrink: 0;
+  display: flex;
+  width: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--gray-5);
+
+  @media (--medium-up) {
+    width: 300px;
+  }
+
+  @media (--large) {
+    width: 400px;
+  }
+
+  & > * {
+    width: 100%;
+  }
+}
+
+.featureContent {
+  max-width: 520px;
+}
+
+.featureHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.featureDescription {
+  margin: 8px 0 24px;
+  composes: g-type-body-small from global;
+  color: var(--gray-3);
+}
+
+.featureCta {
+  display: inline-flex;
+  align-items: center;
+
+  & > span {
+    display: flex;
+    margin-left: 12px;
+
+    & > svg {
+      transition: transform 0.2s;
+    }
+  }
+
+  @nest .feature:hover & span svg {
+    transform: translateX(2px);
+  }
+}

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

+import * as React from 'react'
+import { Products } from '@hashicorp/platform-product-meta'
+import Button from '@hashicorp/react-button'
+import classNames from 'classnames'
+import s from './style.module.css'
+
+interface IoHomeHeroProps {
+  pattern: string
+  brand: Products | 'neutral'
+  heading: string
+  description: string
+  ctas: Array<{
+    title: string
+    link: string
+  }>
+  cards: Array<IoHomeHeroCardProps>
+}
+
+export default function IoHomeHero({
+  pattern,
+  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)}
+      style={
+        {
+          '--pattern': `url(${pattern})`,
+        } as React.CSSProperties
+      }
+    >
+      <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.link}
+                    linkType="inbound"
+                    theme={{
+                      brand: 'neutral',
+                      variant: 'tertiary',
+                      background: 'light',
+                    }}
+                  />
+                )
+              })}
+            </div>
+          )}
+        </div>
+        {cards && (
+          <div className={s.cards}>
+            {cards.map((card, index) => {
+              return (
+                <IoHomeHeroCard
+                  key={index}
+                  index={index}
+                  heading={card.heading}
+                  description={card.description}
+                  cta={{
+                    brand: index === 0 ? 'neutral' : brand,
+                    title: card.cta.title,
+                    link: card.cta.link,
+                  }}
+                  subText={card.subText}
+                />
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
+
+interface IoHomeHeroCardProps {
+  index?: number
+  heading: string
+  description: string
+  cta: {
+    title: string
+    link: string
+    brand?: 'neutral' | Products
+  }
+  subText: string
+}
+
+function IoHomeHeroCard({
+  index,
+  heading,
+  description,
+  cta,
+  subText,
+}: IoHomeHeroCardProps): React.ReactElement {
+  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.link}
+        theme={{
+          variant: 'primary',
+          brand: cta.brand,
+        }}
+      />
+      <p className={s.cardSubText}>{subText}</p>
+    </article>
+  )
+}

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

+.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: var(--pattern);
+    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;
+  }
+
+  & > * {
+    max-width: 415px;
+  }
+}
+
+.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-in-practice/index.tsx

+import * as React from 'react'
+import Image from 'next/image'
+import Button from '@hashicorp/react-button'
+import { Products } from '@hashicorp/platform-product-meta'
+import { IoCardProps } from 'components/io-card'
+import IoCardContainer from 'components/io-card-container'
+import s from './style.module.css'
+
+interface IoHomeInPracticeProps {
+  brand: Products
+  pattern: string
+  heading: string
+  description: string
+  cards: Array<IoCardProps>
+  cta: {
+    heading: string
+    description: string
+    link: string
+    image: {
+      url: string
+      alt: string
+      width: number
+      height: number
+    }
+  }
+}
+
+export default function IoHomeInPractice({
+  brand,
+  pattern,
+  heading,
+  description,
+  cards,
+  cta,
+}: IoHomeInPracticeProps) {
+  return (
+    <section
+      className={s.inPractice}
+      style={
+        {
+          '--pattern': `url(${pattern})`,
+        } as React.CSSProperties
+      }
+    >
+      <div className={s.container}>
+        <IoCardContainer
+          theme="dark"
+          heading={heading}
+          description={description}
+          cardsPerRow={3}
+          cards={cards}
+        />
+
+        {cta.heading ? (
+          <div className={s.inPracticeCta}>
+            <div className={s.inPracticeCtaContent}>
+              <h3 className={s.inPracticeCtaHeading}>{cta.heading}</h3>
+              {cta.description ? (
+                <p className={s.inPracticeCtaDescription}>{cta.description}</p>
+              ) : null}
+              {cta.link ? (
+                <Button
+                  title="Learn more"
+                  url={cta.link}
+                  theme={{
+                    brand: brand,
+                  }}
+                />
+              ) : null}
+            </div>
+            {cta.image?.url ? (
+              <div className={s.inPracticeCtaMedia}>
+                <Image
+                  src={cta.image.url}
+                  width={cta.image.width}
+                  height={cta.image.height}
+                  alt={cta.image.alt}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}

website/components/io-home-in-practice/style.module.css

+.inPractice {
+  position: relative;
+  margin: 60px auto;
+  padding: 64px 0;
+  max-width: 1600px;
+
+  @media (--medium-up) {
+    padding: 80px 0;
+    margin: 120px auto;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--black);
+    background-image: url('/img/practice-pattern.svg');
+    background-repeat: no-repeat;
+    background-size: 50%;
+    background-position: top 200px left;
+
+    @media (--large) {
+      border-radius: 6px;
+      left: 24px;
+      right: 24px;
+      background-size: 35%;
+      background-position: top 64px left;
+    }
+  }
+}
+
+.container {
+  composes: g-grid-container from global;
+}
+
+.inPracticeCta {
+  --columns: 1;
+
+  position: relative;
+  margin-top: 64px;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 64px 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: -64px;
+    background-image: radial-gradient(
+      42.33% 42.33% at 50% 100%,
+      #363638 0%,
+      #000 100%
+    );
+
+    @media (--medium-up) {
+      bottom: -80px;
+    }
+  }
+}
+
+.inPracticeCtaContent {
+  position: relative;
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 1 / 5;
+  }
+}
+
+.inPracticeCtaMedia {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 6 / -1;
+  }
+}
+
+.inPracticeCtaHeading {
+  margin: 0;
+  color: var(--white);
+  composes: g-type-display-3 from global;
+}
+
+.inPracticeCtaDescription {
+  margin: 8px 0 32px;
+  color: var(--gray-5);
+  composes: g-type-body from global;
+}

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

+import * as React from 'react'
+import Image from 'next/image'
+import classNames from 'classnames'
+import { Products } from '@hashicorp/platform-product-meta'
+import Button from '@hashicorp/react-button'
+import IoVideoCallout, {
+  IoHomeVideoCalloutProps,
+} from 'components/io-video-callout'
+import IoHomeFeature, { IoHomeFeatureProps } from 'components/io-home-feature'
+import s from './style.module.css'
+
+interface IoHomeIntroProps {
+  isInternalLink: (link: string) => boolean
+  brand: Products
+  heading: string
+  description: string
+  features?: Array<IoHomeFeatureProps>
+  offerings?: {
+    image: {
+      src: string
+      width: number
+      height: number
+      alt: string
+    }
+    list: Array<{
+      heading: string
+      description: string
+    }>
+    cta?: {
+      title: string
+      link: string
+    }
+  }
+  video?: IoHomeVideoCalloutProps
+}
+
+export default function IoHomeIntro({
+  isInternalLink,
+  brand,
+  heading,
+  description,
+  features,
+  offerings,
+  video,
+}: IoHomeIntroProps) {
+  return (
+    <section
+      className={classNames(
+        s.root,
+        s[brand],
+        features && s.withFeatures,
+        offerings && s.withOfferings
+      )}
+      style={
+        {
+          '--brand': `var(--${brand})`,
+        } as React.CSSProperties
+      }
+    >
+      <header className={s.header}>
+        <div className={s.container}>
+          <div className={s.headerInner}>
+            <h2 className={s.heading}>{heading}</h2>
+            <p className={s.description}>{description}</p>
+          </div>
+        </div>
+      </header>
+
+      {features ? (
+        <ul className={s.features}>
+          {features.map((feature, index) => {
+            return (
+              // Index is stable
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={index}>
+                <div className={s.container}>
+                  <IoHomeFeature
+                    isInternalLink={isInternalLink}
+                    image={{
+                      url: feature.image.url,
+                      alt: feature.image.alt,
+                    }}
+                    heading={feature.heading}
+                    description={feature.description}
+                    link={feature.link}
+                  />
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+
+      {offerings ? (
+        <div className={s.offerings}>
+          {offerings.image ? (
+            <div className={s.offeringsMedia}>
+              <Image
+                src={offerings.image.src}
+                width={offerings.image.width}
+                height={offerings.image.height}
+                alt={offerings.image.alt}
+              />
+            </div>
+          ) : null}
+          <div className={s.offeringsContent}>
+            <ul className={s.offeringsList}>
+              {offerings.list.map((offering, index) => {
+                return (
+                  // Index is stable
+                  // eslint-disable-next-line react/no-array-index-key
+                  <li key={index}>
+                    <h3 className={s.offeringsListHeading}>
+                      {offering.heading}
+                    </h3>
+                    <p className={s.offeringsListDescription}>
+                      {offering.description}
+                    </p>
+                  </li>
+                )
+              })}
+            </ul>
+            {offerings.cta ? (
+              <div className={s.offeringsCta}>
+                <Button
+                  title={offerings.cta.title}
+                  url={offerings.cta.link}
+                  theme={{
+                    brand: 'neutral',
+                  }}
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {video.youtubeId && video.thumbnail ? (
+        <div className={s.video}>
+          <IoVideoCallout
+            youtubeId={video.youtubeId}
+            thumbnail={video.thumbnail}
+            heading={video.heading}
+            description={video.description}
+            person={video.person}
+          />
+        </div>
+      ) : null}
+    </section>
+  )
+}

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

+.root {
+  position: relative;
+  margin-bottom: 60px;
+
+  @media (--medium-up) {
+    margin-bottom: 120px;
+  }
+
+  &.withOfferings:not(.withFeatures)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(
+      93.55% 93.55% at 50% 0%,
+      var(--gray-6) 0%,
+      rgba(242, 242, 243, 0) 100%
+    );
+
+    @media (--large) {
+      border-radius: 6px;
+      left: 24px;
+      right: 24px;
+    }
+  }
+}
+
+.container {
+  composes: g-grid-container from global;
+}
+
+.header {
+  padding-top: 64px;
+  padding-bottom: 64px;
+  text-align: center;
+
+  @nest .withFeatures & {
+    background-color: var(--brand);
+  }
+
+  @nest .withFeatures.consul & {
+    color: var(--white);
+  }
+}
+
+.headerInner {
+  margin: auto;
+
+  @media (--medium-up) {
+    max-width: calc(100% * 7 / 12);
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-2 from global;
+}
+
+.description {
+  margin: 24px 0 0;
+  composes: g-type-body-large from global;
+
+  @nest .withOfferings:not(.withFeatures) & {
+    color: var(--gray-3);
+  }
+}
+
+/*
+ * Features
+ */
+
+.features {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 32px;
+
+  & li:first-of-type {
+    background-image: linear-gradient(
+      to bottom,
+      var(--brand) 50%,
+      var(--white) 50%
+    );
+  }
+}
+
+/*
+ * Offerings
+ */
+
+.offerings {
+  --columns: 1;
+
+  composes: g-grid-container from global;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 64px 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+
+  @nest .features + & {
+    margin-top: 60px;
+
+    @media (--medium-up) {
+      margin-top: 120px;
+    }
+  }
+}
+
+.offeringsMedia {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 1 / 6;
+  }
+}
+
+.offeringsContent {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 7 / -1;
+  }
+}
+
+.offeringsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+
+  @media (--small) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.offeringsListHeading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+}
+
+.offeringsListDescription {
+  margin: 16px 0 0;
+  composes: g-type-body-small from global;
+}
+
+.offeringsCta {
+  margin-top: 48px;
+}
+
+/*
+ * Video
+ */
+
+.video {
+  margin-top: 60px;
+  composes: g-grid-container from global;
+
+  @media (--medium-up) {
+    margin-top: 120px;
+  }
+}

website/components/io-home-pre-footer/index.tsx

+import * as React from 'react'
+import classNames from 'classnames'
+import { Products } from '@hashicorp/platform-product-meta'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import s from './style.module.css'
+
+interface IoHomePreFooterProps {
+  brand: Products
+  heading: string
+  description: string
+  ctas: [IoHomePreFooterCard, IoHomePreFooterCard, IoHomePreFooterCard]
+}
+
+export default function IoHomePreFooter({
+  brand,
+  heading,
+  description,
+  ctas,
+}: IoHomePreFooterProps) {
+  return (
+    <div className={classNames(s.preFooter, s[brand])}>
+      <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}
+                cta={cta.cta}
+              />
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface IoHomePreFooterCard {
+  brand?: string
+  link: string
+  heading: string
+  description: string
+  cta: string
+}
+
+function IoHomePreFooterCard({
+  brand,
+  link,
+  heading,
+  description,
+  cta,
+}: IoHomePreFooterCard): React.ReactElement {
+  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}>
+        {cta} <IconArrowRight16 />
+      </span>
+    </a>
+  )
+}