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
2019-11-05 19:54:24 -05:00 · 2019-11-05 19:54:24 -05:00 · ef903d4f81
parent a55c0908ff
commit ef903d4f81
45 changed files with 1820 additions and 271 deletions
--- a/website/.node-version
+++ b/website/.node-version
@ -0,0 +1 @@
+10.15.3
--- a/website/.prettierrc
+++ b/website/.prettierrc
@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
--- a/website/assets/css/_section.css
+++ b/website/assets/css/_section.css
@ -0,0 +1,351 @@
+@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;
+    }
+  }
+}
--- a/website/assets/css/index.css
+++ b/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-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-product-subnav/dist/style.css';
+@import '@hashicorp/hashi-section-header/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;
+  }
+}
--- a/website/assets/css/pages/_home.css
+++ b/website/assets/css/pages/_home.css
@ -1,3 +1,34 @@
+@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;
+  }
+}
--- a/website/assets/css/pages/_use_cases.css
+++ b/website/assets/css/pages/_use_cases.css
@ -0,0 +1,72 @@
+@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);
+      }
+    }
+  }
+}
--- a/website/assets/img/homepage/callouts/encryption.png
+++ b/website/assets/img/homepage/callouts/encryption.png
--- a/website/assets/img/homepage/callouts/identity.png
+++ b/website/assets/img/homepage/callouts/identity.png
--- a/website/assets/img/homepage/callouts/secrets.png
+++ b/website/assets/img/homepage/callouts/secrets.png
--- a/website/assets/img/icons/alert-triangle.svg
+++ b/website/assets/img/icons/alert-triangle.svg
@ -0,0 +1,5 @@
+<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>
--- a/website/assets/img/icons/check-circle.svg
+++ b/website/assets/img/icons/check-circle.svg
@ -0,0 +1,4 @@
+<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>
--- a/website/assets/img/use-cases/identity-based-access/challenge.png
+++ b/website/assets/img/use-cases/identity-based-access/challenge.png
--- a/website/assets/img/use-cases/identity-based-access/logos/aws.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/aws.png
--- a/website/assets/img/use-cases/identity-based-access/logos/azure.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/azure.png
--- a/website/assets/img/use-cases/identity-based-access/logos/gcp.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/gcp.png
--- a/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png
--- a/website/assets/img/use-cases/identity-based-access/logos/nomad.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/nomad.png
--- a/website/assets/img/use-cases/identity-based-access/logos/okta.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/okta.png
--- a/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png
--- a/website/assets/img/use-cases/identity-based-access/logos/ssh.png
+++ b/website/assets/img/use-cases/identity-based-access/logos/ssh.png
--- a/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png
--- a/website/assets/img/use-cases/identity-based-access/screenshot-entities.png
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png
--- a/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png
--- a/website/assets/img/use-cases/identity-based-access/solution.png
+++ b/website/assets/img/use-cases/identity-based-access/solution.png
--- a/website/assets/js/components/before-after-diagram/alert-icon.js
+++ b/website/assets/js/components/before-after-diagram/alert-icon.js
@ -0,0 +1,32 @@
+const { h } = require('preact')
+
+module.exports = function AlertIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        fill="white"
+        stroke="#E80134"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 8V12"
+        stroke="#E80134"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="12" cy="16" r="1" fill="#E80134" />
+    </svg>
+  )
+}
--- a/website/assets/js/components/before-after-diagram/check-icon.js
+++ b/website/assets/js/components/before-after-diagram/check-icon.js
@ -0,0 +1,27 @@
+const { h } = require('preact')
+
+module.exports = function CheckIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 23C5.92487 23 0.999999 18.0751 0.999999 12C1 5.92487 5.92487 0.999999 12 0.999999C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23Z"
+        fill="black"
+        stroke="black"
+        strokeWidth="2"
+      />
+      <path
+        d="M16.6663 9.08203L10.2497 15.4987L7.33301 12.582"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
--- a/website/assets/js/components/before-after-diagram/index.js
+++ b/website/assets/js/components/before-after-diagram/index.js
@ -0,0 +1,75 @@
+const { h, Component } = require('preact')
+const { decode } = require('reshape-preact-components')
+const marked = require('8fold-marked')
+const Image = require('@hashicorp/hashi-image').default
+const AlertIcon = require('./alert-icon')
+const CheckIcon = require('./check-icon')
+
+module.exports = class BeforeAfterDiagram extends Component {
+  render() {
+    const data = decode(this.props._data)
+
+    return (
+      <div class={`g-before-after-diagrams ${data.theme}`}>
+        <div class="before">
+          <div class="image">
+            <div>
+              <Image src={data.before_image.url} svg="true" />
+            </div>
+          </div>
+          <div class="content">
+            <span class="line">
+              <span />
+              <AlertIcon />
+              <span />
+            </span>
+            <div>
+              {data.before_headline && (
+                <h3
+                  dangerouslySetInnerHTML={{
+                    __html: marked.inlineLexer(data.before_headline, [])
+                  }}
+                />
+              )}
+              {data.before_content && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked(data.before_content)
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="image">
+            <div>
+              <Image src={data.after_image.url} svg="true" />
+            </div>
+          </div>
+          <div class="content">
+            <div class="line">
+              <CheckIcon />
+            </div>
+            <div>
+              {data.after_headline && (
+                <h3
+                  dangerouslySetInnerHTML={{
+                    __html: marked.inlineLexer(data.after_headline, [])
+                  }}
+                />
+              )}
+              {data.after_content && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked(data.after_content)
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
--- a/website/assets/js/components/before-after-diagram/style.css
+++ b/website/assets/js/components/before-after-diagram/style.css
@ -0,0 +1,424 @@
+.g-before-after-diagrams {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -16px;
+  position: relative;
+
+  @media (max-width: 1023px) {
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    margin-left: 40px;
+    margin-right: 0;
+  }
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    margin: 0 16px;
+    position: relative;
+    width: calc(50% - 32px);
+
+    @media (max-width: 1023px) {
+      margin: 0 12px;
+      width: calc(50% - 24px);
+    }
+
+    @media (max-width: 767px) {
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  & .before {
+    @media (max-width: 767px) {
+      margin-bottom: 62px;
+    }
+
+    & li:before {
+      background: url('/img/icons/alert-triangle.svg');
+      height: 20px;
+      margin-top: 3px;
+      width: 20px;
+    }
+  }
+
+  & .after li:before {
+    background: url('/img/icons/check-circle.svg');
+    height: 18px;
+    margin-top: 4px;
+    width: 18px;
+  }
+
+  & .image {
+    align-items: center;
+    display: flex;
+    height: 320px;
+    justify-content: center;
+    margin-bottom: 96px;
+
+    @media (max-width: 767px) {
+      margin-bottom: 40px;
+    }
+
+    @media (max-width: 640px) {
+      height: 284px;
+    }
+
+    @media (max-width: 540px) {
+      height: 238px;
+    }
+
+    @media (max-width: 480px) {
+      height: 211px;
+    }
+
+    @media (max-width: 375px) {
+      height: 163px;
+    }
+
+    & div {
+      height: 100%;
+      text-align: center;
+      width: 100%;
+    }
+
+    & img,
+    & svg {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  & .content {
+    border: 1px solid var(--gray-9);
+    padding: 24px 32px 20px;
+    position: relative;
+    flex-grow: 1;
+
+    @media (max-width: 1023px) {
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+
+    @media (max-width: 767px) {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    &:before,
+    &:after {
+      bottom: 100%;
+      border: solid transparent;
+      content: '';
+      height: 0;
+      left: 50%;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:before {
+      border-color: rgba(229, 230, 235, 0);
+      border-bottom-color: var(--gray-9);
+      border-width: 18px;
+      margin-left: -18px;
+    }
+
+    &:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-bottom-color: var(--white);
+      border-width: 17px;
+      margin-left: -17px;
+    }
+
+    & > div {
+      height: 100%;
+
+      &.line {
+        height: auto;
+      }
+
+      & > div {
+        @media (min-width: 768px) {
+          max-width: 480px;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
+  & h3 {
+    border-bottom: 1px solid var(--gray-9);
+    color: var(--black);
+    font-weight: 300;
+    margin: 0 0 24px;
+    padding-bottom: 24px;
+    text-align: center;
+
+    @media (max-width: 767px) {
+      font-size: 1.3125rem;
+      line-height: 2rem;
+    }
+  }
+
+  & h4 {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: var(--font-weight-bold);
+    letter-spacing: 0.5px;
+    line-height: 1.125rem;
+    margin: 24px 0 26px;
+    text-transform: uppercase;
+  }
+
+  & ul {
+    list-style: none;
+    padding-left: 32px;
+    position: relative;
+  }
+
+  & li {
+    margin: 8px 0;
+
+    &:before {
+      background-repeat: no-repeat;
+      content: '';
+      left: 0;
+      position: absolute;
+    }
+  }
+
+  & .line {
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: -75px;
+    width: 100%;
+
+    @media (max-width: 767px) {
+      left: -28px;
+      height: 100%;
+      right: auto;
+      top: 28px;
+      width: auto;
+    }
+
+    & span {
+      display: block;
+      height: 1px;
+      position: absolute;
+      top: 12px;
+      width: calc(100% - 14px);
+
+      @media (max-width: 767px) {
+        width: 1px;
+      }
+
+      &:first-child {
+        background-image: linear-gradient(
+          90deg,
+          rgba(210, 212, 219, 0) 0%,
+          var(--gray-8) 100%
+        );
+        right: calc(50% + 20px);
+        width: calc(50% + 140px);
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            rgba(210, 212, 219, 0) 0%,
+            var(--gray-8) 100%
+          );
+          height: 245px;
+          right: auto;
+          top: -253px;
+          width: 1px;
+        }
+      }
+
+      &:last-child {
+        background-image: linear-gradient(
+          90deg,
+          var(--gray-8) 0%,
+          var(--black) 100%
+        );
+        left: calc(50% + 20px);
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            var(--gray-8) 0%,
+            var(--black) 100%
+          );
+          height: calc(100% + 375px);
+          left: auto;
+          top: 32px;
+        }
+
+        @media (max-width: 640px) {
+          height: calc(100% + 339px);
+        }
+
+        @media (max-width: 540px) {
+          height: calc(100% + 293px);
+        }
+
+        @media (max-width: 480px) {
+          height: calc(100% + 266px);
+        }
+
+        @media (max-width: 375px) {
+          height: calc(100% + 218px);
+        }
+
+        &:after {
+          border-color: transparent transparent transparent #000000;
+          border-style: solid;
+          border-width: 5.5px 0 5.5px 8px;
+          content: '';
+          height: 0;
+          position: absolute;
+          right: -8px;
+          top: -5px;
+          width: 0;
+
+          @media (max-width: 767px) {
+            transform: rotate(90deg);
+            top: auto;
+            bottom: -8px;
+            right: -4px;
+          }
+        }
+      }
+    }
+
+    & svg {
+      position: absolute;
+      left: 50%;
+      margin: 0 0 0 -11px;
+    }
+  }
+
+  /*
+   * TERRAFORM THEME
+   */
+  &.terraform {
+    & .line span {
+      &:first-child {
+        background-image: linear-gradient(
+          90deg,
+          rgba(95, 67, 233, 0) 0%,
+          var(--gray-8) 100%
+        );
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            rgba(95, 67, 233, 0) 0%,
+            var(--gray-8) 100%
+          );
+        }
+      }
+
+      &:last-child {
+        background-image: linear-gradient(
+          90deg,
+          var(--gray-8) 0%,
+          var(--terraform-purple) 100%
+        );
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            var(--gray-8) 0%,
+            var(--terraform-purple) 100%
+          );
+        }
+
+        &:after {
+          border-color: transparent transparent transparent
+            var(--terraform-purple);
+          border-style: solid;
+          border-width: 5.5px 0 5.5px 8px;
+        }
+      }
+    }
+    & .after {
+      & li:before {
+        background: url('/img/icons/check-circle-purple.svg');
+        height: 19px;
+      }
+
+      .line {
+        svg,
+        path:first-child {
+          fill: var(--terraform-purple);
+          stroke: var(--terraform-purple);
+        }
+      }
+    }
+  }
+
+  /*
+   * CONSUL THEME
+   */
+  &.consul {
+    & .line span {
+      &:first-child {
+        background-image: linear-gradient(
+          90deg,
+          rgba(95, 67, 233, 0) 0%,
+          var(--gray-8) 100%
+        );
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            rgba(95, 67, 233, 0) 0%,
+            var(--gray-8) 100%
+          );
+        }
+      }
+
+      &:last-child {
+        background-image: linear-gradient(
+          90deg,
+          var(--gray-8) 0%,
+          var(--consul-pink) 100%
+        );
+
+        @media (max-width: 767px) {
+          background-image: linear-gradient(
+            180deg,
+            var(--gray-8) 0%,
+            var(--consul-pink) 100%
+          );
+        }
+
+        &:after {
+          border-color: transparent transparent transparent var(--consul-pink);
+          border-style: solid;
+          border-width: 5.5px 0 5.5px 8px;
+        }
+      }
+    }
+    & .after {
+      & li:before {
+        background: url('/img/icons/check-circle-pink.svg');
+        height: 19px;
+      }
+
+      .line {
+        svg,
+        path:first-child {
+          fill: var(--consul-pink);
+          stroke: var(--consul-pink);
+        }
+      }
+    }
+  }
+}
--- a/website/assets/package-lock.json
+++ b/website/assets/package-lock.json
@ -138,15 +138,25 @@
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-callouts/-/hashi-callouts-2.1.0.tgz",
      "integrity": "sha512-sFcVJyW6SYGVxzTH55FWzvYKqv13Ten+BGFclr6lO4XpvnQpewP75BkLhnIq7lVf0gpFtOjo5kC3qmpyRJVLeQ=="
    },
+    "@hashicorp/hashi-case-study-slider": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-case-study-slider/-/hashi-case-study-slider-2.3.0.tgz",
+      "integrity": "sha512-pB/CXCtNqwU5WcR9VDyNTdYh4BJqj0ZtTQrNrYnoQ5g8OlggBBex/QASbnvaBCGkiXw5QDNHpkN6Lyc4iTHD+A=="
+    },
+    "@hashicorp/hashi-code-block": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-code-block/-/hashi-code-block-1.2.0.tgz",
+      "integrity": "sha512-CARAGd/4E8EudamMThp3X7mXpOzWBKIi4qYSGKzt6o52s1FNKpzp+sLqcw9cuPAx+dVY5YiU0NCk6XY8OeNPRw=="
+    },
    "@hashicorp/hashi-consent-manager": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-consent-manager/-/hashi-consent-manager-1.0.10.tgz",
      "integrity": "sha512-T3njOQOB8M8b4TGzDpfEtd05jdiprlQSzGYCe72dYcJDdgu0iUAmpx50b7dL09gGlUuxPI6wYCRff+ZQzLfFPQ=="
    },
    "@hashicorp/hashi-content": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-content/-/hashi-content-0.1.0.tgz",
