Homepage use case redesign (#11728)

* init homepage * adds tutorials * update subnav * adds intro background * add offerings * adds in practice cta * include radial gradient * cleanup gradient * Fix learn more button display * include use case pages * connect subnav menu items * extract in practice section for reuse * use Products type * fix type error * add neutral option * rework cta logic * Fix links map * fix use case path * updates accent method * fix button prop usage * refactor customer case study * refactor case studies component * cleanup margin * refactor data props * fix offering cta * spacing updates and introduce intro component * adds intro interface * removes footer border * fix intro description color * add revalidate code to homepage * cleanup unused imports * bump subnav * makes stats optional * adjust border radius based on customer story * redirect /home to homepage * fix: turtorials link * fix: logo alignment * fix: section background color * feat: home reorder and tuts and docs links * fix: flush padding * formatting * feat: sort use cases in nav * fix: card overflow * fix: adjust overflow method * fix: padding on desktop * fix: card container overflow padding on mobile * fix: intro cta conditional * fix: simplify conditional * fix: customer logo sizing * cleanup old data * accept isInternalLink as arg * remove chunk * fix: isInternalLink usage * fix: isInternalLink prop usage * fix: add lang to document * init homepage * adds tutorials * add offerings * cleanup unused imports * bump subnav * fix: flush padding * formatting * fix: intro cta conditional * fix: simplify conditional * cleanup old data * add consul on kubernetes to menu items * add use case redirect * Add use case redirect
2021-12-20 16:42:20 -05:00 · 2021-12-20 16:42:20 -05:00 · a2e2bd7960
parent f8b1ab4d67
commit a2e2bd7960
116 changed files with 8838 additions and 4009 deletions
--- a/website/components/footer/style.css
+++ b/website/components/footer/style.css
@ -2,7 +2,6 @@
  padding: 25px 0 17px 0;
  flex-shrink: 0;
  display: flex;
-  border-top: 1px solid var(--gray-5);

  & .g-grid-container {
    display: flex;
--- a/website/components/io-card-container/index.tsx
+++ b/website/components/io-card-container/index.tsx
@ -0,0 +1,82 @@
+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>
+  )
+}
--- a/website/components/io-card-container/style.module.css
+++ b/website/components/io-card-container/style.module.css
@ -0,0 +1,114 @@
+.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;
+    }
+  }
+}
--- a/website/components/io-card/index.tsx
+++ b/website/components/io-card/index.tsx
@ -0,0 +1,124 @@
+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
--- a/website/components/io-card/product-logos.ts
+++ b/website/components/io-card/product-logos.ts
@ -0,0 +1,34 @@
+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'),
+  },
+}
--- a/website/components/io-card/style.module.css
+++ b/website/components/io-card/style.module.css
@ -0,0 +1,148 @@
+.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);
+  }
+}
--- a/website/components/io-dialog/index.tsx
+++ b/website/components/io-dialog/index.tsx
@ -0,0 +1,47 @@
+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>
+  )
+}
--- a/website/components/io-dialog/style.module.css
+++ b/website/components/io-dialog/style.module.css
@ -0,0 +1,62 @@
+.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;
+    }
+  }
+}
--- a/website/components/io-home-call-to-action/index.tsx
+++ b/website/components/io-home-call-to-action/index.tsx
@ -0,0 +1,39 @@
+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>
+  )
+}
--- a/website/components/io-home-call-to-action/style.module.css
+++ b/website/components/io-home-call-to-action/style.module.css
@ -0,0 +1,12 @@
+.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;
+  }
+}
--- a/website/components/io-home-case-studies/index.tsx
+++ b/website/components/io-home-case-studies/index.tsx
@ -0,0 +1,81 @@
+import * as React from 'react'
+import Image from 'next/image'
+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 {
+  isInternalLink: (link: string) => boolean
+  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({
+  isInternalLink,
+  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>
+  )
+}
--- a/website/components/io-home-case-studies/style.module.css
+++ b/website/components/io-home-case-studies/style.module.css
@ -0,0 +1,170 @@
+.root {
+  position: relative;
+  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;
+}
--- a/website/components/io-home-feature/index.tsx
+++ b/website/components/io-home-feature/index.tsx
@ -0,0 +1,80 @@
+import * as React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+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>
+  )
+}
+
+interface IoHomeFeatureWrapProps {
+  isInternalLink: (link: string) => boolean
+  href: string
+  children: React.ReactNode
+}
+
+function IoHomeFeatureWrap({
+  isInternalLink,
+  href,
+  children,
+}: IoHomeFeatureWrapProps) {
+  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>
+  )
+}
--- a/website/components/io-home-feature/style.module.css
+++ b/website/components/io-home-feature/style.module.css
@ -0,0 +1,79 @@
+.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);
+  }
+}
--- a/website/components/io-home-hero/index.tsx
+++ b/website/components/io-home-hero/index.tsx
@ -0,0 +1,135 @@
+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>
+  )
+}
--- a/website/components/io-home-hero/style.module.css
+++ b/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: 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);
+  }
+}
--- a/website/components/io-home-in-practice/index.tsx
+++ b/website/components/io-home-in-practice/index.tsx
@ -0,0 +1,86 @@
+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>
+  )
+}
--- a/website/components/io-home-in-practice/style.module.css
+++ b/website/components/io-home-in-practice/style.module.css
@ -0,0 +1,98 @@
+.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: var(--pattern);
+    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;
+}
--- a/website/components/io-home-intro/index.tsx
+++ b/website/components/io-home-intro/index.tsx
@ -0,0 +1,155 @@
+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 ? (
+        <div className={s.video}>
+          <IoVideoCallout
+            youtubeId={video.youtubeId}
+            thumbnail={video.thumbnail}
+            heading={video.heading}
+            description={video.description}
+            person={{
+              name: video.person.name,
+              description: video.person.description,
+              avatar: video.person.avatar,
+            }}
+          />
+        </div>
+      ) : null}
+    </section>
+  )
+}
--- a/website/components/io-home-intro/style.module.css
+++ b/website/components/io-home-intro/style.module.css
@ -0,0 +1,169 @@
+.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;
+  }
+}
--- a/website/components/io-home-pre-footer/index.tsx
+++ b/website/components/io-home-pre-footer/index.tsx
@ -0,0 +1,79 @@
+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>
+  )
+}
--- a/website/components/io-home-pre-footer/style.module.css
+++ b/website/components/io-home-pre-footer/style.module.css
@ -0,0 +1,122 @@
+.preFooter {
+  margin: 60px auto;
+}
+
+.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(1) {
+    color: var(--white);
+
+    @nest .vault & {
+      color: var(--black);
+    }
+  }
+
+  &: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;
+  color: inherit;
+  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);
+  }
+}
--- a/website/components/io-usecase-call-to-action/index.tsx
+++ b/website/components/io-usecase-call-to-action/index.tsx
@ -0,0 +1,69 @@
+import Image from 'next/image'
+import * as React from 'react'
+import classNames from 'classnames'
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+interface IoUsecaseCallToActionProps {
+  brand: string
+  theme?: 'light' | 'dark'
+  heading: string
+  description: string
+  links: Array<{
+    text: string
+    url: string
+  }>
+  pattern: string
+}
+
+export default function IoUsecaseCallToAction({
+  brand,
+  theme,
+  heading,
+  description,
+  links,
+  pattern,
+}: IoUsecaseCallToActionProps): React.ReactElement {
+  return (
+    <div
+      className={classNames(s.callToAction, s[theme])}
+      style={
+        {
+          '--background-color': `var(--${brand})`,
+        } as React.CSSProperties
+      }
+    >
+      <h2 className={s.heading}>{heading}</h2>
+      <div className={s.content}>
+        <p className={s.description}>{description}</p>
+        <div className={s.links}>
+          {links.map((link, index) => {
+            return (
+              <Button
+                // Index is stable
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                title={link.text}
+                url={link.url}
+                theme={{
+                  brand: 'neutral',
+                  variant: index === 0 ? 'primary' : 'secondary',
+                  background: theme,
+                }}
+              />
+            )
+          })}
+        </div>
+      </div>
+      <div className={s.pattern}>
+        <Image
+          src={pattern}
+          layout="fill"
+          objectFit="cover"
+          objectPosition="center left"
+          alt=""
+        />
+      </div>
+    </div>
+  )
+}
--- a/website/components/io-usecase-call-to-action/style.module.css
+++ b/website/components/io-usecase-call-to-action/style.module.css
@ -0,0 +1,66 @@
+.callToAction {
+  --columns: 1;
+
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 0 32px;
+  padding: 32px;
+  background-color: var(--background-color);
+  border-radius: 6px;
+
+  &.light {
+    color: var(--black);
+  }
+
+  &.dark {
+    color: var(--white);
+  }
+
+  @media (--medium-up) {
+    --columns: 12;
+
+    padding: 0;
+  }
+}
+
+.heading {
+  grid-column: 1 / -1;
+  margin: 0 0 16px;
+  composes: g-type-display-3 from global;
+
+  @media (--medium-up) {
+    grid-column: 1 / 6;
+    padding: 88px 32px 88px 64px;
+  }
+}
+
+.content {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 6 / 11;
+    padding: 88px 0;
+  }
+}
+
+.description {
+  margin: 0 0 32px;
+  composes: g-type-body-large from global;
+}
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 32px;
+}
+
+.pattern {
+  position: relative;
+  display: none;
+
+  @media (--medium-up) {
+    grid-column: 11 / -1;
+    display: flex;
+  }
+}
--- a/website/components/io-usecase-customer/index.tsx
+++ b/website/components/io-usecase-customer/index.tsx
@ -0,0 +1,86 @@
+import * as React from 'react'
+import Image from 'next/image'
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+interface IoUsecaseCustomerProps {
+  media: {
+    src: string
+    width: string
+    height: string
+    alt: string
+  }
+  logo: {
+    src: string
+    width: string
+    height: string
+    alt: string
+  }
+  heading: string
+  description: string
+  stats?: Array<{
+    value: string
+    key: string
+  }>
+  link: string
+}
+
+export default function IoUsecaseCustomer({
+  media,
+  logo,
+  heading,
+  description,
+  stats,
+  link,
+}: IoUsecaseCustomerProps): React.ReactElement {
+  return (
+    <section className={s.customer}>
+      <div className={s.container}>
+        <div className={s.columns}>
+          <div className={s.media}>
+            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+            <Image {...media} layout="responsive" />
+          </div>
+          <div className={s.content}>
+            <div className={s.eyebrow}>
+              <div className={s.eyebrowLogo}>
+                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                <Image {...logo} />
+              </div>
+              <span className={s.eyebrowLabel}>Customer case study</span>
+            </div>
+            <h2 className={s.heading}>{heading}</h2>
+            <p className={s.description}>{description}</p>
+            {link ? (
+              <div className={s.cta}>
+                <Button
+                  title="Read more"
+                  url={link}
+                  theme={{
+                    brand: 'neutral',
+                    variant: 'secondary',
+                    background: 'dark',
+                  }}
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {stats.length > 0 ? (
+          <ul className={s.stats}>
+            {stats.map(({ key, value }, index) => {
+              return (
+                // Index is stable
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <p className={s.value}>{value}</p>
+                  <p className={s.key}>{key}</p>
+                </li>
+              )
+            })}
+          </ul>
+        ) : null}
+      </div>
+    </section>
+  )
+}
--- a/website/components/io-usecase-customer/style.module.css
+++ b/website/components/io-usecase-customer/style.module.css
@ -0,0 +1,119 @@
+.customer {
+  position: relative;
+  background-color: var(--black);
+  color: var(--white);
+  padding-bottom: 64px;
+
+  @media (--medium-up) {
+    padding-bottom: 132px;
+  }
+}
+
+.container {
+  composes: g-grid-container from global;
+}
+
+.columns {
+  --columns: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 64px 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.media {
+  margin-top: -64px;
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    grid-column: 1 / 7;
+  }
+}
+
+.content {
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    padding-top: 64px;
+    grid-column: 8 / -1;
+  }
+}
+
+.eyebrow {
+  display: flex;
+  align-items: center;
+}
+
+.eyebrowLogo {
+  display: flex;
+  max-width: 120px;
+}
+
+.eyebrowLabel {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  margin-left: 12px;
+  border-left: 1px solid var(--gray-5);
+  align-self: center;
+  composes: g-type-label-small-strong from global;
+}
+
+.heading {
+  margin: 32px 0 24px;
+  composes: g-type-display-2 from global;
+}
+
+.description {
+  margin: 0;
+  composes: g-type-body from global;
+}
+
+.cta {
+  margin-top: 32px;
+}
+
+.stats {
+  --columns: 1;
+
+  list-style: none;
+  margin: 64px 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+
+    margin-top: 132px;
+  }
+
+  & > li {
+    border-top: 1px solid var(--gray-2);
+    grid-column: span 4;
+  }
+}
+
+.value {
+  margin: 0;
+  padding-top: 32px;
+  font-family: var(--font-display);
+  font-size: 50px;
+  font-weight: 700;
+  line-height: 1;
+
+  @media (--large) {
+    font-size: 80px;
+  }
+}
+
+.key {
+  margin: 12px 0 0;
+  composes: g-type-display-4 from global;
+  color: var(--gray-3);
+}
--- a/website/components/io-usecase-hero/index.tsx
+++ b/website/components/io-usecase-hero/index.tsx
@ -0,0 +1,41 @@
+import * as React from 'react'
+import Image from 'next/image'
+import s from './style.module.css'
+
+interface IoUsecaseHeroProps {
+  eyebrow: string
+  heading: string
+  description: string
+  pattern?: string
+}
+
+export default function IoUsecaseHero({
+  eyebrow,
+  heading,
+  description,
+  pattern,
+}: IoUsecaseHeroProps): React.ReactElement {
+  return (
+    <header className={s.hero}>
+      <div className={s.container}>
+        <div className={s.pattern}>
+          {pattern ? (
+            <Image
+              src={pattern}
+              layout="responsive"
+              width={420}
+              height={500}
+              priority={true}
+              alt=""
+            />
+          ) : null}
+        </div>
+        <div className={s.content}>
+          <p className={s.eyebrow}>{eyebrow}</p>
+          <h1 className={s.heading}>{heading}</h1>
+          <p className={s.description}>{description}</p>
+        </div>
+      </div>
+    </header>
+  )
+}
--- a/website/components/io-usecase-hero/pattern.svg
+++ b/website/components/io-usecase-hero/pattern.svg
--- a/website/components/io-usecase-hero/style.module.css
+++ b/website/components/io-usecase-hero/style.module.css
@ -0,0 +1,83 @@
+.hero {
+  position: relative;
+  max-width: 1600px;
+  margin-right: auto;
+  margin-left: auto;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(
+      95.97% 95.97% at 50% 100%,
+      #f2f2f3 0%,
+      rgba(242, 242, 243, 0) 100%
+    );
+
+    @media (--medium-up) {
+      border-radius: 6px;
+      left: 24px;
+      right: 24px;
+    }
+  }
+}
+
+.container {
+  @media (--medium-up) {
+    display: grid;
+    grid-template-columns: 1fr max-content 1fr;
+    gap: 32px;
+  }
+}
+
+.pattern {
+  margin-left: 24px;
+  transform: translateY(24px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  @media (--small) {
+    display: none;
+  }
+
+  @media (--medium) {
+    & > * {
+      display: none !important;
+    }
+  }
+}
+
+.content {
+  position: relative;
+  max-width: 520px;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 64px 24px;
+
+  @media (--medium-up) {
+    padding-top: 132px;
+    padding-bottom: 132px;
+  }
+}
+
+.eyebrow {
+  margin: 0;
+  composes: g-type-label-strong from global;
+}
+
+.heading {
+  margin: 24px 0;
+  composes: g-type-display-1 from global;
+}
+
+.description {
+  margin: 0;
+  composes: g-type-body-large from global;
+  color: var(--gray-2);
+}
--- a/website/components/io-usecase-section/index.tsx
+++ b/website/components/io-usecase-section/index.tsx
@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Products } from '@hashicorp/platform-product-meta'
+import classNames from 'classnames'
+import Image from 'next/image'
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+interface IoUsecaseSectionProps {
+  brand?: Products | 'neutral'
+  bottomIsFlush?: boolean
+  eyebrow: string
+  heading: string
+  description: string
+  media?: {
+    src: string
+    width: string
+    height: string
+    alt: string
+  }
+  cta?: {
+    text: string
+    link: string
+  }
+}
+
+export default function IoUsecaseSection({
+  brand = 'neutral',
+  bottomIsFlush = false,
+  eyebrow,
+  heading,
+  description,
+  media,
+  cta,
+}: IoUsecaseSectionProps): React.ReactElement {
+  return (
+    <section
+      className={classNames(s.section, s[brand], bottomIsFlush && s.isFlush)}
+    >
+      <div className={s.container}>
+        <p className={s.eyebrow}>{eyebrow}</p>
+        <div className={s.columns}>
+          <div className={s.column}>
+            <h2 className={s.heading}>{heading}</h2>
+            {media?.src ? (
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            ) : null}
+            {cta?.link && cta?.text ? (
+              <div className={s.cta}>
+                <Button
+                  title={cta.text}
+                  url={cta.link}
+                  theme={{
+                    brand: brand,
+                  }}
+                />
+              </div>
+            ) : null}
+          </div>
+          <div className={s.column}>
+            {media?.src ? (
+              // eslint-disable-next-line jsx-a11y/alt-text
+              <Image {...media} />
+            ) : (
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/website/components/io-usecase-section/style.module.css
+++ b/website/components/io-usecase-section/style.module.css
@ -0,0 +1,106 @@
+.section {
+  position: relative;
+  max-width: 1600px;
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 64px;
+  padding-bottom: 64px;
+
+  @media (--medium-up) {
+    padding-top: 132px;
+    padding-bottom: 132px;
+  }
+
+  & + .section {
+    padding-bottom: 132px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--gray-6);
+      opacity: 0.4;
+
+      @media (--medium-up) {
+        border-radius: 6px;
+        left: 24px;
+        right: 24px;
+      }
+    }
+  }
+
+  &.isFlush {
+    padding-bottom: 96px;
+
+    @media (--medium-up) {
+      padding-bottom: 164px;
+    }
+
+    &::before {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.container {
+  composes: g-grid-container from global;
+}
+
+.columns {
+  --columns: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.column {
+  &:nth-child(1) {
+    @media (--medium-up) {
+      grid-column: 1 / 7;
+    }
+  }
+
+  &:nth-child(2) {
+    @media (--medium-up) {
+      grid-column: 8 / -1;
+      padding-top: 16px;
+    }
+  }
+}
+
+.eyebrow {
+  margin: 0;
+  composes: g-type-display-5 from global;
+}
+
+.heading {
+  margin: 16px 0 32px;
+  padding-bottom: 32px;
+  composes: g-type-display-3 from global;
+  border-bottom: 1px solid var(--black);
+}
+
+.description {
+  composes: g-type-body from global;
+
+  & > p {
+    margin: 0;
+
+    & + p {
+      margin-top: 16px;
+    }
+  }
+}
+
+.cta {
+  margin-top: 32px;
+}
--- a/website/components/io-video-callout/index.tsx
+++ b/website/components/io-video-callout/index.tsx
@ -0,0 +1,80 @@
+import * as React from 'react'
+import Image from 'next/image'
+import ReactPlayer from 'react-player'
+import VisuallyHidden from '@reach/visually-hidden'
+import IoDialog from 'components/io-dialog'
+import PlayIcon from './play-icon'
+import s from './style.module.css'
+
+export interface IoHomeVideoCalloutProps {
+  youtubeId: string
+  thumbnail: string
+  heading: string
+  description: string
+  person: {
+    avatar: string
+    name: string
+    description: string
+  }
+}
+
+export default function IoVideoCallout({
+  youtubeId,
+  thumbnail,
+  heading,
+  description,
+  person,
+}: IoHomeVideoCalloutProps): React.ReactElement {
+  const [showDialog, setShowDialog] = React.useState(false)
+  const showVideo = () => setShowDialog(true)
+  const hideVideo = () => setShowDialog(false)
+  return (
+    <>
+      <figure className={s.videoCallout}>
+        <button className={s.thumbnail} onClick={showVideo}>
+          <VisuallyHidden>Play video</VisuallyHidden>
+          <PlayIcon />
+          <Image src={thumbnail} layout="fill" objectFit="cover" alt="" />
+        </button>
+        <figcaption className={s.content}>
+          <h3 className={s.heading}>{heading}</h3>
+          <p className={s.description}>{description}</p>
+          {person && (
+            <div className={s.person}>
+              {person.avatar ? (
+                <div className={s.personThumbnail}>
+                  <Image
+                    src={person.avatar}
+                    width={52}
+                    height={52}
+                    alt={`${person.name} avatar`}
+                  />
+                </div>
+              ) : null}
+              <div>
+                <p className={s.personName}>{person.name}</p>
+                <p className={s.personDescription}>{person.description}</p>
+              </div>
+            </div>
+          )}
+        </figcaption>
+      </figure>
+      <IoDialog
+        isOpen={showDialog}
+        onDismiss={hideVideo}
+        label={`${heading} video}`}
+      >
+        <h2 className={s.videoHeading}>{heading}</h2>
+        <div className={s.video}>
+          <ReactPlayer
+            url={`https://www.youtube.com/watch?v=${youtubeId}`}
+            width="100%"
+            height="100%"
+            playing={true}
+            controls={true}
+          />
+        </div>
+      </IoDialog>
+    </>
+  )
+}
--- a/website/components/io-video-callout/play-icon.tsx
+++ b/website/components/io-video-callout/play-icon.tsx
@ -0,0 +1,23 @@
+import * as React from 'react'
+
+export default function PlayIcon(): React.ReactElement {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="48" cy="48" r="48" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m63.254 46.653-22.75-14.4a1.647 1.647 0 0 0-1.657-.057c-.522.28-.847.82-.847 1.405V62.4c0 .584.325 1.123.847 1.403a1.639 1.639 0 0 0 1.657-.057l22.75-14.4c.465-.294.746-.802.746-1.346 0-.545-.281-1.052-.746-1.347Z"
+        fill="#fff"
+        stroke="#000"
+        strokeWidth="2"
+      />
+    </svg>
+  )
+}
--- a/website/components/io-video-callout/style.module.css
+++ b/website/components/io-video-callout/style.module.css
@ -0,0 +1,128 @@
+.videoCallout {
+  --columns: 1;
+
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  gap: 32px;
+  background-color: var(--black);
+  border-radius: 6px;
+  overflow: hidden;
+
+  @media (--medium-up) {
+    --columns: 12;
+  }
+}
+
+.thumbnail {
+  position: relative;
+  display: grid;
+  place-items: center;
+  grid-column: 1 / -1;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 96px 32px;
+  min-height: 300px;
+
+  @media (--medium-up) {
+    grid-column: 1 / 7;
+  }
+
+  @media (--large) {
+    grid-column: 1 / 9;
+  }
+
+  & > svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+
+    @media (--small) {
+      width: 52px;
+      height: 52px;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    opacity: 0.45;
+    transition: opacity ease-in-out 0.2s;
+  }
+
+  &:hover::after {
+    opacity: 0.2;
+  }
+}
+
+.content {
+  padding: 32px;
+  grid-column: 1 / -1;
+
+  @media (--medium-up) {
+    padding: 80px 32px;
+    grid-column: 7 / -1;
+  }
+
+  @media (--large) {
+    grid-column: 9 / -1;
+  }
+}
+
+.heading {
+  margin: 0;
+  composes: g-type-display-4 from global;
+  color: var(--white);
+}
+
+.description {
+  margin: 8px 0 0;
+  composes: g-type-body-small from global;
+  color: var(--white);
+}
+
+.person {
+  margin-top: 64px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.personThumbnail {
+  display: flex;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.personName {
+  margin: 0;
+  composes: g-type-body-strong from global;
+  color: var(--white);
+}
+
+.personDescription {
+  margin: 4px 0 0;
+  composes: g-type-label-strong from global;
+  color: var(--gray-3);
+}
+
+.videoHeading {
+  margin-top: 0;
+  margin-bottom: 32px;
+  padding-right: 100px;
+  composes: g-type-display-4 from global;
+}
+
+.video {
+  position: relative;
+  background-color: var(--gray-2);
+  aspect-ratio: 16 / 9;
+}
--- a/website/components/subnav/index.jsx
+++ b/website/components/subnav/index.jsx
@ -1,14 +1,15 @@
 import Subnav from '@hashicorp/react-subnav'
-import subnavItems from '../../data/subnav'
 import { useRouter } from 'next/router'
+import s from './style.module.css'

-export default function ConsulSubnav() {
+export default function ConsulSubnav({ menuItems }) {
  const router = useRouter()
  return (
    <Subnav
+      className={s.subnav}
      hideGithubStars={true}
      titleLink={{
-        text: 'consul',
+        text: 'HashiCorp Consul',
        url: '/',
      }}
      ctaLinks={[
@ -22,11 +23,14 @@ export default function ConsulSubnav() {
          text: 'Try HCP Consul',
          url:
            'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=top_nav_consul',
+          theme: {
+            brand: 'consul',
+          },
        },
      ]}
      currentPath={router.asPath}
      menuItemsAlign="right"
-      menuItems={subnavItems}
+      menuItems={menuItems}
      constrainWidth
      matchOnBasePath
    />
--- a/website/components/subnav/style.module.css
+++ b/website/components/subnav/style.module.css
@ -0,0 +1,3 @@
+.subnav {
+  border-top: 1px solid transparent;
+}
--- a/website/data/subnav.js
+++ b/website/data/subnav.js
@ -1,56 +0,0 @@
-export default [
-  { text: 'Overview', url: '/' },
-  {
-    text: 'Use Cases',
-    submenu: [
-      {
-        text: 'Service Discovery and Health Checking',
-        url: '/use-cases/service-discovery-and-health-checking',
-      },
-      {
-        text: 'Network Infrastructure Automation',
-        url: '/use-cases/network-infrastructure-automation',
-      },
-      {
-        text: 'Multi-Platform Service Mesh',
-        url: '/use-cases/multi-platform-service-mesh',
-      },
-      {
-        text: 'Consul on Kubernetes',
-        url: '/consul-on-kubernetes',
-      },
-    ],
-  },
-  {
-    text: 'Enterprise',
-    url:
-      'https://www.hashicorp.com/products/consul/?utm_source=oss&utm_medium=header-nav&utm_campaign=consul',
-    type: 'outbound',
-  },
-  'divider',
-  {
-    text: 'Tutorials',
-    url: 'https://learn.hashicorp.com/consul',
-    type: 'outbound',
-  },
-  {
-    text: 'Docs',
-    url: '/docs',
-    type: 'inbound',
-  },
-  {
-    text: 'API',
-    url: '/api-docs',
-    type: 'inbound',
-  },
-  {
-    text: 'CLI',
-    url: '/commands',
-    type: 'inbound,',
-  },
-  {
-    text: 'Community',
-    url: '/community',
-    type: 'inbound',
-  },
-]
--- a/website/layouts/standard/index.tsx
+++ b/website/layouts/standard/index.tsx
@ -0,0 +1,76 @@
+import query from './query.graphql'
+import ProductSubnav from 'components/subnav'
+import Footer from 'components/footer'
+import { open } from '@hashicorp/react-consent-manager'
+
+export default function StandardLayout(props: Props): React.ReactElement {
+  const { useCaseNavItems } = props.data
+
+  return (
+    <>
+      <ProductSubnav
+        menuItems={[
+          { text: 'Overview', url: '/' },
+          {
+            text: 'Use Cases',
+            submenu: [
+              { text: 'Consul on Kubernetes', url: '/consul-on-kubernetes' },
+              ...useCaseNavItems.map((item) => {
+                return {
+                  text: item.text,
+                  url: `/use-cases/${item.url}`,
+                }
+              }),
+            ].sort((a, b) => a.text.localeCompare(b.text)),
+          },
+          {
+            text: 'Enterprise',
+            url:
+              'https://www.hashicorp.com/products/consul/?utm_source=oss&utm_medium=header-nav&utm_campaign=consul',
+            type: 'outbound',
+          },
+          'divider',
+          {
+            text: 'Tutorials',
+            url: 'https://learn.hashicorp.com/consul',
+            type: 'outbound',
+          },
+          {
+            text: 'Docs',
+            url: '/docs',
+            type: 'inbound',
+          },
+          {
+            text: 'API',
+            url: '/api-docs',
+            type: 'inbound',
+          },
+          {
+            text: 'CLI',
+            url: '/commands',
+            type: 'inbound,',
+          },
+          {
+            text: 'Community',
+            url: '/community',
+            type: 'inbound',
+          },
+        ]}
+      />
+      {props.children}
+      <Footer openConsentManager={open} />
+    </>
+  )
+}
+
+StandardLayout.rivetParams = {
+  query,
+  dependencies: [],
+}
+
+interface Props {
+  children: React.ReactChildren
+  data: {
+    useCaseNavItems: Array<{ url: string; text: string }>
+  }
+}
--- a/website/layouts/standard/query.graphql
+++ b/website/layouts/standard/query.graphql
@ -0,0 +1,6 @@
+query UseCasesQuery {
+  useCaseNavItems: allConsulUseCases {
+    url: slug
+    text: heroHeading
+  }
+}
--- a/website/lib/utils.ts
+++ b/website/lib/utils.ts
@ -0,0 +1,11 @@
+export const isInternalLink = (link: string): boolean => {
+  if (
+    link.startsWith('/') ||
+    link.startsWith('#') ||
+    link.startsWith('https://consul.io') ||
+    link.startsWith('https://www.consul.io')
+  ) {
+    return true
+  }
+  return false
+}
--- a/website/next.config.js
+++ b/website/next.config.js
@ -2,7 +2,12 @@ const withHashicorp = require('@hashicorp/platform-nextjs-plugin')
 const redirects = require('./redirects.next')

 module.exports = withHashicorp({
+  dato: {
+    // This token is safe to be in this public repository, it only has access to content that is publicly viewable on the website
+    token: '88b4984480dad56295a8aadae6caad',
+  },
  nextOptimizedImages: true,
+  transpileModules: ['@hashicorp/flight-icons'],
 })({
  svgo: { plugins: [{ removeViewBox: false }] },
  rewrites: () => [
@ -19,4 +24,8 @@ module.exports = withHashicorp({
    BUGSNAG_CLIENT_KEY: '01625078d856ef022c88f0c78d2364f1',
    BUGSNAG_SERVER_KEY: 'be8ed0d0fc887d547284cce9e98e60e5',
  },
+  images: {
+    domains: ['www.datocms-assets.com'],
+    disableStaticImages: true,
+  },
 })
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -4,8 +4,10 @@
  "version": "0.0.1",
  "author": "HashiCorp",
  "dependencies": {
+    "@hashicorp/flight-icons": "^1.3.0",
    "@hashicorp/mktg-global-styles": "^4.0.0",
    "@hashicorp/mktg-logos": "^1.2.0",
+    "@hashicorp/nextjs-scripts": "^19.0.3",
    "@hashicorp/platform-analytics": "^0.2.0",
    "@hashicorp/platform-code-highlighting": "^0.1.2",
    "@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
@ -33,19 +35,22 @@
    "@hashicorp/react-search": "^6.1.1",
    "@hashicorp/react-section-header": "^5.0.4",
    "@hashicorp/react-stepped-feature-list": "^4.0.3",
-    "@hashicorp/react-subnav": "^9.2.2",
+    "@hashicorp/react-subnav": "^9.3.0",
    "@hashicorp/react-tabs": "^7.0.1",
    "@hashicorp/react-text-split": "^4.0.0",
    "@hashicorp/react-text-split-with-code": "^3.3.8",
    "@hashicorp/react-text-split-with-image": "^4.2.5",
    "@hashicorp/react-use-cases": "^5.0.0",
    "@hashicorp/react-vertical-text-block-list": "^7.0.0",
+    "@reach/dialog": "^0.16.2",
    "ci": "^2.1.1",
+    "framer-motion": "^5.3.3",
    "next": "^11.1.2",
    "next-mdx-remote": "3.0.1",
    "next-remote-watch": "1.0.0",
    "nuka-carousel": "4.7.7",
    "react": "^17.0.2",
+    "react-datocms": "^1.6.6",
    "react-device-detect": "1.17.0",
    "react-dom": "^17.0.2",
    "react-player": "^2.9.0"
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@ -4,27 +4,28 @@ import '@hashicorp/platform-util/nprogress/style.css'
 import useFathomAnalytics from '@hashicorp/platform-analytics'
 import Router from 'next/router'
 import Head from 'next/head'
+import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
 import NProgress from '@hashicorp/platform-util/nprogress'
 import { ErrorBoundary } from '@hashicorp/platform-runtime-error-monitoring'
 import createConsentManager from '@hashicorp/react-consent-manager/loader'
 import useAnchorLinkAnalytics from '@hashicorp/platform-util/anchor-link-analytics'
 import HashiHead from '@hashicorp/react-head'
-import HashiStackMenu from '@hashicorp/react-hashi-stack-menu'
 import AlertBanner from '@hashicorp/react-alert-banner'
-import Footer from '../components/footer'
-import ProductSubnav from '../components/subnav'
 import alertBannerData, { ALERT_BANNER_ACTIVE } from '../data/alert-banner'
 import Error from './_error'
+import StandardLayout from 'layouts/standard'

 NProgress({ Router })
-const { ConsentManager, openConsentManager } = createConsentManager({
+const { ConsentManager } = createConsentManager({
  preset: 'oss',
 })

-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps, layoutData }) {
  useFathomAnalytics()
  useAnchorLinkAnalytics()

+  const Layout = Component.layout ?? StandardLayout
+
  return (
    <ErrorBoundary FallbackComponent={Error}>
      <HashiHead
@ -44,13 +45,27 @@ export default function App({ Component, pageProps }) {
      {ALERT_BANNER_ACTIVE && (
        <AlertBanner {...alertBannerData} product="consul" hideOnMobile />
      )}
-      <HashiStackMenu />
-      <ProductSubnav />
-      <div className="content">
-        <Component {...pageProps} />
-      </div>
-      <Footer openConsentManager={openConsentManager} />
+      <Layout {...(layoutData && { data: layoutData })}>
+        <div className="content">
+          <Component {...pageProps} />
+        </div>
+      </Layout>
      <ConsentManager />
    </ErrorBoundary>
  )
 }
+
+App.getInitialProps = async ({ Component, ctx }) => {
+  const layoutQuery = Component.layout
+    ? Component.layout?.rivetParams ?? null
+    : StandardLayout.rivetParams
+
+  const layoutData = layoutQuery ? await rivetQuery(layoutQuery) : null
+
+  let pageProps = {}
+
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx)
+  }
+  return { pageProps, layoutData }
+}
--- a/website/pages/_document.js
+++ b/website/pages/_document.js
@ -9,7 +9,7 @@ export default class MyDocument extends Document {

  render() {
    return (
-      <Html>
+      <Html lang="en">
        <Head>
          <HashiHead />
        </Head>
--- a/website/pages/home/img/cloud/hcp.jpg
+++ b/website/pages/home/img/cloud/hcp.jpg
--- a/website/pages/home/img/cloud/hcs.jpg
+++ b/website/pages/home/img/cloud/hcs.jpg
--- a/website/pages/home/img/extend-mesh-transparent.png
+++ b/website/pages/home/img/extend-mesh-transparent.png
--- a/website/pages/home/img/hcp-consul.svg
+++ b/website/pages/home/img/hcp-consul.svg
--- a/website/pages/home/img/hcp_consul.svg
+++ b/website/pages/home/img/hcp_consul.svg
--- a/website/pages/home/img/kubernetes/communication-arrows.svg
+++ b/website/pages/home/img/kubernetes/communication-arrows.svg
@ -1 +0,0 @@
-<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39.3 25.03l5.64-5.17-5.64-5.17M20.03 34.9l5.17 5.64 5.17-5.64M11.1 14.69l-5.64 5.17 5.64 5.17" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.45 2a1.25 1.25 0 00-2.5 0h2.5zM6.4 21.11h18.8v-2.5H6.4v2.5zm18.8 0H44v-2.5H25.2v2.5zm-1.25-1.25V39.6h2.5V19.86h-2.5zm2.5 0V2h-2.5v17.86h2.5z" fill="#000"/></svg>
--- a/website/pages/home/img/kubernetes/logo.svg
+++ b/website/pages/home/img/kubernetes/logo.svg
@ -1 +0,0 @@
-<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.46 21.044l.31-5.557a10.707 10.707 0 00-6.291 3.058l4.489 3.23.009-.004c.152.113.339.179.542.179a.926.926 0 00.919-.894l.022-.012zM32.639 18.548a10.78 10.78 0 00-6.253-3.06l.31 5.547.004.002c.008.191.074.38.2.541a.912.912 0 001.263.172l.015.007 4.46-3.21zM19.95 24.342l-4.1-3.721a11.043 11.043 0 00-1.524 6.906l5.253-1.54.005-.017a.92.92 0 00.477-.32.943.943 0 00-.116-1.285l.005-.023zM35.618 23.957a11.139 11.139 0 00-1.345-3.334l-4.076 3.703.002.012a.929.929 0 00-.292.495c-.11.49.18.978.653 1.11l.005.022 5.28 1.544a11.19 11.19 0 00-.227-3.552zM25.915 24.63h-1.68l-1.045 1.322.375 1.652 1.512.738 1.507-.736.375-1.652-1.044-1.324zM29.831 29.177a.905.905 0 00-.212-.016.909.909 0 00-.352.093.94.94 0 00-.446 1.21l-.007.01 2.11 5.172a10.898 10.898 0 004.35-5.548l-5.434-.932-.009.011zM21.375 29.91a.924.924 0 00-1.064-.71l-.009-.012-5.388.928a10.94 10.94 0 004.338 5.51l2.087-5.12-.016-.02a.938.938 0 00.052-.576zM25.474 31.52a.9.9 0 00-.43-.093.92.92 0 00-.78.493h-.004l-2.649 4.862a10.64 10.64 0 005.89.308 10.9 10.9 0 001.061-.3l-2.656-4.872h-.02a.921.921 0 00-.412-.398z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.626 1.135a3.317 3.317 0 012.895 0L43.96 9.586a3.366 3.366 0 011.804 2.277l4.308 18.996a3.378 3.378 0 01-.644 2.84L37.363 48.934a3.316 3.316 0 01-2.607 1.26l-19.354.005a3.317 3.317 0 01-2.607-1.263L.726 33.705a3.37 3.37 0 01-.642-2.84l4.302-18.997A3.338 3.338 0 016.19 9.591l17.436-8.456zm.407 7.313c0-.65.467-1.177 1.044-1.177.576 0 1.043.527 1.043 1.177l.002.107c.001.068.003.139 0 .194-.009.247-.047.456-.086.67-.02.109-.04.22-.056.337l-.007.056c-.085.715-.156 1.31-.111 1.866.035.246.162.363.284.476l.057.053c.003.077.015.332.024.474 3.319.299 6.4 1.84 8.664 4.248l.397-.287c.016 0 .034.002.054.004.15.011.4.03.58-.074.455-.312.871-.741 1.37-1.255l.036-.038c.079-.085.15-.168.222-.25.142-.165.28-.327.467-.49.047-.04.11-.09.168-.137l.064-.05c.501-.406 1.197-.363 1.557.094.36.457.244 1.157-.257 1.562l-.075.063c-.054.044-.11.091-.154.125-.195.146-.38.245-.567.346a7.559 7.559 0 00-.3.168h-.002c-.623.391-1.14.715-1.55 1.107-.169.182-.18.356-.191.523a3.148 3.148 0 01-.006.076l-.158.145c-.074.067-.156.14-.212.193a13.819 13.819 0 011.955 4.588c.379 1.67.438 3.34.219 4.945l.421.125.03.044c.084.124.228.34.421.415.532.17 1.13.234 1.85.31l.021.003c.118.01.23.014.342.019.212.008.421.017.66.062.053.01.123.028.19.045l.113.028c.615.15 1.01.724.883 1.29-.127.566-.728.91-1.347.774l-.008-.001a.08.08 0 01-.008-.001l-.02-.007-.1-.02a2.895 2.895 0 01-.17-.039 4.26 4.26 0 01-.622-.234c-.102-.045-.205-.09-.314-.133l-.032-.011c-.676-.246-1.24-.451-1.788-.532-.244-.02-.385.08-.52.175l-.064.045a15.51 15.51 0 00-.446-.08c-1 3.19-3.13 5.953-6.017 7.683.016.039.036.092.056.148.043.119.091.248.118.28l-.029.074c-.06.154-.124.313-.051.55.202.534.53 1.055.925 1.682.066.1.131.19.197.281.126.174.25.345.363.563a5.468 5.468 0 01.136.286c.268.582.071 1.253-.444 1.505-.52.254-1.165-.014-1.443-.6a8.499 8.499 0 00-.039-.08c-.032-.066-.066-.137-.09-.192a4.523 4.523 0 01-.21-.644c-.03-.107-.058-.214-.093-.327l-.01-.029c-.233-.691-.426-1.266-.706-1.752-.138-.207-.303-.257-.461-.306a3.562 3.562 0 01-.072-.022l-.104-.19-.12-.218a13.298 13.298 0 01-9.631-.025l-.236.435c-.176.048-.346.096-.45.222-.267.324-.421.785-.585 1.275-.07.207-.14.42-.223.629-.035.114-.065.223-.094.332-.055.208-.11.413-.207.639a4.149 4.149 0 01-.086.18 8.18 8.18 0 00-.043.089v.002l-.002.002c-.279.584-.923.851-1.441.598-.515-.252-.712-.923-.444-1.505.015-.03.03-.066.047-.103.03-.064.06-.132.087-.182a4.46 4.46 0 01.365-.568c.065-.09.13-.18.195-.279.395-.627.742-1.19.944-1.723.051-.178-.024-.42-.092-.6l.19-.461a13.749 13.749 0 01-6.02-7.628l-.455.08-.046-.028c-.131-.077-.347-.204-.553-.188-.55.08-1.113.286-1.79.532l-.03.011c-.108.042-.21.086-.31.13-.197.086-.39.17-.627.235a3.955 3.955 0 01-.27.06.066.066 0 00-.01.004.088.088 0 01-.01.004c-.004 0-.01 0-.015.002-.62.135-1.22-.209-1.347-.774-.128-.566.268-1.14.883-1.29l.015-.005.005-.001a.68.68 0 01.004-.001l.084-.02c.068-.017.14-.035.195-.046.238-.046.447-.054.66-.062.111-.005.223-.01.341-.02l.024-.002c.72-.076 1.316-.14 1.847-.31.15-.062.296-.255.407-.404.014-.02.028-.038.042-.055l.437-.13a13.871 13.871 0 012.13-9.556l-.335-.303-.008-.05c-.021-.148-.059-.407-.202-.561-.41-.391-.928-.716-1.552-1.107-.102-.06-.2-.114-.298-.167a4.27 4.27 0 01-.567-.347c-.045-.034-.101-.08-.155-.125l-.061-.051a.17.17 0 00-.008-.006l-.008-.006c-.5-.405-.616-1.104-.256-1.561a1 1 0 01.831-.374c.25.009.508.101.727.278l.063.05c.059.047.123.098.17.138.185.162.322.323.462.486.072.084.144.169.224.255l.018.018c.507.523.928.956 1.39 1.272.212.125.382.098.545.072l.074-.011c.06.045.262.192.377.271a13.38 13.38 0 018.706-4.248l.025-.448c.139-.137.294-.333.339-.548.045-.566-.028-1.174-.115-1.907l-.001-.015c-.017-.117-.037-.228-.057-.338a4.482 4.482 0 01-.086-.67 3.557 3.557 0 01.002-.27l-.001-.015-.001-.015z" fill="#000"/></svg>
--- a/website/pages/home/img/learn/Vault.svg
+++ b/website/pages/home/img/learn/Vault.svg
@ -1 +0,0 @@
-<svg id="LOGOS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162.34 162.34"><path d="M23.48,24.42l57.39,115.2,57.81-115.2ZM87.7,47.54h6.68v6.68H87.7ZM74.4,74.25H67.72V67.57H74.4Zm0-10H67.72V57.55H74.4Zm0-10H67.72V47.54H74.4Zm10,30.05H77.74V77.59h6.67Zm0-10H77.74V67.57h6.67Zm0-10H77.74V57.55h6.67Zm0-10H77.74V47.54h6.67Zm3.29,3.33h6.68v6.68H87.7Zm0,16.7V67.57h6.68v6.68Z"/></svg>
--- a/website/pages/home/img/learn/getting-started.svg
+++ b/website/pages/home/img/learn/getting-started.svg
@ -1,5 +0,0 @@
-<svg width="110" height="76" viewBox="0 0 110 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M109.219 27.1574C109.954 27.5264 109.954 28.5759 109.219 28.9449L92.4109 37.3797C92.1303 37.5629 91.9578 37.8769 91.9578 38.217V55.4843C91.9578 55.8631 91.7438 56.2093 91.405 56.3787L55.5494 74.3065C55.2679 74.4473 54.9365 74.4473 54.655 74.3065L24.942 59.45C24.6032 59.2806 24.3892 58.9343 24.3892 58.5556V40.7458L24.3893 40.7459L30.6969 37.4965C30.9794 37.351 31.3143 37.3484 31.599 37.4895L54.6563 48.9196C54.9372 49.0589 55.2672 49.0583 55.5476 48.9181L96.387 28.4984C96.7556 28.3141 96.7556 27.7882 96.387 27.6039L55.5477 7.18425C55.2672 7.04401 54.9372 7.04346 54.6562 7.18276L5.96154 31.3272L0.864731 28.9287C0.109161 28.5731 0.0964234 27.5029 0.843316 27.1295L54.6543 0.223981C54.9363 0.0829866 55.2682 0.0832301 55.55 0.224637L109.219 27.1574Z" fill="var(--gray-2, #343536)"/>
-<path opacity="0.5" d="M5.96143 31.3271L54.6561 7.18261C54.937 7.04331 55.2671 7.04386 55.5475 7.1841L96.3869 27.6038C96.7555 27.7881 96.7555 28.314 96.3869 28.4982L55.5475 48.9179C55.267 49.0582 54.9371 49.0587 54.6561 48.9195L31.1461 37.2649L24.3892 40.7457L5.96143 31.3271Z" fill="white"/>
-<path d="M38.781 22.3855C38.4888 22.2158 38.1307 22.2052 37.829 22.3572L12.044 35.3481C11.7046 35.5191 11.4915 35.8676 11.4939 36.2476L11.715 70.9796C11.7172 71.3225 11.8949 71.6403 12.1858 71.8218L17.4823 75.1248C17.8153 75.3325 18.2468 75.0931 18.2468 74.7006V39.416C18.2468 39.2272 18.3532 39.0544 18.5219 38.9695L43.8356 26.2145C44.1902 26.0358 44.2051 25.5349 43.8617 25.3356L38.781 22.3855Z" fill="var(--consul, #dc477d)"/>
-</svg>
--- a/website/pages/home/img/learn/kubernetes.svg
+++ b/website/pages/home/img/learn/kubernetes.svg
@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Kubernetes</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M1,9 L3.05,9.1 C3.29494666,6.88707306 4.45549438,4.87787483 6.25,3.56 L5.13,1.84 C4.86,1.36 5,0.75 5.5,0.47 C6,0.2 6.59,0.36 6.87,0.84 L7.8,2.66 C9.84293475,1.78170549 12.1570653,1.78170549 14.2,2.66 L15.13,0.84 C15.41,0.36 16,0.2 16.5,0.47 C17,0.75 17.14,1.36 16.87,1.84 L15.75,3.56 C17.5445056,4.87787483 18.7050533,6.88707306 18.95,9.1 L21,9 C21.5522847,9 22,9.44771525 22,10 C22,10.5522847 21.5522847,11 21,11 L18.95,10.9 C18.7050533,13.1129269 17.5445056,15.1221252 15.75,16.44 L16.87,18.16 C17.14,18.64 17,19.25 16.5,19.53 C16,19.8 15.41,19.64 15.13,19.16 L14.2,17.34 C12.1570653,18.2182945 9.84293475,18.2182945 7.8,17.34 L6.87,19.16 C6.59,19.64 6,19.8 5.5,19.53 C5,19.25 4.86,18.64 5.13,18.16 L6.25,16.44 C4.45549438,15.1221252 3.29494666,13.1129269 3.05,10.9 L1,11 C0.44771525,11 0,10.5522847 0,10 C0,9.44771525 0.44771525,9 1,9 M8.07,9.35 C8.2,8.74 8.53,8.2 9,7.79 L7.34,5.25 C6.08536596,6.21292056 5.2622262,7.63274679 5.05,9.2 L8.07,9.35 M11,7 C11.32,7 11.62,7.05 11.9,7.14 L13.28,4.45 C12.58,4.16 11.81,4 11,4 C10.19,4 9.42,4.16 8.72,4.45 L10.1,7.14 C10.38,7.05 10.68,7 11,7 M13.93,9.35 L16.95,9.2 C16.7377738,7.63274679 15.914634,6.21292056 14.66,5.25 L13,7.79 C13.47,8.2 13.8,8.74 13.93,9.35 M13.93,10.65 C13.8,11.26 13.47,11.8 13,12.21 L14.66,14.75 C15.914634,13.7870794 16.7377738,12.3672532 16.95,10.8 L13.93,10.65 M11,13 C10.68,13 10.38,12.95 10.09,12.86 L8.72,15.55 C9.42,15.84 10.19,16 11,16 C11.81,16 12.58,15.84 13.28,15.55 L11.91,12.86 C11.62,12.95 11.32,13 11,13 M8.07,10.65 L5.05,10.8 C5.27,12.4 6.11,13.81 7.34,14.75 L9,12.21 C8.53,11.8 8.2,11.26 8.07,10.65 L8.07,10.65 Z" id="Shape" fill="#C72C71"></path>
-    </g>
-</svg>
--- a/website/pages/home/img/multi-datacenter-transparent.png
+++ b/website/pages/home/img/multi-datacenter-transparent.png
--- a/website/pages/home/img/quotes/barclays-logo.svg
+++ b/website/pages/home/img/quotes/barclays-logo.svg
--- a/website/pages/home/img/quotes/citadel-logo.svg
+++ b/website/pages/home/img/quotes/citadel-logo.svg
@ -1,15 +0,0 @@
-<svg width="284" height="36" viewBox="0 0 284 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.4298 35C13.7314 34.8801 12.9943 34.8002 12.2959 34.6403C6.90301 33.5612 3.21721 30.3238 1.19973 25.088C0.578963 23.5293 0.268579 21.8507 0.113388 20.172C-0.235792 16.4551 0.190988 12.858 1.8205 9.50071C4.14836 4.66463 7.91175 1.58713 12.9943 0.428076C16.8352 -0.45121 20.5598 0.0284001 24.0904 1.82694C24.7112 2.14668 25.2932 2.06674 25.9139 2.10671C26.0303 2.10671 26.1079 2.10671 26.3019 2.10671C26.6511 5.02434 26.9615 7.90201 27.3106 10.8196C27.0003 10.8196 26.6511 10.8196 26.3407 10.8196C25.6035 8.86123 24.75 6.98275 23.4697 5.30412C21.8402 3.1059 19.7839 1.66707 17.1068 1.3873C14.5074 1.10752 12.1407 1.82694 10.1232 3.58551C7.75656 5.62386 6.55382 8.38162 5.81667 11.3792C5.1571 14.1769 5.00191 16.9746 5.2347 19.8123C5.50628 22.9698 6.35983 25.9673 8.33852 28.4453C10.2008 30.8034 12.6451 32.2422 15.6325 32.6819C20.0555 33.3613 25.0216 30.4037 26.7675 25.6476C26.8839 25.3678 26.9615 25.128 27.1167 24.8083C27.427 24.8882 27.7374 24.9681 28.0866 25.0481C28.0478 25.2479 28.009 25.4478 27.9702 25.6076C27.1943 28.0057 26.0303 30.124 24.2068 31.8426C22.6937 33.2414 20.909 34.1607 18.9303 34.6003C18.1932 34.7602 17.456 34.8401 16.7577 34.96C15.9041 35 15.1669 35 14.4298 35Z" transform="translate(83.1855)" fill="#092E6E"/>
-<path d="M26.4213 23.7407C26.3825 23.9006 26.3437 24.0605 26.3049 24.2203C26.2661 25.6991 26.2273 27.138 26.1497 28.6168C26.1109 30.1355 26.0333 31.6543 25.9945 33.213C17.3426 33.213 8.69071 33.213 0.0387978 33.213C0.0387978 32.8933 0.0387978 32.5735 0.0387978 32.2138C0.543169 32.1739 1.08633 32.1339 1.6295 32.054C2.40545 31.8941 3.22021 31.7742 3.95737 31.4944C4.81092 31.1747 5.1989 30.4553 5.1989 29.496C5.1989 20.903 5.1989 12.31 5.1989 3.71698C5.1989 2.71779 4.77213 1.99838 3.84098 1.63867C3.10382 1.3589 2.28907 1.23899 1.51311 1.07912C1.04754 0.999189 0.543179 0.999189 9.47212e-06 0.959221C9.47212e-06 0.639481 9.47212e-06 0.359708 9.47212e-06 -1.9058e-08C4.84974 -1.9058e-08 9.69945 -1.9058e-08 14.588 -1.9058e-08C14.588 0.279773 14.588 0.599513 14.588 0.919253C13.618 1.03916 12.6481 1.15906 11.6781 1.3589C11.329 1.43883 10.9798 1.5987 10.6306 1.75857C9.89344 2.15825 9.73825 2.87766 9.66065 3.63705C9.66065 3.83688 9.66065 3.99675 9.66065 4.19659C9.66065 13.1094 9.66065 21.9821 9.66065 30.8949C9.66065 31.0947 9.66065 31.2946 9.66065 31.5344C9.85464 31.5344 10.0098 31.5744 10.1262 31.5744C12.1049 31.5744 14.1224 31.6543 16.1011 31.5344C18.3902 31.4145 20.5241 30.815 22.1148 28.9765C23.2399 27.6975 23.9383 26.1787 24.559 24.58C24.8306 23.9006 25.0634 23.1812 25.2962 22.5017C25.6841 22.5017 25.9945 22.5017 26.3437 22.5017C26.4213 22.9014 26.4213 23.341 26.4213 23.7407Z" transform="translate(257.579 0.907684)" fill="#092E6E"/>
-<path d="M0 6.09856e-07C21.6492 6.09856e-07 43.2596 6.09856e-07 64.9087 6.09856e-07C64.9087 3.1974 64.9087 6.35484 64.9087 9.55224C43.2984 9.55224 21.688 9.55224 0 9.55224C0 6.39481 0 3.23737 0 6.09856e-07Z" transform="translate(0 24.5285)" fill="#092E6E"/>
-<path d="M-4.73606e-06 33.2791C-4.73606e-06 32.8794 -4.73606e-06 32.5197 -4.73606e-06 32.16C0.737154 32.0401 1.43551 31.9602 2.13387 31.8003C2.44426 31.7204 2.75465 31.6005 3.06503 31.4806C3.95738 31.1208 4.34536 30.3615 4.34536 29.4422C4.34536 27.3239 4.34536 25.1657 4.34536 23.0474C4.34536 16.6926 4.34536 10.3377 4.34536 3.98289C4.34536 2.70393 3.91858 1.98451 2.75464 1.6248C1.90109 1.34503 0.969943 1.18516 0.0387954 0.985322C0.0387954 0.745517 0.0387954 0.425777 0.0387954 0.0261012C0.232785 0.0261012 0.465574 0.0261012 0.659563 0.0261012C5.3153 0.0261012 10.0098 -0.0538338 14.6656 0.0660688C18.6617 0.185971 22.3863 1.30506 25.5289 4.02286C27.8956 6.0612 29.3312 8.65909 30.0295 11.7366C30.5339 13.9748 30.6503 16.2529 30.3787 18.5311C29.9907 21.6086 29.0596 24.4862 27.2361 27.0042C25.2574 29.762 22.5803 31.4806 19.4377 32.4398C17.5366 33.0393 15.5579 33.2791 13.5792 33.2791C9.27267 33.2791 4.96612 33.2791 0.698363 33.2791C0.504374 33.2791 0.27158 33.2791 -4.73606e-06 33.2791ZM8.8847 31.6804C10.3202 31.6804 11.7169 31.7603 13.0749 31.6404C14.6656 31.5205 16.2563 31.4006 17.7694 31.0409C20.9508 30.2815 23.1623 28.3231 24.2098 25.0857C24.8694 23.0474 25.141 20.9691 25.2186 18.8508C25.2962 17.0123 25.1798 15.1738 25.141 13.3353C25.1022 11.7366 24.7918 10.2178 24.2874 8.73903C23.6667 6.70068 22.6191 4.98208 20.912 3.66315C18.8557 2.06445 16.4503 1.54487 13.9672 1.385C12.4153 1.30506 10.8634 1.34503 9.31147 1.34503C9.15628 1.34503 8.9623 1.385 8.8071 1.385C8.8847 11.4568 8.8847 21.5286 8.8847 31.6804Z" transform="translate(192.166 0.881592)" fill="#092E6E"/>
-<path d="M31.3098 9.55224C20.8344 9.55224 10.4366 9.55224 0 9.55224C0 6.35484 0 3.1974 0 1.52464e-07C10.4366 1.52464e-07 20.8344 1.52464e-07 31.3098 1.52464e-07C31.3098 3.15744 31.3098 6.35484 31.3098 9.55224Z" transform="translate(0 12.6182)" fill="#092E6E"/>
-<path d="M-5.92008e-07 9.55224C-5.92008e-07 6.35484 -5.92008e-07 3.1974 -5.92008e-07 1.52464e-07C10.4366 1.52464e-07 20.8344 1.52464e-07 31.271 1.52464e-07C31.271 3.15744 31.271 6.35484 31.271 9.55224C20.8732 9.55224 10.4754 9.55224 -5.92008e-07 9.55224Z" transform="translate(33.5989 12.6182)" fill="#092E6E"/>
-<path d="M-9.47212e-06 33.253C-9.47212e-06 32.8933 -9.47212e-06 32.5735 -9.47212e-06 32.2938C1.04753 32.1339 2.05629 32.054 3.02624 31.8142C4.30657 31.5344 5.19892 30.9349 5.16012 29.0564C5.12132 20.7032 5.16012 12.35 5.16012 3.99675C5.16012 2.59789 4.65574 1.79854 3.33662 1.4788C2.25028 1.19903 1.12513 1.07912 -9.47212e-06 0.879286C-9.47212e-06 0.639481 -9.47212e-06 0.359708 -9.47212e-06 1.9058e-08C8.6907 1.9058e-08 17.3814 1.9058e-08 26.1885 1.9058e-08C26.1885 2.39805 26.1885 4.7961 26.1885 7.23412C25.9557 7.23412 25.6453 7.27409 25.2962 7.27409C25.0634 6.63461 24.8306 5.99513 24.559 5.39562C24.0935 4.31649 23.5503 3.23737 22.6191 2.47799C21.8432 1.83851 20.912 1.4788 19.9809 1.43883C16.5667 1.31893 13.1524 1.27896 9.69944 1.23899C9.69944 5.95516 9.69944 10.5514 9.69944 15.2676C10.7082 15.2676 11.7557 15.3076 12.7645 15.2676C13.5404 15.2276 14.3164 15.1877 15.0536 15.0278C16.4115 14.748 17.459 13.9087 18.041 12.6297C18.4678 11.6705 18.7782 10.6713 19.1273 9.71211C19.2049 9.51227 19.2437 9.3524 19.2825 9.1126C19.5929 9.1126 19.8645 9.1126 20.1361 9.1126C20.1361 13.6289 20.1361 18.1453 20.1361 22.7016C19.8645 22.7016 19.5929 22.7016 19.2825 22.7016C19.0885 22.0221 18.8945 21.3027 18.6229 20.6233C18.1962 19.4242 17.7306 18.2652 16.6055 17.5857C15.9847 17.226 15.2863 16.8663 14.588 16.7864C12.9585 16.6265 11.329 16.6265 9.66066 16.5865C9.66066 21.5825 9.66066 26.4985 9.66066 31.4944C9.85464 31.4944 10.0098 31.5344 10.2038 31.5344C13.4241 31.5344 16.6831 31.5744 19.9033 31.4944C21.494 31.4545 23.0847 31.1747 24.3262 30.0156C25.1798 29.2163 25.7229 28.1771 26.1885 27.098C26.4213 26.5784 26.6153 26.0189 26.8481 25.4194C27.1585 25.4593 27.4689 25.4593 27.8568 25.4993C27.7792 28.0972 27.7016 30.6151 27.5853 33.213C18.429 33.253 9.23387 33.253 -9.47212e-06 33.253Z" transform="translate(224.872 0.867706)" fill="#092E6E"/>
-<path d="M20.718 21.4226C16.9934 21.4226 13.3076 21.4226 9.46667 21.4226C8.61311 24.0205 7.72076 26.6584 6.86721 29.2962C6.71202 29.7758 6.75082 30.3753 6.82842 30.9349C6.94481 31.6143 7.41038 32.0939 8.03114 32.3337C8.7295 32.6135 9.42786 32.7734 10.165 32.9732C10.2814 33.0132 10.4366 33.0532 10.5918 33.0532C10.5918 33.3729 10.5918 33.6926 10.5918 34.0124C7.0612 34.0124 3.5694 34.0124 2.36803e-06 34.0124C2.36803e-06 33.6926 2.36803e-06 33.3729 2.36803e-06 33.1731C0.814756 32.7734 1.62951 32.4536 2.36667 32.014C3.53061 31.2546 4.38415 30.1355 4.92732 28.8566C5.89726 26.6983 6.78961 24.4601 7.64316 22.2619C10.5142 14.9479 13.3077 7.6338 16.1399 0.31974C16.1787 0.199838 16.2175 0.119903 16.2951 1.19113e-09C16.7995 1.19113e-09 17.3426 1.19113e-09 17.8858 1.19113e-09C18.7006 2.27815 19.5153 4.5563 20.2913 6.83445C22.9295 14.2684 25.5678 21.7423 28.2448 29.1763C28.6328 30.2954 29.1372 31.4145 30.2235 32.014C30.9607 32.4137 31.7366 32.6935 32.5902 33.0532C32.5902 33.253 32.5902 33.6127 32.5902 34.0523C28.1672 34.0523 23.7443 34.0523 19.2825 34.0523C19.2825 33.7726 19.2825 33.4928 19.2825 33.1731C20.0973 33.0532 20.912 32.9333 21.7268 32.7734C21.8432 32.7334 21.9984 32.6935 22.1148 32.6535C23.4727 32.2138 23.9383 31.4145 23.5115 30.0156C22.8519 27.8574 22.1147 25.6991 21.4164 23.5809C21.1836 22.8215 20.9508 22.142 20.718 21.4226ZM20.2137 20.0237C18.623 15.3475 17.071 10.6713 15.5191 6.0351C15.4415 6.0351 15.4027 6.0351 15.3251 6.0351C13.5792 10.6713 11.8333 15.3475 10.0486 20.0237C13.5016 20.0237 16.7995 20.0237 20.2137 20.0237Z" transform="translate(158.14 0.0683899)" fill="#092E6E"/>
-<path d="M27.8568 1.9058e-08C27.9732 2.43802 28.0508 4.7961 28.1672 7.23412C27.7792 7.23412 27.4689 7.23412 27.2361 7.23412C26.6153 6.11503 26.0721 4.95598 25.4126 3.91682C24.4814 2.43802 23.1235 1.55873 21.3776 1.43883C19.7093 1.31893 18.041 1.31893 16.2951 1.23899C16.2951 1.55873 16.2951 1.75857 16.2951 1.99838C16.2951 11.071 16.2951 20.1436 16.2951 29.2562C16.2951 30.4153 16.7607 31.1747 17.847 31.5344C18.623 31.7742 19.4377 31.8941 20.2525 32.054C20.7568 32.1339 21.2612 32.1739 21.8044 32.2138C21.8044 32.5336 21.8044 32.8533 21.8044 33.213C16.6831 33.213 11.5229 33.213 6.36284 33.213C6.36284 32.8933 6.36284 32.5736 6.36284 32.2138C6.86721 32.1739 7.41038 32.0939 7.95355 32.054C9.00109 31.9341 10.0098 31.8142 10.9022 31.2147C11.4842 30.8549 11.7557 30.3354 11.7557 29.6559C11.7557 28.0572 11.7557 26.4985 11.7557 24.8998C11.7557 17.3059 11.7557 9.71211 11.7557 2.11828C11.7557 1.87847 11.7557 1.63867 11.7557 1.31893C10.7858 1.31893 9.85465 1.27896 8.9623 1.31893C7.99235 1.3589 6.98361 1.3589 6.01366 1.51877C4.50055 1.75857 3.4142 2.71779 2.63825 4.03672C2.01748 5.07588 1.51311 6.19497 0.931145 7.31406C0.698358 7.31406 0.387978 7.31406 0 7.31406C0.0775956 4.87604 0.193994 2.47799 0.271589 0.0399675C9.50547 -2.08447e-08 18.6617 1.9058e-08 27.8568 1.9058e-08Z" transform="translate(132.883 0.867706)" fill="#092E6E"/>
-<path d="M14.976 32.2138C14.976 32.5336 14.976 32.8533 14.976 33.213C10.0098 33.213 5.00492 33.213 0 33.213C0 32.8933 0 32.5336 0 32.2538C1.04754 32.0939 2.05628 31.974 3.10383 31.8142C3.41421 31.7742 3.72459 31.6543 3.99617 31.5344C4.69453 31.2146 5.16011 30.6551 5.1989 29.8158C5.1989 29.4561 5.2765 29.1363 5.2765 28.7766C5.2765 20.6632 5.2765 12.5498 5.2765 4.4364C5.2765 3.99675 5.2377 3.55711 5.1601 3.11747C5.04371 2.43802 4.65574 1.91844 4.03497 1.7186C3.22022 1.43883 2.36667 1.23899 1.55191 1.07912C1.04754 0.999189 0.543169 0.999189 0 0.959221C0 0.639481 0 0.359708 0 -1.9058e-08C4.96612 -1.9058e-08 9.93224 -1.9058e-08 14.976 -1.9058e-08C14.976 0.31974 14.976 0.599513 14.976 0.919253C13.9672 1.03916 12.9973 1.15906 12.0273 1.3589C11.4066 1.4788 10.747 1.67864 10.3202 2.23818C10.0874 2.55792 9.93224 2.99757 9.81584 3.43721C9.73825 3.79692 9.77705 4.15662 9.77705 4.51633C9.77705 12.5898 9.81585 20.7032 9.77705 28.7766C9.77705 30.8949 10.2426 31.5744 12.5317 31.9341C13.3464 32.014 14.1612 32.0939 14.976 32.2138Z" transform="translate(114.066 0.907684)" fill="#092E6E"/>
-<path d="M-2.36803e-06 9.55224C-2.36803e-06 6.35484 -2.36803e-06 3.1974 -2.36803e-06 1.9058e-08C4.30656 1.9058e-08 8.61312 1.9058e-08 12.9585 1.9058e-08C12.9585 3.15744 12.9585 6.31487 12.9585 9.55224C8.65191 9.55224 4.34535 9.55224 -2.36803e-06 9.55224Z" transform="translate(51.9503 0.667908)" fill="#092E6E"/>
-<path d="M12.9197 9.55224C8.61311 9.55224 4.34536 9.55224 0 9.55224C0 6.35484 0 3.1974 0 1.9058e-08C4.26776 1.9058e-08 8.57432 1.9058e-08 12.9197 1.9058e-08C12.9197 3.15744 12.9197 6.31487 12.9197 9.55224Z" transform="translate(0 0.667908)" fill="#092E6E"/>
-<path d="M12.8421 1.9058e-08C12.8421 3.1974 12.8421 6.35484 12.8421 9.55224C8.53552 9.55224 4.26776 9.55224 -5.92008e-07 9.55224C-5.92008e-07 6.35484 -5.92008e-07 3.1974 -5.92008e-07 1.9058e-08C4.26776 1.9058e-08 8.53552 1.9058e-08 12.8421 1.9058e-08Z" transform="translate(26.0333 0.667908)" fill="#092E6E"/>
-</svg>
--- a/website/pages/home/img/quotes/criteo-logo.svg
+++ b/website/pages/home/img/quotes/criteo-logo.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 581.68 158.94"><defs><style>.cls-1,.cls-2{fill:#2c2f33;}.cls-1,.cls-3,.cls-4,.cls-5{fill-rule:evenodd;}.cls-3{fill:url(#Sunrise);}.cls-4{fill:url(#Sunrise-2);}.cls-5{fill:url(#Sunrise-3);}</style><linearGradient id="Sunrise" x1="73.6" y1="12.19" x2="619.56" y2="12.19" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f68c21"/><stop offset="1" stop-color="#f16324"/></linearGradient><linearGradient id="Sunrise-2" x1="73.6" y1="146.75" x2="619.56" y2="146.75" xlink:href="#Sunrise"/><linearGradient id="Sunrise-3" x1="73.6" y1="79.22" x2="619.56" y2="79.22" xlink:href="#Sunrise"/></defs><title>18_Criteo_Brand_Logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M117.52,157.79H101.68V63.42h15.84V75c5.61-8,15-12.6,26-12.6a44.27,44.27,0,0,1,5.65.37l1.16.16V79.82l-1.68-.42a37.23,37.23,0,0,0-8.48-.84c-13.3,0-22.6,9.8-22.6,23.84Z"/><path class="cls-1" d="M301.29,157.63c15.6,0,26.86-4.85,36.52-15.71l.83-.93-10.12-10.43-1,1c-7.16,7.6-13.75,12-26.26,12-17.57,0-29.06-11.3-30.25-29.59h71.25l.09-1.26c.17-2.63.17-5.54.17-5.67,0-12.86-4-24.62-11.22-33.11-7.64-9-18.15-13.73-30.39-13.73-27,0-45.81,20.55-45.81,50v.7C255.13,138.85,273.68,157.63,301.29,157.63ZM272,100c1.58-13.8,14.27-24.79,29-24.79,13.66,0,24.85,11,25.53,24.79Z"/><rect class="cls-2" x="165.7" y="63.42" width="15.84" height="94.38"/><path class="cls-1" d="M235.8,158.94c-4.85,0-12-.5-17.67-4.83-6.18-4.68-9.32-12.89-9.32-24.38V41.5h15.84V63.35h20.6V78.29h-20.6v51.44c0,11.88,4.2,14.26,11,14.26a46.16,46.16,0,0,0,8.07-.52l1.56-.25v14.55l-1,.25A33.15,33.15,0,0,1,235.8,158.94Z"/><path class="cls-1" d="M401,158.94a47.8,47.8,0,0,0,34.12-14,49.55,49.55,0,0,0,14.21-35.39,49.55,49.55,0,0,0-14.21-35.39,48.64,48.64,0,0,0-68.23,0,49.54,49.54,0,0,0-14.2,35.39A49.54,49.54,0,0,0,366.91,145,47.81,47.81,0,0,0,401,158.94Zm0-83.78A31.53,31.53,0,0,1,424.28,85c5.94,6.32,9.22,15.07,9.22,24.62s-3.28,18.29-9.22,24.61a32.49,32.49,0,0,1-46.51,0c-5.94-6.32-9.22-15.06-9.22-24.61s3.28-18.3,9.22-24.62A31.52,31.52,0,0,1,401,75.16Z"/><path class="cls-1" d="M48.65,158.94a48.32,48.32,0,0,1-34.38-14A49.42,49.42,0,0,1,0,109.58,49.4,49.4,0,0,1,14.27,74.19a48.33,48.33,0,0,1,34.38-14c13.8,0,25.77,4.81,34.61,13.92l.85.88L74.42,86.49l-1-1.09C67,78.7,58.47,75.16,48.65,75.16A32,32,0,0,0,25.15,85c-6,6.32-9.31,15.06-9.31,24.61s3.31,18.28,9.31,24.6A32,32,0,0,0,48.65,144c9.82,0,18.37-3.54,24.73-10.23l1-1.1,9.69,11.48-.85.88C74.42,154.13,62.46,158.94,48.65,158.94Z"/><path class="cls-3" d="M173.63,24.37a12.19,12.19,0,1,1,12.1-12.18A12.17,12.17,0,0,1,173.63,24.37Z"/><path class="cls-4" d="M569.58,158.94a12.19,12.19,0,1,1,12.1-12.2A12.17,12.17,0,0,1,569.58,158.94Z"/><path class="cls-5" d="M535.12,141h-32.2a15.08,15.08,0,0,1-15.07-15.08V31.15A24.68,24.68,0,0,0,463.18,6.48H208.29v11H461.81a15.07,15.07,0,0,1,15.07,15.07v94.77A24.68,24.68,0,0,0,501.55,152h33.57Z"/></g></g></svg>
--- a/website/pages/home/img/quotes/mercedes-logo.svg
+++ b/website/pages/home/img/quotes/mercedes-logo.svg
--- a/website/pages/home/img/service-splitter@2x.png
+++ b/website/pages/home/img/service-splitter@2x.png
--- a/website/pages/home/img/service-to-service-transparent.png
+++ b/website/pages/home/img/service-to-service-transparent.png
--- a/website/pages/home/img/stack/consul-and-nomad.svg
+++ b/website/pages/home/img/stack/consul-and-nomad.svg
@ -1,12 +0,0 @@
-<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M97.9999 4.58887L81.2565 14.0944V33.1055L97.9999 42.6111L114.743 33.1055V14.0944L97.9999 4.58887ZM105.46 25.4945L101 28.0283L95.6099 25.1438V31.2011L90.5432 34.3609V21.6956L94.5632 19.2766L100.14 22.1676V15.9824L105.473 12.839L105.46 25.4945Z" fill="#00CA8E"/>
-<path d="M24.1766 43.187C21.2049 43.1894 18.2776 42.4665 15.6487 41.0811C13.0197 39.6957 10.7686 37.6896 9.09079 35.237C7.41293 32.7843 6.35902 29.9593 6.02053 27.007C5.68203 24.0547 6.06918 21.0644 7.14838 18.2956C8.22758 15.5268 9.9662 13.0633 12.2134 11.1188C14.4605 9.17436 17.1483 7.8077 20.0433 7.13748C22.9384 6.46726 25.9533 6.51373 28.8264 7.27286C31.6994 8.03199 34.3438 9.48084 36.5299 11.4937V11.4937L32.1966 16.027C30.4738 14.4709 28.3367 13.4479 26.0442 13.082C23.7517 12.7161 21.4023 13.023 19.2807 13.9656C17.1592 14.9081 15.3566 16.4459 14.0914 18.3923C12.8263 20.3388 12.1529 22.6105 12.1529 24.932C12.1529 27.2535 12.8263 29.5252 14.0914 31.4716C15.3566 33.4181 17.1592 34.9558 19.2807 35.8984C21.4023 36.841 23.7517 37.1479 26.0442 36.782C28.3367 36.4161 30.4738 35.3931 32.1966 33.837L36.5299 38.3703C33.1637 41.4712 28.7533 43.1909 24.1766 43.187V43.187Z" fill="#E03875"/>
-<path d="M38.8693 34.0539C38.5733 34.0539 38.284 33.9661 38.0378 33.8016C37.7917 33.6372 37.5999 33.4034 37.4866 33.13C37.3733 32.8565 37.3437 32.5556 37.4014 32.2652C37.4592 31.9749 37.6017 31.7082 37.811 31.4989C38.0204 31.2896 38.287 31.1471 38.5774 31.0893C38.8677 31.0316 39.1686 31.0612 39.4421 31.1745C39.7156 31.2878 39.9493 31.4796 40.1138 31.7257C40.2782 31.9718 40.366 32.2612 40.366 32.5572C40.3651 32.9539 40.2072 33.3341 39.9267 33.6145C39.6462 33.895 39.266 34.053 38.8693 34.0539V34.0539Z" fill="#E03875"/>
-<path d="M24.0599 28.8836C23.2765 28.8869 22.5097 28.6576 21.8568 28.2247C21.2039 27.7918 20.6941 27.1748 20.3922 26.4519C20.0903 25.7291 20.0097 24.9328 20.1608 24.1641C20.3118 23.3954 20.6877 22.6888 21.2407 22.134C21.7937 21.5791 22.499 21.2008 23.2672 21.0472C24.0354 20.8935 24.8319 20.9714 25.5558 21.2709C26.2797 21.5704 26.8984 22.078 27.3335 22.7295C27.7686 23.3809 28.0005 24.1469 27.9999 24.9303C27.9981 25.976 27.5829 26.9785 26.8448 27.7191C26.1066 28.4597 25.1055 28.8784 24.0599 28.8836V28.8836Z" fill="#E03875"/>
-<path d="M40.5865 28.9537C40.2905 28.9537 40.0011 28.8659 39.755 28.7014C39.5089 28.537 39.317 28.3032 39.2038 28.0297C39.0905 27.7563 39.0609 27.4553 39.1186 27.165C39.1764 26.8747 39.3189 26.608 39.5282 26.3987C39.7375 26.1894 40.0042 26.0468 40.2945 25.9891C40.5849 25.9313 40.8858 25.961 41.1593 26.0743C41.4327 26.1875 41.6665 26.3794 41.8309 26.6255C41.9954 26.8716 42.0832 27.161 42.0832 27.457C42.0823 27.8537 41.9243 28.2338 41.6438 28.5143C41.3634 28.7948 40.9832 28.9528 40.5865 28.9537Z" fill="#E03875"/>
-<path d="M36.1365 28.7668C35.8398 28.7668 35.5498 28.6785 35.3033 28.5133C35.0568 28.3481 34.865 28.1134 34.7523 27.8389C34.6395 27.5645 34.6108 27.2627 34.67 26.9719C34.7291 26.6812 34.8733 26.4145 35.0843 26.2059C35.2952 25.9973 35.5635 25.856 35.8549 25.8002C36.1463 25.7443 36.4477 25.7764 36.7209 25.8922C36.9941 26.008 37.2267 26.2025 37.3891 26.4508C37.5515 26.6991 37.6365 26.9901 37.6332 27.2868C37.6288 27.6808 37.4692 28.0572 37.189 28.3343C36.9088 28.6114 36.5306 28.7668 36.1365 28.7668V28.7668Z" fill="#E03875"/>
-<path d="M40.5865 23.9103C40.2905 23.9103 40.0011 23.8226 39.755 23.6581C39.5089 23.4936 39.317 23.2599 39.2038 22.9864C39.0905 22.7129 39.0609 22.412 39.1186 22.1217C39.1764 21.8314 39.3189 21.5647 39.5282 21.3554C39.7375 21.146 40.0042 21.0035 40.2945 20.9458C40.5849 20.888 40.8858 20.9176 41.1593 21.0309C41.4327 21.1442 41.6665 21.336 41.8309 21.5822C41.9954 21.8283 42.0832 22.1176 42.0832 22.4137C42.0823 22.8103 41.9243 23.1905 41.6438 23.471C41.3634 23.7515 40.9832 23.9094 40.5865 23.9103Z" fill="#E03875"/>
-<path d="M36.1366 24.0805C35.8406 24.0805 35.5512 23.9927 35.3051 23.8283C35.059 23.6638 34.8672 23.4301 34.7539 23.1566C34.6406 22.8831 34.611 22.5822 34.6687 22.2918C34.7265 22.0015 34.869 21.7348 35.0783 21.5255C35.2876 21.3162 35.5543 21.1737 35.8446 21.1159C36.135 21.0582 36.4359 21.0878 36.7094 21.2011C36.9829 21.3144 37.2166 21.5062 37.3811 21.7523C37.5455 21.9984 37.6333 22.2878 37.6333 22.5838C37.6333 22.9808 37.4756 23.3615 37.1949 23.6421C36.9142 23.9228 36.5336 24.0805 36.1366 24.0805V24.0805Z" fill="#E03875"/>
-<path d="M38.9561 18.8768C38.6599 18.8774 38.3702 18.7902 38.1236 18.6261C37.8771 18.4621 37.6847 18.2286 37.5709 17.9552C37.4572 17.6817 37.427 17.3807 37.4844 17.0902C37.5418 16.7996 37.6841 16.5326 37.8932 16.323C38.1024 16.1133 38.3691 15.9704 38.6595 15.9124C38.9499 15.8544 39.251 15.8839 39.5247 15.997C39.7984 16.1102 40.0323 16.302 40.1969 16.5482C40.3615 16.7944 40.4494 17.0839 40.4494 17.3801C40.4494 17.7765 40.2922 18.1566 40.0122 18.4372C39.7322 18.7178 39.3524 18.8759 38.9561 18.8768Z" fill="#E03875"/>
-<line x1="61.5" y1="1" x2="61.5" y2="49" stroke="black"/>
-</svg>
--- a/website/pages/home/img/stack/consul-and-terraform.svg
+++ b/website/pages/home/img/stack/consul-and-terraform.svg
@ -1,15 +0,0 @@
-<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5057 11.8063L103.492 18.0406V30.5158L92.5057 24.2782V11.8063Z" fill="#7B42BC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M104.697 18.0406V30.5158L115.68 24.2782V11.8063L104.697 18.0406Z" fill="#7B42BC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M80.3193 4.84448V17.3164L91.3027 23.554V11.0821L80.3193 4.84448Z" fill="#7B42BC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5057 38.1172L103.489 44.3548V31.9648V31.8829L92.5057 25.6453V38.1172Z" fill="#7B42BC"/>
-<path d="M24.1766 42.187C21.205 42.1894 18.2776 41.4665 15.6487 40.0811C13.0198 38.6957 10.7687 36.6896 9.09081 34.237C7.41295 31.7843 6.35904 28.9593 6.02055 26.007C5.68205 23.0547 6.06921 20.0644 7.1484 17.2956C8.2276 14.5268 9.96623 12.0633 12.2134 10.1188C14.4605 8.17436 17.1483 6.8077 20.0434 6.13748C22.9384 5.46726 25.9533 5.51373 28.8264 6.27286C31.6994 7.03199 34.3438 8.48084 36.5299 10.4937V10.4937L32.1966 15.027C30.4738 13.4709 28.3367 12.4479 26.0442 12.082C23.7517 11.7161 21.4023 12.023 19.2808 12.9656C17.1592 13.9081 15.3566 15.4459 14.0914 17.3923C12.8263 19.3388 12.1529 21.6105 12.1529 23.932C12.1529 26.2535 12.8263 28.5252 14.0914 30.4716C15.3566 32.4181 17.1592 33.9558 19.2808 34.8984C21.4023 35.841 23.7517 36.1479 26.0442 35.782C28.3367 35.4161 30.4738 34.3931 32.1966 32.837L36.5299 37.3703C33.1638 40.4712 28.7534 42.1909 24.1766 42.187V42.187Z" fill="#E03875"/>
-<path d="M38.8694 33.0539C38.5734 33.0539 38.284 32.9661 38.0379 32.8016C37.7918 32.6372 37.5999 32.4034 37.4866 32.13C37.3734 31.8565 37.3437 31.5556 37.4015 31.2652C37.4592 30.9749 37.6018 30.7082 37.8111 30.4989C38.0204 30.2896 38.2871 30.1471 38.5774 30.0893C38.8677 30.0316 39.1687 30.0612 39.4421 30.1745C39.7156 30.2878 39.9494 30.4796 40.1138 30.7257C40.2783 30.9718 40.3661 31.2612 40.3661 31.5572C40.3652 31.9539 40.2072 32.3341 39.9267 32.6145C39.6462 32.895 39.2661 33.053 38.8694 33.0539V33.0539Z" fill="#E03875"/>
-<path d="M24.0599 27.8836C23.2765 27.8869 22.5098 27.6576 21.8568 27.2247C21.2039 26.7918 20.6942 26.1748 20.3923 25.4519C20.0903 24.7291 20.0098 23.9328 20.1608 23.1641C20.3119 22.3954 20.6877 21.6888 21.2407 21.134C21.7938 20.5791 22.4991 20.2008 23.2672 20.0472C24.0354 19.8935 24.8319 19.9714 25.5558 20.2709C26.2797 20.5704 26.8984 21.078 27.3336 21.7295C27.7687 22.3809 28.0006 23.1469 27.9999 23.9303C27.9982 24.976 27.5829 25.9785 26.8448 26.7191C26.1067 27.4597 25.1056 27.8784 24.0599 27.8836V27.8836Z" fill="#E03875"/>
-<path d="M40.5865 27.9537C40.2905 27.9537 40.0011 27.8659 39.755 27.7014C39.5089 27.537 39.317 27.3032 39.2038 27.0297C39.0905 26.7563 39.0609 26.4553 39.1186 26.165C39.1764 25.8747 39.3189 25.608 39.5282 25.3987C39.7375 25.1894 40.0042 25.0468 40.2945 24.9891C40.5849 24.9313 40.8858 24.961 41.1593 25.0743C41.4327 25.1875 41.6665 25.3794 41.8309 25.6255C41.9954 25.8716 42.0832 26.161 42.0832 26.457C42.0823 26.8537 41.9243 27.2338 41.6438 27.5143C41.3634 27.7948 40.9832 27.9528 40.5865 27.9537Z" fill="#E03875"/>
-<path d="M36.1365 27.7668C35.8398 27.7668 35.5498 27.6785 35.3033 27.5133C35.0569 27.3481 34.8651 27.1134 34.7523 26.8389C34.6395 26.5645 34.6109 26.2627 34.67 25.9719C34.7291 25.6812 34.8733 25.4145 35.0843 25.2059C35.2953 24.9973 35.5635 24.856 35.8549 24.8002C36.1463 24.7443 36.4478 24.7764 36.7209 24.8922C36.9941 25.008 37.2267 25.2025 37.3891 25.4508C37.5516 25.6991 37.6365 25.9901 37.6332 26.2868C37.6288 26.6808 37.4692 27.0572 37.189 27.3343C36.9088 27.6114 36.5306 27.7668 36.1365 27.7668V27.7668Z" fill="#E03875"/>
-<path d="M40.5865 22.9103C40.2905 22.9103 40.0011 22.8226 39.755 22.6581C39.5089 22.4936 39.317 22.2599 39.2038 21.9864C39.0905 21.7129 39.0609 21.412 39.1186 21.1217C39.1764 20.8314 39.3189 20.5647 39.5282 20.3554C39.7375 20.146 40.0042 20.0035 40.2945 19.9458C40.5849 19.888 40.8858 19.9176 41.1593 20.0309C41.4327 20.1442 41.6665 20.336 41.8309 20.5822C41.9954 20.8283 42.0832 21.1176 42.0832 21.4137C42.0823 21.8103 41.9243 22.1905 41.6438 22.471C41.3634 22.7515 40.9832 22.9094 40.5865 22.9103Z" fill="#E03875"/>
-<path d="M36.1366 23.0805C35.8406 23.0805 35.5513 22.9927 35.3051 22.8283C35.059 22.6638 34.8672 22.4301 34.7539 22.1566C34.6406 21.8831 34.611 21.5822 34.6687 21.2918C34.7265 21.0015 34.869 20.7348 35.0783 20.5255C35.2877 20.3162 35.5543 20.1737 35.8447 20.1159C36.135 20.0582 36.4359 20.0878 36.7094 20.2011C36.9829 20.3144 37.2166 20.5062 37.3811 20.7523C37.5455 20.9984 37.6333 21.2878 37.6333 21.5838C37.6333 21.9808 37.4756 22.3615 37.1949 22.6421C36.9143 22.9228 36.5336 23.0805 36.1366 23.0805V23.0805Z" fill="#E03875"/>
-<path d="M38.9561 17.8768C38.6599 17.8774 38.3702 17.7902 38.1236 17.6261C37.8771 17.4621 37.6847 17.2286 37.5709 16.9552C37.4572 16.6817 37.427 16.3807 37.4844 16.0902C37.5418 15.7996 37.6841 15.5326 37.8932 15.323C38.1024 15.1133 38.3691 14.9704 38.6595 14.9124C38.9499 14.8544 39.251 14.8839 39.5247 14.997C39.7984 15.1102 40.0323 15.302 40.1969 15.5482C40.3615 15.7944 40.4494 16.0839 40.4494 16.3801C40.4494 16.7765 40.2922 17.1566 40.0122 17.4372C39.7322 17.7178 39.3524 17.8759 38.9561 17.8768Z" fill="#E03875"/>
-<line x1="61.5" y1="2.18557e-08" x2="61.5" y2="48" stroke="black"/>
-</svg>
--- a/website/pages/home/img/stack/consul-and-vault.svg
+++ b/website/pages/home/img/stack/consul-and-vault.svg
@ -1,12 +0,0 @@
-<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M79.627 7.93225L97.9336 44.0698L116.374 7.93225H79.627ZM100.114 15.1827H102.244V17.2805H100.114V15.1827ZM95.8703 23.564H93.7403V21.4695H95.8703V23.564ZM95.8703 20.4206H93.7403V18.3261H95.8703V20.4206ZM95.8703 17.2805H93.7403V15.1827H95.8703V17.2805ZM99.067 26.7074H96.9336V24.5998H99.067V26.7074ZM99.067 23.564H96.9336V21.4695H99.067V23.564ZM99.067 20.4206H96.9336V18.3261H99.067V20.4206ZM99.067 17.2805H96.9336V15.1827H99.067V17.2805ZM100.114 18.3261H102.244V20.4206H100.114V18.3261ZM100.114 23.5705V21.4695H102.244V23.564L100.114 23.5705Z" fill="black"/>
-<path d="M24.1766 42.187C21.205 42.1894 18.2776 41.4665 15.6487 40.0811C13.0198 38.6957 10.7687 36.6896 9.09082 34.237C7.41296 31.7843 6.35905 28.9593 6.02056 26.007C5.68206 23.0547 6.06922 20.0644 7.14841 17.2956C8.22761 14.5268 9.96623 12.0633 12.2134 10.1188C14.4605 8.17436 17.1483 6.8077 20.0434 6.13748C22.9384 5.46726 25.9533 5.51373 28.8264 6.27286C31.6994 7.03199 34.3438 8.48084 36.5299 10.4937V10.4937L32.1966 15.027C30.4738 13.4709 28.3367 12.4479 26.0442 12.082C23.7517 11.7161 21.4023 12.023 19.2808 12.9656C17.1592 13.9081 15.3566 15.4459 14.0915 17.3923C12.8263 19.3388 12.1529 21.6105 12.1529 23.932C12.1529 26.2535 12.8263 28.5252 14.0915 30.4716C15.3566 32.4181 17.1592 33.9558 19.2808 34.8984C21.4023 35.841 23.7517 36.1479 26.0442 35.782C28.3367 35.4161 30.4738 34.3931 32.1966 32.837L36.5299 37.3703C33.1638 40.4712 28.7534 42.1909 24.1766 42.187V42.187Z" fill="#E03875"/>
-<path d="M38.8694 33.0539C38.5734 33.0539 38.284 32.9661 38.0379 32.8016C37.7918 32.6372 37.5999 32.4034 37.4867 32.13C37.3734 31.8565 37.3438 31.5556 37.4015 31.2652C37.4592 30.9749 37.6018 30.7082 37.8111 30.4989C38.0204 30.2896 38.2871 30.1471 38.5774 30.0893C38.8677 30.0316 39.1687 30.0612 39.4422 30.1745C39.7156 30.2878 39.9494 30.4796 40.1138 30.7257C40.2783 30.9718 40.3661 31.2612 40.3661 31.5572C40.3652 31.9539 40.2072 32.3341 39.9267 32.6145C39.6463 32.895 39.2661 33.053 38.8694 33.0539V33.0539Z" fill="#E03875"/>
-<path d="M24.0599 27.8836C23.2765 27.8869 22.5098 27.6576 21.8569 27.2247C21.2039 26.7918 20.6942 26.1748 20.3923 25.4519C20.0903 24.7291 20.0098 23.9328 20.1609 23.1641C20.3119 22.3954 20.6878 21.6888 21.2408 21.134C21.7938 20.5791 22.4991 20.2008 23.2673 20.0472C24.0355 19.8935 24.832 19.9714 25.5559 20.2709C26.2798 20.5704 26.8985 21.078 27.3336 21.7295C27.7687 22.3809 28.0006 23.1469 27.9999 23.9303C27.9982 24.976 27.583 25.9785 26.8448 26.7191C26.1067 27.4597 25.1056 27.8784 24.0599 27.8836V27.8836Z" fill="#E03875"/>
-<path d="M40.5865 27.9537C40.2905 27.9537 40.0011 27.8659 39.755 27.7014C39.5089 27.537 39.317 27.3032 39.2038 27.0297C39.0905 26.7563 39.0609 26.4553 39.1186 26.165C39.1764 25.8747 39.3189 25.608 39.5282 25.3987C39.7375 25.1894 40.0042 25.0468 40.2945 24.9891C40.5849 24.9313 40.8858 24.961 41.1593 25.0743C41.4327 25.1875 41.6665 25.3794 41.8309 25.6255C41.9954 25.8716 42.0832 26.161 42.0832 26.457C42.0823 26.8537 41.9243 27.2338 41.6438 27.5143C41.3634 27.7948 40.9832 27.9528 40.5865 27.9537Z" fill="#E03875"/>
-<path d="M36.1366 27.7668C35.8398 27.7668 35.5498 27.6785 35.3033 27.5133C35.0569 27.3481 34.8651 27.1134 34.7523 26.8389C34.6395 26.5645 34.6109 26.2627 34.67 25.9719C34.7291 25.6812 34.8733 25.4145 35.0843 25.2059C35.2953 24.9973 35.5635 24.856 35.8549 24.8002C36.1463 24.7443 36.4478 24.7764 36.721 24.8922C36.9941 25.008 37.2267 25.2025 37.3891 25.4508C37.5516 25.6991 37.6365 25.9901 37.6332 26.2868C37.6288 26.6808 37.4692 27.0572 37.189 27.3343C36.9088 27.6114 36.5306 27.7668 36.1366 27.7668V27.7668Z" fill="#E03875"/>
-<path d="M40.5865 22.9103C40.2905 22.9103 40.0011 22.8226 39.755 22.6581C39.5089 22.4936 39.317 22.2599 39.2038 21.9864C39.0905 21.7129 39.0609 21.412 39.1186 21.1217C39.1764 20.8314 39.3189 20.5647 39.5282 20.3554C39.7375 20.146 40.0042 20.0035 40.2945 19.9458C40.5849 19.888 40.8858 19.9176 41.1593 20.0309C41.4327 20.1442 41.6665 20.336 41.8309 20.5822C41.9954 20.8283 42.0832 21.1176 42.0832 21.4137C42.0823 21.8103 41.9243 22.1905 41.6438 22.471C41.3634 22.7515 40.9832 22.9094 40.5865 22.9103Z" fill="#E03875"/>
-<path d="M36.1367 23.0805C35.8406 23.0805 35.5513 22.9927 35.3051 22.8283C35.059 22.6638 34.8672 22.4301 34.7539 22.1566C34.6406 21.8831 34.611 21.5822 34.6687 21.2918C34.7265 21.0015 34.869 20.7348 35.0784 20.5255C35.2877 20.3162 35.5543 20.1737 35.8447 20.1159C36.135 20.0582 36.4359 20.0878 36.7094 20.2011C36.9829 20.3144 37.2166 20.5062 37.3811 20.7523C37.5455 20.9984 37.6333 21.2878 37.6333 21.5838C37.6333 21.9808 37.4756 22.3615 37.195 22.6421C36.9143 22.9228 36.5336 23.0805 36.1367 23.0805V23.0805Z" fill="#E03875"/>
-<path d="M38.9561 17.8768C38.6599 17.8774 38.3702 17.7902 38.1236 17.6261C37.8771 17.4621 37.6847 17.2286 37.5709 16.9552C37.4572 16.6817 37.427 16.3807 37.4844 16.0902C37.5418 15.7996 37.6841 15.5326 37.8932 15.323C38.1024 15.1133 38.3691 14.9704 38.6595 14.9124C38.9499 14.8544 39.251 14.8839 39.5247 14.997C39.7984 15.1102 40.0323 15.302 40.1969 15.5482C40.3615 15.7944 40.4494 16.0839 40.4494 16.3801C40.4494 16.7765 40.2922 17.1566 40.0122 17.4372C39.7322 17.7178 39.3524 17.8759 38.9561 17.8768Z" fill="#E03875"/>
-<line x1="61.5" y1="2.18557e-08" x2="61.5" y2="48" stroke="black"/>
-</svg>
--- a/website/pages/home/img/use-cases/discovery_health_checking.svg
+++ b/website/pages/home/img/use-cases/discovery_health_checking.svg
@ -1,29 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="80" height="80" fill="white"/>
-<rect x="5" y="5" width="44" height="44" rx="1.5" fill="white" fill-opacity="0.8"/>
-<rect x="5" y="5" width="44" height="44" rx="1.5" fill="url(#paint0_linear)" fill-opacity="0.3"/>
-<rect x="15" y="15" width="44" height="44" rx="1.5" fill="white" fill-opacity="0.8"/>
-<rect x="15" y="15" width="44" height="44" rx="1.5" fill="url(#paint1_linear)" fill-opacity="0.6"/>
-<rect x="25" y="25" width="44" height="44" rx="1.5" fill="url(#paint2_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48.25 52C44.7982 52 42 49.2018 42 45.75C42 42.2982 44.7982 39.5 48.25 39.5C51.7018 39.5 54.5 42.2982 54.5 45.75C54.5 49.2018 51.7018 52 48.25 52Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M39.5007 54.4993L43.834 50.166" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="61" cy="61" r="2" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear" x1="49" y1="5" x2="1.08771" y2="44.2207" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.583333" stop-color="#D4BCD9"/>
-<stop offset="0.9375" stop-color="#D1EBFF"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="59" y1="15" x2="11.0877" y2="54.2207" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.583333" stop-color="#D4BCD9"/>
-<stop offset="0.9375" stop-color="#D1EBFF"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="44.2" y1="69" x2="64.0472" y2="25.9033" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.359375" stop-color="#DC477D" stop-opacity="0.96"/>
-<stop offset="0.703125" stop-color="#DC477D" stop-opacity="0.88"/>
-<stop offset="1" stop-color="#DC477D" stop-opacity="0.7"/>
-</linearGradient>
-</defs>
-</svg>
--- a/website/pages/home/img/use-cases/network_automation.svg
+++ b/website/pages/home/img/use-cases/network_automation.svg
@ -1,24 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="80" height="80" fill="white"/>
-<rect x="7" y="7" width="40" height="40" rx="1.5" fill="white" fill-opacity="0.8"/>
-<rect x="7" y="7" width="40" height="40" rx="1.5" fill="url(#paint0_linear)" fill-opacity="0.6"/>
-<rect x="33" y="33" width="40" height="40" fill="#D1EBFF"/>
-<path d="M20.3084 54.1923C21.5889 52.2776 21.8492 49.9396 20.9792 47.8392C20.1091 45.7387 18.2446 44.2039 16.0125 43.8212C15.6687 43.7329 15.4017 43.459 15.3313 43.1036C15.0987 41.0852 15.0819 39.0515 15.2811 37.0026C15.2884 36.9282 15.3 36.8539 15.3249 36.7834C15.4322 36.4802 15.6566 36.2096 15.9157 36.1711C18.2037 35.7617 20.0295 34.2364 20.9119 32.1022C21.7942 29.968 21.5142 27.6231 20.2508 25.6856C20.0493 25.3845 20.11 24.9749 20.3179 24.735C21.576 23.1372 23.0197 21.6164 24.7304 20.3695C25.0309 20.1681 25.4131 20.1636 25.7185 20.3447C27.6325 21.6282 29.9686 21.891 32.0663 21.0221C34.1639 20.1533 35.6955 18.2884 36.0758 16.0546C36.1637 15.7106 36.4371 15.4435 36.792 15.3734C38.8083 15.1424 40.8399 15.1276 42.8871 15.3289C42.9616 15.3362 43.0359 15.3479 43.1065 15.373C43.4094 15.4807 43.6799 15.7056 43.7186 15.9649C44.1298 18.2554 45.6553 20.0844 47.7884 20.9696C49.9214 21.8548 52.2638 21.5767 54.1983 20.3139C54.4989 20.1125 54.9082 20.1737 55.1481 20.3819C56.7456 21.6428 58.2663 23.0892 59.5136 24.8027C59.7151 25.1038 59.72 25.4863 59.5393 25.7918C58.3627 27.5865 58.123 29.9928 58.993 32.0933C59.8631 34.1938 61.7276 35.7285 63.9597 36.1113C64.3035 36.1996 64.5705 36.4735 64.6409 36.8288C64.8736 38.8473 64.8903 40.881 64.6911 42.9299C64.6838 43.0043 64.6722 43.0786 64.6473 43.1491C64.5401 43.4522 64.3156 43.7229 64.0565 43.7614C61.7685 44.1708 59.9427 45.6961 59.0604 47.8303C58.178 49.9645 58.4581 52.3094 59.7214 54.2469C59.9229 54.548 59.8622 54.9576 59.6544 55.1975C58.3962 56.7953 56.9526 58.3161 55.2419 59.563C54.9747 59.742 54.5914 59.7869 54.341 59.6485C54.279 59.6142 54.2239 59.5682 54.1637 59.5307C52.2909 58.3627 49.9321 58.148 47.8676 59.0031C45.7699 59.872 44.2384 61.7368 43.8581 63.9707C43.7702 64.3147 43.4968 64.5818 43.1419 64.6519C41.1256 64.8828 39.0939 64.8977 37.0468 64.6964C36.9723 64.689 36.8979 64.6773 36.8274 64.6523C36.5245 64.5446 36.254 64.3197 36.2153 64.0604C35.8313 61.8355 34.2786 59.9409 32.1455 59.0557C30.4762 58.3629 28.631 58.3582 26.9922 59.037C26.5989 59.1999 26.1672 59.4556 25.7355 59.7113C25.435 59.9127 25.0256 59.8516 24.7202 59.6705C23.1228 58.4096 21.602 56.9632 20.3547 55.2497C20.1597 54.9459 20.1277 54.4978 20.3084 54.1923Z" fill="url(#paint1_linear)"/>
-<path d="M49.166 33.334V38.334H44.166" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30.834 46.666V41.666H35.834" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32.9258 37.5001C33.7848 35.0725 35.8293 33.2553 38.341 32.687C40.8527 32.1187 43.4803 32.8787 45.3008 34.7001L49.1674 38.3335" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30.834 41.666L34.7007 45.2993C36.5211 47.1207 39.1487 47.8808 41.6604 47.3125C44.1721 46.7442 46.2166 44.927 47.0756 42.4993" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear" x1="47" y1="7" x2="3.44337" y2="42.6552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.583333" stop-color="#D4BCD9"/>
-<stop offset="0.9375" stop-color="#D1EBFF"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="46.3591" y1="63.3389" x2="48.3688" y2="11.6235" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.359375" stop-color="#DC477D" stop-opacity="0.96"/>
-<stop offset="0.703125" stop-color="#DC477D" stop-opacity="0.88"/>
-<stop offset="1" stop-color="#DC477D" stop-opacity="0.7"/>
-</linearGradient>
-</defs>
-</svg>
--- a/website/pages/home/img/use-cases/service_mesh.svg
+++ b/website/pages/home/img/use-cases/service_mesh.svg
@ -1,24 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="80" height="80" fill="white"/>
-<circle cx="49" cy="27" r="18" fill="#D1EBFF"/>
-<rect x="4" y="19" width="40" height="40" rx="1.5" fill="url(#paint0_linear)" fill-opacity="0.75"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M76.1667 49C76.1667 61.1503 66.3169 71 54.1667 71H30.3333C20.2081 71 12 62.7919 12 52.6667C12 42.5414 20.2081 34.3333 30.3333 34.3333C32.2177 34.3333 34.0357 34.6176 35.7467 35.1457C36.3745 35.3394 37.063 35.1463 37.4918 34.6485C41.5263 29.9651 47.5002 27 54.1667 27C66.3169 27 76.1667 36.8497 76.1667 49Z" fill="url(#paint1_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40 54C38.3431 54 37 55.3431 37 57C37 58.6569 38.3431 60 40 60C41.6569 60 43 58.6569 43 57C43 55.3431 41.6569 54 40 54Z" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M52 47C50.3431 47 49 48.3431 49 50C49 51.6569 50.3431 53 52 53C53.6569 53 55 51.6569 55 50C55 48.3431 53.6569 47 52 47Z" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40 40C38.3431 40 37 41.3431 37 43C37 44.6569 38.3431 46 40 46C41.6569 46 43 44.6569 43 43C43 41.3431 41.6569 40 40 40Z" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M49.4102 48.4902L42.5802 44.5102" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M42.5902 55.4902L49.4102 51.5102" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<line x1="40.125" y1="46" x2="40.125" y2="54" stroke="white" stroke-width="1.75"/>
-<defs>
-<linearGradient id="paint0_linear" x1="4" y1="59" x2="42.3223" y2="24.7806" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D1EBFF"/>
-<stop offset="1" stop-color="#DC477D"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="40" y1="71" x2="57" y2="27" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DC477D"/>
-<stop offset="0.359375" stop-color="#DC477D" stop-opacity="0.96"/>
-<stop offset="0.703125" stop-color="#DC477D" stop-opacity="0.85"/>
-<stop offset="1" stop-color="#DC477D" stop-opacity="0.6"/>
-</linearGradient>
-</defs>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_arrows.svg
+++ b/website/pages/home/img/why-consul/consul_features_arrows.svg
@ -1,4 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M34.54 49.18C34.3996 49.1786 34.2607 49.1515 34.13 49.1C33.9957 49.0439 33.8735 48.9624 33.77 48.86L29.4 44.53C29.247 44.3795 29.1423 44.1869 29.0993 43.9766C29.0562 43.7664 29.0768 43.5481 29.1584 43.3496C29.2399 43.1511 29.3787 42.9814 29.5571 42.8621C29.7356 42.7429 29.9455 42.6795 30.16 42.68C30.4476 42.6777 30.7243 42.7892 30.93 42.99L33.42 45.48V34.73H22.7L25.1901 37.21C25.3918 37.4159 25.5065 37.6917 25.51 37.98C25.5078 38.1945 25.4423 38.4036 25.3218 38.5811C25.2012 38.7585 25.031 38.8964 24.8324 38.9776C24.6338 39.0587 24.4157 39.0795 24.2054 39.0372C23.9951 38.9949 23.8019 38.8916 23.65 38.74L19.32 34.41C19.2176 34.3066 19.1361 34.1843 19.08 34.05C18.9733 33.7871 18.9733 33.4929 19.08 33.23C19.1361 33.0957 19.2176 32.9734 19.32 32.87L23.65 28.54C23.8019 28.3884 23.9951 28.2851 24.2054 28.2428C24.4157 28.2005 24.6338 28.2213 24.8324 28.3024C25.031 28.3836 25.2012 28.5215 25.3218 28.699C25.4423 28.8764 25.5078 29.0855 25.51 29.3C25.5086 29.5887 25.3936 29.8653 25.1901 30.07L22.7 32.56H33.4601V22.08C33.4601 21.9382 33.488 21.7977 33.5423 21.6667C33.5965 21.5357 33.6761 21.4166 33.7764 21.3163C33.8767 21.216 33.9957 21.1365 34.1268 21.0822C34.2578 21.0279 34.3982 21 34.54 21C34.6819 21 34.8223 21.0279 34.9533 21.0822C35.0844 21.1365 35.2034 21.216 35.3037 21.3163C35.404 21.4166 35.4836 21.5357 35.5378 21.6667C35.5921 21.7977 35.6201 21.9382 35.6201 22.08V32.56H46.4L43.91 30.07C43.7091 29.8661 43.5965 29.5913 43.5965 29.305C43.5965 29.0187 43.7091 28.7439 43.91 28.54C44.1144 28.336 44.3913 28.2215 44.68 28.2215C44.9688 28.2215 45.2457 28.336 45.45 28.54L49.7801 32.87C49.8825 32.9734 49.964 33.0957 50.02 33.23C50.0745 33.3598 50.1026 33.4992 50.1026 33.64C50.1026 33.7808 50.0745 33.9202 50.02 34.05C49.964 34.1843 49.8825 34.3066 49.7801 34.41L45.4 38.74C45.2507 38.8812 45.0642 38.9768 44.8624 39.0157C44.6606 39.0546 44.4519 39.0351 44.2608 38.9595C44.0697 38.8839 43.9042 38.7553 43.7836 38.5889C43.663 38.4225 43.5924 38.2251 43.58 38.02C43.5799 37.7329 43.691 37.4569 43.8901 37.25L46.4 34.73H35.6201V45.48L38.11 43.02C38.317 42.821 38.593 42.7099 38.88 42.71C39.0946 42.7095 39.3045 42.7729 39.483 42.8921C39.6614 43.0114 39.8002 43.1811 39.8817 43.3796C39.9633 43.5781 39.9838 43.7964 39.9408 44.0066C39.8978 44.2169 39.7931 44.4095 39.6401 44.56L35.31 48.89C35.2066 48.9924 35.0844 49.0739 34.95 49.13C34.8175 49.1713 34.6786 49.1882 34.54 49.18Z" fill="black"/>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_cloud.svg
+++ b/website/pages/home/img/why-consul/consul_features_cloud.svg
@ -1,4 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M44.8072 31.82H42.7472C42.1372 29.4497 40.8744 27.298 39.1023 25.6098C37.3302 23.9215 35.1199 22.7643 32.7228 22.2698C30.3257 21.7752 27.838 21.9632 25.5424 22.8123C23.2468 23.6614 21.2356 25.1375 19.7372 27.0729C18.2389 29.0083 17.3137 31.3252 17.0668 33.7603C16.8198 36.1954 17.261 38.6509 18.3403 40.8477C19.4196 43.0444 21.0936 44.8943 23.1719 46.187C25.2503 47.4796 27.6497 48.1632 30.0972 48.16H44.8072C46.9741 48.16 49.0521 47.2992 50.5843 45.7671C52.1165 44.2349 52.9772 42.1568 52.9772 39.99C52.9772 37.8232 52.1165 35.7451 50.5843 34.2129C49.0521 32.6808 46.9741 31.82 44.8072 31.82Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_gear.svg
+++ b/website/pages/home/img/why-consul/consul_features_gear.svg
@ -1,11 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M50.9252 23.66C53.8689 23.66 56.2552 21.2737 56.2552 18.33C56.2552 15.3863 53.8689 13 50.9252 13C47.9815 13 45.5952 15.3863 45.5952 18.33C45.5952 21.2737 47.9815 23.66 50.9252 23.66Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M50.9252 57.5201C53.8689 57.5201 56.2552 55.1338 56.2552 52.1901C56.2552 49.2464 53.8689 46.8601 50.9252 46.8601C47.9815 46.8601 45.5952 49.2464 45.5952 52.1901C45.5952 55.1338 47.9815 57.5201 50.9252 57.5201Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21.7453 36.5201C23.0431 36.5201 24.0953 35.4679 24.0953 34.1701C24.0953 32.8722 23.0431 31.8201 21.7453 31.8201C20.4474 31.8201 19.3953 32.8722 19.3953 34.1701C19.3953 35.4679 20.4474 36.5201 21.7453 36.5201Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M27.5252 36.51C27.422 36.7457 27.3916 37.0068 27.438 37.2598C27.4843 37.5128 27.6052 37.7462 27.7852 37.93H27.8352C27.9806 38.0749 28.096 38.2472 28.1748 38.4368C28.2535 38.6264 28.294 38.8297 28.294 39.035C28.294 39.2403 28.2535 39.4436 28.1748 39.6333C28.096 39.8229 27.9806 39.9951 27.8352 40.14V40.14C27.691 40.2867 27.519 40.4031 27.3292 40.4826C27.1395 40.5621 26.9359 40.6031 26.7302 40.6031C26.5245 40.6031 26.3209 40.5621 26.1312 40.4826C25.9414 40.4031 25.7694 40.2867 25.6252 40.14V40.14C25.4398 39.9592 25.2047 39.8378 24.9499 39.7915C24.6952 39.7452 24.4323 39.776 24.1952 39.88C23.9644 39.9794 23.7676 40.1439 23.629 40.3536C23.4905 40.5632 23.4162 40.8087 23.4152 41.06V41.19C23.4325 41.4061 23.4048 41.6233 23.334 41.8282C23.2632 42.033 23.1508 42.2209 23.0038 42.3802C22.8568 42.5394 22.6784 42.6665 22.4798 42.7534C22.2813 42.8403 22.0669 42.8852 21.8502 42.8852C21.6335 42.8852 21.4191 42.8403 21.2206 42.7534C21.022 42.6665 20.8436 42.5394 20.6966 42.3802C20.5496 42.2209 20.4372 42.033 20.3664 41.8282C20.2955 41.6233 20.2679 41.4061 20.2852 41.19V41.12C20.2685 40.8599 20.1769 40.6102 20.0214 40.401C19.8659 40.1918 19.6532 40.0321 19.409 39.9412C19.1647 39.8503 18.8994 39.832 18.6449 39.8886C18.3905 39.9451 18.1579 40.0741 17.9752 40.26H17.9252C17.7799 40.4085 17.6065 40.5264 17.415 40.607C17.2235 40.6875 17.0179 40.729 16.8102 40.729C16.6025 40.729 16.3969 40.6875 16.2054 40.607C16.0139 40.5264 15.8405 40.4085 15.6952 40.26C15.5486 40.1158 15.4321 39.9438 15.3526 39.7541C15.2731 39.5643 15.2322 39.3607 15.2322 39.155C15.2322 38.9493 15.2731 38.7457 15.3526 38.556C15.4321 38.3663 15.5486 38.1943 15.6952 38.05V38.05C15.876 37.8647 15.9974 37.6295 16.0437 37.3747C16.09 37.12 16.0592 36.8572 15.9552 36.62C15.8559 36.3892 15.6913 36.1924 15.4816 36.0539C15.272 35.9153 15.0265 35.841 14.7752 35.84H14.6952C14.4792 35.8573 14.2619 35.8297 14.0571 35.7589C13.8522 35.688 13.6643 35.5756 13.505 35.4286C13.3458 35.2816 13.2187 35.1032 13.1318 34.9047C13.0449 34.7061 13 34.4917 13 34.275C13 34.0583 13.0449 33.8439 13.1318 33.6454C13.2187 33.4468 13.3458 33.2685 13.505 33.1214C13.6643 32.9744 13.8522 32.862 14.0571 32.7912C14.2619 32.7204 14.4792 32.6927 14.6952 32.71H14.7652C15.0241 32.707 15.2758 32.6249 15.4867 32.4747C15.6976 32.3246 15.8576 32.1136 15.9452 31.87C16.0608 31.6293 16.0989 31.3585 16.0541 31.0952C16.0093 30.8319 15.8839 30.589 15.6952 30.4V30.35C15.5498 30.2051 15.4344 30.0329 15.3556 29.8433C15.2769 29.6536 15.2364 29.4503 15.2364 29.245C15.2364 29.0397 15.2769 28.8364 15.3556 28.6468C15.4344 28.4572 15.5498 28.2849 15.6952 28.14V28.14C15.9896 27.8457 16.3889 27.6803 16.8052 27.6803C17.2215 27.6803 17.6208 27.8457 17.9152 28.14V28.14C18.1006 28.3208 18.3357 28.4422 18.5905 28.4885C18.8452 28.5349 19.1081 28.504 19.3452 28.4H19.4052C19.628 28.302 19.8186 28.143 19.9548 27.9412C20.0911 27.7395 20.1675 27.5033 20.1752 27.26V27.13C20.1579 26.914 20.1855 26.6967 20.2564 26.4919C20.3272 26.287 20.4396 26.0991 20.5866 25.9398C20.7336 25.7806 20.912 25.6535 21.1106 25.5666C21.3091 25.4797 21.5235 25.4348 21.7402 25.4348C21.9569 25.4348 22.1713 25.4797 22.3698 25.5666C22.5684 25.6535 22.7468 25.7806 22.8938 25.9398C23.0408 26.0991 23.1532 26.287 23.224 26.4919C23.2949 26.6967 23.3225 26.914 23.3052 27.13V27.2C23.3087 27.4533 23.3861 27.7 23.5279 27.9099C23.6698 28.1198 23.8698 28.2837 24.1035 28.3814C24.3372 28.4791 24.5944 28.5065 24.8434 28.46C25.0924 28.4136 25.3224 28.2954 25.5052 28.12L25.5552 28.07C25.7001 27.9246 25.8723 27.8092 26.062 27.7304C26.2516 27.6517 26.4549 27.6112 26.6602 27.6112C26.8655 27.6112 27.0688 27.6517 27.2584 27.7304C27.4481 27.8092 27.6203 27.9246 27.7652 28.07V28.07C28.0595 28.3644 28.2249 28.7637 28.2249 29.18C28.2249 29.5963 28.0595 29.9956 27.7652 30.29V30.29C27.5844 30.4754 27.463 30.7105 27.4167 30.9653C27.3704 31.2201 27.4012 31.4829 27.5052 31.72V31.78C27.6045 32.0108 27.7691 32.2076 27.9788 32.3462C28.1884 32.4847 28.4339 32.5591 28.6852 32.56H28.8152C29.0312 32.5427 29.2485 32.5704 29.4533 32.6412C29.6582 32.712 29.8461 32.8244 30.0054 32.9714C30.1646 33.1185 30.2917 33.2968 30.3786 33.4954C30.4655 33.6939 30.5104 33.9083 30.5104 34.125C30.5104 34.3417 30.4655 34.5561 30.3786 34.7547C30.2917 34.9532 30.1646 35.1316 30.0054 35.2786C29.8461 35.4256 29.6582 35.538 29.4533 35.6089C29.2485 35.6797 29.0312 35.7073 28.8152 35.69H28.6952C28.4411 35.6962 28.1945 35.7774 27.9863 35.9232C27.7782 36.0691 27.6177 36.2733 27.5252 36.51Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M36.2554 29.54C37.0838 29.54 37.7554 28.8685 37.7554 28.04C37.7554 27.2116 37.0838 26.54 36.2554 26.54C35.4269 26.54 34.7554 27.2116 34.7554 28.04C34.7554 28.8685 35.4269 29.54 36.2554 29.54Z" fill="black"/>
-<path d="M36.2554 42.54C37.0838 42.54 37.7554 41.8685 37.7554 41.04C37.7554 40.2116 37.0838 39.54 36.2554 39.54C35.4269 39.54 34.7554 40.2116 34.7554 41.04C34.7554 41.8685 35.4269 42.54 36.2554 42.54Z" fill="black"/>
-<path d="M41.2554 25.54C42.0838 25.54 42.7554 24.8685 42.7554 24.04C42.7554 23.2116 42.0838 22.54 41.2554 22.54C40.4269 22.54 39.7554 23.2116 39.7554 24.04C39.7554 24.8685 40.4269 25.54 41.2554 25.54Z" fill="black"/>
-<path d="M41.2554 46.54C42.0838 46.54 42.7554 45.8685 42.7554 45.04C42.7554 44.2116 42.0838 43.54 41.2554 43.54C40.4269 43.54 39.7554 44.2116 39.7554 45.04C39.7554 45.8685 40.4269 46.54 41.2554 46.54Z" fill="black"/>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_health.svg
+++ b/website/pages/home/img/why-consul/consul_features_health.svg
@ -1,4 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M48 30.5H39.5V22H30.5V30.5H22V39.5H30.5V48H39.5V39.5H48V30.5Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_kub.svg
+++ b/website/pages/home/img/why-consul/consul_features_kub.svg
--- a/website/pages/home/img/why-consul/consul_features_plus.svg
+++ b/website/pages/home/img/why-consul/consul_features_plus.svg
@ -1,4 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M48 30.5H39.5V22H30.5V30.5H22V39.5H30.5V48H39.5V39.5H48V30.5Z" fill="black"/>
-</svg>
--- a/website/pages/home/img/why-consul/consul_features_world.svg
+++ b/website/pages/home/img/why-consul/consul_features_world.svg
@ -1,5 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="70" height="70" rx="2" fill="#ffe9f1"/>
-<path d="M34.58 50.16C43.1846 50.16 50.16 43.1846 50.16 34.58C50.16 25.9754 43.1846 19 34.58 19C25.9754 19 19 25.9754 19 34.58C19 43.1846 25.9754 50.16 34.58 50.16Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19 34.58H50.17H19ZM34.59 19C38.4853 23.2673 40.6991 28.8035 40.82 34.58C40.6991 40.3565 38.4853 45.8927 34.59 50.16C30.6879 45.8962 28.4701 40.3586 28.35 34.58C28.4701 28.8014 30.6879 23.2638 34.59 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@ -1,473 +0,0 @@
-import LearnCallout from '@hashicorp/react-learn-callout'
-import SteppedFeatureList from '@hashicorp/react-stepped-feature-list'
-import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
-import CodeBlock from '@hashicorp/react-code-block'
-import UseCases from '@hashicorp/react-use-cases'
-import CalloutBlade from 'components/callout-blade'
-import CaseStudyCarousel from 'components/case-study-carousel'
-import HomepageHero from 'components/homepage-hero'
-import StaticDynamicDiagram from 'components/static-dynamic-diagram'
-import highlightString from '@hashicorp/platform-code-highlighting/highlight-string'
-
-export default function HomePage({ serviceMeshIngressGatewayCode }) {
-  return (
-    <div className="p-home">
-      <HomepageHero
-        alert={{
-          url: 'https://www.hashicorp.com/blog/announcing-hashicorp-consul-api-gateway',
-          text: 'Introducing the Consul API Gateway',
-          tag: 'Blog',
-        }}
-        title="Service Mesh for any runtime or cloud"
-        description="Consul automates networking for simple and secure application delivery."
-        links={[
-          {
-            external: false,
-            title: 'Try HCP Consul',
-            url:
-              'https://portal.cloud.hashicorp.com/sign-up?utm_source=consul_io&utm_content=consul_hero',
-          },
-          {
-            external: false,
-            title: 'Get Started',
-            url: 'https://learn.hashicorp.com/consul',
-          },
-        ]}
-        uiVideo={{
-          name: 'UI',
-          playbackRate: 2,
-          srcType: 'mp4',
-          url: 'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
-        }}
-        cliVideo={{
-          name: 'CLI',
-          playbackRate: 2,
-          srcType: 'mp4',
-          url: 'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
-        }}
-      />
-      <StaticDynamicDiagram
-        heading="Service-based networking for dynamic infrastructure"
-        diagrams={{
-          beforeHeadline: 'Static Infrastructure',
-          // @TODO - Convert to a slot w/ JSX markup
-          beforeContent:
-            '<p class="g-type-body-small">Private datacenters with static IPs, primarily north-south traffic, protected by perimeter security and coarse-grained network segments.</p>\n' +
-            '<h4 class="g-type-label"><a class="__permalink-h" href="#traditional-approach" aria-label="traditional approach permalink">»</a><a class="__target-h" id="traditional-approach" aria-hidden></a>Traditional Approach</h4>\n' +
-            '<ul>\n' +
-            '<li class="g-type-body-small">Static connectivity between services</li>\n' +
-            '<li class="g-type-body-small">A fleet of load balancers to route traffic</li>\n' +
-            '<li class="g-type-body-small">Ticket driven processes to update network middleware</li>\n' +
-            '<li class="g-type-body-small">Firewall rule sprawl to constrict access and insecure flat network zones</li>\n' +
-            '</ul>',
-          beforeImage: {
-            url:
-              'https://www.datocms-assets.com/2885/1559693517-static-infrastructure.png',
-            alt: 'Static Infrastructure',
-          },
-          afterHeadline: 'Dynamic Infrastructure',
-          // @TODO - Convert to a slot w/ JSX markup
-          afterContent:
-            '<p class="g-type-body-small">Multiple clouds and private datacenters with dynamic IPs, ephemeral containers, dominated by east-west traffic, no clear network perimeters.</p>\n' +
-            '<h4 class="g-type-label"><a class="__permalink-h" href="#consul-approach" aria-label="consul approach permalink">»</a><a class="__target-h" id="consul-approach" aria-hidden></a>Consul Approach</h4>\n' +
-            '<ul>\n' +
-            '<li class="g-type-body-small">Centralized registry to locate any service</li>\n' +
-            '<li class="g-type-body-small">Services discovered and connected with centralized policies</li>\n' +
-            '<li class="g-type-body-small">Network automated in service of applications</li>\n' +
-            '<li class="g-type-body-small">Zero trust network enforced by identity-based security policies</li>\n' +
-            '</ul>',
-          afterImage: {
-            url:
-              'https://www.datocms-assets.com/2885/1559693545-dynamic-infrastructure-4x.png',
-            alt: 'Dynamic Infrastructure',
-          },
-        }}
-      />
-
-      <div className="use-cases g-grid-container">
-        <h2 className="g-type-display-2">Why Consul?</h2>
-        <UseCases
-          items={[
-            {
-              title: 'Microservice Based Networking',
-              description:
-                'Simplify developer interactions, improve observability, and enable robust traffic management with Consul service mesh.',
-              image: {
-                url: require('./img/use-cases/service_mesh.svg?url'),
-                format: 'svg',
-              },
-              link: {
-                title: 'Service Mesh',
-                url: '/use-cases/multi-platform-service-mesh',
-              },
-            },
-            {
-              title: 'Secure Service-to-Service Access',
-              description:
-                'Secure service access and communication across any network with identity-driven, time-based controls.',
-              image: {
-                url: require('./img/use-cases/discovery_health_checking.svg?url'), // @TODO - Consider a more specific icon
-                format: 'svg',
-              },
-              link: {
-                title: 'Zero Trust Networks',
-                url: '/use-cases/service-discovery-and-health-checking',
-              },
-            },
-            {
-              title: 'Automated Networking Tasks',
-              description:
-                'Cut down on tickets for operators and speed up time to deployment of dynamic applications.',
-              image: {
-                url: require('./img/use-cases/network_automation.svg?url'),
-                format: 'svg',
-              },
-              link: {
-                title: 'Network Infrastructure Automation',
-                url: '/use-cases/network-infrastructure-automation',
-              },
-            },
-          ]}
-        />
-      </div>
-
-      <CalloutBlade
-        title="Deploy Consul Service mesh for Kubernetes, VMs, or any environment"
-        callouts={[
-          {
-            icon: require('./img/kubernetes/logo.svg?include'),
-            title: 'Consul on Kubernetes',
-            description:
-              'Consul service mesh works on any Kubernetes distribution, connects multiple clusters, and supports VM-based applications. Consul CRDs provide a self-service, Kubernetes native workflow to manage traffic patterns and permissions in the mesh.',
-            link: {
-              text: 'Learn more',
-              url: '/consul-on-kubernetes',
-            },
-          },
-          {
-            icon: require('./img/kubernetes/communication-arrows.svg?include'),
-            title: 'Consul for Everything Else',
-            description:
-              "Consul service mesh support multiple orchestrators, like Nomad and Amazon ECS. Not using service mesh? Consul's service discovery and network infrastructure automation capabilities can help solve any service networking challenge.",
-            eyebrow: 'Tutorial',
-            link: {
-              text: 'Get Started with Service Mesh on VMs',
-              url:
-                'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy-vms?in=consul/developer-mesh',
-            },
-          },
-        ]}
-      />
-      <div className="ecosystem g-grid-container">
-        <h2 className="g-type-display-2">Consul Ecosystem</h2>
-        <TextSplitWithImage
-          textSplit={{
-            product: 'consul',
-            heading: 'The Single Control Plane for Cloud Networks',
-            content:
-              'Consul provides the control plane for multi-cloud networking.',
-            checkboxes: [
-              'Centrally control the distributed data plane to provide a scalable and reliable service mesh',
-              'Automate centralized network middleware configuration to avoid human intervention',
-              'Provide a real-time directory of all running services to improve application inventory management',
-              'Enable visibility into services and their health status to enhance health and performance monitoring',
-              'Automate lifecycle management of certificates which can be issued by 3rd party Certificate Authority',
-              'Provide unified support across a heterogeneous environment with different workload types and runtime platforms',
-            ],
-            linkStyle: 'links',
-            links: [
-              {
-                type: 'outbound',
-                text: 'Explore Consul Integrations',
-                url: 'https://www.hashicorp.com/integrations/?filters=consul',
-              },
-            ],
-          }}
-          image={{
-            url:
-              'https://www.datocms-assets.com/2885/1622152328-control-plane.png',
-            alt: 'Consul control plane',
-          }}
-        />
-      </div>
-      <section className="features">
-        <div className="g-grid-container">
-          <h3 className="g-type-display-2">Features</h3>
-          <SteppedFeatureList
-            features={[
-              {
-                title: 'Secure Service to Service Connectivity',
-                description:
-                  'Use mTLS to authenticate and secure connections between services.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/service-mesh-security',
-                content: (
-                  <img
-                    src={require('./img/service-to-service-transparent.png')}
-                    alt="Service to Service Connectivity"
-                  />
-                ),
-              },
-              {
-                title: 'Enhanced Observability',
-                description:
-                  'Visualize the service mesh topology with Consul’s built-in UI or third-party APM solutions.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/service-mesh-observability',
-                content: (
-                  <img
-                    src={require('../use-cases/img/multi-platform-service-mesh/observability@3x.png')}
-                    alt="Enhanced Observability"
-                  />
-                ),
-              },
-              {
-                title: 'Layer 7 Traffic Management',
-                description:
-                  'Implement fine-grained traffic policies to route and split traffic across services.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/service-mesh-traffic-management',
-                content: (
-                  <img
-                    src={require('./img/service-splitter@2x.png')}
-                    alt="Layer 7 Traffic Management"
-                  />
-                ),
-              },
-              {
-                title: 'Multi-platform Support',
-                description:
-                  'Consul service mesh can be deployed in any environment and supports multiple runtimes, like Kubernetes, Nomad, and VMs.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
-                content: (
-                  <center>
-                    <img
-                      style={{ maxWidth: '75%' }}
-                      src={require('../use-cases/img/multi-platform-service-mesh/kubernetes-extend-transparent.png')}
-                      alt="Multi-platform Support"
-                    />
-                  </center>
-                ),
-              },
-              {
-                title: 'Dynamic Load Balancing & Firewalling',
-                description:
-                  'Automate manual networking tasks and reduce the reliance on ticket-based systems.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/network-infrastructure-automation',
-                content: (
-                  <img
-                    src={require('../use-cases/img/network-automation/load-balancing.png')}
-                    alt="Load Balancing & Firewalling"
-                  />
-                ),
-              },
-              {
-                title: 'Simple Cross Datacenter Networking',
-                description:
-                  'Use mesh gateways to connect services across datacenters with Consul service mesh.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/tutorials/consul/service-mesh-gateways?in=consul/developer-mesh',
-                content: (
-                  <img
-                    src={require('./img/multi-datacenter-transparent.png')}
-                    alt="Cross Datacenter Networking"
-                  />
-                ),
-              },
-              {
-                title: 'Service Discovery & Real-time Health Checks',
-                description:
-                  'Keep track of the location information and health status of all applications.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/collections/consul/developer-discovery',
-                content: (
-                  <img
-                    src={require('../use-cases/img/discovery-health-checking/service-discovery-and-health-checking.svg')}
-                    alt="Service Discovery & Real-time Health Checks"
-                  />
-                ),
-              },
-              {
-                title: 'Bridging Service Mesh with Traditional Networks',
-                description:
-                  'Interact with applications that reside outside of the mesh with Consul’s terminating gateways.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/tutorials/consul/terminating-gateways-connect-external-services',
-                content: (
-                  <img
-                    src={require('./img/extend-mesh-transparent.png')}
-                    alt="Service Mesh with Traditional Networks"
-                  />
-                ),
-              },
-              {
-                title: 'Connect new services into Service Mesh',
-                description:
-                  'Enable external applications to securely connect with service inside of the mesh using Consul’s Ingress Gateway.',
-                learnMoreLink:
-                  'https://learn.hashicorp.com/tutorials/consul/service-mesh-ingress-gateways',
-                content: (
-                  <CodeBlock
-                    language="yaml"
-                    code={serviceMeshIngressGatewayCode}
-                  />
-                ),
-              },
-            ]}
-          />
-        </div>
-      </section>
-      <CalloutBlade
-        title="Better Together: Consul and the HashiCorp Stack"
-        callouts={[
-          {
-            title: 'Automated Infrastructure with Terraform',
-            icon: require('./img/stack/consul-and-terraform.svg?include'),
-            description:
-              'Speed up time to delivery for services with network infrastructure automation. Use Consul as a single source of truth for all services and apply configuration changes with Terraform.',
-            link: {
-              text: 'Consul with Terraform',
-              url:
-                'https://learn.hashicorp.com/tutorials/consul/consul-terraform-sync-intro?in=consul/network-infrastructure-automation',
-            },
-          },
-          {
-            title: 'Defense in Depth with Vault',
-            icon: require('./img/stack/consul-and-vault.svg?include'),
-            description:
-              'Ensure complete security for service-to-service access, authorization and communication by using Consul and Vault. Deliver end-to-end authentication, authorization, and encryption using identity-based access controls and traffic policies for microservice architectures.              ',
-            link: {
-              text: 'Consul with Vault',
-              url:
-                'https://learn.hashicorp.com/collections/consul/vault-secure',
-            },
-          },
-          {
-            title: 'Application Delivery with Nomad',
-            icon: require('./img/stack/consul-and-nomad.svg?include'),
-            description:
-              'Accelerate the application delivery lifecycle with orchestration and scheduling from Nomad and Consul service mesh. Enable developers to deploy and connect workloads in any environment with fewer code changes.',
-            link: {
-              text: 'Consul with Nomad',
-              url:
-                'https://learn.hashicorp.com/collections/nomad/integrate-consul',
-            },
-          },
-        ]}
-      />
-
-      <CaseStudyCarousel
-        title="Trusted by startups and the world’s largest organizations"
-        caseStudies={[
-          {
-            quote:
-              'Consul lets us spread more than 200 microservices over several AKS clusters. Each AKS cluster feeds into a Consul cluster that forms a larger service discovery mesh that allows us to find and connect services in a matter of minutes.',
-            caseStudyURL: 'https://www.hashicorp.com/case-studies/mercedes/',
-            person: {
-              firstName: 'Sriram',
-              lastName: 'Govindarajan',
-              photo:
-                'https://www.datocms-assets.com/2885/1589431834-sriram-govindarajan.jpg',
-              title: 'Principal Infrastructure Engineer',
-            },
-            company: {
-              name: 'Mercedes-Benz Research & Development (MBRDNA)',
-              logo: require('./img/quotes/mercedes-logo.svg?url'),
-            },
-          },
-          {
-            quote:
-              'Consul has fully replaced our manual service discovery activities with automated workflows and we’ve repurposed as much as 80% of our Consul staff to other projects because the tool is so reliable, efficient, and intelligent.',
-            caseStudyURL:
-              'https://www.hashicorp.com/resources/criteo-containers-consul-connect/',
-            person: {
-              firstName: 'Pierre',
-              lastName: 'Souchay',
-              photo:
-                'https://www.datocms-assets.com/2885/1589431828-pierre-souchay.jpg',
-              title: 'Discovery and Security Authorization Lead',
-            },
-            company: {
-              name: 'Criteo',
-              logo: require('./img/quotes/criteo-logo.svg?url'),
-            },
-          },
-        ]}
-        logoSection={{
-          grayBackground: true,
-          featuredLogos: [
-            {
-              companyName: 'Mercedes-Benz Research & Development (MBRDNA)',
-              url: require('./img/quotes/mercedes-logo.svg?url'),
-            },
-            {
-              companyName: 'Criteo',
-              url: require('./img/quotes/criteo-logo.svg?url'),
-            },
-            {
-              companyName: 'Barclays',
-              url: require('./img/quotes/barclays-logo.svg?url'),
-            },
-            {
-              companyName: 'Citadel',
-              url: require('./img/quotes/citadel-logo.svg?url'),
-            },
-            {
-              companyName: 'Ample Organics',
-              url:
-                'https://www.datocms-assets.com/2885/1589354369-ample-organics-logo.png?w=600',
-            },
-          ],
-        }}
-      />
-
-      <LearnCallout
-        headline="Learn the latest Consul skills"
-        product="consul"
-        background=""
-        items={[
-          {
-            title: 'Service Mesh on Kubernetes',
-            category: 'For Kubernetes',
-            time: '3 hr 20 min',
-            link: 'https://learn.hashicorp.com/collections/consul/kubernetes',
-            image:
-              'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
-          },
-          {
-            title: 'HashiCorp Cloud Platform (HCP) Consul',
-            category: 'Get Started',
-            time: '59 mins',
-            link:
-              'https://learn.hashicorp.com/collections/consul/cloud-get-started',
-            image:
-              'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
-          },
-        ]}
-      />
-    </div>
-  )
-}
-
-export async function getStaticProps() {
-  const rawYaml = `
-  apiVersion: consul.hashicorp.com/v1alpha1
-  kind: IngressGateway
-  metadata:
-    name: ingress-gateway
-  spec:
-    listeners:
-      - port: 8080
-        protocol: http
-        services:
-          - name: static-server
-  `
-  const serviceMeshIngressGatewayCode = await highlightString(rawYaml, 'yaml')
-  return {
-    props: {
-      serviceMeshIngressGatewayCode,
-    },
-  }
-}
--- a/website/pages/home/index.tsx
+++ b/website/pages/home/index.tsx
@ -0,0 +1,206 @@
+import * as React from 'react'
+import Head from 'next/head'
+import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
+import homepageQuery from './query.graphql'
+import { isInternalLink } from 'lib/utils'
+import { renderMetaTags } from 'react-datocms'
+import IoHomeHero from 'components/io-home-hero'
+import IoHomeIntro from 'components/io-home-intro'
+import IoHomeInPractice from 'components/io-home-in-practice'
+import IoCardContainer from 'components/io-card-container'
+import IoHomeCaseStudies from 'components/io-home-case-studies'
+import IoHomeCallToAction from 'components/io-home-call-to-action'
+import IoHomePreFooter from 'components/io-home-pre-footer'
+import s from './style.module.css'
+
+export default function Homepage({ data }): React.ReactElement {
+  const {
+    seo,
+    heroHeading,
+    heroDescription,
+    heroCtas,
+    heroCards,
+    introHeading,
+    introDescription,
+    introOfferingsImage,
+    introOfferings,
+    introOfferingsCta,
+    introVideo,
+    inPracticeHeading,
+    inPracticeDescription,
+    inPracticeCards,
+    inPracticeCtaHeading,
+    inPracticeCtaDescription,
+    inPracticeCtaLink,
+    inPracticeCtaImage,
+    useCasesHeading,
+    useCasesDescription,
+    useCasesCards,
+    tutorialsHeading,
+    tutorialCards,
+    caseStudiesHeading,
+    caseStudiesDescription,
+    caseStudiesFeatured,
+    caseStudiesLinks,
+    callToActionHeading,
+    callToActionDescription,
+    callToActionCtas,
+    preFooterHeading,
+    preFooterDescription,
+    preFooterCtas,
+  } = data
+  const _introVideo = introVideo[0]
+  const _introOfferingsCta = introOfferingsCta[0]
+
+  return (
+    <>
+      <Head>{renderMetaTags(seo)}</Head>
+
+      <IoHomeHero
+        pattern="/img/home-hero-pattern.svg"
+        brand="consul"
+        heading={heroHeading}
+        description={heroDescription}
+        ctas={heroCtas}
+        cards={heroCards.map((card) => {
+          return {
+            ...card,
+            cta: card.cta[0],
+          }
+        })}
+      />
+
+      <IoHomeIntro
+        isInternalLink={isInternalLink}
+        brand="consul"
+        heading={introHeading}
+        description={introDescription}
+        offerings={{
+          image: {
+            src: introOfferingsImage.url,
+            width: introOfferingsImage.width,
+            height: introOfferingsImage.height,
+            alt: introOfferingsImage.alt,
+          },
+          list: introOfferings,
+          cta: _introOfferingsCta,
+        }}
+        video={{
+          youtubeId: _introVideo.youtubeId,
+          thumbnail: _introVideo.thumbnail.url,
+          heading: _introVideo.heading,
+          description: _introVideo.description,
+          person: {
+            name: _introVideo.personName,
+            description: _introVideo.personDescription,
+            avatar: _introVideo.personAvatar?.url,
+          },
+        }}
+      />
+
+      <section className={s.useCases}>
+        <div className={s.container}>
+          <IoCardContainer
+            heading={useCasesHeading}
+            description={useCasesDescription}
+            cardsPerRow={4}
+            cards={useCasesCards.map((card) => {
+              return {
+                eyebrow: card.eyebrow,
+                link: {
+                  url: card.link,
+                  type: 'inbound',
+                },
+                heading: card.heading,
+                description: card.description,
+                products: card.products,
+              }
+            })}
+          />
+        </div>
+      </section>
+
+      <section className={s.tutorials}>
+        <div className={s.container}>
+          <IoCardContainer
+            heading={tutorialsHeading}
+            cardsPerRow={3}
+            cards={tutorialCards.map((card) => {
+              return {
+                eyebrow: card.eyebrow,
+                link: {
+                  url: card.link,
+                  type: 'inbound',
+                },
+                heading: card.heading,
+                description: card.description,
+                products: card.products,
+              }
+            })}
+          />
+        </div>
+      </section>
+
+      <IoHomeInPractice
+        brand="consul"
+        pattern="/img/practice-pattern.svg"
+        heading={inPracticeHeading}
+        description={inPracticeDescription}
+        cards={inPracticeCards.map((card) => {
+          return {
+            eyebrow: card.eyebrow,
+            link: {
+              url: card.link,
+              type: 'inbound',
+            },
+            heading: card.heading,
+            description: card.description,
+            products: card.products,
+          }
+        })}
+        cta={{
+          heading: inPracticeCtaHeading,
+          description: inPracticeCtaDescription,
+          link: inPracticeCtaLink,
+          image: inPracticeCtaImage,
+        }}
+      />
+
+      <IoHomeCaseStudies
+        isInternalLink={isInternalLink}
+        heading={caseStudiesHeading}
+        description={caseStudiesDescription}
+        primary={caseStudiesFeatured}
+        secondary={caseStudiesLinks}
+      />
+
+      <IoHomeCallToAction
+        brand="consul"
+        heading={callToActionHeading}
+        content={callToActionDescription}
+        links={callToActionCtas}
+      />
+
+      <IoHomePreFooter
+        brand="consul"
+        heading={preFooterHeading}
+        description={preFooterDescription}
+        ctas={preFooterCtas}
+      />
+    </>
+  )
+}
+
+export async function getStaticProps() {
+  const { consulHomepage } = await rivetQuery({
+    query: homepageQuery,
+  })
+
+  return {
+    props: { data: consulHomepage },
+    revalidate:
+      process.env.HASHI_ENV === 'production'
+        ? process.env.GLOBAL_REVALIDATE
+        : 10,
+  }
+}
--- a/website/pages/home/query.graphql
+++ b/website/pages/home/query.graphql
@ -0,0 +1,135 @@
+query homepageQuery {
+  consulHomepage {
+    seo: _seoMetaTags {
+      attributes
+      content
+      tag
+    }
+    heroHeading
+    heroDescription
+    heroCtas {
+      title
+      link
+    }
+    heroCards {
+      heading
+      description
+      cta {
+        title
+        link
+      }
+      subText: subtext
+    }
+    introHeading
+    introDescription
+    introOfferingsImage {
+      url
+      width
+      height
+      alt
+    }
+    introOfferings {
+      heading
+      description
+    }
+    introOfferingsCta {
+      title
+      link
+    }
+    introVideo {
+      youtubeId
+      heading
+      description
+      thumbnail {
+        url
+      }
+      personName
+      personDescription
+      personAvatar {
+        url
+      }
+    }
+    introVideo {
+      youtubeId
+      heading
+      description
+      thumbnail {
+        url
+      }
+      personName
+      personDescription
+      personAvatar {
+        url
+      }
+    }
+    inPracticeHeading
+    inPracticeDescription
+    inPracticeCards {
+      eyebrow
+      heading
+      description
+      link
+      products {
+        name
+      }
+    }
+    inPracticeCtaHeading
+    inPracticeCtaDescription
+    inPracticeCtaLink
+    inPracticeCtaImage {
+      url
+      alt
+      width
+      height
+    }
+    useCasesHeading
+    useCasesDescription
+    useCasesCards {
+      eyebrow
+      heading
+      description
+      link
+      products {
+        name
+      }
+    }
+    tutorialsHeading
+    tutorialCards {
+      eyebrow
+      heading
+      description
+      link
+      products {
+        name
+      }
+    }
+    caseStudiesHeading
+    caseStudiesDescription
+    caseStudiesFeatured {
+      thumbnail {
+        url
+        alt
+      }
+      heading
+      link
+    }
+    caseStudiesLinks {
+      heading
+      link
+    }
+    callToActionHeading
+    callToActionDescription
+    callToActionCtas {
+      text: title
+      url: link
+    }
+    preFooterHeading
+    preFooterDescription
+    preFooterCtas {
+      link
+      heading
+      description
+      cta
+    }
+  }
+}
--- a/website/pages/home/style.css
+++ b/website/pages/home/style.css
@ -1,88 +0,0 @@
-.p-home {
-  & > section {
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-
-  & .use-cases {
-    padding-top: 128px;
-    padding-bottom: 64px;
-
-    @media (max-width: 800px) {
-      padding-top: 88px;
-    }
-
-    & h2 {
-      margin: 0;
-      text-align: center;
-      margin-bottom: 64px;
-      @media (max-width: 800px) {
-        margin-bottom: 48px;
-      }
-    }
-  }
-  & .ecosystem {
-    padding-top: 88px;
-    padding-bottom: 88px;
-    @media (--large) {
-      padding-top: 128px;
-      padding-bottom: 128px;
-    }
-    & .g-text-split {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-    & .g-type-display-2 {
-      margin: 0;
-      text-align: center;
-      margin-bottom: 64px;
-      @media (max-width: 800px) {
-        margin-bottom: 48px;
-      }
-    }
-  }
-  & 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;
-      }
-    }
-  }
-
-  & .g-callouts {
-    & > .g-grid-container > .items.layout-two-up > .callout-item-wrapper {
-      padding: 0;
-    }
-
-    & .callout-item.layout-two-up {
-      padding: 70px;
-
-      &.theme-light {
-        background-color: #f2f2f3;
-        transition: filter 0.25s ease;
-
-        &:hover {
-          filter: brightness(97%);
-        }
-      }
-    }
-  }
-  & section.features {
-    background-color: var(--gray-6);
-    & h3 {
-      margin: 0;
-      text-align: center;
-      margin-bottom: 32px;
-      @media (--large) {
-        text-align: left;
-      }
-    }
-  }
-}
--- a/website/pages/home/style.module.css
+++ b/website/pages/home/style.module.css
@ -0,0 +1,27 @@
+.container {
+  composes: g-grid-container from global;
+}
+
+/*
+ * Use cases
+ */
+
+.useCases {
+  margin-bottom: 64px;
+
+  @media (--medium-up) {
+    margin-bottom: 128px;
+  }
+}
+
+/*
+ * Tutorials
+ */
+
+.tutorials {
+  margin-bottom: 64px;
+
+  @media (--medium-up) {
+    margin-bottom: 128px;
+  }
+}
--- a/website/pages/index.tsx
+++ b/website/pages/index.tsx
--- a/website/pages/style.css
+++ b/website/pages/style.css
@ -15,9 +15,6 @@
@import '../components/mini-cta/style.css';
@import '../components/use-cases-layout/style.css';

-/* Local Pages */
-@import './home/style.css';
-
 /* Print Styles */
@import './print.css';

--- a/website/pages/use-cases/[slug].tsx
+++ b/website/pages/use-cases/[slug].tsx
@ -0,0 +1,236 @@
+import * as React from 'react'
+import Head from 'next/head'
+import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
+import useCasesQuery from './query.graphql'
+import { renderMetaTags } from 'react-datocms'
+import IoUsecaseHero from 'components/io-usecase-hero'
+import IoUsecaseSection from 'components/io-usecase-section'
+import IoUsecaseCustomer from 'components/io-usecase-customer'
+import IoCardContainer from 'components/io-card-container'
+import IoVideoCallout from 'components/io-video-callout'
+import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
+import s from './style.module.css'
+
+export default function UseCasePage({ data }) {
+  const {
+    seo,
+    heroHeading,
+    heroDescription,
+    challengeHeading,
+    challengeDescription,
+    challengeImage,
+    challengeLink,
+    solutionHeading,
+    solutionDescription,
+    solutionImage,
+    solutionLink,
+    customerCaseStudy,
+    cardsHeading,
+    cardsDescription,
+    tutorialsLink,
+    tutorialCards,
+    documentationLink,
+    documentationCards,
+    callToActionHeading,
+    callToActionDescription,
+    callToActionLinks,
+    videoCallout,
+  } = data
+  const _customerCaseStudy = customerCaseStudy[0]
+  const _videoCallout = videoCallout[0]
+
+  return (
+    <>
+      <Head>{renderMetaTags(seo)}</Head>
+
+      <IoUsecaseHero
+        eyebrow="Use case"
+        heading={heroHeading}
+        description={heroDescription}
+        pattern="/img/usecase-hero-pattern.svg"
+      />
+
+      <IoUsecaseSection
+        brand="consul"
+        eyebrow="Challenge"
+        heading={challengeHeading}
+        description={challengeDescription}
+        media={{
+          src: challengeImage?.url,
+          width: challengeImage?.width,
+          height: challengeImage?.height,
+          alt: challengeImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: challengeLink,
+        }}
+      />
+
+      <IoUsecaseSection
+        brand="consul"
+        bottomIsFlush={_customerCaseStudy}
+        eyebrow="Solution"
+        heading={solutionHeading}
+        description={solutionDescription}
+        media={{
+          src: solutionImage?.url,
+          width: solutionImage?.width,
+          height: solutionImage?.height,
+          alt: solutionImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: solutionLink,
+        }}
+      />
+
+      {_customerCaseStudy ? (
+        <IoUsecaseCustomer
+          link={_customerCaseStudy.link}
+          media={{
+            src: _customerCaseStudy.image.url,
+            width: _customerCaseStudy.image.width,
+            height: _customerCaseStudy.image.height,
+            alt: _customerCaseStudy.image.alt,
+          }}
+          logo={{
+            src: _customerCaseStudy.logo.url,
+            width: _customerCaseStudy.logo.width,
+            height: _customerCaseStudy.logo.height,
+            alt: _customerCaseStudy.logo.alt,
+          }}
+          heading={_customerCaseStudy.heading}
+          description={_customerCaseStudy.description}
+          stats={_customerCaseStudy.stats.map((stat) => {
+            return {
+              value: stat.value,
+              key: stat.label,
+            }
+          })}
+        />
+      ) : null}
+
+      <div className={s.cards}>
+        <IoCardContainer
+          heading={cardsHeading}
+          description={cardsDescription}
+          label="Tutorials"
+          cta={{
+            url: tutorialsLink
+              ? tutorialsLink
+              : 'https://learn.hashicorp.com/consul',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={tutorialCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+
+        <IoCardContainer
+          label="Docs"
+          cta={{
+            url: documentationLink ? documentationLink : '/docs',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={documentationCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+      </div>
+
+      <div className={s.callToAction}>
+        <IoUsecaseCallToAction
+          theme="dark"
+          brand="consul"
+          heading={callToActionHeading}
+          description={callToActionDescription}
+          links={callToActionLinks.map((link) => {
+            return {
+              text: link.title,
+              url: link.link,
+            }
+          })}
+          pattern="/img/usecase-callout-pattern.svg"
+        />
+      </div>
+
+      {_videoCallout ? (
+        <div className={s.videoCallout}>
+          <IoVideoCallout
+            youtubeId={_videoCallout.youtubeId}
+            thumbnail={_videoCallout.thumbnail.url}
+            heading={_videoCallout.heading}
+            description={_videoCallout.description}
+            person={{
+              avatar: _videoCallout.personAvatar?.url,
+              name: _videoCallout.personName,
+              description: _videoCallout.personDescription,
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export async function getStaticPaths() {
+  const { allConsulUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  return {
+    paths: allConsulUseCases.map((page) => {
+      return {
+        params: {
+          slug: page.slug,
+        },
+      }
+    }),
+    fallback: 'blocking',
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const { slug } = params
+
+  const { allConsulUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  const page = allConsulUseCases.find((page) => page.slug === slug)
+
+  if (!page) {
+    return { notFound: true }
+  }
+
+  return {
+    props: {
+      data: page,
+    },
+    revalidate:
+      process.env.HASHI_ENV === 'production'
+        ? process.env.GLOBAL_REVALIDATE
+        : 10,
+  }
+}
--- a/website/pages/use-cases/img/discovery-health-checking/Map.png
+++ b/website/pages/use-cases/img/discovery-health-checking/Map.png
--- a/website/pages/use-cases/img/discovery-health-checking/centralized-service-registry.png
+++ b/website/pages/use-cases/img/discovery-health-checking/centralized-service-registry.png
--- a/website/pages/use-cases/img/discovery-health-checking/consul_screenshot@2x.png
+++ b/website/pages/use-cases/img/discovery-health-checking/consul_screenshot@2x.png
--- a/website/pages/use-cases/img/discovery-health-checking/extesnsible-api.png
+++ b/website/pages/use-cases/img/discovery-health-checking/extesnsible-api.png
--- a/website/pages/use-cases/img/discovery-health-checking/health-monitoring.png
+++ b/website/pages/use-cases/img/discovery-health-checking/health-monitoring.png
--- a/website/pages/use-cases/img/discovery-health-checking/mercedes-case-study.png
+++ b/website/pages/use-cases/img/discovery-health-checking/mercedes-case-study.png
--- a/website/pages/use-cases/img/discovery-health-checking/service-discovery-and-health-checking.svg
+++ b/website/pages/use-cases/img/discovery-health-checking/service-discovery-and-health-checking.svg
@ -1,147 +0,0 @@
-<svg width="482" height="239" viewBox="0 0 482 239" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="17" width="142" height="212" rx="1" fill="white"/>
-<rect x="1.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<rect x="52.5" y="220" width="41" height="19" rx="3" fill="white"/>
-<path d="M63.223 225.6H59.575V234H63.223C65.695 234 67.243 232.224 67.243 229.8C67.243 227.328 65.671 225.6 63.223 225.6ZM63.187 232.512H61.207V227.076H63.187C64.627 227.076 65.587 228.168 65.587 229.764C65.587 231.384 64.627 232.512 63.187 232.512ZM73.2458 234.168C75.4658 234.168 76.8818 232.812 77.2658 231.468L75.6698 231.06C75.3938 231.888 74.4938 232.62 73.2218 232.62C71.5658 232.62 70.5098 231.288 70.5098 229.776C70.5098 228.264 71.5658 226.98 73.2218 226.98C74.4938 226.98 75.3938 227.736 75.6698 228.552L77.2778 228.156C76.8938 226.824 75.4778 225.432 73.2098 225.432C70.7138 225.432 68.8298 227.316 68.8298 229.788C68.8298 232.272 70.7138 234.168 73.2458 234.168ZM84.8556 225.6L82.3116 226.908L82.7076 228.312L84.5916 227.436V234H86.2596V225.6H84.8556Z" fill="black"/>
-<rect x="170" y="17" width="142" height="212" rx="1" fill="white"/>
-<rect x="169.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<rect x="220.5" y="220" width="41" height="19" rx="3" fill="white"/>
-<path d="M231.223 225.6H227.575V234H231.223C233.695 234 235.243 232.224 235.243 229.8C235.243 227.328 233.671 225.6 231.223 225.6ZM231.187 232.512H229.207V227.076H231.187C232.627 227.076 233.587 228.168 233.587 229.764C233.587 231.384 232.627 232.512 231.187 232.512ZM241.246 234.168C243.466 234.168 244.882 232.812 245.266 231.468L243.67 231.06C243.394 231.888 242.494 232.62 241.222 232.62C239.566 232.62 238.51 231.288 238.51 229.776C238.51 228.264 239.566 226.98 241.222 226.98C242.494 226.98 243.394 227.736 243.67 228.552L245.278 228.156C244.894 226.824 243.478 225.432 241.21 225.432C238.714 225.432 236.83 227.316 236.83 229.788C236.83 232.272 238.714 234.168 241.246 234.168ZM252.856 225.6L250.312 226.908L250.708 228.312L252.592 227.436V234H254.26V225.6H252.856Z" fill="black"/>
-<rect x="338" y="17" width="142" height="212" rx="1" fill="white"/>
-<rect x="337.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<rect x="388.5" y="220" width="41" height="19" rx="3" fill="white"/>
-<path d="M399.223 225.6H395.575V234H399.223C401.695 234 403.243 232.224 403.243 229.8C403.243 227.328 401.671 225.6 399.223 225.6ZM399.187 232.512H397.207V227.076H399.187C400.627 227.076 401.587 228.168 401.587 229.764C401.587 231.384 400.627 232.512 399.187 232.512ZM409.246 234.168C411.466 234.168 412.882 232.812 413.266 231.468L411.67 231.06C411.394 231.888 410.494 232.62 409.222 232.62C407.566 232.62 406.51 231.288 406.51 229.776C406.51 228.264 407.566 226.98 409.222 226.98C410.494 226.98 411.394 227.736 411.67 228.552L413.278 228.156C412.894 226.824 411.478 225.432 409.21 225.432C406.714 225.432 404.83 227.316 404.83 229.788C404.83 232.272 406.714 234.168 409.246 234.168ZM420.856 225.6L418.312 226.908L418.708 228.312L420.592 227.436V234H422.26V225.6H420.856Z" fill="black"/>
-<rect x="18" y="157" width="46" height="46" rx="2" fill="white"/>
-<rect x="17.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M41.89 169.449L49.89 173.449C50.5697 173.787 50.9996 174.48 51 175.239V184.769C50.9996 185.528 50.5697 186.221 49.89 186.559L41.89 190.559C41.3267 190.841 40.6634 190.841 40.1 190.559L32.1 186.559C31.421 186.217 30.9948 185.519 31 184.759L31 175.239C31.0005 174.48 31.4304 173.787 32.11 173.449L40.11 169.449C40.6707 169.171 41.3294 169.171 41.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M31.3203 174.16L41.0003 179L50.6803 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M41 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="185.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M209.89 169.449L217.89 173.449C218.57 173.787 219 174.48 219 175.239V184.769C219 185.528 218.57 186.221 217.89 186.559L209.89 190.559C209.327 190.841 208.663 190.841 208.1 190.559L200.1 186.559C199.421 186.217 198.995 185.519 199 184.759V175.239C199 174.48 199.43 173.787 200.11 173.449L208.11 169.449C208.671 169.171 209.329 169.171 209.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M199.32 174.16L209 179L218.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M209 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="354" y="157" width="46" height="46" rx="2" fill="white"/>
-<rect x="353.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M377.89 169.449L385.89 173.449C386.57 173.787 387 174.48 387 175.239V184.769C387 185.528 386.57 186.221 385.89 186.559L377.89 190.559C377.327 190.841 376.663 190.841 376.1 190.559L368.1 186.559C367.421 186.217 366.995 185.519 367 184.759V175.239C367 174.48 367.43 173.787 368.11 173.449L376.11 169.449C376.671 169.171 377.329 169.171 377.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M367.32 174.16L377 179L386.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M377 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="18" y="93" width="46" height="46" rx="2" fill="white"/>
-<rect x="17.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M41.89 105.449L49.89 109.449C50.5697 109.787 50.9996 110.48 51 111.239V120.769C50.9996 121.528 50.5697 122.221 49.89 122.559L41.89 126.559C41.3267 126.841 40.6634 126.841 40.1 126.559L32.1 122.559C31.421 122.217 30.9948 121.519 31 120.759L31 111.239C31.0005 110.48 31.4304 109.787 32.11 109.449L40.11 105.449C40.6707 105.171 41.3294 105.171 41.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M31.3203 110.16L41.0003 115L50.6803 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M41 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="186" y="93" width="46" height="46" rx="2" fill="white"/>
-<rect x="185.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M209.89 105.449L217.89 109.449C218.57 109.787 219 110.48 219 111.239V120.769C219 121.528 218.57 122.221 217.89 122.559L209.89 126.559C209.327 126.841 208.663 126.841 208.1 126.559L200.1 122.559C199.421 122.217 198.995 121.519 199 120.759V111.239C199 110.48 199.43 109.787 200.11 109.449L208.11 105.449C208.671 105.171 209.329 105.171 209.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M199.32 110.16L209 115L218.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M209 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="354" y="93" width="46" height="46" rx="2" fill="white"/>
-<rect x="353.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M377.89 105.449L385.89 109.449C386.57 109.787 387 110.48 387 111.239V120.769C387 121.528 386.57 122.221 385.89 122.559L377.89 126.559C377.327 126.841 376.663 126.841 376.1 126.559L368.1 122.559C367.421 122.217 366.995 121.519 367 120.759V111.239C367 110.48 367.43 109.787 368.11 109.449L376.11 105.449C376.671 105.171 377.329 105.171 377.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M367.32 110.16L377 115L386.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M377 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="81.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M105.89 169.449L113.89 173.449C114.57 173.787 115 174.48 115 175.239V184.769C115 185.528 114.57 186.221 113.89 186.559L105.89 190.559C105.327 190.841 104.663 190.841 104.1 190.559L96.1 186.559C95.421 186.217 94.9948 185.519 95 184.759V175.239C95.0005 174.48 95.4304 173.787 96.11 173.449L104.11 169.449C104.671 169.171 105.329 169.171 105.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M95.3203 174.16L105 179L114.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M105 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="250" y="157" width="46" height="46" rx="2" fill="white"/>
-<rect x="249.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M273.89 169.449L281.89 173.449C282.57 173.787 283 174.48 283 175.239V184.769C283 185.528 282.57 186.221 281.89 186.559L273.89 190.559C273.327 190.841 272.663 190.841 272.1 190.559L264.1 186.559C263.421 186.217 262.995 185.519 263 184.759V175.239C263 174.48 263.43 173.787 264.11 173.449L272.11 169.449C272.671 169.171 273.329 169.171 273.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M263.32 174.16L273 179L282.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M273 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="417.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M441.89 169.449L449.89 173.449C450.57 173.787 451 174.48 451 175.239V184.769C451 185.528 450.57 186.221 449.89 186.559L441.89 190.559C441.327 190.841 440.663 190.841 440.1 190.559L432.1 186.559C431.421 186.217 430.995 185.519 431 184.759V175.239C431 174.48 431.43 173.787 432.11 173.449L440.11 169.449C440.671 169.171 441.329 169.171 441.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M431.32 174.16L441 179L450.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M441 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="82" y="93" width="46" height="46" rx="2" fill="white"/>
-<rect x="81.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M105.89 105.449L113.89 109.449C114.57 109.787 115 110.48 115 111.239V120.769C115 121.528 114.57 122.221 113.89 122.559L105.89 126.559C105.327 126.841 104.663 126.841 104.1 126.559L96.1 122.559C95.421 122.217 94.9948 121.519 95 120.759V111.239C95.0005 110.48 95.4304 109.787 96.11 109.449L104.11 105.449C104.671 105.171 105.329 105.171 105.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M95.3203 110.16L105 115L114.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M105 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="250" y="93" width="46" height="46" rx="2" fill="white"/>
-<rect x="249.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M273.89 105.449L281.89 109.449C282.57 109.787 283 110.48 283 111.239V120.769C283 121.528 282.57 122.221 281.89 122.559L273.89 126.559C273.327 126.841 272.663 126.841 272.1 126.559L264.1 122.559C263.421 122.217 262.995 121.519 263 120.759V111.239C263 110.48 263.43 109.787 264.11 109.449L272.11 105.449C272.671 105.171 273.329 105.171 273.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M263.32 110.16L273 115L282.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M273 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="417.25" y="92.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M441.89 105.449L449.89 109.449C450.57 109.787 451 110.48 451 111.239V120.769C451 121.528 450.57 122.221 449.89 122.559L441.89 126.559C441.327 126.841 440.663 126.841 440.1 126.559L432.1 122.559C431.421 122.217 430.995 121.519 431 120.759V111.239C431 110.48 431.43 109.787 432.11 109.449L440.11 105.449C440.671 105.171 441.329 105.171 441.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M431.32 110.16L441 115L450.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M441 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="49" width="48" height="48" rx="2" fill="#DC477D"/>
-<path d="M73.1178 36.124C71.1367 36.1256 69.1852 35.6437 67.4326 34.7201C65.6799 33.7965 64.1792 32.4591 63.0606 30.824C61.9421 29.1889 61.2395 27.3055 61.0138 25.3373C60.7881 23.3691 61.0462 21.3756 61.7657 19.5297C62.4852 17.6839 63.6443 16.0416 65.1424 14.7452C66.6405 13.4489 68.4323 12.5378 70.3623 12.091C72.2924 11.6442 74.3023 11.6752 76.2177 12.1813C78.1331 12.6873 79.896 13.6532 81.3534 14.9951L78.4645 18.0173C77.316 16.9799 75.8912 16.2979 74.3629 16.054C72.8346 15.8101 71.2683 16.0147 69.8539 16.6431C68.4396 17.2714 67.2378 18.2966 66.3944 19.5942C65.551 20.8919 65.102 22.4063 65.102 23.954C65.102 25.5017 65.551 27.0161 66.3944 28.3138C67.2378 29.6114 68.4396 30.6366 69.8539 31.2649C71.2683 31.8933 72.8346 32.0979 74.3629 31.854C75.8912 31.6101 77.316 30.9281 78.4645 29.8907L81.3534 32.9129C79.1093 34.9802 76.169 36.1266 73.1178 36.124Z" fill="white"/>
-<path d="M82.9128 30.0346C82.7155 30.0346 82.5226 29.9761 82.3585 29.8665C82.1944 29.7568 82.0665 29.601 81.991 29.4187C81.9155 29.2364 81.8957 29.0357 81.9342 28.8422C81.9727 28.6486 82.0677 28.4708 82.2073 28.3313C82.3468 28.1918 82.5246 28.0967 82.7182 28.0582C82.9117 28.0197 83.1123 28.0395 83.2946 28.115C83.477 28.1905 83.6328 28.3184 83.7424 28.4825C83.8521 28.6466 83.9106 28.8395 83.9106 29.0368C83.91 29.3013 83.8047 29.5547 83.6177 29.7417C83.4307 29.9287 83.1773 30.034 82.9128 30.0346Z" fill="white"/>
-<path d="M73.0405 26.588C72.5182 26.5902 72.0071 26.4373 71.5718 26.1487C71.1365 25.8601 70.7967 25.4488 70.5954 24.9669C70.3941 24.485 70.3404 23.9541 70.4411 23.4417C70.5418 22.9292 70.7924 22.4582 71.161 22.0882C71.5297 21.7183 71.9999 21.4662 72.512 21.3637C73.0242 21.2613 73.5552 21.3132 74.0378 21.5129C74.5204 21.7125 74.9328 22.0509 75.2229 22.4853C75.513 22.9196 75.6676 23.4302 75.6672 23.9525C75.666 24.6496 75.3892 25.3179 74.8971 25.8117C74.405 26.3054 73.7376 26.5845 73.0405 26.588Z" fill="white"/>
-<path d="M84.0573 26.6362C83.86 26.6362 83.6671 26.5777 83.503 26.468C83.3389 26.3584 83.211 26.2026 83.1355 26.0202C83.06 25.8379 83.0402 25.6373 83.0787 25.4437C83.1172 25.2502 83.2123 25.0724 83.3518 24.9329C83.4914 24.7933 83.6691 24.6983 83.8627 24.6598C84.0562 24.6213 84.2569 24.6411 84.4392 24.7166C84.6215 24.7921 84.7773 24.92 84.887 25.0841C84.9966 25.2481 85.0551 25.4411 85.0551 25.6384C85.0545 25.9028 84.9492 26.1563 84.7622 26.3433C84.5752 26.5303 84.3218 26.6356 84.0573 26.6362Z" fill="white"/>
-<path d="M81.0915 26.5112C80.8937 26.5112 80.7003 26.4524 80.536 26.3422C80.3717 26.2321 80.2438 26.0756 80.1686 25.8926C80.0934 25.7097 80.0743 25.5085 80.1138 25.3146C80.1532 25.1208 80.2493 24.943 80.39 24.8039C80.5306 24.6648 80.7094 24.5707 80.9037 24.5335C81.098 24.4962 81.2989 24.5176 81.4811 24.5948C81.6632 24.672 81.8182 24.8016 81.9265 24.9672C82.0348 25.1327 82.0914 25.3267 82.0892 25.5245C82.0863 25.7872 81.9799 26.0382 81.7931 26.2229C81.6063 26.4076 81.3542 26.5112 81.0915 26.5112Z" fill="white"/>
-<path d="M84.0573 23.2729C83.86 23.2729 83.6671 23.2144 83.503 23.1047C83.3389 22.9951 83.211 22.8393 83.1355 22.657C83.06 22.4746 83.0402 22.274 83.0787 22.0805C83.1172 21.8869 83.2123 21.7091 83.3518 21.5696C83.4914 21.43 83.6691 21.335 83.8627 21.2965C84.0562 21.258 84.2569 21.2778 84.4392 21.3533C84.6215 21.4288 84.7773 21.5567 84.887 21.7208C84.9966 21.8849 85.0551 22.0778 85.0551 22.2751C85.0545 22.5396 84.9492 22.793 84.7622 22.98C84.5752 23.167 84.3218 23.2723 84.0573 23.2729Z" fill="white"/>
-<path d="M81.0915 23.3862C80.8942 23.3862 80.7013 23.3277 80.5372 23.218C80.3731 23.1084 80.2452 22.9526 80.1697 22.7702C80.0942 22.5879 80.0744 22.3873 80.1129 22.1937C80.1514 22.0002 80.2465 21.8224 80.386 21.6829C80.5255 21.5433 80.7033 21.4483 80.8969 21.4098C81.0904 21.3713 81.291 21.3911 81.4734 21.4666C81.6557 21.5421 81.8115 21.67 81.9212 21.8341C82.0308 21.9982 82.0893 22.1911 82.0893 22.3884C82.0893 22.653 81.9842 22.9068 81.7971 23.0939C81.6099 23.2811 81.3562 23.3862 81.0915 23.3862Z" fill="white"/>
-<path d="M82.9707 19.9174C82.7733 19.9179 82.5801 19.8597 82.4158 19.7504C82.2514 19.641 82.1232 19.4853 82.0473 19.303C81.9714 19.1207 81.9514 18.9201 81.9896 18.7264C82.0279 18.5327 82.1227 18.3547 82.2622 18.2149C82.4016 18.0751 82.5794 17.9799 82.773 17.9412C82.9666 17.9025 83.1673 17.9222 83.3498 17.9976C83.5322 18.0731 83.6882 18.201 83.7979 18.3651C83.9077 18.5292 83.9663 18.7222 83.9663 18.9197C83.9663 19.1839 83.8614 19.4373 83.6748 19.6244C83.4882 19.8115 83.2349 19.9168 82.9707 19.9174Z" fill="white"/>
-<rect x="217" width="48" height="48" rx="2" fill="#DC477D"/>
-<path d="M241.117 36.124C239.136 36.1256 237.184 35.6437 235.432 34.7201C233.679 33.7965 232.178 32.4591 231.06 30.824C229.941 29.1889 229.238 27.3055 229.013 25.3373C228.787 23.3691 229.045 21.3756 229.765 19.5297C230.484 17.6839 231.643 16.0416 233.141 14.7452C234.639 13.4489 236.431 12.5378 238.361 12.091C240.291 11.6442 242.301 11.6752 244.217 12.1813C246.132 12.6873 247.895 13.6532 249.352 14.9951L246.464 18.0173C245.315 16.9799 243.89 16.2979 242.362 16.054C240.834 15.8101 239.267 16.0147 237.853 16.6431C236.439 17.2714 235.237 18.2966 234.393 19.5942C233.55 20.8919 233.101 22.4063 233.101 23.954C233.101 25.5017 233.55 27.0161 234.393 28.3138C235.237 29.6114 236.439 30.6366 237.853 31.2649C239.267 31.8933 240.834 32.0979 242.362 31.854C243.89 31.6101 245.315 30.9281 246.464 29.8907L249.352 32.9129C247.108 34.9802 244.168 36.1266 241.117 36.124Z" fill="white"/>
-<path d="M250.912 30.0346C250.714 30.0346 250.522 29.9761 250.358 29.8665C250.193 29.7568 250.066 29.601 249.99 29.4187C249.914 29.2364 249.895 29.0357 249.933 28.8422C249.972 28.6486 250.067 28.4708 250.206 28.3313C250.346 28.1918 250.524 28.0967 250.717 28.0582C250.911 28.0197 251.111 28.0395 251.294 28.115C251.476 28.1905 251.632 28.3184 251.741 28.4825C251.851 28.6466 251.91 28.8395 251.91 29.0368C251.909 29.3013 251.804 29.5547 251.617 29.7417C251.43 29.9287 251.176 30.034 250.912 30.0346Z" fill="white"/>
-<path d="M241.04 26.588C240.517 26.5902 240.006 26.4373 239.571 26.1487C239.136 25.8601 238.796 25.4488 238.594 24.9669C238.393 24.485 238.339 23.9541 238.44 23.4417C238.541 22.9292 238.791 22.4582 239.16 22.0882C239.529 21.7183 239.999 21.4662 240.511 21.3637C241.023 21.2613 241.554 21.3132 242.037 21.5129C242.519 21.7125 242.932 22.0509 243.222 22.4853C243.512 22.9196 243.667 23.4302 243.666 23.9525C243.665 24.6496 243.388 25.3179 242.896 25.8117C242.404 26.3054 241.737 26.5845 241.04 26.588Z" fill="white"/>
-<path d="M252.056 26.6362C251.859 26.6362 251.666 26.5777 251.502 26.468C251.338 26.3584 251.21 26.2026 251.135 26.0202C251.059 25.8379 251.039 25.6373 251.078 25.4437C251.116 25.2502 251.211 25.0724 251.351 24.9329C251.49 24.7933 251.668 24.6983 251.862 24.6598C252.055 24.6213 252.256 24.6411 252.438 24.7166C252.621 24.7921 252.776 24.92 252.886 25.0841C252.996 25.2481 253.054 25.4411 253.054 25.6384C253.054 25.9028 252.948 26.1563 252.761 26.3433C252.574 26.5303 252.321 26.6356 252.056 26.6362Z" fill="white"/>
-<path d="M249.09 26.5112C248.892 26.5112 248.698 26.4524 248.534 26.3422C248.37 26.2321 248.242 26.0756 248.167 25.8926C248.091 25.7097 248.072 25.5085 248.112 25.3146C248.151 25.1208 248.247 24.943 248.388 24.8039C248.529 24.6648 248.707 24.5707 248.902 24.5335C249.096 24.4962 249.297 24.5176 249.479 24.5948C249.661 24.672 249.816 24.8016 249.925 24.9672C250.033 25.1327 250.089 25.3267 250.087 25.5245C250.084 25.7872 249.978 26.0382 249.791 26.2229C249.604 26.4076 249.352 26.5112 249.09 26.5112Z" fill="white"/>
-<path d="M252.056 23.2729C251.859 23.2729 251.666 23.2144 251.502 23.1047C251.338 22.9951 251.21 22.8393 251.135 22.657C251.059 22.4746 251.039 22.274 251.078 22.0805C251.116 21.8869 251.211 21.7091 251.351 21.5696C251.49 21.43 251.668 21.335 251.862 21.2965C252.055 21.258 252.256 21.2778 252.438 21.3533C252.621 21.4288 252.776 21.5567 252.886 21.7208C252.996 21.8849 253.054 22.0778 253.054 22.2751C253.054 22.5396 252.948 22.793 252.761 22.98C252.574 23.167 252.321 23.2723 252.056 23.2729Z" fill="white"/>
-<path d="M249.09 23.3862C248.892 23.3862 248.699 23.3277 248.535 23.218C248.371 23.1084 248.243 22.9526 248.168 22.7702C248.092 22.5879 248.072 22.3873 248.111 22.1937C248.149 22.0002 248.244 21.8224 248.384 21.6829C248.524 21.5433 248.701 21.4483 248.895 21.4098C249.088 21.3713 249.289 21.3911 249.471 21.4666C249.654 21.5421 249.81 21.67 249.919 21.8341C250.029 21.9982 250.087 22.1911 250.087 22.3884C250.087 22.653 249.982 22.9068 249.795 23.0939C249.608 23.2811 249.354 23.3862 249.09 23.3862Z" fill="white"/>
-<path d="M250.969 19.9174C250.771 19.9179 250.578 19.8597 250.414 19.7504C250.249 19.641 250.121 19.4853 250.045 19.303C249.969 19.1207 249.949 18.9201 249.988 18.7264C250.026 18.5327 250.121 18.3547 250.26 18.2149C250.4 18.0751 250.577 17.9799 250.771 17.9412C250.965 17.9025 251.165 17.9222 251.348 17.9976C251.53 18.0731 251.686 18.201 251.796 18.3651C251.906 18.5292 251.964 18.7222 251.964 18.9197C251.964 19.1839 251.859 19.4373 251.673 19.6244C251.486 19.8115 251.233 19.9168 250.969 19.9174Z" fill="white"/>
-<rect x="385" width="48" height="48" rx="2" fill="#DC477D"/>
-<path d="M409.117 36.124C407.136 36.1256 405.184 35.6437 403.432 34.7201C401.679 33.7965 400.178 32.4591 399.06 30.824C397.941 29.1889 397.238 27.3055 397.013 25.3373C396.787 23.3691 397.045 21.3756 397.765 19.5297C398.484 17.6839 399.643 16.0416 401.141 14.7452C402.639 13.4489 404.431 12.5378 406.361 12.091C408.291 11.6442 410.301 11.6752 412.217 12.1813C414.132 12.6873 415.895 13.6532 417.352 14.9951L414.464 18.0173C413.315 16.9799 411.89 16.2979 410.362 16.054C408.834 15.8101 407.267 16.0147 405.853 16.6431C404.439 17.2714 403.237 18.2966 402.393 19.5942C401.55 20.8919 401.101 22.4063 401.101 23.954C401.101 25.5017 401.55 27.0161 402.393 28.3138C403.237 29.6114 404.439 30.6366 405.853 31.2649C407.267 31.8933 408.834 32.0979 410.362 31.854C411.89 31.6101 413.315 30.9281 414.464 29.8907L417.352 32.9129C415.108 34.9802 412.168 36.1266 409.117 36.124Z" fill="white"/>
-<path d="M418.912 30.0346C418.714 30.0346 418.522 29.9761 418.358 29.8665C418.193 29.7568 418.066 29.601 417.99 29.4187C417.914 29.2364 417.895 29.0357 417.933 28.8422C417.972 28.6486 418.067 28.4708 418.206 28.3313C418.346 28.1918 418.524 28.0967 418.717 28.0582C418.911 28.0197 419.111 28.0395 419.294 28.115C419.476 28.1905 419.632 28.3184 419.741 28.4825C419.851 28.6466 419.91 28.8395 419.91 29.0368C419.909 29.3013 419.804 29.5547 419.617 29.7417C419.43 29.9287 419.176 30.034 418.912 30.0346Z" fill="white"/>
-<path d="M409.04 26.588C408.517 26.5902 408.006 26.4373 407.571 26.1487C407.136 25.8601 406.796 25.4488 406.594 24.9669C406.393 24.485 406.339 23.9541 406.44 23.4417C406.541 22.9292 406.791 22.4582 407.16 22.0882C407.529 21.7183 407.999 21.4662 408.511 21.3637C409.023 21.2613 409.554 21.3132 410.037 21.5129C410.519 21.7125 410.932 22.0509 411.222 22.4853C411.512 22.9196 411.667 23.4302 411.666 23.9525C411.665 24.6496 411.388 25.3179 410.896 25.8117C410.404 26.3054 409.737 26.5845 409.04 26.588Z" fill="white"/>
-<path d="M420.056 26.6362C419.859 26.6362 419.666 26.5777 419.502 26.468C419.338 26.3584 419.21 26.2026 419.135 26.0202C419.059 25.8379 419.039 25.6373 419.078 25.4437C419.116 25.2502 419.211 25.0724 419.351 24.9329C419.49 24.7933 419.668 24.6983 419.862 24.6598C420.055 24.6213 420.256 24.6411 420.438 24.7166C420.621 24.7921 420.776 24.92 420.886 25.0841C420.996 25.2481 421.054 25.4411 421.054 25.6384C421.054 25.9028 420.948 26.1563 420.761 26.3433C420.574 26.5303 420.321 26.6356 420.056 26.6362Z" fill="white"/>
-<path d="M417.09 26.5112C416.892 26.5112 416.698 26.4524 416.534 26.3422C416.37 26.2321 416.242 26.0756 416.167 25.8926C416.091 25.7097 416.072 25.5085 416.112 25.3146C416.151 25.1208 416.247 24.943 416.388 24.8039C416.529 24.6648 416.707 24.5707 416.902 24.5335C417.096 24.4962 417.297 24.5176 417.479 24.5948C417.661 24.672 417.816 24.8016 417.925 24.9672C418.033 25.1327 418.089 25.3267 418.087 25.5245C418.084 25.7872 417.978 26.0382 417.791 26.2229C417.604 26.4076 417.352 26.5112 417.09 26.5112Z" fill="white"/>
-<path d="M420.056 23.2729C419.859 23.2729 419.666 23.2144 419.502 23.1047C419.338 22.9951 419.21 22.8393 419.135 22.657C419.059 22.4746 419.039 22.274 419.078 22.0805C419.116 21.8869 419.211 21.7091 419.351 21.5696C419.49 21.43 419.668 21.335 419.862 21.2965C420.055 21.258 420.256 21.2778 420.438 21.3533C420.621 21.4288 420.776 21.5567 420.886 21.7208C420.996 21.8849 421.054 22.0778 421.054 22.2751C421.054 22.5396 420.948 22.793 420.761 22.98C420.574 23.167 420.321 23.2723 420.056 23.2729Z" fill="white"/>
-<path d="M417.09 23.3862C416.892 23.3862 416.699 23.3277 416.535 23.218C416.371 23.1084 416.243 22.9526 416.168 22.7702C416.092 22.5879 416.072 22.3873 416.111 22.1937C416.149 22.0002 416.244 21.8224 416.384 21.6829C416.524 21.5433 416.701 21.4483 416.895 21.4098C417.088 21.3713 417.289 21.3911 417.471 21.4666C417.654 21.5421 417.81 21.67 417.919 21.8341C418.029 21.9982 418.087 22.1911 418.087 22.3884C418.087 22.653 417.982 22.9068 417.795 23.0939C417.608 23.2811 417.354 23.3862 417.09 23.3862Z" fill="white"/>
-<path d="M418.969 19.9174C418.771 19.9179 418.578 19.8597 418.414 19.7504C418.249 19.641 418.121 19.4853 418.045 19.303C417.969 19.1207 417.949 18.9201 417.988 18.7264C418.026 18.5327 418.121 18.3547 418.26 18.2149C418.4 18.0751 418.577 17.9799 418.771 17.9412C418.965 17.9025 419.165 17.9222 419.348 17.9976C419.53 18.0731 419.686 18.201 419.796 18.3651C419.906 18.5292 419.964 18.7222 419.964 18.9197C419.964 19.1839 419.859 19.4373 419.673 19.6244C419.486 19.8115 419.233 19.9168 418.969 19.9174Z" fill="white"/>
-<path d="M41 90L41 78C41 73.5817 44.5817 70 49 70L57 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<path d="M73 50L73 62C73 66.4183 69.4183 70 65 70L57 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<line x1="73" y1="52" x2="73" y2="48" stroke="#343536" stroke-width="2"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 42 88)" stroke="#343536" stroke-width="2"/>
-<path d="M209 90L209 78C209 73.5817 212.582 70 217 70L225 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<path d="M241 50L241 62C241 66.4183 237.418 70 233 70L225 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<line x1="241" y1="52" x2="241" y2="48" stroke="#343536" stroke-width="2"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 210 88)" stroke="#343536" stroke-width="2"/>
-<path d="M377 90L377 78C377 73.5817 380.582 70 385 70L393 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<path d="M409 50L409 62C409 66.4183 405.418 70 401 70L393 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<line x1="409" y1="52" x2="409" y2="48" stroke="#343536" stroke-width="2"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 378 88)" stroke="#343536" stroke-width="2"/>
-<line x1="41" y1="142" x2="41" y2="154" stroke="#343536" stroke-width="2"/>
-<line x1="41" y1="144" x2="41" y2="140" stroke="#343536" stroke-width="2"/>
-<line x1="41" y1="152" x2="41" y2="156" stroke="#343536" stroke-width="2"/>
-<line x1="209" y1="142" x2="207" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
-<line x1="209" y1="144" x2="209" y2="140" stroke="black" stroke-width="2"/>
-<line x1="209" y1="152" x2="209" y2="156" stroke="black" stroke-width="2"/>
-<line x1="377" y1="142" x2="377" y2="154" stroke="#343536" stroke-width="2"/>
-<line x1="377" y1="144" x2="377" y2="140" stroke="#343536" stroke-width="2"/>
-<line x1="377" y1="152" x2="377" y2="156" stroke="#343536" stroke-width="2"/>
-<line x1="105" y1="142" x2="103" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
-<line x1="105" y1="144" x2="105" y2="140" stroke="black" stroke-width="2"/>
-<line x1="105" y1="152" x2="105" y2="156" stroke="black" stroke-width="2"/>
-<line x1="273" y1="142" x2="273" y2="154" stroke="#343536" stroke-width="2"/>
-<line x1="273" y1="144" x2="273" y2="140" stroke="#343536" stroke-width="2"/>
-<line x1="273" y1="152" x2="273" y2="156" stroke="#343536" stroke-width="2"/>
-<line x1="441" y1="142" x2="439" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
-<line x1="441" y1="144" x2="441" y2="140" stroke="black" stroke-width="2"/>
-<line x1="441" y1="152" x2="441" y2="156" stroke="black" stroke-width="2"/>
-<path d="M105 90L105 78C105 73.5817 101.418 70 97 70L89 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<path d="M73 50L73 62C73 66.4183 76.5817 70 81 70L89 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 72 52)" stroke="#343536" stroke-width="2"/>
-<line x1="105" y1="88" x2="105" y2="92" stroke="#343536" stroke-width="2"/>
-<path d="M273 90L273 78C273 73.5817 269.418 70 265 70L257 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<path d="M241 50L241 62C241 66.4183 244.582 70 249 70L257 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 240 52)" stroke="#343536" stroke-width="2"/>
-<line x1="273" y1="88" x2="273" y2="92" stroke="#343536" stroke-width="2"/>
-<path d="M441 90L441 78C441 73.5817 437.418 70 433 70L425 70" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
-<path d="M409 50L409 62C409 66.4183 412.582 70 417 70L425 70" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
-<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 408 52)" stroke="black" stroke-width="2"/>
-<line x1="441" y1="88" x2="441" y2="92" stroke="black" stroke-width="2"/>
-<path d="M60.3337 129.916L55.7503 134.499L53.667 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M228.333 129.916L223.749 134.499L221.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M396.333 129.916L391.749 134.499L389.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M60.3337 193.916L55.7503 198.499L53.667 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M292.333 193.916L287.749 198.499L285.666 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M396.333 193.916L391.749 198.499L389.666 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M124.334 129.916L119.75 134.499L117.667 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M292.333 129.916L287.749 134.499L285.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/website/pages/use-cases/img/mercedes-logo.svg
+++ b/website/pages/use-cases/img/mercedes-logo.svg
--- a/website/pages/use-cases/img/multi-platform-service-mesh/Ecosystem.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/Ecosystem.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/extend-mesh.svg
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/extend-mesh.svg
--- a/website/pages/use-cases/img/multi-platform-service-mesh/kubernetes-extend-transparent.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/kubernetes-extend-transparent.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/kubernetes-extend.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/kubernetes-extend.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/muilti-datacenter.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/muilti-datacenter.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/observability@3x.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/observability@3x.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/service-to-service.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/service-to-service.png
--- a/website/pages/use-cases/img/multi-platform-service-mesh/service-to-service.svg
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/service-to-service.svg
--- a/website/pages/use-cases/img/multi-platform-service-mesh/traffic_mgmt@3x.png
+++ b/website/pages/use-cases/img/multi-platform-service-mesh/traffic_mgmt@3x.png
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39.3 25.03l5.64-5.17-5.64-5.17M20.03 34.9l5.17 5.64 5.17-5.64M11.1 14.69l-5.64 5.17 5.64 5.17" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.45 2a1.25 1.25 0 00-2.5 0h2.5zM6.4 21.11h18.8v-2.5H6.4v2.5zm18.8 0H44v-2.5H25.2v2.5zm-1.25-1.25V39.6h2.5V19.86h-2.5zm2.5 0V2h-2.5v17.86h2.5z" fill="#000"/></svg>`
				`@ -1 +0,0 @@`
				<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.46 21.044l.31-5.557a10.707 10.707 0 00-6.291 3.058l4.489 3.23.009-.004c.152.113.339.179.542.179a.926.926 0 00.919-.894l.022-.012zM32.639 18.548a10.78 10.78 0 00-6.253-3.06l.31 5.547.004.002c.008.191.074.38.2.541a.912.912 0 001.263.172l.015.007 4.46-3.21zM19.95 24.342l-4.1-3.721a11.043 11.043 0 00-1.524 6.906l5.253-1.54.005-.017a.92.92 0 00.477-.32.943.943 0 00-.116-1.285l.005-.023zM35.618 23.957a11.139 11.139 0 00-1.345-3.334l-4.076 3.703.002.012a.929.929 0 00-.292.495c-.11.49.18.978.653 1.11l.005.022 5.28 1.544a11.19 11.19 0 00-.227-3.552zM25.915 24.63h-1.68l-1.045 1.322.375 1.652 1.512.738 1.507-.736.375-1.652-1.044-1.324zM29.831 29.177a.905.905 0 00-.212-.016.909.909 0 00-.352.093.94.94 0 00-.446 1.21l-.007.01 2.11 5.172a10.898 10.898 0 004.35-5.548l-5.434-.932-.009.011zM21.375 29.91a.924.924 0 00-1.064-.71l-.009-.012-5.388.928a10.94 10.94 0 004.338 5.51l2.087-5.12-.016-.02a.938.938 0 00.052-.576zM25.474 31.52a.9.9 0 00-.43-.093.92.92 0 00-.78.493h-.004l-2.649 4.862a10.64 10.64 0 005.89.308 10.9 10.9 0 001.061-.3l-2.656-4.872h-.02a.921.921 0 00-.412-.398z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.626 1.135a3.317 3.317 0 012.895 0L43.96 9.586a3.366 3.366 0 011.804 2.277l4.308 18.996a3.378 3.378 0 01-.644 2.84L37.363 48.934a3.316 3.316 0 01-2.607 1.26l-19.354.005a3.317 3.317 0 01-2.607-1.263L.726 33.705a3.37 3.37 0 01-.642-2.84l4.302-18.997A3.338 3.338 0 016.19 9.591l17.436-8.456zm.407 7.313c0-.65.467-1.177 1.044-1.177.576 0 1.043.527 1.043 1.177l.002.107c.001.068.003.139 0 .194-.009.247-.047.456-.086.67-.02.109-.04.22-.056.337l-.007.056c-.085.715-.156 1.31-.111 1.866.035.246.162.363.284.476l.057.053c.003.077.015.332.024.474 3.319.299 6.4 1.84 8.664 4.248l.397-.287c.016 0 .034.002.054.004.15.011.4.03.58-.074.455-.312.871-.741 1.37-1.255l.036-.038c.079-.085.15-.168.222-.25.142-.165.28-.327.467-.49.047-.04.11-.09.168-.137l.064-.05c.501-.406 1.197-.363 1.557.094.36.457.244 1.157-.257 1.562l-.075.063c-.054.044-.11.091-.154.125-.195.146-.38.245-.567.346a7.559 7.559 0 00-.3.168h-.002c-.623.391-1.14.715-1.55 1.107-.169.182-.18.356-.191.523a3.148 3.148 0 01-.006.076l-.158.145c-.074.067-.156.14-.212.193a13.819 13.819 0 011.955 4.588c.379 1.67.438 3.34.219 4.945l.421.125.03.044c.084.124.228.34.421.415.532.17 1.13.234 1.85.31l.021.003c.118.01.23.014.342.019.212.008.421.017.66.062.053.01.123.028.19.045l.113.028c.615.15 1.01.724.883 1.29-.127.566-.728.91-1.347.774l-.008-.001a.08.08 0 01-.008-.001l-.02-.007-.1-.02a2.895 2.895 0 01-.17-.039 4.26 4.26 0 01-.622-.234c-.102-.045-.205-.09-.314-.133l-.032-.011c-.676-.246-1.24-.451-1.788-.532-.244-.02-.385.08-.52.175l-.064.045a15.51 15.51 0 00-.446-.08c-1 3.19-3.13 5.953-6.017 7.683.016.039.036.092.056.148.043.119.091.248.118.28l-.029.074c-.06.154-.124.313-.051.55.202.534.53 1.055.925 1.682.066.1.131.19.197.281.126.174.25.345.363.563a5.468 5.468 0 01.136.286c.268.582.071 1.253-.444 1.505-.52.254-1.165-.014-1.443-.6a8.499 8.499 0 00-.039-.08c-.032-.066-.066-.137-.09-.192a4.523 4.523 0 01-.21-.644c-.03-.107-.058-.214-.093-.327l-.01-.029c-.233-.691-.426-1.266-.706-1.752-.138-.207-.303-.257-.461-.306a3.562 3.562 0 01-.072-.022l-.104-.19-.12-.218a13.298 13.298 0 01-9.631-.025l-.236.435c-.176.048-.346.096-.45.222-.267.324-.421.785-.585 1.275-.07.207-.14.42-.223.629-.035.114-.065.223-.094.332-.055.208-.11.413-.207.639a4.149 4.149 0 01-.086.18 8.18 8.18 0 00-.043.089v.002l-.002.002c-.279.584-.923.851-1.441.598-.515-.252-.712-.923-.444-1.505.015-.03.03-.066.047-.103.03-.064.06-.132.087-.182a4.46 4.46 0 01.365-.568c.065-.09.13-.18.195-.279.395-.627.742-1.19.944-1.723.051-.178-.024-.42-.092-.6l.19-.461a13.749 13.749 0 01-6.02-7.628l-.455.08-.046-.028c-.131-.077-.347-.204-.553-.188-.55.08-1.113.286-1.79.532l-.03.011c-.108.042-.21.086-.31.13-.197.086-.39.17-.627.235a3.955 3.955 0 01-.27.06.066.066 0 00-.01.004.088.088 0 01-.01.004c-.004 0-.01 0-.015.002-.62.135-1.22-.209-1.347-.774-.128-.566.268-1.14.883-1.29l.015-.005.005-.001a.68.68 0 01.004-.001l.084-.02c.068-.017.14-.035.195-.046.238-.046.447-.054.66-.062.111-.005.223-.01.341-.02l.024-.002c.72-.076 1.316-.14 1.847-.31.15-.062.296-.255.407-.404.014-.02.028-.038.042-.055l.437-.13a13.871 13.871 0 012.13-9.556l-.335-.303-.008-.05c-.021-.148-.059-.407-.202-.561-.41-.391-.928-.716-1.552-1.107-.102-.06-.2-.114-.298-.167a4.27 4.27 0 01-.567-.347c-.045-.034-.101-.08-.155-.125l-.061-.051a.17.17 0 00-.008-.006l-.008-.006c-.5-.405-.616-1.104-.256-1.561a1 1 0 01.831-.374c.25.009.508.101.727.278l.063.05c.059.047.123.098.17.138.185.162.322.323.462.486.072.084.144.169.224.255l.018.018c.507.523.928.956 1.39 1.272.212.125.382.098.545.072l.074-.011c.06.045.262.192.377.271a13.38 13.38 0 018.706-4.248l.025-.448c.139-.137.294-.333.339-.548.045-.566-.028-1.174-.115-1.907l-.001-.015c-.017-.117-.037-.228-.057-.338a4.482 4.482 0 01-.086-.67 3.557 3.557 0 01.002-.27l-.001-.015-.001-.015z" fill="#000"/></svg>
				`@ -1 +0,0 @@`
				`<svg id="LOGOS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162.34 162.34"><path d="M23.48,24.42l57.39,115.2,57.81-115.2ZM87.7,47.54h6.68v6.68H87.7ZM74.4,74.25H67.72V67.57H74.4Zm0-10H67.72V57.55H74.4Zm0-10H67.72V47.54H74.4Zm10,30.05H77.74V77.59h6.67Zm0-10H77.74V67.57h6.67Zm0-10H77.74V57.55h6.67Zm0-10H77.74V47.54h6.67Zm3.29,3.33h6.68v6.68H87.7Zm0,16.7V67.57h6.68v6.68Z"/></svg>`
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 581.68 158.94"><defs><style>.cls-1,.cls-2{fill:#2c2f33;}.cls-1,.cls-3,.cls-4,.cls-5{fill-rule:evenodd;}.cls-3{fill:url(#Sunrise);}.cls-4{fill:url(#Sunrise-2);}.cls-5{fill:url(#Sunrise-3);}</style><linearGradient id="Sunrise" x1="73.6" y1="12.19" x2="619.56" y2="12.19" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f68c21"/><stop offset="1" stop-color="#f16324"/></linearGradient><linearGradient id="Sunrise-2" x1="73.6" y1="146.75" x2="619.56" y2="146.75" xlink:href="#Sunrise"/><linearGradient id="Sunrise-3" x1="73.6" y1="79.22" x2="619.56" y2="79.22" xlink:href="#Sunrise"/></defs><title>18_Criteo_Brand_Logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M117.52,157.79H101.68V63.42h15.84V75c5.61-8,15-12.6,26-12.6a44.27,44.27,0,0,1,5.65.37l1.16.16V79.82l-1.68-.42a37.23,37.23,0,0,0-8.48-.84c-13.3,0-22.6,9.8-22.6,23.84Z"/><path class="cls-1" d="M301.29,157.63c15.6,0,26.86-4.85,36.52-15.71l.83-.93-10.12-10.43-1,1c-7.16,7.6-13.75,12-26.26,12-17.57,0-29.06-11.3-30.25-29.59h71.25l.09-1.26c.17-2.63.17-5.54.17-5.67,0-12.86-4-24.62-11.22-33.11-7.64-9-18.15-13.73-30.39-13.73-27,0-45.81,20.55-45.81,50v.7C255.13,138.85,273.68,157.63,301.29,157.63ZM272,100c1.58-13.8,14.27-24.79,29-24.79,13.66,0,24.85,11,25.53,24.79Z"/><rect class="cls-2" x="165.7" y="63.42" width="15.84" height="94.38"/><path class="cls-1" d="M235.8,158.94c-4.85,0-12-.5-17.67-4.83-6.18-4.68-9.32-12.89-9.32-24.38V41.5h15.84V63.35h20.6V78.29h-20.6v51.44c0,11.88,4.2,14.26,11,14.26a46.16,46.16,0,0,0,8.07-.52l1.56-.25v14.55l-1,.25A33.15,33.15,0,0,1,235.8,158.94Z"/><path class="cls-1" d="M401,158.94a47.8,47.8,0,0,0,34.12-14,49.55,49.55,0,0,0,14.21-35.39,49.55,49.55,0,0,0-14.21-35.39,48.64,48.64,0,0,0-68.23,0,49.54,49.54,0,0,0-14.2,35.39A49.54,49.54,0,0,0,366.91,145,47.81,47.81,0,0,0,401,158.94Zm0-83.78A31.53,31.53,0,0,1,424.28,85c5.94,6.32,9.22,15.07,9.22,24.62s-3.28,18.29-9.22,24.61a32.49,32.49,0,0,1-46.51,0c-5.94-6.32-9.22-15.06-9.22-24.61s3.28-18.3,9.22-24.62A31.52,31.52,0,0,1,401,75.16Z"/><path class="cls-1" d="M48.65,158.94a48.32,48.32,0,0,1-34.38-14A49.42,49.42,0,0,1,0,109.58,49.4,49.4,0,0,1,14.27,74.19a48.33,48.33,0,0,1,34.38-14c13.8,0,25.77,4.81,34.61,13.92l.85.88L74.42,86.49l-1-1.09C67,78.7,58.47,75.16,48.65,75.16A32,32,0,0,0,25.15,85c-6,6.32-9.31,15.06-9.31,24.61s3.31,18.28,9.31,24.6A32,32,0,0,0,48.65,144c9.82,0,18.37-3.54,24.73-10.23l1-1.1,9.69,11.48-.85.88C74.42,154.13,62.46,158.94,48.65,158.94Z"/><path class="cls-3" d="M173.63,24.37a12.19,12.19,0,1,1,12.1-12.18A12.17,12.17,0,0,1,173.63,24.37Z"/><path class="cls-4" d="M569.58,158.94a12.19,12.19,0,1,1,12.1-12.2A12.17,12.17,0,0,1,569.58,158.94Z"/><path class="cls-5" d="M535.12,141h-32.2a15.08,15.08,0,0,1-15.07-15.08V31.15A24.68,24.68,0,0,0,463.18,6.48H208.29v11H461.81a15.07,15.07,0,0,1,15.07,15.07v94.77A24.68,24.68,0,0,0,501.55,152h33.57Z"/></g></g></svg>