diff --git a/website/.node-version b/website/.node-version
new file mode 100644
index 000000000000..348076b955bb
--- /dev/null
+++ b/website/.node-version
@@ -0,0 +1 @@
+10.15.3
diff --git a/website/.prettierrc b/website/.prettierrc
new file mode 100644
index 000000000000..b2095be81e4e
--- /dev/null
+++ b/website/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/website/assets/css/_section.css b/website/assets/css/_section.css
new file mode 100644
index 000000000000..8092cd1d84ed
--- /dev/null
+++ 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;
+    }
+  }
+}
diff --git a/website/assets/css/index.css b/website/assets/css/index.css
index c469ea52f98e..833d0f1375dc 100644
--- 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-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;
+  }
+}
diff --git a/website/assets/css/pages/_home.css b/website/assets/css/pages/_home.css
index 0d22a0040e8c..12455b2b7ad5 100644
--- 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;
+  }
+}
diff --git a/website/assets/css/pages/_use_cases.css b/website/assets/css/pages/_use_cases.css
new file mode 100644
index 000000000000..1d710196abfe
--- /dev/null
+++ 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);
+      }
+    }
+  }
+}
diff --git a/website/assets/img/homepage/callouts/encryption.png b/website/assets/img/homepage/callouts/encryption.png
new file mode 100644
index 000000000000..14710577d4a1
Binary files /dev/null and b/website/assets/img/homepage/callouts/encryption.png differ
diff --git a/website/assets/img/homepage/callouts/identity.png b/website/assets/img/homepage/callouts/identity.png
new file mode 100644
index 000000000000..d96e8b2353e6
Binary files /dev/null and b/website/assets/img/homepage/callouts/identity.png differ
diff --git a/website/assets/img/homepage/callouts/secrets.png b/website/assets/img/homepage/callouts/secrets.png
new file mode 100644
index 000000000000..588729443546
Binary files /dev/null and b/website/assets/img/homepage/callouts/secrets.png differ
diff --git a/website/assets/img/icons/alert-triangle.svg b/website/assets/img/icons/alert-triangle.svg
new file mode 100644
index 000000000000..ff190b5c33d1
--- /dev/null
+++ 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>
diff --git a/website/assets/img/icons/check-circle.svg b/website/assets/img/icons/check-circle.svg
new file mode 100644
index 000000000000..94da8277989b
--- /dev/null
+++ 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>
diff --git a/website/assets/img/use-cases/identity-based-access/challenge.png b/website/assets/img/use-cases/identity-based-access/challenge.png
new file mode 100644
index 000000000000..6b7ea19a7eeb
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/challenge.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/aws.png b/website/assets/img/use-cases/identity-based-access/logos/aws.png
new file mode 100644
index 000000000000..441ae71bd866
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/aws.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/azure.png b/website/assets/img/use-cases/identity-based-access/logos/azure.png
new file mode 100644
index 000000000000..7925c58194bc
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/azure.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/gcp.png b/website/assets/img/use-cases/identity-based-access/logos/gcp.png
new file mode 100644
index 000000000000..cb636704ed0d
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/gcp.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png
new file mode 100644
index 000000000000..b8a0a9a2a58d
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/nomad.png b/website/assets/img/use-cases/identity-based-access/logos/nomad.png
new file mode 100644
index 000000000000..0949360c413e
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/nomad.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/okta.png b/website/assets/img/use-cases/identity-based-access/logos/okta.png
new file mode 100644
index 000000000000..5627aa0a331a
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/okta.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png
new file mode 100644
index 000000000000..de4269a67de0
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/logos/ssh.png b/website/assets/img/use-cases/identity-based-access/logos/ssh.png
new file mode 100644
index 000000000000..60841d890e0d
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/logos/ssh.png differ
diff --git 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
new file mode 100644
index 000000000000..18ab76c191fe
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/screenshot-entities.png b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png
new file mode 100644
index 000000000000..c96d236aa8c2
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png differ
diff --git 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
new file mode 100644
index 000000000000..9fda217662bc
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png differ
diff --git a/website/assets/img/use-cases/identity-based-access/solution.png b/website/assets/img/use-cases/identity-based-access/solution.png
new file mode 100644
index 000000000000..1fe5d0fe8bf5
Binary files /dev/null and b/website/assets/img/use-cases/identity-based-access/solution.png differ
diff --git a/website/assets/js/components/before-after-diagram/alert-icon.js b/website/assets/js/components/before-after-diagram/alert-icon.js
new file mode 100644
index 000000000000..e953b37e1eed
--- /dev/null
+++ 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>
+  )
+}
diff --git a/website/assets/js/components/before-after-diagram/check-icon.js b/website/assets/js/components/before-after-diagram/check-icon.js
new file mode 100644
index 000000000000..4fd17b59c721
--- /dev/null
+++ 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>
+  )
+}
diff --git a/website/assets/js/components/before-after-diagram/index.js b/website/assets/js/components/before-after-diagram/index.js
new file mode 100644
index 000000000000..33dc9421e7c8
--- /dev/null
+++ 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>
+    )
+  }
+}
diff --git a/website/assets/js/components/before-after-diagram/style.css b/website/assets/js/components/before-after-diagram/style.css
new file mode 100644
index 000000000000..b6fc1cc4e3ff
--- /dev/null
+++ 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);
+        }
+      }
+    }
+  }
+}
diff --git a/website/assets/package-lock.json b/website/assets/package-lock.json
index a9673535d1de..51c092669327 100644
--- 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",
diff --git a/website/assets/package.json b/website/assets/package.json
index 5d05f5253c9a..6e94d5892af9 100644
--- 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",
diff --git a/website/assets/reshape.js b/website/assets/reshape.js
index 854fb4edd0cd..947bc6b9fc6d 100644
--- 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 callouts = require('@hashicorp/hashi-callouts')
+const caseStudySlider = require('@hashicorp/hashi-case-study-slider')
+const consentManager = require('@hashicorp/hashi-consent-manager')
 const content = require('@hashicorp/hashi-content')