-      "integrity": "sha512-+XBhJKl8Ph0ei7UkEMf7DrfubkNBdZx1MIRxgtuhC72ScrR6wRt7apCywxiJoqEACI/c14xjUTA2BfmUR2XPzw=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-content/-/hashi-content-1.0.1.tgz",
+      "integrity": "sha512-cX+Fm52yUVd0zJcKAWPstNDXF3PvwGP6HrvxRVmxWCrxqaHTeP6X7U9sUYJ58NIVr3E83zo8LyFtz+a7yj8DEA=="
    },
    "@hashicorp/hashi-docs-sidenav": {
      "version": "1.0.3",
@ -191,6 +201,11 @@
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-linked-text-summary-list/-/hashi-linked-text-summary-list-0.1.5.tgz",
      "integrity": "sha512-LZM9DCSK36W7F+hD5qgF/5XXFj6YLkJkhp0m4DZQD74NIsN3u6HGthAwr4t1Qy3eV2TR0h0AnrTnrMQoTpKDjQ=="
    },
+    "@hashicorp/hashi-logo-grid": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-logo-grid/-/hashi-logo-grid-2.4.1.tgz",
+      "integrity": "sha512-8klunvdahv2CSt+U4E+gQ1GvFHk0fKwIezUyL4GsiBEy6iYl+CMzPNyv0DxwLH4cV0q6gg7ftDM8v2K6yyuZ1A=="
+    },
    "@hashicorp/hashi-mega-nav": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-mega-nav/-/hashi-mega-nav-1.4.3.tgz",
