diff --git a/website/.node-version b/website/.node-version
new file mode 100644
index 000000000..348076b95
--- /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 000000000..b2095be81
--- /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 000000000..8092cd1d8
--- /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 c469ea52f..833d0f137 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-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;
+  }
+}
diff --git a/website/assets/css/pages/_home.css b/website/assets/css/pages/_home.css
index 0d22a0040..12455b2b7 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 000000000..1d710196a
--- /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 000000000..12ea934d1
--- /dev/null
+++ b/website/assets/img/homepage/callouts/encryption.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:41f67fcde080a21f2486472d9ea1725294b70569906e906a865b942d8876b107
+size 6240
diff --git a/website/assets/img/homepage/callouts/identity.png b/website/assets/img/homepage/callouts/identity.png
new file mode 100644
index 000000000..678d11bbe
--- /dev/null
+++ b/website/assets/img/homepage/callouts/identity.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8b0c3a56e399c7c7d79fec5b4d1c438c152cda932a80e26eb1eccddf4751240e
+size 6148
diff --git a/website/assets/img/homepage/callouts/secrets.png b/website/assets/img/homepage/callouts/secrets.png
new file mode 100644
index 000000000..dadf6f4e2
--- /dev/null
+++ b/website/assets/img/homepage/callouts/secrets.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2716160d691d384e6e8be32742ed3053cbb9ca31865cd3de3aeef76e01576a0c
+size 6932
diff --git a/website/assets/img/icons/alert-triangle.svg b/website/assets/img/icons/alert-triangle.svg
new file mode 100644
index 000000000..ff190b5c3
--- /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 000000000..94da82779
--- /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 000000000..d128ad8a5
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/challenge.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c87a4bebf09343265e4583a9532fcf78791da1ae8051717f44c7aefed04f1e07
+size 46801
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 000000000..da10f794d
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/aws.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ddf8cca82fa76ce9cd10ebe8f6bb221e74477d2aa52a2dd5ddebb36c24482de7
+size 7267
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 000000000..f0f9f7c9c
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/azure.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:395c2a61c96d2d6d536defd90c3a3d32d78f2e137338778c4199675358b01881
+size 3890
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 000000000..975dec4dc
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/gcp.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c52b1cfc16a762f8fd0c2e89fa8e1adcb920bfdffbcc1f140cf0bd4cd7f50d8e
+size 6396
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 000000000..ed1e53346
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c172f9b3b9d227b1559afaac96fea28f43742e2a83dfdb6199a0dd2143f05b8a
+size 7063
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 000000000..bfc4d1375
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/nomad.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4b9389586ff0a1bb02cc6ea50976a4deeb007e7a870d371670155e890df382c
+size 1942
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 000000000..26a6a1810
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/okta.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:469e4888b746e36116b35af790478f36049671b0cb61e544b076c5cc4bb4141f
+size 4265
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 000000000..42a1384bb
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e8d105c73f92291130268166c8743fc7e8c78507887c9ebc4469f80f8706897
+size 6523
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 000000000..16c44368d
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/logos/ssh.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:63503754a234139aaf212b7b7a7c198eca42931f9a30b36f71b5ed8f2b3f4b87
+size 7348
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 000000000..aae880a01
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d826d13e2c27a87a08ed08719481a07f8dedff3aad0929eeacb7a687ff195ea3
+size 99916
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 000000000..da4c5f0c3
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4d24a23b6fa4b9ed6e311c5c2d41df30c189459bfda45a77302513407ae4073d
+size 113334
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 000000000..f77a8e7de
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:096b1fd54c1f66223a77f70b6064cdb2242f9d3b3eda3975cef7f95713cd779b
+size 86299
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 000000000..cfd47e436
--- /dev/null
+++ b/website/assets/img/use-cases/identity-based-access/solution.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:786ee62a3328f10d296ce0150da9981e52fccbca8f56c8585d21bf3dfca6cdb7
+size 45557
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 000000000..e953b37e1
--- /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 000000000..4fd17b59c
--- /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 000000000..33dc9421e
--- /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 000000000..b6fc1cc4e
--- /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 a9673535d..51c092669 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 5d05f5253..6e94d5892 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 854fb4edd..947bc6b9f 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 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
 }
diff --git a/website/config.rb b/website/config.rb
index 90a44d200..54e28bfc8 100644
--- 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
diff --git a/website/source/api/index.html.erb b/website/source/api/index.html.erb
deleted file mode 100644
index 6b7aa2d27..000000000
--- 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 000000000..140695c36
--- /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 0a9360094..000000000
--- 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 000000000..7952233e1
--- /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 6e533a3b8..4b21b7633 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>
 
-<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>
-</div>
+
+  <%-# 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>
\ 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 000000000..c642ed3fc
--- /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 26480cac6..f0c6659a6 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 ab0e86a00..66586f3a5 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 000000000..2e5a56fd8
--- /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 000000000..1a70a7d9e
--- /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 000000000..887061894
--- /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 000000000..11d347ca0
--- /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 000000000..bc4d3471d
--- /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