Update the homepage

website/components/animated-terminal/index.tsx

@@ -0,0 +1,42 @@
+import CommandLineTerminal from '@hashicorp/react-command-line-terminal'
+import { useEffect, useState } from 'react'
+
+export default function AnimatedTerminal({
+  lines,
+  frameLength = 1000,
+  paused,
+  loop,
+}) {
+  // Determine the total number of frames
+  let totalFrames = 0
+  lines.forEach((line) => {
+    let frames = line.frames ? line.frames : 1
+    if (Array.isArray(line.code)) {
+      totalFrames += line.code.length * frames
+    } else {
+      totalFrames += frames
+    }
+  })
+
+  // Set up Animation
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    let interval = setInterval(() => {
+      if (paused) return
+      if (loop) return setFrame((frame) => frame + 1)
+      if (frame + 1 < totalFrames) {
+        setFrame((frame) => frame + 1)
+      }
+    }, frameLength)
+    return () => clearInterval(interval)
+  }, [frame])
+
+  // Reset Frames if our lines change
+  useEffect(() => {
+    setFrame(0)
+  }, [lines])
+
+  const renderedLines = [...lines.slice(0, frame)]
+
+  return <CommandLineTerminal product="packer" lines={renderedLines} />
+}

website/components/branded-cta/index.tsx