@ -241,6 +256,11 @@
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-split-cta/-/hashi-split-cta-0.1.6.tgz",
      "integrity": "sha512-vv9JMwLNNx4mW2uESLOUFlLi0jWqdhCtNS9VZPhJd05Bb9xQybyylqcGUZgElIiqy/jS9S9d162eHV+Bhf+fCQ=="
    },
+    "@hashicorp/hashi-text-and-content": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-text-and-content/-/hashi-text-and-content-0.8.1.tgz",
+      "integrity": "sha512-nJWNVatLFdVeCFIUr861i+jYoMmTkArmwWty0WtrOuTMFfnXdKWYjUliUEB/D3GvJvcwcDW3DxhVRT+Vad2bQQ=="
+    },
    "@hashicorp/hashi-toggle": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/@hashicorp/hashi-toggle/-/hashi-toggle-0.2.3.tgz",
@ -4968,6 +4988,11 @@
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
      "dev": true
    },
+    "highlight.js": {
+      "version": "9.15.10",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz",
+      "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw=="
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
--- a/website/assets/package.json
+++ b/website/assets/package.json
@ -10,8 +10,10 @@
    "@hashicorp/hashi-alert": "^1.1.0",
    "@hashicorp/hashi-button": "1.0.5",
    "@hashicorp/hashi-callouts": "^2.0.5",
+    "@hashicorp/hashi-case-study-slider": "^2.3.0",
+    "@hashicorp/hashi-code-block": "^1.2.0",
    "@hashicorp/hashi-consent-manager": "^1.0.10",
-    "@hashicorp/hashi-content": "^0.1.0",
+    "@hashicorp/hashi-content": "^1.0.1",
    "@hashicorp/hashi-docs-sidenav": "^1.0.2",
    "@hashicorp/hashi-docs-sitemap": "^0.1.6",
    "@hashicorp/hashi-footer": "^1.1.3",
@ -20,6 +22,7 @@
    "@hashicorp/hashi-hero": "^3.1.2",
    "@hashicorp/hashi-image": "1.0.5",
    "@hashicorp/hashi-linked-text-summary-list": "^0.1.4",
+    "@hashicorp/hashi-logo-grid": "^2.4.1",
    "@hashicorp/hashi-mega-nav": "^1.1.0",
    "@hashicorp/hashi-nav": "^1.1.2",
    "@hashicorp/hashi-newsletter-signup-form": "^1.3.0",
@ -27,6 +30,7 @@
    "@hashicorp/hashi-product-subnav": "^0.5.5",
    "@hashicorp/hashi-section-header": "^4.0.0",
    "@hashicorp/hashi-split-cta": "^0.1.4",
+    "@hashicorp/hashi-text-and-content": "^0.8.1",
    "@hashicorp/hashi-toggle": "^0.2.2",
    "@hashicorp/hashi-vertical-text-block-list": "^0.1.1",
    "@hashicorp/js-utils": "^1.0.0",
@ -34,6 +38,7 @@
    "@segment/in-eu": "^0.2.1",
    "@segment/top-domain": "^3.0.0",
    "color-contrast": "^0.0.1",
+    "highlight.js": "^9.15.10",
    "js-cookie": "^2.2.0",
    "marked": "^0.5.1",
    "normalize.css": "^8.0.0",
--- a/website/assets/reshape.js
+++ b/website/assets/reshape.js
@ -1,35 +1,42 @@
-const footer = require('@hashicorp/hashi-footer')
-const nav = require('@hashicorp/hashi-nav')
 const button = require('@hashicorp/hashi-button')
-const megaNav = require('@hashicorp/hashi-mega-nav')
-const productSubnav = require('@hashicorp/hashi-product-subnav')
-const verticalTextBlockList = require('@hashicorp/hashi-vertical-text-block-list')
-const sectionHeader = require('@hashicorp/hashi-section-header')
-const content = require('@hashicorp/hashi-content')
-const productDownloader = require('@hashicorp/hashi-product-downloader')
-const docsSidenav = require('@hashicorp/hashi-docs-sidenav')
-const hero = require('@hashicorp/hashi-hero')
 const callouts = require('@hashicorp/hashi-callouts')
-const splitCta = require('@hashicorp/hashi-split-cta')
-const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list')
-const docsSitemap = require('@hashicorp/hashi-docs-sitemap')
+const caseStudySlider = require('@hashicorp/hashi-case-study-slider')
 const consentManager = require('@hashicorp/hashi-consent-manager')
+const content = require('@hashicorp/hashi-content')
+const docsSidenav = require('@hashicorp/hashi-docs-sidenav')
+const docsSitemap = require('@hashicorp/hashi-docs-sitemap')
+const footer = require('@hashicorp/hashi-footer')
+const hero = require('@hashicorp/hashi-hero')
+const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list')
+const megaNav = require('@hashicorp/hashi-mega-nav')
+const nav = require('@hashicorp/hashi-nav')
+const productDownloader = require('@hashicorp/hashi-product-downloader')
+const productSubnav = require('@hashicorp/hashi-product-subnav')
+const sectionHeader = require('@hashicorp/hashi-section-header')
+const splitCta = require('@hashicorp/hashi-split-cta')
+const textAndContent = require('@hashicorp/hashi-text-and-content')
+const verticalTextBlockList = require('@hashicorp/hashi-vertical-text-block-list')
+
+const beforeAfterDiagram = require('./js/components/before-after-diagram')

 module.exports = {
-  'hashi-footer': footer,
-  'hashi-nav': nav,
  'hashi-button': button,
-  'hashi-docs-sidenav': docsSidenav,
-  'hashi-mega-nav': megaNav,
-  'hashi-product-subnav': productSubnav,
-  'hashi-content': content,
-  'hashi-product-downloader': productDownloader,
-  'hashi-vertical-text-block-list': verticalTextBlockList,
-  'hashi-section-header': sectionHeader,
-  'hashi-hero': hero,
  'hashi-callouts': callouts,
-  'hashi-split-cta': splitCta,
-  'hashi-linked-text-summary-list': linkedTextSummaryList,
+  'hashi-case-study-slider': caseStudySlider,
+  'hashi-consent-manager': consentManager,
+  'hashi-content': content,
+  'hashi-docs-sidenav': docsSidenav,
  'hashi-docs-sitemap': docsSitemap,
-  'hashi-consent-manager': consentManager
+  'hashi-footer': footer,
+  'hashi-hero': hero,
+  'hashi-linked-text-summary-list': linkedTextSummaryList,
+  'hashi-mega-nav': megaNav,
+  'hashi-nav': nav,
+  'hashi-product-downloader': productDownloader,
+  'hashi-product-subnav': productSubnav,
+  'hashi-section-header': sectionHeader,
+  'hashi-split-cta': splitCta,
+  'hashi-text-and-content': textAndContent,
+  'hashi-vertical-text-block-list': verticalTextBlockList,
+  'hashi-before-after': beforeAfterDiagram
 }
--- a/website/config.rb
+++ b/website/config.rb
@ -83,6 +83,9 @@ helpers do
    if page.url == "/" || page.url == "/index.html"
      return "page-home"
    end
+    if page.path.include? "use-cases"
+      return "use-cases"
+    end
    if !(title = page.data.page_title).blank?
      return title
        .downcase
@ -117,4 +120,63 @@ helpers do

    return classes.join(" ")
  end
+
+  # Returns data / attributes used by the product subnav component.
+  # @return [Object]
+  def getSubNavData
+    return {
+      current_path: current_page.path,
+      products: dato.enterprise_products.map(&:to_hash),
+      subnav: {
+        tdm_focused_links: [
+          {
+            title: "Intro",
+            url: "/intro"
+          },
+          {
+            item_type: "dropdown_link",
+            title: "Use Cases",
+            links: [{
+              title: "Secrets Management",
+              url: "/use-cases/secrets-management"
+            },
+            {
+              title: "Data Encryption",
+              url: "/use-cases/data-encryption"
+            }, {
+              title: "Identity-based Access",
+              url: "/use-cases/identity-based-access"
+            }]
+          },
+          {
+            title: "Enterprise",
+            url: "https://www.hashicorp.com/products/vault/enterprise"
+          },
+          {
+            title: "Whitepaper",
+            url: "https://www.hashicorp.com/resources/unlocking-the-cloud-operating-model-security?utm_source=vaultsubnav"
+          }
+        ],
+        practitioner_focused_links: [
+          {
+            title: "Learn",
+            url: "https://learn.hashicorp.com/vault"
+          },
+          {
+            title: "Docs",
+            url: "/docs"
+          },
+          {
+            title: "API",
+            url: "/api"
+          },
+          {
+            title: "Community",
+            url: "/community"
+          }
+        ],
+        product: dato.vault_product_page.subnav.product.to_hash
+      }
+    }
+  end
 end
--- a/website/source/api/index.html.erb
+++ b/website/source/api/index.html.erb
@ -1,83 +0,0 @@
---
-page_title: "Vault API Documentation"
-description: |-
-  Vault API reference documentation.
---
-
-<% @meganav_title = 'API Docs' %>
-
-<hashi-product-subnav project_site="true" current_path="<%= current_page.path %>" _data="<%= encode({
-  products: dato.enterprise_products.map(&:to_hash),
-  subnav: dato.vault_product_page.subnav.to_hash
-}) %>"></hashi-product-subnav>
-
-<div class='g-section-block'>
-  <section id='intro' class='g-container'>
-    <hashi-section-header
-      headline='Vault API Documentation'
-      description="The Vault HTTP API gives you full access to Vault via HTTP. Every aspect of Vault can be controlled via this API. The Vault CLI uses the HTTP API to access Vault."
-      use_h1="true"
-    ></hashi-section-header>
-
-    <div class='button-container'>
-      <hashi-button
-        title="Learn Vault"
-        url="https://learn.hashicorp.com/vault"
-      ></hashi-button>
-      <hashi-button
-        title="Download"
-        url="/downloads.html"
-        theme="dark-outline"
-      ></hashi-button>
-    </div>
-  </section>
-
-  <section id='categories' class='g-container'>
-    <hashi-linked-text-summary-list _data="<%= encode(data.api_basic_categories) %>"></hashi-linked-text-summary-list>
-  </section>
-
-  <section id='new-to-vault' class='gray'>
-    <div class='g-container'>
-      <hashi-section-header
-        headline='New to Vault?'
-        description="Learn how to use Vault to read, write, and create real secrets, and see how it works in practice. The basics include installation and core concepts, while providing a foundation for advanced tracks."
-      ></hashi-section-header>
-
-      <div class='button-container'>
-        <hashi-button
-          title="Start Learning"
-          url="https://learn.hashicorp.com/vault"
-        ></hashi-button>
-      </div>
-    </div>
-  </section>
-
-  <section id='categories' class='g-container'>
-    <hashi-section-header headline='API Reference'></hashi-section-header>
-
-    <hashi-docs-sitemap
-      order="<%= encode(data.api_detailed_categories) %>"
-      data="<%= encode(get_sidebar_data('api')) %>"
-    ></hashi-docs-sitemap>
-  </section>
-
-  <section id='get-started' class='black'>
-    <div class='g-container'>
-      <hashi-section-header headline='Ready to get started?'></hashi-section-header>
-
-      <div class='button-container'>
-        <hashi-button
-          title="Learn Vault"
-          url="https://learn.hashicorp.com/vault"
-          theme='light-fill'
-        ></hashi-button>
-        <hashi-button
-          title="Download"
-          url="/downloads.html"
-          theme='light-outline'
-        ></hashi-button>
-      </div>
-    </div>
-  </section>
-
-</div>
--- a/website/source/api/index.html.md.erb
+++ b/website/source/api/index.html.md.erb
@ -0,0 +1,4 @@
+---
+layout: "api"
+page_title: "Vault API Documentation"
+---
--- a/website/source/docs/index.html.erb
+++ b/website/source/docs/index.html.erb
@ -1,82 +0,0 @@
---
-page_title: "Vault Documentation"
-description: |-
-  Vault reference documentation.
---
-
-<% @meganav_title = 'Docs' %>
-
-<hashi-product-subnav project_site="true" current_path="<%= current_page.path %>" _data="<%= encode({
-  products: dato.enterprise_products.map(&:to_hash),
-  subnav: dato.vault_product_page.subnav.to_hash
-}) %>"></hashi-product-subnav>
-
-<div class='g-section-block'>
-  <section id='intro' class='g-container'>
-    <hashi-section-header
-      headline='Vault Documentation'
-      description="Welcome to the Vault documentation! This documentation is more of a reference guide for all available features and options of Vault. If you're just getting started with Vault, please start with the [introduction and getting started guide instead](https://learn.hashicorp.com/vault)."
-      use_h1="true"
-    ></hashi-section-header>
-
-    <div class='button-container'>
-      <hashi-button
-        title="Learn Vault"
-        url="https://learn.hashicorp.com/vault"
-      ></hashi-button>
-      <hashi-button
-        title="Download"
-        url="/downloads.html"
-        theme="dark-outline"
-      ></hashi-button>
-    </div>
-  </section>
-
-  <section id='categories'>
-    <hashi-linked-text-summary-list _data="<%= encode(data.docs_basic_categories) %>"></hashi-linked-text-summary-list>
-  </section>
-
-  <section id='new-to-vault' class='gray'>
-    <div class='g-container'>
-      <hashi-section-header
-        headline='New to Vault?'
-        description="Learn how to use Vault to read, write, and create real secrets, and see how it works in practice. The basics include installation and core concepts, while providing a foundation for advanced tracks."
-      ></hashi-section-header>
-
-      <div class='button-container'>
-        <hashi-button
-          title="Start Learning"
-          url="https://learn.hashicorp.com/vault"
-        ></hashi-button>
-      </div>
-    </div>
-  </section>
-
-  <section id='sitemap' class='g-container'>
-    <hashi-section-header headline='Documentation by Category'></hashi-section-header>
-
-    <hashi-docs-sitemap
-      order="<%= encode(data.docs_detailed_categories) %>"
-      data="<%= encode(get_sidebar_data('docs')) %>"
-    ></hashi-docs-sitemap>
-  </section>
-
-  <section id='get-started' class='black'>
-    <div class='g-container'>
-      <hashi-section-header headline='Ready to get started?'></hashi-section-header>
-
-      <div class='button-container'>
-        <hashi-button
-          title="Learn Vault"
-          url="https://learn.hashicorp.com/vault"
-          theme='light-fill'
-        ></hashi-button>
-        <hashi-button
-          title="Download"
-          url="/downloads.html"
-          theme='light-outline'
-        ></hashi-button>
-      </div>
-    </div>
-  </section>
-</div>
--- a/website/source/docs/index.html.erb.md
+++ b/website/source/docs/index.html.erb.md
@ -0,0 +1,5 @@
+---
+layout: 'docs'
+sidebar_title: 'Overview'
+sidebar_current: 'docs-index'
+---
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@ -2,54 +2,134 @@
 description: "Vault secures, stores, and tightly controls access to tokens, passwords, certificates, API keys, and other secrets in modern computing. Vault handles leasing, key revocation, key rolling, auditing, and provides secrets as a service through a unified API."
 ---