-const productDownloader = require('@hashicorp/hashi-product-downloader')
 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 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 consentManager = require('@hashicorp/hashi-consent-manager')
+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-callouts': callouts,
+  'hashi-case-study-slider': caseStudySlider,
+  'hashi-consent-manager': consentManager,
+  'hashi-content': content,
   'hashi-docs-sidenav': docsSidenav,
+  'hashi-docs-sitemap': docsSitemap,
+  'hashi-footer': footer,
+  'hashi-hero': hero,
+  'hashi-linked-text-summary-list': linkedTextSummaryList,
   'hashi-mega-nav': megaNav,
-  'hashi-product-subnav': productSubnav,
-  'hashi-content': content,
+  'hashi-nav': nav,
   'hashi-product-downloader': productDownloader,
-  'hashi-vertical-text-block-list': verticalTextBlockList,
+  'hashi-product-subnav': productSubnav,
   'hashi-section-header': sectionHeader,
-  'hashi-hero': hero,
-  'hashi-callouts': callouts,
   'hashi-split-cta': splitCta,
-  'hashi-linked-text-summary-list': linkedTextSummaryList,
-  'hashi-docs-sitemap': docsSitemap,
-  'hashi-consent-manager': consentManager
+  'hashi-text-and-content': textAndContent,
+  'hashi-vertical-text-block-list': verticalTextBlockList,
+  'hashi-before-after': beforeAfterDiagram
 }
diff --git a/website/config.rb b/website/config.rb
index 90a44d200cf2..54e28bfc834e 100644
--- a/website/config.rb
+++ b/website/config.rb
@@ -83,6 +83,9 @@ def body_id_for(page)
     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 @@ def body_classes_for(page)
 
     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
