website: Homepage updates, use case pages, navigation changes (#7782)

* website: various updates

* Expose /docs and /intro views using documentation-style
layout for index pages

* Add [Use Case] Secrets Management page

* Add [Use Case] Data Encryption page

* Add [Use Case] Identity Based Access page

* Update redirects file removing `/intro` routes redirecting to
`learn.hashicorp`

* Hide MegaNav on mobile

* website: route /api straight to documentation

* Bybass index page and jump straight to content

website/.node-version

+10.15.3

website/.prettierrc

+{
+  "semi": false,
+  "singleQuote": true
+}

website/assets/css/_section.css

+@import '@hashicorp/hashi-global-styles/style';
+
+.g-section-block {
+  padding: 160px 0;
+
+  @media (max-width: 1119px) {
+    padding: 104px 0;
+  }
+
+  @media (max-width: 767px) {
+    padding: 80px 0;
+  }
+
+  &.theme-white-background-black-text:not(.divider-gray-line)
+    + .theme-white-background-black-text {
+    padding-top: 32px;
+  }
+
+  /*  Layout Styles */
+  &.layout-horizontal {
+    & > .g-container {
+      display: flex;
+      align-items: center;
+
+      & > * + * {
+        margin-left: 96px;
+      }
+    }
+
+    & .img-container {
+      flex-shrink: 0;
+
+      & img {
+        align-self: center;
+      }
+    }
+  }
+
+  &.layout-vertical {
+    & > .g-container {
+      & > * + * {
+        margin-top: 96px;
+
+        @media (max-width: 1119px) {
+          margin-top: 72px;
+        }
+
+        @media (max-width: 767px) {
+          margin-top: 56px;
+        }
+      }
+
+      & > .g-text-and-content + .g-text-and-content {
+        margin-top: 192px;
+
+        @media (max-width: 1119px) {
+          margin-top: 144px;
+        }
+
+        @media (max-width: 767px) {
+          margin-top: 112px;
+        }
+      }
+
+      & > .g-section-header {
+        & + * {
+          margin-top: 72px;
+
+          @media (max-width: 1119px) {
+            margin-top: 64px;
+          }
+
+          @media (max-width: 767px) {
+            margin-top: 40px;
+          }
+        }
+      }
+
+      & > * + .btn-container {
+        margin-top: 40px;
+
+        @media (max-width: 767px) {
+          margin-top: 32px;
+        }
+      }
+    }
+  }
+
+  /* TODO: remove this once new section header is out */
+  & .g-section-header {
+    margin: 0 auto;
+  }
+
+  /* Module styles */
+
+  & .btn-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: auto -8px -16px;
+
+    & > * {
+      margin: auto 8px 16px;
+    }
+  }
+
+  & .img-container {
+    display: flex;
+    justify-content: center;
+
+    & .g-container {
+      flex-shrink: 0;
+      width: 100%;
+    }
+
+    & img {
+      max-width: 100%;
+    }
+
+    & picture {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+
+      & img {
+        object-fit: contain;
+        font-family: 'object-fit:contain';
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  & .two-col-text-container {
+    & .g-container {
+      display: flex;
+      @media (max-width: 850px) {
+        flex-direction: column;
+      }
+    }
+
+    & .left,
+    & .right {
+      width: 48%;
+      flex-shrink: 0;
+
+      @media (max-width: 850px) {
+        width: 100%;
+      }
+
+      & > *:first-child {
+        margin-top: 0;
+      }
+    }
+
+    & .left {
+      margin-right: 4%;
+
+      @media (max-width: 850px) {
+        margin-right: 0;
+        margin-bottom: 32px;
+      }
+    }
+
+    & a {
+      font-weight: 600;
+      color: inherit;
+
+      &:hover {
+        border-bottom: 1px solid;
+        opacity: 0.8;
+      }
+    }
+
+    & h5 {
+      margin-bottom: 1em;
+    }
+
+    & ul {
+      list-style: none;
+      padding-left: 15px;
+
+      & li {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+
+        &:before {
+          content: '';
+          width: 18px;
+          height: 18px;
+          background: url('/img/black-circle-white-check.svg') no-repeat;
+          background-size: 100%;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  & .g-text-and-image {
+    & .imgwrap {
+      display: flex;
+
+      & picture {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+
+        & img {
+          object-fit: contain;
+          font-family: 'object-fit:contain';
+          max-width: 350px;
+        }
+      }
+    }
+
+    & .text {
+      & h2 {
+        font-size: 1.5rem;
+      }
+
+      & a {
+        font-weight: 600;
+        color: white;
+        padding-bottom: 1px;
+
+        &:hover {
+          border-bottom: 1px solid;
+        }
+      }
+    }
+  }
+
+  & .small-text-tag {
+    text-align: center;
+    text-transform: uppercase;
+    color: #8d9096;
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+
+  & .g-logo-grid.large li {
+    background-color: white;
+  }
+
+  & .video-container {
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* THEMES */
+  &.theme-terraform-purple-top-gradient {
+    color: white;
+    background: linear-gradient(to bottom, #1b212c, #000000);
+  }
+
+  &.theme-dark-blue {
+    color: white;
+    background: #1b212d;
+  }
+
+  &.theme-white-background-black-text {
+    background: white;
+    color: black;
+  }
+
+  &.theme-black-background-white-text {
+    background: var(--gray-1);
+    color: white;
+  }
+
+  &.theme-light-gray {
+    color: black;
+    background: #f3f4f6;
+  }
+
+  &.theme-default-blue-gradient {
+    background: url('/img/backgrounds/partner-cta-bg.svg');
+    background-position: center center;
+    background-size: cover;
+    color: var(--white);
+  }
+
+  &.theme-terraform-purple-gradient {
+    @extend %gradient-bg;
+    background: linear-gradient(to right, #695af0, #6b5cf3);
+
+    &::before {
+      background: linear-gradient(to right, #5b48e7, #6b5cf3);
+    }
+  }
+
+  &.theme-nomad-green-gradient {
+    @extend %gradient-bg;
+    background: linear-gradient(to right, #1dbe83, #1ec185);
+
+    &::before {
+      background: linear-gradient(to right, #20c78a, #17c185);
+    }
+  }
+
+  &.theme-terraform-purple-testimonial-split {
+    color: white;
+    position: relative;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      background: linear-gradient(to right, #695af0, #6b5cf3);
+      width: 100%;
+      height: 550px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    & .g-container {
+      position: relative;
+    }
+  }
+
+  /* DIVIDERS */
+  &.divider-gray-line {
+    border-bottom: 1px solid #d9dbdd;
+  }
+
+  &.divider-dark-gray-line {
+    border-bottom: 1px solid #424242;
+  }
+
+  &.divider-black-down-arrow {
+    border-bottom: 1px solid #d0d2d5;
+    position: relative;
+
+    &:after {
+      content: '';
+      width: 82px;
+      height: 82px;
+      background: black url('/img/white-down-chevron.svg') 50% 55% no-repeat;
+      margin-top: 21px;
+      border-radius: 50%;
+      position: absolute;
+      bottom: -40px;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
+      right: 0;
+      z-index: 2;
+    }
+  }
+}

website/assets/css/index.css

@@ -2,34 +2,45 @@
 @import '@hashicorp/hashi-global-styles/style';
 
 /* NPM Preact Components */
+@import '@hashicorp/hashi-alert/dist/style.css';
+@import '@hashicorp/hashi-button/dist/style.css';
+@import '@hashicorp/hashi-callouts/dist/style.css';
+@import '@hashicorp/hashi-case-study-slider/dist/style.css';
+@import '@hashicorp/hashi-code-block/dist/style.css';
+@import '@hashicorp/hashi-consent-manager/dist/style.css';
+@import '@hashicorp/hashi-content/dist/style.css';
+@import '@hashicorp/hashi-docs-sidenav/dist/style.css';
+@import '@hashicorp/hashi-docs-sitemap/dist/style.css';
 @import '@hashicorp/hashi-footer/dist/style.css';
+@import '@hashicorp/hashi-hero/dist/style.css';
+@import '@hashicorp/hashi-linked-text-summary-list/dist/style.css';
+@import '@hashicorp/hashi-logo-grid/dist/style.css';
+@import '@hashicorp/hashi-mega-nav/dist/style.css';
 @import '@hashicorp/hashi-nav/dist/style.css';
 @import '@hashicorp/hashi-newsletter-signup-form/dist/style.css';
-@import '@hashicorp/hashi-button/dist/style.css';
+@import '@hashicorp/hashi-product-downloader/dist/style.css';
 @import '@hashicorp/hashi-product-subnav/dist/style.css';
-@import '@hashicorp/hashi-content/dist/style.css';
-@import '@hashicorp/hashi-mega-nav/dist/style.css';
-@import '@hashicorp/hashi-docs-sidenav/dist/style.css';
-@import '@hashicorp/hashi-vertical-text-block-list/dist/style.css';
 @import '@hashicorp/hashi-section-header/dist/style.css';
-@import '@hashicorp/hashi-product-downloader/dist/style.css';
-@import '@hashicorp/hashi-hero/dist/style.css';
-@import '@hashicorp/hashi-alert/dist/style.css';
-@import '@hashicorp/hashi-callouts/dist/style.css';
 @import '@hashicorp/hashi-split-cta/dist/style.css';
-@import '@hashicorp/hashi-linked-text-summary-list/dist/style.css';
-@import '@hashicorp/hashi-docs-sitemap/dist/style.css';
-@import '@hashicorp/hashi-consent-manager/dist/style.css';
+@import '@hashicorp/hashi-text-and-content/dist/style.css';
 @import '@hashicorp/hashi-toggle/dist/style.css';
+@import '@hashicorp/hashi-vertical-text-block-list/dist/style.css';
+
+/* Local Preact Components */
+@import '../js/components/before-after-diagram/style.css';
 
 /* to be removed pending new components */
 @import '_inner';
 @import '_secondary-nav';
 
+/* Layout */
+@import '_section';
+
 /* Pages */
 @import 'pages/_docs';
 @import 'pages/_section_block';
 @import 'pages/_home';
+@import 'pages/_use_cases';
 @import 'pages/_downloads.css';
 
 /* Print styles */
@@ -38,3 +49,15 @@
 h5 {
   font-weight: 600;
 }
+
+.g-text-and-content .image img {
+  width: 100%;
+}
+
+/* Hide Mega Nav on mobile */
+nav.g-mega-nav {
+  display: none;
+  @media (min-width: 1023px) {
+    display: block;
+  }
+}

website/assets/css/pages/_home.css

+@import '@hashicorp/hashi-global-styles/_typography.css';
+
 .g-split-cta h1 {
   font-size: 2.5em;
 }
+
+#page-home {
+  & .g-section-block.page-wrap {
+    padding-top: 0;
+  }
+
+  & .g-logo-grid li img {
+    max-height: 50%;
+    max-width: 50%;
+  }
+
+  & .g-container.remove-bottom-padding {
+    padding-bottom: 0;
+  }
+
+  & .g-section-header.infrastructure {
+    /* Override default max-width */
+    max-width: 1050px;
+
+    & h2 {
+      max-width: 784px;
+      margin: 0 auto;
+    }
+  }
+
+  & .g-container.before-after {
+    padding-top: 50px;
+  }
+}

website/assets/css/pages/_use_cases.css

+@import '@hashicorp/hashi-global-styles/_variables.css';
+
+#use-cases {
+  & .g-section-block section.pad-bottom {
+    padding-bottom: 144px;
+  }
+
+  & .g-logo-grid li img {
+    max-height: 50%;
+    max-width: 50%;
+  }
+
+  & .g-section-block.page-wrap {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  & .g-section-block.g-cta-section {
+    align-items: center;
+    background: var(--vault-gray-dark);
+    display: flex;
+    justify-content: center;
+    padding-left: 15px;
+    padding-right: 15px;
+    position: relative;
+    text-align: center;
+    color: var(--white);
+
+    & h2 {
+      margin-top: 0;
+    }
+
+    & .g-btn.white {
+      background: var(--white);
+      border: 2px solid var(--white);
+      color: var(--vault-gray-dark);
+
+      &:hover {
+        background-color: var(--vault-gray);
+        border-color: var(--vault-gray);
+        color: var(--white);
+
+        & path {
+          fill: var(--white);
+        }
+      }
+    }
+
+    & .g-btn.download svg {
+      margin: 0 4px -4px 0;
+    }
+
+    & .g-btn.download svg path {
+      transition: fill 0.25s ease;
+    }
+
+    & .g-btn + .g-btn {
+      margin-left: 18px;
+    }
+
+    & .g-btn.white-outline {
+      background: none;
+      border: 2px solid var(--white);
+      color: var(--white);
+
+      &:hover {
+        background-color: var(--white);
+        color: var(--vault-gray-dark);
+      }
+    }
+  }
+}

website/assets/img/icons/alert-triangle.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
+    <path fill-rule="evenodd" stroke="#D2D4DB" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.575 4.04838L1.51667 15.8317C1.22054 16.3445 1.21877 16.976 1.51202 17.4905C1.80528 18.005 2.34951 18.3252 2.94167 18.3317H17.0583C17.6505 18.3252 18.1947 18.005 18.488 17.4905C18.7812 16.976 18.7795 16.3445 18.4833 15.8317L11.425 4.04838C11.1229 3.55028 10.5826 3.24609 10 3.24609C9.41743 3.24609 8.87714 3.55028 8.575 4.04838Z" clip-rule="evenodd"/>
+    <path stroke="#E80134" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 8.33203V11.6654"/>
+    <ellipse cx="10" cy="15.0013" fill="#E80134" rx="0.833333" ry="0.833334"/>
+</svg>

website/assets/img/icons/check-circle.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
+    <path stroke="#D2D4DB" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 9.05327V9.75077C15.7481 13.0723 13.5617 15.9969 10.3765 16.9387C7.19129 17.8805 3.76603 16.615 1.9582 13.8286C0.150369 11.0421 0.390629 7.3985 2.54869 4.87357C4.70674 2.34865 8.26852 1.54391 11.3025 2.89577"/>
+    <path stroke="#1563FF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 3L8.25 11.25L6 9"/>
+</svg>