-<% page = dato.vault_oss_page %>
+<%= partial "partials/subnav" %>

-<hashi-product-subnav project_site="true" current_path="<%= current_page.path %>" _data="<%= encode({
-  products: dato.enterprise_products.map(&:to_hash),
-  subnav: dato.vault_product_page.subnav.to_hash
-}) %>"></hashi-product-subnav>
+<hashi-hero _data="<%= encode(dato.vault_oss_page.hero) %>"></hashi-hero>

-<hashi-hero _data="<%= encode(page.hero) %>"></hashi-hero>
-<div class='g-section-block'>
-  <section class='g-container'>
-    <hashi-section-header
-      headline="<%= page.use_cases_headline.headline %>"
-      description="<%= page.use_cases_headline.description %>"
-    ></hashi-section-header>
+<div class='g-section-block page-wrap'>

-    <hashi-callouts _data="<%= encode(page.use_cases_callouts[0]) %>"></hashi-callouts>
-  </section>
+  <%-# Text Section -%>

-  <section class='g-container'>
-    <hashi-section-header
-      headline="<%= page.documentation_headline.headline %>"
-      description="<%= page.documentation_headline.description %>"
-    ></hashi-section-header>
-
-    <hashi-linked-text-summary-list _data="<%= encode(data.docs_basic_categories) %>"></hashi-linked-text-summary-list>
-  </section>
-
-  <section class='gray'>
-    <div class='g-container'>
-      <hashi-section-header
-        headline="<%= page.features_headline.headline %>"
-        description="<%= page.features_headline.description %>"
-      ></hashi-section-header>
-
-      <div class='button-container'>
-        <% if page.features_buttons %>
-          <% page.features_buttons.buttons.each do |btn| %>
-            <hashi-button
-              title="<%= btn.text %>"
-              url="<%= btn.url %>"
-            ></hashi-button>
-          <% end %>
-        <% end %>
-      </div>
+  <section class='g-container remove-bottom-padding'>
+    <div class="g-section-header infrastructure">
+      <h2>Secure dynamic infrastructure across clouds and environments</h2>
+      <h3>The shift from static, on-premise infrastructure to dynamic, multi-provider infrastructure changes the approach to security. Security in static infrastructure relies on dedicated servers, static IP addresses, and a clear network perimeter. Security in dynamic infrastructure is defined by ephemeral applications and servers, trusted sources of user and application identity, and software-based encryption.</h3>
    </div>
  </section>