@@ -0,0 +1,33 @@
+import s from './style.module.css'
+import Button from '@hashicorp/react-button'
+
+export default function BrandedCta({ heading, content, links }) {
+  return (
+    <div className={s.brandedCta}>
+      <div className={`g-grid-container ${s.contentContainer}`}>
+        <h2 className={`g-type-display-2 ${s.heading}`}>{heading}</h2>
+        <div className="content-and-links">
+          <p className={`g-type-body-large ${s.content}`}>{content}</p>
+          <div className={s.links}>
+            {links.map((link, stableIdx) => {
+              return (
+                <Button
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={stableIdx}
+                  linkType={link.type || ''}
+                  theme={{
+                    variant: stableIdx === 0 ? 'primary' : 'secondary',
+                    brand: 'packer',
+                    background: 'light',
+                  }}
+                  title={link.text}
+                  url={link.url}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

website/components/branded-cta/style.module.css

@@ -0,0 +1,67 @@
+.brandedCta {
+  padding: 88px 0;
+  background-color: var(--packer-secondary);
+  background-image: url('/img/branded-cta/cta-right.svg');
+  background-position: bottom right;
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+
+  @media (--small) {
+    background-position: bottom 0 right -130px;
+  }
+
+  @media (462px <= width < 600px) {
+    background-position: bottom 0 right -260px;
+  }
+
+  @media (width < 462px) {
+    background-position: bottom 0 right -170px;
+  }
+}
+
+.contentContainer {
+  @media (width >= 992px) {
+    display: flex;
+  }
+
+  @media (width < 992px) {
+    flex-direction: column;
+  }
+}
+
+.heading {
+  color: var(--black);
+  margin-top: 0;
+
+  @media (width >= 992px) {
+    flex-basis: 33.3%;
+    margin: 0;
+  }
+}
+
+.content {
+  max-width: 647px;
+  margin: 0;
+  color: var(--gray-2);
+}
+
+.content-and-links {
+  @media (width >= 992px) {
+    flex-basis: 66.6%;
+    margin-left: 32px;
+  }
+
+  & .g-type-body-large {
+    max-width: 35em;
+  }
+}
+
+.links {
+  margin-top: 40px;
+  margin-bottom: -16px;
+
+  & a {
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+}

website/components/homepage-hero/index.tsx

@@ -0,0 +1,48 @@
+import Alert from '@hashicorp/react-alert'
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+export default function HomepageHero({
+  heading,
+  heroFeature,
+  subheading,
+  links,
+  alert,
+}) {
+  return (
+    <div className={s.homepageHero}>
+      <div className={s.gridContainer}>
+        <div className={s.content}>
+          {alert ? (
+            <Alert
+              url={alert.url}
+              tag={alert.tag}
+              product="packer"
+              text={alert.text}
+              textColor="dark"
+            />
+          ) : null}
+          <h1 className={s.heading}>{heading}</h1>
+          <p className={s.subheading}>{subheading}</p>
+          <div className={s.links}>
+            {links.map((link, index) => (
+              <Button
+                key={link.text}
+                title={link.text}
+                linkType={link.type}
+                url={link.url}
+                theme={{
+                  variant: index === 0 ? 'primary' : 'secondary',
+                  brand: index === 0 ? 'packer' : 'neutral',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+        <div className={s.heroFeature}>
+          <div className={s.heroFeatureFrame}>{heroFeature}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

website/components/homepage-hero/style.module.css

@@ -0,0 +1,90 @@
+.homepageHero {
+  min-height: min(45vw, 600px);
+  padding: 64px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #f0fbff;
+  background-image: url(/img/homepage-hero/hero-right.svg);
+  background-position: bottom -250px right;
+  background-repeat: no-repeat;
+  background-size: contain;
+  @media (--medium-up) {
+    background-position: top right;
+  }
+}
+
+.gridContainer {
+  composes: g-grid-container from global;
+  position: relative;
+  @media (--large) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    width: 100%;
+  }
+}
+
+.content {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  color: var(--gray-2);
+  @media (--medium-up) {
+    max-width: 550px;
+  }
+  @media (--large) {
+    align-items: flex-start;
+    text-align: left;
+    width: 100%;
+  }
+}
+
+.heading {
+  composes: g-type-display-1 from global;
+  margin-top: 12px;
+  margin-bottom: 24px;
+}
+
+.heroFeature {
+  display: none;
+  position: relative;
+  @media (--large) {
+    display: flex;
+    min-height: 500px;
+  }
+}
+
+.heroFeatureFrame {
+  position: absolute;
+  width: calc(100% + 80px);
+  height: 100%;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  & a {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+  @media (--large) {
+    width: auto;
+    justify-content: flex-start;
+  }
+}
+
+.subheading {
+  composes: g-type-body-large from global;
+  color: inherit;
+  margin: 0;
+  font-size: 17px;
+  line-height: 25px;
+  margin-bottom: 40px;
+}

website/components/integrations-text-split/index.tsx

@@ -0,0 +1,21 @@
+import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
+
+export default function IntegrationsTextSplit({
+  heading,
+  links,
+  content,
+  image,
+}) {
+  return (
+    <TextSplitWithImage
+      textSplit={{
+        heading,
+        product: 'packer',
+        content,
+        linkStyle: 'buttons',
+        links,
+      }}
+      image={image}
+    />
+  )
+}

website/components/section-break-cta/index.tsx

@@ -0,0 +1,21 @@
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+export default function SectionBreakCta({ heading, link }) {
+  return (
+    <div className={s.sectionBreakCta}>
+      <hr />
+      <h4 className={s.heading}>{heading}</h4>
+      <Button
+        title={link.text}
+        url={link.url}
+        theme={{
+          brand: 'neutral',
+          variant: 'tertiary-neutral',
+          background: 'light',
+        }}
+        linkType="outbound"
+      />
+    </div>
+  )
+}

website/components/section-break-cta/style.module.css

@@ -0,0 +1,33 @@
+.sectionBreakCta {
+  padding: 88px 24px;
+  max-width: 800px;
+  display: grid;
+  grid-gap: 24px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin: 0 16px;
+  background-color: var(--white);
+  align-items: center;
+
+  @media (--medium-up) {
+    margin: 0 auto 104px auto;
+  }
+  & hr {
+    position: absolute;
+    top: 56px;
+    left: calc(50% - 32px);
+    width: 64px;
+    background-color: var(--packer);
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+}
+
+.heading {
+  composes: g-type-display-4 from global;
+  margin: 0;
+  @media (--medium-up) {
+    padding: 0 88px;
+  }
+}

website/data/subnav.js

@@ -1,14 +1,9 @@
 export default [
   { text: 'Overview', url: '/', type: 'inbound' },
   {
-    text: 'Intro',
+    text: 'Tutorials',
-    url: '/intro',
+    url: 'https://learn.hashicorp.com/packer',
-    type: 'inbound',
+    type: 'outbound',
-  },
-  {
-    text: 'Guides',
-    url: '/guides',
-    type: 'inbound',
   },
   {
     text: 'Docs',

website/package.json

@@ -9,15 +9,18 @@
     "@hashicorp/nextjs-scripts": "18.2.0",
     "@hashicorp/react-alert-banner": "^6.1.1",
     "@hashicorp/react-button": "5.0.0",
+    "@hashicorp/react-command-line-terminal": "^2.0.2",
     "@hashicorp/react-docs-page": "13.2.0",
     "@hashicorp/react-hashi-stack-menu": "2.0.3",
     "@hashicorp/react-head": "3.0.1",
     "@hashicorp/react-inline-svg": "6.0.0",
     "@hashicorp/react-markdown-page": "1.2.0",
     "@hashicorp/react-product-downloads-page": "2.0.2",
+    "@hashicorp/react-product-features-list": "^4.0.1",
     "@hashicorp/react-search": "5.0.1",
     "@hashicorp/react-section-header": "5.0.2",
     "@hashicorp/react-subnav": "8.1.0",
+    "@hashicorp/react-text-split-with-image": "^4.1.1",
     "@hashicorp/react-vertical-text-block-list": "6.0.2",
     "adm-zip": "^0.5.5",
     "gray-matter": "^4.0.2",

website/pages/home/index.jsx

@@ -1,139 +1,171 @@
-import Button from '@hashicorp/react-button'
+import ProductFeaturesList from '@hashicorp/react-product-features-list'
-import VERSION from 'data/version'
+import AnimatedTerminal from 'components/animated-terminal'
+import BrandedCta from 'components/branded-cta'
+import HomepageHero from 'components/homepage-hero'
+import IntegrationsTextSplit from 'components/integrations-text-split'
+
+import s from './style.module.css'
 
 export default function Homepage() {
   return (
-    <div id="p-home">
+    <div id="p-home" className={s.home}>
       <section id="hero">
-        <img
+        <HomepageHero
-          src={require('@hashicorp/mktg-logos/product/packer/primary/attributed_color.svg')}
+          heading="Build automated machine images"
-          alt="HashiCorp Packer Logo"
+          subheading="Create identical machine images for multiple platforms from a single source configuration."
+          links={[
+            {
+              text: 'Download',
+              url: '/downloads',
+              type: 'inbound',
+            },
+            {
+              text: 'Explore Tutorials',
+              url: 'https://learn.hashicorp.com/packer',
+              type: 'outbound',
+            },
+          ]}
+          heroFeature={
+            <AnimatedTerminal
+              lines={[
+                {
+                  code: '$ packer build template.pkr.hcl',
+                  color: 'gray',
+                },
+                {
+                  code:
+                    '==> virtualbox: virtualbox output will be in this color.',
+                  color: 'white',
+                },
+                { code: '==> vmware: vmware output will be in this color.' },
+                {
+                  code:
+                    '==> vmware: Copying or downloading ISO. Progress will be reported periodically.',
+                },
+                { code: '==> vmware: Creating virtual machine disk' },
+                { code: '==> vmware: Building and writing VMX file' },
+                { code: '==> vmware: Starting HTTP server on port 8964' },
+                { code: '==> vmware: Starting virtual machine...' },
+                {
+                  code:
+                    '==> virtualbox: Downloading VirtualBox guest additions. Progress will be shown periodically',
+                  color: 'white',
+                },
+                {
+                  code:
+                    '==> virtualbox: Copying or downloading ISO. Progress will be reported periodically.',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Starting HTTP server on port 8081',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Creating virtual machine...',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Creating hard drive...',
+                  color: 'white',
+                },
+              ]}
+            />
+          }
         />
-        <h1 className="g-type-display-3">Build Automated Machine Images</h1>
-        <div className="buttons">
-          <Button
-            title="Get Started"
-            theme={{ brand: 'packer' }}
-            url="https://learn.hashicorp.com/packer"
-          />
-          <Button
-            title={`Download ${VERSION}`}
-            theme={{
-              variant: 'secondary',
-              background: 'light',
-            }}
-            url="/downloads"
-          />
-        </div>
       </section>
-      <section id="infrastructure-as-code" className="g-container">
+      <section id="features">
-        <div className="code-block">
+        <ProductFeaturesList
-          <div className="circles">
+          heading="Why Packer?"
-            <span></span>
+          features={[
-            <span></span>
+            {
-            <span></span>
+              title: 'Rapid Infrastructure Deployment',
-          </div>
+              content:
-          $ packer build template.pkr.hcl
+                'Use Terraform to launch completely provisioned and configured machine instances with Packer images in seconds.',
-          <span className="green">
+              icon: '/img/product-features-list/deployment.svg',
-            ==&gt; virtualbox: virtualbox output will be in this color.
+            },
-          </span>
+            {
-          <span className="blue">
+              title: 'Multi-provider Portability',
-            ==&gt; vmware: vmware output will be in this color.
+              content:
-          </span>
+                'Identical images allow you to run dev, staging, and production environments across platforms.',
-          <span className="blue">
+              icon: '/img/product-features-list/portability.svg',
-            ==&gt; vmware: Copying or downloading ISO. Progress will be reported
+            },
-            periodically.
+            {
-          </span>
+              title: 'Improved Stability',
-          <span className="blue">
+              content:
-            ==&gt; vmware: Creating virtual machine disk
+                'By provisioning instances from stable images installed and configured by Packer, you can ensure buggy software does not get deployed.',
-          </span>
+              icon: '/img/product-features-list/stability.svg',
-          <span className="blue">
+            },
-            ==&gt; vmware: Building and writing VMX file
+            {
-          </span>
+              title: 'Increased Dev / Production Parity',
-          <span className="blue">
+              content:
-            ==&gt; vmware: Starting HTTP server on port 8964
+                'Keep dev, staging, and production environments as similar as possible by generating images for multiple platforms at the same time.',
-          </span>
+              icon: '/img/product-features-list/prod-parity.svg',
-          <span className="blue">
+            },
-            ==&gt; vmware: Starting virtual machine...
+            {
-          </span>
+              title: 'Reliable Continuous Delivery',
-          <span className="green">
+              content:
-            ==&gt; virtualbox: Downloading VirtualBox guest additions. Progress
+                'Generate new machine images for multiple platforms, launch and test, and verify the infrastructure changes work; then, use Terraform to put your images in production.',
-            will be shown periodically
+              icon: '/img/product-features-list/continuous-delivery.svg',
-          </span>
+            },
-          <span className="green">
+            {
-            ==&gt; virtualbox: Copying or downloading ISO. Progress will be
+              title: 'Appliance Demo Creation',
-            reported periodically.
+              content:
-          </span>
+                'Create software appliances and disposable product demos quickly, even with software that changes continuously.',
-          <span className="green">
+              icon: '/img/product-features-list/demo-creation.svg',
-            ==&gt; virtualbox: Starting HTTP server on port 8081
+            },
-          </span>
+          ]}
-          <span className="green">
+        />
-            ==&gt; virtualbox: Creating virtual machine...
-          </span>
-          <span className="green">
-            ==&gt; virtualbox: Creating hard drive...
-          </span>
-          <span className="green">
-            ==&gt; virtualbox: Creating forwarded port mapping for SSH (host
-            port 3213)
-          </span>
-          <span className="green">
-            ==&gt; virtualbox: Executing custom VBoxManage commands...
-            virtualbox: Executing: modifyvm packer --memory 480 virtualbox:
-            Executing: modifyvm packer --cpus
-          </span>
-          <span className="green">
-            ==&gt; virtualbox: Starting the virtual machine...
-          </span>
-          <span className="blue">==&gt; vmware: Waiting 10s for boot...</span>
-          <span className="green">
-            ==&gt; virtualbox: Waiting 10s for boot...
-          </span>
-        </div>
-        <div className="text">
-          <div className="tag g-type-label">Infrastructure as Code</div>
-          <h2 className="g-type-display-2">Modern, Automated</h2>
-          <p className="g-type-body">
-            HashiCorp Packer automates the creation of any type of machine
-            image. It embraces modern configuration management by encouraging
-            you to use automated scripts to install and configure the software
-            within your Packer-made images. Packer brings machine images into
-            the modern age, unlocking untapped potential and opening new
-            opportunities.
-          </p>
-        </div>
       </section>
-      <section id="integrations">
+
-        <div className="g-container">
+      <section>
-          <div className="logos">
+        <IntegrationsTextSplit
-            <img src="/img/integrations/azure.svg" alt="Microsoft Azure Logo" />
+          heading="Extending Packer with Plugins"
-            <img
+          content={
-              src="/img/integrations/aws.svg"
+            <>
-              alt="Amazon Web Services Logo"
+              <p className="g-type-body">
-            />
+                Extend Packer’s functionality without modifying Packer core.
-            <img src="/img/integrations/vmware.svg" alt="VMware Logo" />
+                Plugins are capable of adding these components:
-            <img
+              </p>
-              src="/img/integrations/google-cloud.svg"
+              <ul className={s.textSplitList}>
-              alt="Google Cloud Platform Logo"
+                <li>Builders</li>
-            />
+                <li>Provisioners</li>
-            <img src="/img/integrations/docker.svg" alt="Docker Logo" />
+                <li>Post-processors</li>
-            <img
+                <li>Data sources</li>
-              src="/img/integrations/digitalocean.svg"
+              </ul>
-              alt="DigitalOcean Logo"
+            </>
-            />
+          }
-          </div>
+          links={[
-          <div className="text">
+            {
-            <div className="tag g-type-label">Integrations</div>
+              text: 'Read the Docs',
-            <h2 className="g-type-display-2">Works Out of The Box</h2>
+              url: '/docs',
-            <p className="g-type-body">
+              type: 'none',
-              Out of the box Packer comes with support to build images for
+            },
-              Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
+            {
-              Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.
+              text: 'Develop a plugin',
-              Support for more platforms is on the way, and anyone can add new
+
-              platforms via plugins.
+              url: '/docs/plugins',
-            </p>
+              type: 'inbound',
-          </div>
+            },
-        </div>
+          ]}
+          image={{
+            url: '/img/integrations-text-split/integrations.png',
+            alt: 'Build images with Packer plugins',
+          }}
+        />
+      </section>
+      <section id="get-started">
+        <BrandedCta
+          heading="Ready to get started?"
+          content="Start by following a tutorial to deploy a simple application with Waypoint or learn about how the project works by exploring the documentation."
+          links={[
+            {
+              text: 'Get Started',
+              url: '/docs/getting-started',
+              type: 'inbound',
+            },
+            { text: 'Explore documentation', url: '/docs' },
+          ]}
+        />
       </section>
     </div>
   )

website/pages/home/style.css

@@ -1,173 +0,0 @@
-#p-home {
-  & > section {
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-
-  & #hero {
-    text-align: center;
-
-    & h1 {
-      margin: 24px 0 40px 0;
-    }
-
-    & img {
-      width: 300px;
-      margin: 0 30px;
-    }
-
-    & .buttons {
-      & > * {
-        @media (max-width: 350px) {
-          display: block;
-          width: 80%;
-          margin: 0 10%;
-        }
-
-        &:first-child {
-          margin-right: 15px;
-
-          @media (max-width: 350px) {
-            margin-bottom: 15px;
-          }
-        }
-      }
-    }
-  }
-
-  & #infrastructure-as-code {
-    display: flex;
-
-    @media (max-width: 1000px) {
-      flex-direction: column;
-    }
-
-    & h2 {
-      margin: 20px 0 10px 0;
-    }
-
-    & .code-block,
-    & .text {
-      width: calc(50%);
-
-      & p {
-        color: var(--gray-2);
-      }
-
-      @media (max-width: 1000px) {
-        width: 100%;
-      }
-    }
-
-    & .code-block {
-      margin-right: 50px;
-      background: black;
-      color: white;
-      padding: 15px 20px 20px;
-      font-family: dejavu-sans-mono-web, monospace;
-      font-size: 14px;
-      overflow: scroll;
-
-      @media (max-width: 1000px) {
-        margin-right: 0;
-        margin-bottom: 50px;
-      }
-
-      & .circles {
-        display: flex;
-        margin-bottom: 8px;
-
-        & > span {
-          display: block;
-          width: 8px;
-          height: 8px;
-          background: white;
-          border-radius: 50%;
-          margin-right: 4px;
-        }
-      }
-
-      & span {
-        display: block;
-        white-space: pre;
-
-        &.green {
-          color: #5bfb5a;
-        }
-
-        &.blue {
-          color: #53ffff;
-        }
-      }
-    }
-  }
-
-  & #integrations {
-    background: var(--packer-secondary);
-    color: white;
-
-    & > .g-container {
-      display: flex;
-      flex-direction: row-reverse;
-
-      @media (max-width: 1000px) {
-        flex-direction: column;
-      }
-    }
-
-    & h2 {
-      margin: 20px 0 10px 0;
-    }
-
-    & .text {
-      color: var(--packer-text-on-primary);
-    }
-
-    & .logos,
-    & .text {
-      width: calc(50%);
-
-      @media (max-width: 1000px) {
-        width: 100%;
-      }
-    }
-
-    & .logos {
-      display: flex;
-      flex-wrap: wrap;
-      height: 212px;
-      margin-left: 50px;
-      max-width: 600px;
-
-      @media (max-width: 1000px) {
-        margin: 0 auto;
-        margin-bottom: 50px;
-      }
-
-      & > img {
-        display: block;
-        background: white;
-        padding: 25px;
-        width: calc(33.3333% - 10px);
-        height: 100px;
-        margin-right: 10px;
-        margin-bottom: 10px;
-
-        @media (max-width: 400px) {
-          padding: 15px;
-        }
-
-        &:nth-child(3n) {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-
-  & .tag {
-    background: black;
-    color: white;
-    display: inline-block;
-    padding: 6px 9px;
-  }
-}

website/pages/home/style.module.css

@@ -0,0 +1,21 @@
+.home {
+  display: grid;
+  row-gap: 64px;
+  & :global(#get-started) {
+    margin-top: 64px;
+  }
+  & :global(.g-text-split) {
+    padding: 0;
+  }
+}
+
+.sectionGridContainer {
+  composes: g-grid-container from global;
+  width: 100%;
+}
+
+.textSplitList {
+  margin: 0;
+  padding: 16px 0 0 16px;
+  font-size: 17px;
+}

website/pages/style.css

@@ -8,14 +8,17 @@
   --highlight-color: var(--packer-link);
 }
 
+@import '~@hashicorp/react-alert/style.css';
 @import '~@hashicorp/react-alert-banner/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-content/style.css';
 @import '~@hashicorp/react-docs-page/style.css';
+@import '~@hashicorp/react-product-features-list/style.css';
 @import '~@hashicorp/react-search/style.css';
 @import '~@hashicorp/react-subnav/style.css';
 @import '~@hashicorp/react-tabs/style.css';
+@import '~@hashicorp/react-text-split/style.css';
 @import '~@hashicorp/react-toggle/style.css';
 @import '~@hashicorp/react-vertical-text-block-list/style.css';
 
@@ -24,7 +27,6 @@
 @import '../components/search-bar/style.css';
 
 /* Local Pages */
-@import './home/style.css';
 @import './community/style.css';
 
 /* Print Styles */

website/public/img/product-features-list/continuous-delivery.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M41.0732 45.1918L47.9613 27.6476C48.0202 27.471 48.0202 27.2944 47.9025 27.1177L47.8436 27.0589C47.8436 27.0589 47.7847 27.0589 47.7847 27C47.7847 27 47.7847 27 47.7258 27C47.7258 27 47.7258 27 47.667 27C47.667 27 47.667 27 47.6081 27C47.6081 27 47.6081 27 47.5492 27C47.5492 27 47.5492 27 47.4903 27H47.4315L24.3532 33.0051C24.3532 33.0051 24.3532 33.0051 24.2944 33.0051C24.2944 33.0051 24.2355 33.0051 24.2355 33.0639L24.1766 33.1228C24 33.1817 24 33.3583 24 33.5349C24 33.5349 24 33.5349 24 33.5938C24 33.5938 24 33.5938 24 33.6527V33.7115C24 33.7115 24 33.7704 24.0589 33.7704L24.1177 33.8293L30.476 38.1859L31.418 44.3675C31.418 44.3675 31.418 44.3675 31.418 44.4264C31.418 44.4264 31.418 44.4264 31.418 44.4853C31.418 44.4853 31.418 44.4853 31.418 44.5442C31.418 44.5442 31.418 44.5442 31.418 44.603C31.418 44.603 31.418 44.603 31.418 44.6619C31.418 44.7208 31.418 44.6619 31.418 44.7208V44.7797C31.418 44.8385 31.4769 44.8385 31.4769 44.8974C31.5357 44.8974 31.5357 44.9563 31.5946 44.9563C31.6535 44.9563 31.6535 44.9563 31.7124 44.9563H31.7712C31.7712 44.9563 31.7712 44.9563 31.8301 44.9563H31.889C31.889 44.9563 31.889 44.9563 31.9479 44.9563C31.9479 44.9563 32.0067 44.9563 32.0067 44.8974L35.8924 42.2481L40.1312 45.545C40.1901 45.6039 40.249 45.6039 40.3078 45.6628C40.4845 45.7216 40.7199 45.6628 40.8377 45.4861C41.0143 45.3095 41.0143 45.2506 41.0732 45.1918C41.0732 45.2506 41.0732 45.2506 41.0732 45.1918ZM34.4205 39.6577L46.4895 29.0606L40.4845 44.3087L34.4205 39.6577ZM31.0059 37.3617L25.5307 33.5938L44.8999 28.5896L31.0059 37.3617ZM43.1337 30.8267L33.4197 39.3045C33.4197 39.3045 33.4197 39.3045 33.3608 39.3633C33.3608 39.4222 33.3019 39.4222 33.3019 39.4811L32.1834 42.5425L31.4769 38.127L43.1337 30.8267ZM32.8898 43.1901L33.9495 40.3642L35.3625 41.4828L32.8898 43.1901Z" fill="#63D0FF"/>
+</svg>

website/public/img/product-features-list/demo-creation.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 29C27 27.8954 27.8954 27 29 27L43 27C44.1046 27 45 27.8954 45 29V43C45 44.1046 44.1046 45 43 45H29C27.8954 45 27 44.1046 27 43L27 29Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27 33H45" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 45V33" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/public/img/product-features-list/deployment.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M29.6401 45.7152C29.4499 45.7152 29.2868 45.7967 29.151 45.9054L26.7324 48.324C26.5965 48.4599 26.5422 48.623 26.5422 48.8132C26.5422 49.0034 26.6237 49.1665 26.7324 49.3023C26.8683 49.4382 27.0313 49.4926 27.2215 49.4926C27.4118 49.4926 27.5748 49.411 27.7107 49.3023L30.1293 46.8838C30.2651 46.7479 30.3195 46.5848 30.3195 46.3946C30.3195 46.2044 30.238 46.0413 30.1293 45.9054C29.9934 45.7967 29.8303 45.7152 29.6401 45.7152ZM50.2932 21.6924C50.0758 21.475 49.7497 21.3391 49.4236 21.3391C49.3149 21.3391 49.2062 21.3663 49.0975 21.3935L46.8148 21.9913C42.8201 23.0511 38.934 25.1165 35.6458 27.9427C35.3741 28.1872 35.3197 28.6221 35.5643 28.8938C35.7002 29.0569 35.8904 29.1384 36.0806 29.1384C36.2437 29.1384 36.4067 29.084 36.5154 28.9753C39.6949 26.285 43.3636 24.3284 47.1953 23.2957L49.2606 22.7522L48.7171 24.8175C47.3311 30.0352 44.1788 34.9539 39.8852 38.6497L39.858 38.6769C39.8036 38.704 39.8036 38.704 39.7764 38.7312C39.7493 38.7584 39.7493 38.7584 39.7493 38.7856C39.7493 38.8127 39.7221 38.8127 39.7221 38.8399C39.7221 38.8671 39.6949 38.8671 39.6949 38.8943C39.6949 38.9214 39.6677 38.9486 39.6677 38.9486C39.6677 38.9758 39.6677 39.003 39.6406 39.003C39.6406 39.0301 39.6406 39.0573 39.6406 39.0573C39.6406 39.0845 39.6406 39.1117 39.6406 39.1388V39.166L39.8852 44.8456C39.9123 45.2532 39.6949 45.6609 39.3416 45.8783L34.6947 48.8132L34.2055 43.8401C34.1784 43.4869 33.8794 43.2151 33.5262 43.2151C33.499 43.2151 33.4718 43.2151 33.4718 43.2151C33.0914 43.2423 32.8196 43.5956 32.874 43.9488L33.4446 50.0361C33.4718 50.2806 33.6077 50.4709 33.8251 50.5796C33.9066 50.6339 34.0153 50.6611 34.124 50.6611C34.2599 50.6611 34.3686 50.6339 34.4773 50.5524L40.0482 47.0196C40.8091 46.5576 41.2711 45.6609 41.2167 44.7913L40.9993 39.4378L41.108 39.3562C45.4289 35.5245 48.6084 30.47 50.0487 25.1436L50.6465 22.8609C50.728 22.4805 50.6193 22.0185 50.2932 21.6924ZM27.0857 32.1548H27.1128L32.8196 32.4266C33.1729 32.4266 33.4718 32.1548 33.499 31.7744C33.499 31.5841 33.4446 31.4211 33.3359 31.2852C33.2001 31.1493 33.037 31.0678 32.874 31.0678L27.1944 30.7961C27.1672 30.7961 27.14 30.7961 27.1128 30.7961C26.2704 30.7961 25.428 31.258 24.966 31.9646L21.4332 37.5355C21.2973 37.7257 21.2973 37.9975 21.406 38.2149C21.5147 38.4323 21.7593 38.5682 22.0039 38.5682C22.2757 38.5682 24.504 38.7856 27.6563 39.1117C27.7379 39.1117 27.7922 39.1388 27.8466 39.1932L28.064 39.4106L22.955 44.5739C22.8192 44.7097 22.7648 44.8728 22.7648 45.063C22.7648 45.2532 22.8463 45.4163 22.955 45.5522C23.0909 45.688 23.254 45.7424 23.4442 45.7424C23.6344 45.7424 23.7975 45.6609 23.9333 45.5522L29.0694 40.4161L29.8847 41.2313C30.0206 41.3672 30.1836 41.4215 30.3738 41.4215C30.5641 41.4215 30.7271 41.34 30.863 41.2313C30.9989 41.0954 31.0532 40.9324 31.0532 40.7422C31.0532 40.5519 30.9717 40.3889 30.863 40.253L28.852 38.2421C28.5803 37.9703 28.227 37.8073 27.8466 37.7529C26.4335 37.617 24.8301 37.454 23.6616 37.3453L23.2268 37.2909L26.1617 32.6711C26.2976 32.3722 26.7052 32.1548 27.0857 32.1548Z" fill="#63D0FF"/>
+</svg>

website/public/img/product-features-list/portability.svg

@@ -0,0 +1,15 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5 35.25C32.5 34.1454 33.3954 33.25 34.5 33.25H45.5C46.6046 33.25 47.5 34.1454 47.5 35.25V41.75C47.5 42.8546 46.6046 43.75 45.5 43.75H34.5C33.3954 43.75 32.5 42.8546 32.5 41.75V35.25Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37 46.75H43" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40 43.75V46.75" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41 30L31 30C29.8954 30 29 30.8954 29 32V39" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35 27H28C26.8954 27 26 27.8954 26 29V34" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white" transform="translate(24 24)"/>
+</clipPath>
+</defs>
+</svg>

website/public/img/product-features-list/prod-parity.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M36 36L26 31L36 26L46 31L36 36Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 41L36 46L46 41" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 36L36 41L46 36" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/public/img/product-features-list/stability.svg

@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7425 24.0359C35.8702 23.988 36.011 23.988 36.1387 24.0359L37.0849 24.3908L37.0858 24.3911C39.4436 25.2535 41.9202 25.6005 44.4012 25.4862L45.1649 25.4274C45.3215 25.4154 45.4761 25.4692 45.5914 25.576C45.7067 25.6827 45.7722 25.8327 45.7722 25.9899V37.5743C45.7722 40.5309 44.1595 43.2591 41.1576 45.011L41.1569 45.0114L41.1562 45.0118L36.2893 47.9201C36.1111 48.0266 35.8889 48.0266 35.7107 47.9201L30.8444 45.0122L30.8433 45.0116L30.8424 45.011C27.8405 43.2591 26.2278 40.5309 26.2278 37.5743V25.9899C26.2278 25.8314 26.2945 25.6802 26.4115 25.5733C26.5285 25.4665 26.6851 25.4137 26.8429 25.4281L27.4839 25.4864C29.9667 25.6003 32.4988 25.2523 34.792 24.3924L35.7425 24.0359ZM35.9406 25.1665L35.1881 25.4487C32.7326 26.3695 30.0414 26.7347 27.4191 26.6127C27.4108 26.6123 27.4025 26.6118 27.3943 26.611L27.3559 26.6075V37.5743C27.3559 40.0826 28.7129 42.4628 31.4128 44.0377L31.418 44.0407L36 46.7788L40.5861 44.0383L40.5872 44.0377C43.2871 42.4628 44.6441 40.0826 44.6441 37.5743V26.599L44.4791 26.6117C44.4734 26.6121 44.4678 26.6125 44.4621 26.6127C41.8375 26.7348 39.2077 26.3687 36.6973 25.4502L36.6939 25.449L36.693 25.4487L35.9406 25.1665Z" fill="#63D0FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5693 36.5061C31.3396 36.273 31.3423 35.8978 31.5754 35.6681C31.8085 35.4383 32.1836 35.4411 32.4134 35.6742L34.5071 37.7985L37.8341 34.5194L40.7391 31.6562C40.9722 31.4265 41.3474 31.4292 41.5771 31.6623C41.8068 31.8954 41.8041 32.2706 41.571 32.5003L34.495 39.4745L31.5693 36.5061Z" fill="#63D0FF"/>
+</svg>