diff --git a/website/source/api/index.html.erb b/website/source/api/index.html.erb
deleted file mode 100644
index 6b7aa2d27c93..000000000000
--- a/website/source/api/index.html.erb
+++ /dev/null
@@ -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>
diff --git a/website/source/api/index.html.md.erb b/website/source/api/index.html.md.erb
new file mode 100644
index 000000000000..140695c363e7
--- /dev/null
+++ b/website/source/api/index.html.md.erb
@@ -0,0 +1,4 @@
+---
+layout: "api"
+page_title: "Vault API Documentation"
+---
\ No newline at end of file
diff --git a/website/source/docs/index.html.erb b/website/source/docs/index.html.erb
deleted file mode 100644
index 0a9360094cb5..000000000000
--- a/website/source/docs/index.html.erb
+++ /dev/null
@@ -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>
diff --git a/website/source/docs/index.html.erb.md b/website/source/docs/index.html.erb.md
new file mode 100644
index 000000000000..7952233e16ce
--- /dev/null
+++ b/website/source/docs/index.html.erb.md
@@ -0,0 +1,5 @@
+---
+layout: 'docs'
+sidebar_title: 'Overview'
+sidebar_current: 'docs-index'
+---
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 6e533a3b8240..4b21b7633cc7 100644
--- 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>
+
+<div class='g-section-block page-wrap'>
+
+  <%-# Text Section -%>
+
+  <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>
+
+  <%-# 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 -%>
 
-<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 %>"
+      headline="Vault Principles"
     ></hashi-section-header>
 
-    <hashi-callouts _data="<%= encode(page.use_cases_callouts[0]) %>"></hashi-callouts>
+    <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="<%= page.documentation_headline.headline %>"
-      description="<%= page.documentation_headline.description %>"
+      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>
 
-    <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>
+    <div class='button-container'>
+      <hashi-button
+        title="Learn More"
+        url="https://www.hashicorp.com/products/vault/enterprise"
+      ></hashi-button>
     </div>
   </section>
-
-  <section class='no-pad'>
-    <hashi-split-cta _data="<%= encode(page.oss_enterprise_ctas.items) %>"></hashi-split-cta>
-  </section>
-</div>
+</div>
\ No newline at end of file
diff --git a/website/source/intro/index.html.erb.md b/website/source/intro/index.html.erb.md
new file mode 100644
index 000000000000..c642ed3fccc7
--- /dev/null
+++ b/website/source/intro/index.html.erb.md
@@ -0,0 +1,3 @@
+---
+layout: 'intro'
+---
diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb
index 26480cac6533..f0c6659a6345 100644
--- 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">
diff --git a/website/source/netlify-redirects b/website/source/netlify-redirects
index ab0e86a00c53..66586f3a55a5 100644
--- 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
@@ -166,19 +175,4 @@
 /intro/vs/index.html /docs/vs
 /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
+/intro/what-is-vault/index.html /docs/what-is-vault
\ No newline at end of file
diff --git a/website/source/partials/_subnav.html.erb b/website/source/partials/_subnav.html.erb
new file mode 100644
index 000000000000..2e5a56fd8c94
--- /dev/null
+++ b/website/source/partials/_subnav.html.erb
@@ -0,0 +1 @@
+<hashi-product-subnav project_site="true" _data="<%= encode(getSubNavData) %>"></hashi-product-subnav>
\ No newline at end of file
diff --git a/website/source/partials/_use-case-cta-section.html.erb b/website/source/partials/_use-case-cta-section.html.erb
new file mode 100644
index 000000000000..1a70a7d9e958
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/website/source/use-cases/data-encryption/index.html.erb b/website/source/use-cases/data-encryption/index.html.erb
new file mode 100644
index 000000000000..8870618943f9
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/website/source/use-cases/identity-based-access/index.html.erb b/website/source/use-cases/identity-based-access/index.html.erb
new file mode 100644
index 000000000000..11d347ca0085
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/website/source/use-cases/secrets-management/index.html.erb b/website/source/use-cases/secrets-management/index.html.erb
new file mode 100644
index 000000000000..bc4d3471dcbe
--- /dev/null
+++ 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>
\ No newline at end of file