-  <section class='no-pad'>
-    <hashi-split-cta _data="<%= encode(page.oss_enterprise_ctas.items) %>"></hashi-split-cta>
+  <%-# Before After Diagram -%>
+
+  <section class="g-container before-after">
+    <hashi-before-after _data="<%= encode(dato.vault_product_page.static_dynamic_section.layout.content.last.to_hash(4)) %>"></hashi-before-after>
+  </section>
+
+  <%-# Callouts -%>
+
+  <section>
+    <div class='g-container'>
+      <hashi-callouts _data="<%= encode({items: [
+        {
+          title: 'Secrets Management',
+          description: 'Audit access, automatically Centrally store, access, and deploy secrets across applications, systems, and infrastructure',
+          image: {
+            url: '/img/homepage/callouts/secrets.png',
+            alt: 'Vault secrets diagram',
+            format: 'png'
+          },
+          link: {
+            title: 'Learn More',
+            url: '/use-cases/secrets-management'
+          }
+        },
+        {
+          title: 'Data Encryption',
+          description: 'Keep secrets and application data secure with one centralized workflow to encrypt data in flight and at rest',
+          image: {
+            url: '/img/homepage/callouts/encryption.png',
+            alt: 'Vault encryption diagram',
+            format: 'png'
+          },
+          link: {
+            title: 'Learn More',
+            url: '/use-cases/data-encryption'
+          }
+        },
+        {
+          title: 'Identity-based Access',
+          description: 'Authenticate and access different clouds, systems, and endpoints using trusted identities',
+          image: {
+            url: '/img/homepage/callouts/identity.png',
+            alt: 'Vault identity access diagram',
+            format: 'png'
+          },
+          link: {
+            title: 'Learn More',
+            url: '/use-cases/identity-based-access'
+          }
+        }
+      ]}) %>"></hashi-callouts>
+    </div>
+  </section>
+
+  <%-# Principles / Text & Content Blocks -%>
+
+  <section class='g-container'>
+    <hashi-section-header
+      headline="Vault Principles"
+    ></hashi-section-header>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### API-driven
+
+Use policy to codify, protect, and automate access to secrets",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "$ curl \\\n
+--header \"X-Vault-Token: ...\" \\\n
+--request POST \\\n
+--data @payload.json \\\n
+https://127.0.0.1:8200/v1/secret/config"
+        }
+    }) %>'></hashi-text-and-content>
+
+<% secure_text_and_content = {
+  reverse_direction: true,
+  text: "### Secure with any identity
+
+Seamlessly integrate any trusted identity provider",
+  content: {
+    item_type: "sbc_logo_grid",
+    companies: dato.vault_product_page.principles_section.layout.content[2].content.companies.to_hash
+  }
+} %>
+
+    <hashi-text-and-content _data='<%= encode(secure_text_and_content) %>'></hashi-text-and-content>
+
+<% extend_text_and_content = {
+  text: "### Extend and integrate
+
+Securely manage secrets and access through a centralized workflow",
+  content: {
+    item_type: "sbc_logo_grid",
+    companies: dato.vault_product_page.principles_section.layout.content[3].content.companies.to_hash
+  }
+} %>
+
+    <hashi-text-and-content _data='<%= encode(extend_text_and_content) %>'></hashi-text-and-content>
+  </section>
+
+  <section class='g-container'>
+    <hashi-section-header
+      headline="Open Source and Enterprise"
+      description="Vault Open Source addresses the *technical complexity* of managing secrets by leveraging trusted identities across distributed infrastructure and clouds. Vault Enterprise addresses the *organizational complexity* of large user bases and compliance requirements with collaboration and governance features."
+    ></hashi-section-header>
+
+    <div class='button-container'>
+      <hashi-button
+        title="Learn More"
+        url="https://www.hashicorp.com/products/vault/enterprise"
+      ></hashi-button>
+    </div>
  </section>
 </div>
