Website Skinning for Beta Preview (#414)

* Removes meganav

* Adds base product theming

* Adds a homepage hero

* Removes community section

* Clean up footer

website/components/footer/style.css

@@ -2,6 +2,7 @@
   padding: 25px 0 17px 0;
   flex-shrink: 0;
   display: flex;
+  border-top: 1px solid var(--gray-6);
 
   & .g-container {
     display: flex;

website/components/homepage-hero/index.jsx

@@ -0,0 +1,35 @@
+import s from './style.module.css'
+import Button from '@hashicorp/react-button'
+
+export default function HomepageHero({ title, description, links }) {
+  return (
+    <div className={s.root}>
+      <div className="g-grid-container">
+        <span className={s.eyebrow}>
+          Welcome to the <span className={s.red}>INTERNAL BETA</span> for
+          HashiCorp Boundary! This is a confidential internal only beta. No
+          details should be shared externally.
+        </span>
+        <h1 className="g-type-display-1">{title}</h1>
+        <div className={s.contentAndLinks}>
+          <p className="g-type-body-large">{description}</p>
+          <div className={s.links}>
+            {links.map((link, index) => {
+              const brand = index === 0 ? 'hashicorp' : 'neutral'
+              const variant = index === 0 ? 'primary' : 'secondary'
+              return (
+                <Button
+                  key={link.text}
+                  title={link.text}
+                  linkType={link.type}
+                  url={link.url}
+                  theme={{ variant, brand }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,62 @@
+.root {
+  /* 100% height - nav - footer */
+  min-height: calc(100vh - (64px + 77px));
+  width: 100%;
+  padding: 150px 0;
+  background-repeat: no-repeat;
+  background-color: var(--gray-7);
+  background-image: url(/img/hero-pattern.svg);
+  background-size: contain;
+
+  @media (max-width: 758px) {
+    padding: 64px 0;
+  }
+
+  & .eyebrow {
+    font-family: var(--font-body);
+    text-align: center;
+    display: block;
+    font-weight: var(--font-weight-bold);
+    font-size: 1.1rem;
+
+    & .red {
+      color: #ba2226;
+    }
+  }
+
+  @media (max-width: 758px) {
+    background-image: url(/img/mobile-hero-pattern.svg);
+  }
+
+  & h1 {
+    text-align: center;
+    white-space: pre-wrap;
+  }
+
+  & p {
+    margin: 0 auto 0 auto;
+    text-align: center;
+    max-width: 40em;
+  }
+
+  & :global(.g-grid-container) {
+    max-width: 700px;
+  }
+
+  & .links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: calc(32px - 8px);
+    margin-bottom: -8px;
+
+    & a {
+      margin: 8px;
+
+      &:global(.variant-primary) {
+        border-color: var(--boundary);
+        background-color: var(--boundary);
+      }
+    }
+  }
+}

website/components/subnav/index.jsx

@@ -8,7 +8,7 @@ export default function ProductSubnav() {
   return (
     <Subnav
       titleLink={{
-        text: productSlug,
+        text: 'Boundary',
         url: '/',
       }}
       ctaLinks={[
@@ -16,7 +16,7 @@ export default function ProductSubnav() {
           text: 'GitHub',
           url: `https://www.github.com/hashicorp/${productSlug}`,
         },
-        { text: 'Download', url: '/downloads' },
+        { text: 'Download', url: '#' },
       ]}
       currentPath={router.pathname}
       menuItemsAlign="right"