--- a/website/source/intro/index.html.erb.md
+++ b/website/source/intro/index.html.erb.md
@ -0,0 +1,3 @@
+---
+layout: 'intro'
+---
--- a/website/source/layouts/inner.erb
+++ b/website/source/layouts/inner.erb
@ -1,8 +1,5 @@
 <% wrap_layout :layout do %>
-	<hashi-product-subnav project_site="true" current_path="<%= current_page.path %>" _data="<%= encode({
-	products: dato.enterprise_products.map(&:to_hash),
-	subnav: dato.vault_product_page.subnav.to_hash
-	}) %>"></hashi-product-subnav>
+	<%= partial "partials/subnav" %>

 	<div class="content-wrap g-container">
 		<div id="sidebar" role="complementary">
--- a/website/source/netlify-redirects
+++ b/website/source/netlify-redirects
@ -1,3 +1,12 @@
+# API landing
+/api  /api/overview
+
+# Docs landing
+/docs  /docs/install/index.html
+
+# Intro landing
+/intro /intro/getting-started/index.html
+
 /api/secret/generic/index.html  /api/secret/kv
 /api/system/renew.html  /api/system/leases
 /api/system/revoke-force.html /api/system/leases
@ -167,18 +176,3 @@
 /intro/vs/keywhiz.html /docs/vs/keywhiz
 /intro/vs/kms.html /docs/vs/kms
 /intro/what-is-vault/index.html /docs/what-is-vault
-
-# Intro getting started content -> Learn
-/intro/index.html https://learn.hashicorp.com/vault/#getting-started
-/intro/getting-started/ https://learn.hashicorp.com/vault/getting-started/install
-/intro/getting-started/index.html https://learn.hashicorp.com/vault/getting-started/install
-/intro/getting-started/dev-server.html https://learn.hashicorp.com/vault/getting-started/dev-server
-/intro/getting-started/first-secret.html https://learn.hashicorp.com/vault/getting-started/first-secret
-/intro/getting-started/secrets-engines.html https://learn.hashicorp.com/vault/getting-started/secrets-engines
-/intro/getting-started/dynamic-secrets.html https://learn.hashicorp.com/vault/getting-started/dynamic-secrets
-/intro/getting-started/help.html https://learn.hashicorp.com/vault/getting-started/help
-/intro/getting-started/authentication.html https://learn.hashicorp.com/vault/getting-started/authentication
-/intro/getting-started/policies.html https://learn.hashicorp.com/vault/getting-started/policies
-/intro/getting-started/deploy.html https://learn.hashicorp.com/vault/getting-started/deploy
-/intro/getting-started/apis.html https://learn.hashicorp.com/vault/getting-started/apis
-/intro/getting-started/next-steps.html https://learn.hashicorp.com/vault/getting-started/next-steps
--- a/website/source/partials/_subnav.html.erb
+++ b/website/source/partials/_subnav.html.erb
@ -0,0 +1 @@
+<hashi-product-subnav project_site="true" _data="<%= encode(getSubNavData) %>"></hashi-product-subnav>
--- a/website/source/partials/_use-case-cta-section.html.erb
+++ b/website/source/partials/_use-case-cta-section.html.erb
@ -0,0 +1,12 @@
+<section class="g-section-block g-cta-section">
+    <div>
+        <h2>Ready to get started?</h2>
+        <a class="g-btn white download" href="/downloads.html">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+            <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"></path>
+            </svg>
+            Download
+        </a>
+        <a class="g-btn white-outline" href="/docs">Explore Docs</a>
+    </div>
+</section>
--- a/website/source/use-cases/data-encryption/index.html.erb
+++ b/website/source/use-cases/data-encryption/index.html.erb
@ -0,0 +1,83 @@
+<%= partial "partials/subnav" %>
+
+<div class='g-section-block page-wrap'>
+
+  <%-# Header / Buttons -%>
+
+  <section class='g-container'>
+    <hashi-section-header
+      headline="Encrypt Application Data in Low Trust Networks"
+      description="Keep application data secure with one centralized workflow to encrypt data in flight and at rest"
+      use_h1="true"
+    ></hashi-section-header>
+
+    <div class='button-container'>
+      <hashi-button
+        title="Download"
+        url="/downloads.html"
+      ></hashi-button>
+      <hashi-button
+        title="Get Started"
+        url="/intro"
+        classes="dark-outline"
+      ></hashi-button>
+    </div>
+  </section>
+
+  <%-# Before After Diagram -%>
+
+  <section>
+    <div class="g-container">
+      <hashi-before-after _data='<%= encode({
+        before_image: {
+          url: "https://www.datocms-assets.com/2885/1539885046-data-protectionchallenge.svg",
+          format: "svg"
+        },
+        before_headline: "The Challenge",
+        before_content: "All application data should be encrypted, but deploying a cryptography and key management infrastructure is expensive, hard to develop against, and not cloud or multi-datacenter friendly",
+        after_image: {
+          url: "https://www.datocms-assets.com/2885/1539885039-data-protectionsolution.svg",
+          format: "svg"
+        },
+        after_headline: "The Solution",
+        after_content: "Vault provides encryption as a service with centralized key management to simplify encrypting data in transit and at rest across clouds and data centers"
+      }) %>'></hashi-before-after>
+    </div>
+  </section>
+
+  <%-# Features / Text And Content -%>
+
+  <section class='g-container pad-bottom'>
+    <hashi-section-header headline="Encryption Features"></hashi-section-header>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### API-driven Encryption
+
+Encrypt application data during transit and rest with AES 256-bit CBC data encryption and TLS in transit.",
+        content: {
+          item_type: "sbc_image",
+          image: {
+            url: "https://www.datocms-assets.com/2885/1539314348-eaas.png",
+            format: "png"
+          }
+        }
+    }) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### Encryption Key Rolling
+
+Update and roll new keys throughout distributed infrastructure while retaining the ability to decrypt encrypted data",
+        content: {
+          item_type: "sbc_image",
+          image: {
+            url: "https://www.datocms-assets.com/2885/1539314609-encryption-key-rolling.png",
+            format: "png"
+          }
+        }
+}) %>'></hashi-text-and-content>
+  </section>
+
+  <%= partial "partials/use-case-cta-section" %>
+
+</div>
--- a/website/source/use-cases/identity-based-access/index.html.erb
+++ b/website/source/use-cases/identity-based-access/index.html.erb
@ -0,0 +1,170 @@
+<%= partial "partials/subnav" %>
+
+<div class='g-section-block page-wrap'>
+
+  <%-# Header / Buttons -%>
+
+  <section class='g-container'>
+    <hashi-section-header
+      headline="Leverage Trusted Identities in Low Trust Networks"
+      description="Authenticate and access different clouds, systems, and endpoints using trusted identities"
+      use_h1="true"
+    ></hashi-section-header>
+
+    <div class='button-container'>
+      <hashi-button
+        title="Download"
+        url="/downloads.html"
+      ></hashi-button>
+      <hashi-button
+        title="Get Started"
+        url="/intro"
+        classes="dark-outline"
+      ></hashi-button>
+    </div>
+  </section>
+
+  <%-# Before After Diagram -%>
+
+  <section>
+    <div class="g-container">
+      <hashi-before-after _data='<%= encode({
+        before_image: {
+          url: "/img/use-cases/identity-based-access/challenge.png",
+          format: "png"
+        },
+        before_headline: "The Challenge",
+        before_content: "With the proliferation of different clouds, services, and systems all with their own identity providers, organizations need a way to manage identity sprawl",
+        after_image: {
+          url: "/img/use-cases/identity-based-access/solution.png",
+          format: "png"
+        },
+        after_headline: "The Solution",
+        after_content: "Vault merges identities across providers and uses a unified ACL system to broker access to systems and secrets"
+      }) %>'></hashi-before-after>
+    </div>
+  </section>
+
+  <%-# Features / Text And Content -%>
+
+  <section class='g-container pad-bottom'>
+    <hashi-section-header headline="Identity-based Access Features"></hashi-section-header>
+
+    <div class="g-text-and-content">
+      <div class="text">
+        <div>
+          <h3 id="secure-plugins">Identity Plugins</h3>
+          <p>Improve the extensibility of Vault with pluggable identity backends</p>
+        </div>
+      </div>
+      <div class="content logo-grid">
+        <ul class="g-logo-grid large">
+          <% ['aws', 'azure', 'gcp', 'kubernetes', 'nomad', 'okta', 'pivotalcf', 'ssh'].each do |logo| %>
+            <li><img src='/img/use-cases/identity-based-access/logos/<%= logo %>.png'></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### Entities
+
+Integrated identities across platforms and using this information for policy and access control decisions.",
+        content: {
+            item_type: "sbc_image",
+            image: {
+                url: "/img/use-cases/identity-based-access/screenshot-entities.png",
+                format: "png",
+            }
+        }
+    }) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### Control Groups
+
+Require multiple Identity Entities or members of Identity Groups to authorize an requested action.",
+        content: {
+            item_type: "sbc_image",
+            image: {
+                url: "/img/use-cases/identity-based-access/screenshot-control-groups.png",
+                format: "png",
+            }
+        }
+    }) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### ACL Templates and Policy Control
+
+Create and manage policies that authorize access control throughout your infrastructure and organization",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "# User template (user-tmpl.hcl)
+# Grant permissions on user specific path
+
+path \"user-kv/data/{{identity.entity.name}}/*\" {
+  capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]
+}
+
+# For Web UI usage
+path \"user-kv/metadata\" {
+  capabilities = [\"list\"]
+}
+
+# Group template (group-tmpl.hcl)
+# Grant permissions on the group specific path
+# The region is specified in the group metadata
+path \"group-kv/data/education/{{identity.groups.names.education.metadata.region}}/*\" {
+  capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]
+}
+
+# Group member can update the group information
+path \"identity/group/id/{{identity.groups.names.education.id}}\" {
+  capabilities = [ \"update\", \"read\" ]
+}
+
+# For Web UI usage
+path \"group-kv/metadata\" {
+  capabilities = [\"list\"]
+}
+
+path \"identity/group/id\" {
+  capabilities = [ \"list\" ]
+}"
+    }
+}) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### Identity Groups
+
+Group trusted identities into logical groups for group-based access control.",
+        content: {
+            item_type: "sbc_image",
+            image: {
+                url: "/img/use-cases/identity-based-access/screenshot-identity-groups.png",
+                format: "png",
+            }
+        }
+    }) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### Multi-factor Authentication
+
+Enforce MFA workflows when accessing a secret or a secret path",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "$ curl \
+--header \"X-Vault-Token: ...\" \\
+--header \"X-Vault-MFA:my_totp:695452\" \\
+http://127.0.0.1:8200/v1/secret/foo"
+        }
+}) %>'></hashi-text-and-content>
+  </section>
+
+  <%= partial "partials/use-case-cta-section" %>
+
+</div>
--- a/website/source/use-cases/secrets-management/index.html.erb
+++ b/website/source/use-cases/secrets-management/index.html.erb
@ -0,0 +1,169 @@
+<%= partial "partials/subnav" %>
+
+<div class='g-section-block page-wrap'>
+
+  <%-# Header / Buttons -%>
+
+  <section class='g-container'>
+    <hashi-section-header
+      headline="Secrets Management in Low Trust Networks"
+      description="Centrally store, access, and deploy secrets across applications, systems, and infrastructure"
+      use_h1="true"
+    ></hashi-section-header>
+
+    <div class='button-container'>
+      <hashi-button
+        title="Download"
+        url="/downloads.html"
+      ></hashi-button>
+      <hashi-button
+        title="Get Started"
+        url="/intro"
+        classes="dark-outline"
+      ></hashi-button>
+    </div>
+  </section>
+
+  <%-# Before After Diagram -%>
+
+  <section class="pad-bottom">
+    <div class="g-container">
+      <hashi-before-after _data='<%= encode({
+        before_image: {
+          url: "https://www.datocms-assets.com/2885/1539885048-secrets-managementchallenge.svg",
+          format: "svg"
+        },
+        before_headline: "The Challenge",
+        before_content: "Secrets for applications and systems need to be centralized and static IP-based solutions don\'t scale in dynamic environments with frequently changing applications and machines",
+        after_image: {
+          url: "https://www.datocms-assets.com/2885/1539885054-secrets-managementsolution.svg",
+          format: "svg"
+        },
+        after_headline: "The Solution",
+        after_content: "Vault centrally manages and enforces access to secrets and systems based on trusted sources of application and user identity"
+      }) %>'></hashi-before-after>
+    </div>
+  </section>
+
+  <%-# Case Study Slider -%>
+
+  <section class="g-section-block theme-black-background-white-text">
+    <div class="g-container">
+      <hashi-case-study-slider _data="<%= encode(dato.vault_product_page.use_case_pages[0].content[2].layout.content[0].to_hash(4)) %>" dark='<%= true %>'></hashi-case-study-slider>
+    </div>
+  </section>
+
+  <%-# Features / Text And Content -%>
+
+  <section class='g-container pad-bottom'>
+    <hashi-section-header headline="Secret Management Features"></hashi-section-header>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### Dynamic Secrets
+
+Dynamically create, revoke, and rotate secrets programmatically",
+        content: {
+            item_type: "sbc_image",
+            image: {
+                url: "https://www.datocms-assets.com/2885/1538684923-dynamic-secrets-screenshot.jpg",
+                format: "jpg",
+                size: 71545,
+                width: 668,
+                height: 504
+            }
+        }
+    }) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### Secret Storage
+
+Encrypt data while at rest, in the storage backend of your choice",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "$ cat vault.config
+
+storage \"consul\" {
+    address = \"127.0.0.1:8500\"
+    path    = \"vault\"
+}
+
+listener \"tcp\" {
+    address = \"127.0.0.1:8200\"
+}
+
+telemetry {
+    statsite_address = \"127.0.0.1:8125\"
+    disable_hostname = true
+}"
+    }
+}) %>'></hashi-text-and-content>
+
+<% secure_text_and_content = {
+        text: "### Secure Plugins
+
+Improve the extensibility of Vault with pluggable secret backends",
+        content: {
+            item_type: "sbc_logo_grid",
+            companies: dato.vault_product_page.use_case_pages[0].content[3].layout.content[4].content.companies.to_hash
+        }
+
+} %>
+    <hashi-text-and-content _data='<%= encode(secure_text_and_content) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        reverse_direction: true,
+        text: "### Detailed Audit Logs
+
+Detailed audit log of all client interaction (authentication, token creation, secret access & revocation)",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "$ cat audit.log | jq {
+    \"time\": \"2018-08-27T13:17:11.609621226Z\",
+    \"type\": \"response\",
+    \"auth\": {
+        \"client_token\": \"hmac-sha256:5c40f1e051ea75b83230a5bf16574090f697dfa22a78e437f12c1c9d226f45a5\",
+        \"accessor\": \"hmac-sha256:f254a2d442f172f0b761c9fd028f599ad91861ed16ac3a1e8d96771fd920e862\",
+        \"display_name\": \"token\",
+        \"metadata\": null,
+        \"entity_id\": \"\"
+    }
+}"
+    }
+}) %>'></hashi-text-and-content>
+
+    <hashi-text-and-content _data='<%= encode({
+        text: "### Leasing & Revoking Secrets
+
+Manage authorization and create time-based tokens for automatic revocation or manual revocation",
+        content: {
+          item_type: "sbc_code_block",
+          chrome: true,
+          code: "$ vault read database/creds/readonly
+
+Key             Value
+---             -----
+lease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
+lease_duration  1h0m0s
+lease_renewable true
+password        A1a-w2xv2zsq4r5ru940
+username        v-token-readonly-48rt0t36sxp4wy81x8x1-1515627434
+[...]
+
+$ vault renew database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
+
+Key             Value
+---             -----
+lease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
+lease_duration  1h0m0s
+lease_renewable true
+$ vault lease revoke database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809"
+    }
+}) %>'></hashi-text-and-content>
+  </section>
+
+  <%= partial "partials/use-case-cta-section" %>
+
+</div>
				`@ -0,0 +1 @@`
				`<hashi-product-subnav project_site="true" _data="<%= encode(getSubNavData) %>"></hashi-product-subnav>`