scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-29 17:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Assembly]: Branding Refresh (#11118)

Browse Source 
* style: update gray brand colors (#11092)

* Style: Update brand colors (#11224)

* style: update brand colors

* chore: upgrade react-components

* style: update use cases page btn --> vault brand

* chore: home page component api updates

* style: fix link colors

* run npm audit

* upgrade downloads page

* typo fixes

* fix husky, run lint

* roll back husky upgrade

* style(home callouts): body copy gray -2

* style: testing hashi-stack-menu prerelease

* style: upgrade components --> color contrast (#11328)

* chore: upgrades components w/ new styles

* refactor(use-cases pages): to use FeaturedSlider component

* style(BeforeAfterDiagram): swap check icon

* style(use-cases-cta): adjust background color --> vault primary

* chore(community): pass  to VerticalBlockTextList

* chore(deps): adds tippy.js

* chore(deps): upgrade product downloads pre-release

* fix(subnav): use asPath to set active item

* chore: upgrade deps to stable

* style: home callouts body copy to black

* chore: upgrade hashi-stack-menu to stable

* chore: upgrade deps

* style(use-cases): update background and button colors

* chore: upgrade deps body copy color

* chore: upgrades alert-banner

* fix: remove package.json

* content(home): removes hero background image

* content(home): updates assets

* content(use-cases): updates assets

* style(before-after-diagram): adjust scaling styles

* content:swap svgs for pngs

* style: updates before/after diagram

* chore: testing product download page pre-release

* content: updates consul & nomad logomarks

* chore: updates product download page to stable

Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>
This commit is contained in:
Kendall Strautman
2021-05-03 15:01:29 -07:00
committed by GitHub
parent 60578dc254
commit 7051fe753f
67 changed files with 27010 additions and 4047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/components/before-after-diagram/index.jsx
View File

@@ -1,7 +1,7 @@
import Image from '@hashicorp/react-image'
import InlineSvg from '@hashicorp/react-inline-svg'
import alertIcon from 'public/img/icons/alert-icon.svg?include'
import checkIcon from 'public/img/icons/check-icon.svg?include'
import alertIcon from 'public/img/icons/alert.svg?include'
import checkIcon from 'public/img/icons/check.svg?include'
import fragment from './fragment.graphql'
import s from './style.module.css'
function BeforeAfterDiagram(props) {
@@ -24,9 +24,8 @@ function BeforeAfterDiagram(props) {
</div>
<div className={s.contentContainer}>
<span className={s.iconLineContainer}>
<span className={s.lineSegmentOne} />
<InlineSvg className={s.beforeIcon} src={alertIcon} />
<span className={s.lineSegmentTwo} />
<span className={s.lineSegment} />
</span>
<div>
{beforeHeadline && (

128
website/components/before-after-diagram/style.module.css
View File

@@ -4,7 +4,7 @@
/* CSS custom properties to control theming */
--product-color: var(--black);
--gray-6-transparent: rgba(210, 212, 219, 0);
--after-bullet-background: url('/img/icons/check-circle.svg');
--after-bullet-background: url('/img/icons/check-square-vault.svg');
--after-bullet-height: 18px;
display: flex;
@@ -22,29 +22,6 @@
margin-left: 40px;
margin-right: 0;
}
&[data-theme='vault'] {
--after-bullet-background: url('/img/icons/check-circle-blue.svg');
--after-bullet-height: 19px;
}
&[data-theme='consul'] {
--product-color: var(--consul);
--after-bullet-background: url('/img/icons/check-circle-pink.svg');
--after-bullet-height: 19px;
}
&[data-theme='terraform'] {
--product-color: var(--terraform);
--after-bullet-background: url('/img/icons/check-circle-purple.svg');
--after-bullet-height: 19px;
}
&[data-theme='nomad'] {
--product-color: var(--nomad);
--after-bullet-background: url('/img/icons/check-circle-green.svg');
--after-bullet-height: 19px;
}
}
/* Before and after columns */
@@ -81,7 +58,7 @@
/* Diagram images */
.image {
align-items: center;
align-items: flex-end;
display: flex;
height: 320px;
justify-content: center;
@@ -113,10 +90,30 @@
width: 100%;
}
& picture {
height: 100%;
}
& img,
& svg {
max-height: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
}
@media (--medium-up) {
height: unset;
& div {
height: unset;
}
& picture {
height: unset;
}
& img,
& svg {
height: unset;
}
}
}
@@ -141,55 +138,19 @@
/* Line segment above content (before side only) */
.lineSegment {
background: black;
display: block;
height: 1px;
height: 2px;
left: calc(50% + 30px);
position: absolute;
top: 12px;
}
.lineSegmentOne {
background-image: linear-gradient(
90deg,
var(--gray-6-transparent) 0%,
var(--gray-6) 100%
);
composes: lineSegment;
right: calc(50% + 20px);
width: calc(50% + 140px);
width: calc(100% - 24px);
@media (max-width: 767px) {
background-image: linear-gradient(
180deg,
var(--gray-6-transparent) 0%,
var(--gray-6) 100%
);
height: 245px;
right: auto;
top: -253px;
width: 1px;
}
}
.lineSegmentTwo {
background-image: linear-gradient(
90deg,
var(--gray-6) 0%,
var(--product-color) 100%
);
composes: lineSegment;
left: calc(50% + 20px);
width: calc(100% - 14px);
@media (max-width: 767px) {
background-image: linear-gradient(
180deg,
var(--gray-6) 0%,
var(--product-color) 100%
);
height: calc(100% + 375px);
left: auto;
top: 32px;
width: 1px;
top: 38px;
width: 2px;
}
@media (max-width: 640px) {
@@ -208,10 +169,28 @@
height: calc(100% + 218px);
}
&::before {
border-radius: 100%;
border-style: solid;
border-width: 5.5px 0 5.5px 8px;
border-width: 2px;
content: '';
height: 8px;
left: -8px;
position: absolute;
top: -3px;
width: 8px;
@media (max-width: 767px) {
left: -3px;
top: -8px;
}
}
&::after {
border-color: transparent transparent transparent var(--product-color);
border-style: solid;
border-width: 5.5px 0 5.5px 8px;
border-width: 6px 0 6px 8px;
content: '';
height: 0;
position: absolute;
@@ -253,7 +232,7 @@
/* Content container */
.contentContainer {
border: 1px solid var(--gray-6);
border: 1px solid var(--gray-5);
flex-grow: 1;
padding: 24px 32px 20px;
position: relative;
@@ -282,7 +261,7 @@
&::before {
border-color: rgba(229, 230, 235, 0);
border-bottom-color: var(--gray-6);
border-bottom-color: var(--gray-5);
border-width: 18px;
margin-left: -18px;
}
@@ -309,7 +288,7 @@
/* Content headline */
.contentHeadline {
border-bottom: 1px solid var(--gray-6);
border-bottom: 1px solid var(--gray-5);
color: var(--black);
composes: g-type-display-3 from global;
margin: 0 0 24px;
@@ -351,8 +330,9 @@
composes: content;
& li::before {
background: url('/img/icons/alert-triangle.svg');
height: 20px;
background: url('/img/icons/alert-check.svg');
background-repeat: no-repeat;
height: var(--after-bullet-height);
margin-top: 3px;
width: 20px;
}

5
website/components/hcp-callout-section/HCPCalloutSection.module.css
View File

@@ -38,11 +38,8 @@
margin-top: 0;
margin-bottom: 8px;
}
& .chin {
color: var(--gray-4);
}
& .description {
color: var(--gray-4);
color: var(--gray-2);
margin-top: 28px;
margin-bottom: 0;

8
website/components/homepage-hero/index.jsx
View File

@@ -15,17 +15,11 @@ export default function HomepageHero({
<div className={styles.homepageHero}>
<Hero
data={{
backgroundImage: {
alt: null,
size: 55617,
url: 'https://www.datocms-assets.com/2885/1539894412-vault-bg.jpg',
width: 3196,
},
backgroundTheme: 'light',
buttons: buttons.slice(0, 2),
centered: false,
description: description,
theme: 'vault-gray',
product: 'vault',
title: title,
videos: [
{

2
website/components/subnav/index.jsx
View File

@@ -27,7 +27,7 @@ export default function ProductSubnav() {
url: '/downloads',
},
]}
currentPath={router.pathname}
currentPath={router.asPath}
menuItems={menuItems}
menuItemsAlign="right"
constrainWidth

5
website/components/use-case-cta-section/index.jsx
View File

@@ -11,14 +11,13 @@ export default function UseCaseCtaSection() {
linkType="download"
theme={{
variant: 'primary',
background: 'dark',
brand: 'neutral'
brand: 'neutral',
}}
/>
<Button
url="/docs"
title="Explore Docs"
theme={{ variant: 'secondary', background: 'dark' }}
theme={{ variant: 'secondary' }}
/>
</div>
</section>

4
website/components/use-case-cta-section/style.css
View File

@@ -1,7 +1,7 @@
.g-section-block.g-cta-section {
-webkit-box-align: center;
align-items: center;
background: var(--gray-2);
background: var(--vault-secondary);
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
@@ -10,7 +10,7 @@
padding-right: 15px;
position: relative;
text-align: center;
color: var(--white);
color: var(--black);
& .g-btn.white {
background: var(--white);

2
website/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />

4
website/next.config.js
View File

@@ -1,9 +1,7 @@
const withHashicorp = require('@hashicorp/nextjs-scripts')
const redirects = require('./redirects.next')
module.exports = withHashicorp({
transpileModules: ['is-absolute-url', '@hashicorp/react-.*'],
})({
module.exports = withHashicorp()({
svgo: { plugins: [{ removeViewBox: false }] },
rewrites: () => [
{

30426
website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

60
website/package.json
View File

@@ -4,36 +4,42 @@
"version": "1.0.0",
"author": "HashiCorp",
"dependencies": {
"@hashicorp/mktg-global-styles": "2.1.0",
"@hashicorp/nextjs-scripts": "16.3.0",
"@hashicorp/react-alert-banner": "^5.0.0",
"@hashicorp/react-button": "4.0.0",
"@hashicorp/react-case-study-slider": "4.0.0",
"@hashicorp/react-code-block": "3.0.3",
"@hashicorp/react-docs-page": "12.0.0",
"@hashicorp/react-hashi-stack-menu": "1.2.1-canary.0",
"@hashicorp/react-head": "1.1.6",
"@hashicorp/react-hero": "4.1.0",
"@hashicorp/react-image": "3.0.3",
"@hashicorp/react-inline-svg": "5.0.0",
"@hashicorp/react-logo-grid": "3.0.1",
"@hashicorp/react-markdown-page": "0.1.0",
"@hashicorp/react-product-downloader": "7.0.4",
"@hashicorp/react-section-header": "3.0.1",
"@hashicorp/react-subnav": "7.1.0",
"@hashicorp/react-text-splits": "1.0.5",
"@hashicorp/react-use-cases": "2.0.1",
"@hashicorp/react-vertical-text-block-list": "4.0.1",
"next": "10.0.6",
"next-mdx-remote": "1.0.1",
"next-remote-watch": "0.3.0",
"react": "16.13.1",
"react-dom": "16.13.1"
"@hashicorp/mktg-global-styles": "3.0.1",
"@hashicorp/nextjs-scripts": "18.1.0",
"@hashicorp/react-alert-banner": "6.1.1",
"@hashicorp/react-button": "5.0.1",
"@hashicorp/react-case-study-slider": "6.0.0",
"@hashicorp/react-code-block": "4.0.1",
"@hashicorp/react-content": "7.0.1",
"@hashicorp/react-docs-page": "13.1.4",
"@hashicorp/react-featured-slider": "4.0.0",
"@hashicorp/react-hashi-stack-menu": "2.0.3",
"@hashicorp/react-head": "3.0.2",
"@hashicorp/react-hero": "7.1.1",
"@hashicorp/react-image": "4.0.1",
"@hashicorp/react-inline-svg": "6.0.1",
"@hashicorp/react-logo-grid": "4.0.1",
"@hashicorp/react-markdown-page": "1.1.2",
"@hashicorp/react-product-downloads-page": "2.0.2",
"@hashicorp/react-section-header": "5.0.2",
"@hashicorp/react-subnav": "8.1.0",
"@hashicorp/react-tabs": "6.0.1",
"@hashicorp/react-text-split": "3.1.1",
"@hashicorp/react-text-splits": "2.1.1",
"@hashicorp/react-use-cases": "3.0.2",
"@hashicorp/react-vertical-text-block-list": "6.0.2",
"next": "10.1.3",
"next-mdx-remote": "2.1.4",
"next-remote-watch": "1.0.0",
"react": "16.14.0",
"react-dom": "16.14.0",
"tippy.js": "4.0.0"
},
"devDependencies": {
"@types/react": "^17.0.3",
"dart-linkcheck": "^2.0.15",
"husky": "^4.3.6",
"inquirer": "^7.3.3",
"husky": "^4.3.8",
"inquirer": "^8.0.0",
"prettier": "^2.2.1"
},
"husky": {

2
website/pages/_app.js
View File

@@ -59,7 +59,7 @@ export default function App({ Component, pageProps }) {
]}
/>
{ALERT_BANNER_ACTIVE && (
<AlertBanner {...alertBannerData} theme="vault" />
<AlertBanner {...alertBannerData} product="vault" />
)}
<HashiStackMenu />
<ProductSubnav />

4
website/pages/_document.js
View File

@@ -10,7 +10,9 @@ export default class MyDocument extends Document {
render() {
return (
<Html>
<HashiHead is={Head} />
<Head>
<HashiHead />
</Head>
<body>
<Main />
<NextScript />

3
website/pages/community/index.jsx
View File

@@ -1,4 +1,4 @@
import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list/index.tsx'
import SectionHeader from '@hashicorp/react-section-header'
import Head from 'next/head'
import HashiHead from '@hashicorp/react-head'
@@ -13,6 +13,7 @@ function CommunityPage() {
use_h1={true}
/>
<VerticalTextBlockList
product="vault"
data={[
{
header: 'Discussion List',

164
website/pages/downloads/index.jsx
View File

@@ -1,12 +1,75 @@
import Head from 'next/head'
import Link from 'next/link'
import Button from '@hashicorp/react-button'
import ProductDownloader from '@hashicorp/react-product-downloader'
import HashiHead from '@hashicorp/react-head'
import { VERSION, CHANGELOG_URL, packageManagers } from 'data/version'
import { productName, productSlug } from 'data/metadata'
import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
import { generateStaticProps } from '@hashicorp/react-product-downloads-page/server'
import { VERSION, CHANGELOG_URL } from 'data/version'
import { productSlug } from 'data/metadata'
import s from './style.module.css'
export default function DownloadsPage(staticProps) {
const changelogUrl = CHANGELOG_URL.length
? CHANGELOG_URL
: `https://github.com/hashicorp/vault/blob/v${VERSION}/CHANGELOG.md`
return (
<ProductDownloadsPage
{...staticProps}
changelog={changelogUrl}
getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."
getStartedLinks={[
{
label: 'Getting Started with the CLI',
href: 'http://learn.hashicorp.com/collections/vault/getting-started',
},
{
label: 'Getting Started with Vault UI',
href:
'http://learn.hashicorp.com/collections/vault/getting-started-ui',
},
{
label: 'Vault on HCP',
href:
'http://learn.hashicorp.com/collections/vault/getting-started-ui',
},
{
label: 'View all Vault tutorials',
href: 'https://learn.hashicorp.com/vault',
},
]}
logo={
<img
className={s.logo}
alt="Vault"
src={require('./img/vault-logo.svg')}
/>
}
tutorialLink={{
href: 'https://learn.hashicorp.com/vault',
label: 'View Tutorials at HashiCorp Learn',
}}
merchandisingSlot={
<>
<MerchandisingSlot />
<p className={s.releaseNote}>
Release notes are available in our{' '}
<Link href={`/docs/release-notes/${VERSION}`}>
<a>documentation</a>
</Link>
.
</p>
</>
}
/>
)
}
export function getStaticProps() {
return generateStaticProps({
product: productSlug,
latestVersion: VERSION,
})
}
function MerchandisingSlot() {
return (
<div className={s.merchandisingSlot}>
@@ -28,94 +91,3 @@ function MerchandisingSlot() {
</div>
)
}
export default function DownloadsPage({ releases }) {
const changelogUrl = CHANGELOG_URL.length
? CHANGELOG_URL
: `https://github.com/hashicorp/vault/blob/v${VERSION}/CHANGELOG.md`
return (
<div id="p-downloads" className="g-container">
<HashiHead is={Head} title="Downloads | Vault by Hashicorp" />
<ProductDownloader
releases={releases}
packageManagers={packageManagers}
productName={productName}
productId={productSlug}
latestVersion={VERSION}
changelog={changelogUrl}
getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."
getStartedLinks={[
{
label: 'Getting Started with the CLI',
href:
'http://learn.hashicorp.com/collections/vault/getting-started',
},
{
label: 'Getting Started with Vault UI',
href:
'http://learn.hashicorp.com/collections/vault/getting-started-ui',
},
{
label: 'Vault on HCP',
href:
'http://learn.hashicorp.com/collections/vault/getting-started-ui',
},
{
label: 'View all Vault tutorials',
href: 'https://learn.hashicorp.com/vault',
},
]}
logo={
<img
className={s.logo}
alt="Vault"
src={require('./img/vault-logo.svg')}
/>
}
tutorialLink={{
href: 'https://learn.hashicorp.com/vault',
label: 'View Tutorials at HashiCorp Learn',
}}
merchandisingSlot={
<>
<MerchandisingSlot />
<p className={s.releaseNote}>
Release notes are available in our{' '}
<Link href={`/docs/release-notes/${VERSION}`}>
<a>documentation</a>
</Link>
.
</p>
</>
}
/>
</div>
)
}
export async function getStaticProps() {
return fetch(`https://releases.hashicorp.com/vault/index.json`, {
headers: {
'Cache-Control': 'no-cache',
},
})
.then((res) => res.json())
.then((result) => {
return {
props: {
releases: result,
},
}
})
.catch(() => {
throw new Error(
`--------------------------------------------------------
Unable to resolve version ${VERSION} on releases.hashicorp.com from link
<https://releases.hashicorp.com/${productSlug}/${VERSION}/index.json>. Usually this
means that the specified version has not yet been released. The downloads page
version can only be updated after the new version has been released, to ensure
that it works for all users.
----------------------------------------------------------`
)
})
}

2
website/pages/home/content.json
View File

@@ -57,7 +57,7 @@
"aws",
"mongodb",
{
"url": "https://www.datocms-assets.com/2885/1508434209-consul_primarylogo_fullcolor.svg"
"url": "https://www.datocms-assets.com/2885/1619808181-conusul-attributedcolor.svg"
},
{
"url": "https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg"

1
website/pages/home/img/hcp-vault.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

1
website/pages/home/img/hcp_vault.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
website/pages/home/img/use-cases/data_encryption.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="80" viewBox="0 0 80 80" width="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="8" x2="55.9123" y1="52" y2="12.7793"><stop offset="0" stop-color="#fff9cf"/><stop offset="1" stop-color="#ffec6e"/></linearGradient><path d="m0 0h80v80h-80z" fill="#fff"/><rect fill="url(#a)" height="44" opacity=".6" rx="1.5" width="44" x="8" y="8"/><path d="m26 26h44v44h-44z" fill="#000"/><rect fill="#ffec6e" height="44" rx="1.5" width="44" x="17" y="17"/><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path clip-rule="evenodd" d="m31.5 40.167c0-1.1046.8954-2 2-2h11c1.1046 0 2 .8954 2 2v5.1667c0 1.1045-.8954 2-2 2h-11c-1.1046 0-2-.8955-2-2z" fill-rule="evenodd"/><path d="m34.833 38.167v-3.3333c0-2.3012 1.8655-4.1667 4.1667-4.1667s4.1666 1.8655 4.1666 4.1667v3.3333"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 915 B

1
website/pages/home/img/use-cases/identity-based-access.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="80" viewBox="0 0 80 80" width="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="14" x2="31.342" y1="9" y2="11.7336"><stop offset="0" stop-color="#fff9cf"/><stop offset="1" stop-color="#ffec6e"/></linearGradient><path d="m0 0h80v80h-80z" fill="#fff"/><rect fill="#000" height="54" rx="1.5" width="43" x="23" y="13"/><path d="m57 69.5c0 .8284-.6716 1.5-1.5 1.5h-33.5v-62h33.5c.8284 0 1.5.67158 1.5 1.5z" fill="#ffec6e"/><rect fill="#000" height="3" rx="1.5" width="12" x="32" y="14"/><path d="m22 9v62h-6.5c-.8284 0-1.5-.6716-1.5-1.5v-59c0-.82843.6716-1.5 1.5-1.5z" fill="url(#a)" opacity=".7"/><g stroke="#000" stroke-linecap="round" stroke-linejoin="round"><path d="m43.6663 53.5v-1.6667c0-1.8409-1.4923-3.3333-3.3333-3.3333h-6.6667c-1.8409 0-3.3333 1.4924-3.3333 3.3333v1.6667" stroke-width="2"/><path clip-rule="evenodd" d="m37.0003 45.1667c1.841 0 3.3334-1.4924 3.3334-3.3334 0-1.8409-1.4924-3.3333-3.3334-3.3333-1.8409 0-3.3333 1.4924-3.3333 3.3333 0 1.841 1.4924 3.3334 3.3333 3.3334z" fill-rule="evenodd" stroke-width="1.5"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
website/pages/home/img/use-cases/secrets-management.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="80" viewBox="0 0 80 80" width="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.5" x2="36.3586" y1="45" y2="71.4797"><stop offset="0" stop-color="#fff9cf"/><stop offset="1" stop-color="#ffec6e"/></linearGradient><path d="m0 0h80v80h-80z" fill="#fff"/><circle cx="40" cy="40" fill="url(#a)" fill-opacity=".65" r="32"/><path d="m40 69c16.0163 0 29-12.9837 29-29s-12.9837-29-29-29-29 12.9837-29 29" stroke="#000" stroke-width="6"/><circle cx="40" cy="40" fill="#ffec6e" r="26"/><path d="m48.0259 31.978c-1.2759-1.2756-2.9739-1.978-4.779-1.978-.2992 0-.6017.0189-.8978.0598-2.0729.2772-3.9316 1.5276-4.9711 3.3449-1.0396 1.8173-1.1719 4.0504-.3592 5.9811.0126.0284.0063.063-.0189.0882l-6.9999 6.9984v3.5276h3.5126l.9041-.9039c.0914-.0977.1323-.2142.126-.3307v-1.6599c0-.1512.1229-.2772.2772-.2772h1.5122c.1575 0 .3118-.0629.4221-.1763.1103-.1166.1701-.2614.1733-.4158v-1.5023c0-.1512.1228-.2772.2772-.2772h1.6885c.1198 0 .2363-.0504.3182-.1386l1.3263-1.326c.0157-.0126.0315-.0189.0504-.0189l.0315.0063c.8348.3496 1.7169.5292 2.621.5292 1.1751 0 2.3344-.3087 3.3551-.8914 1.8145-1.0362 3.0652-2.8945 3.3456-4.9669.2772-2.0724-.4379-4.1921-1.9154-5.6724zm-2.347 5.4299c-.4095.4126-.9576.6393-1.5404.6393-.8853 0-1.6728-.5291-2.0131-1.3448-.3371-.8158-.1543-1.7481.4726-2.3717.4127-.4126.9577-.6362 1.5405-.6362.2866 0 .567.0567.8316.1669.816.3402 1.3452 1.1276 1.3452 2.0126 0 .5669-.2331 1.1276-.6364 1.5339z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
website/pages/home/img/vault_dynamic_isometric@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
website/pages/home/img/vault_static_isometric@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

26
website/pages/home/index.jsx
View File

@@ -60,7 +60,17 @@ export default function Homepage({ content }) {
{/* Before-After Diagram */}
<section className="g-container before-after">
<BeforeAfterDiagram {...content.beforeAfterDiagram} />
<BeforeAfterDiagram
{...content.beforeAfterDiagram}
beforeImage={{
format: 'png',
url: require('./img/vault_static_isometric@2x.png'),
}}
afterImage={{
format: 'png',
url: require('./img/vault_dynamic_isometric@2x.png'),
}}
/>
</section>
{/* Use cases */}
@@ -68,7 +78,7 @@ export default function Homepage({ content }) {
<section>
<div className="g-container">
<UseCases
theme="vault"
product="vault"
items={[
{
title: 'Secrets Management',
@@ -77,8 +87,7 @@ export default function Homepage({ content }) {
image: {
alt: null,
format: 'png',
url:
'https://www.datocms-assets.com/2885/1575422126-secrets.png',
url: require('./img/use-cases/secrets-management.svg?url'),
},
link: {
external: false,
@@ -93,8 +102,7 @@ export default function Homepage({ content }) {
image: {
alt: null,
format: 'png',
url:
'https://www.datocms-assets.com/2885/1575422166-encryption.png',
url: require('./img/use-cases/data_encryption.svg?url'),
},
link: {
external: false,
@@ -109,8 +117,7 @@ export default function Homepage({ content }) {
image: {
alt: null,
format: 'png',
url:
'https://www.datocms-assets.com/2885/1575422201-identity.png',
url: require('./img/use-cases/identity-based-access.svg?url'),
},
link: {
external: false,
@@ -128,7 +135,7 @@ export default function Homepage({ content }) {
title="HCP Vault"
chin="Available on AWS"
description="HCP Vault provides all of the power and security of Vault, without the complexity and overhead of managing it yourself. Access Vault’s best-in-class secrets management and encryption capabilities instantly and onboard applications and teams easily."
image={require('./img/hcp-vault.svg?url')}
image={require('./img/hcp_vault.svg?url')}
links={[
{
text: 'Learn More',
@@ -155,6 +162,7 @@ export default function Homepage({ content }) {
<Button
title="Learn More"
url="https://www.hashicorp.com/products/vault/enterprise"
theme={{ brand: 'vault' }}
/>
</div>
</section>

12
website/pages/style.css
View File

@@ -5,25 +5,23 @@
@import '~@hashicorp/nextjs-scripts/prism/style.css';
:root {
--highlight-color: var(--brand);
--highlight-color: var(--brand-link);
}
@import '~@hashicorp/react-consent-manager/style.css';
@import '~@hashicorp/react-toggle/style.css';
@import '~@hashicorp/react-alert-banner/style.css';
@import '~@hashicorp/react-button/styles/index.css';
@import '~@hashicorp/react-case-study-slider/style.css';
@import '~@hashicorp/react-code-block/style.css';
@import '~@hashicorp/react-consent-manager/style.css';
@import '~@hashicorp/react-content/style.css';
@import '~@hashicorp/react-docs-page/style.css';
@import '~@hashicorp/react-enterprise-alert/style.css';
@import '~@hashicorp/react-featured-slider/style.css';
@import '~@hashicorp/react-hero/style.css';
@import '~@hashicorp/react-logo-grid/style.css';
@import '~@hashicorp/react-search/style.css';
@import '~@hashicorp/react-section-header/style.css';
@import '~@hashicorp/react-tabs/style.css';
@import '~@hashicorp/react-text-split/style.css';
@import '~@hashicorp/react-toggle/style.css';
@import '~@hashicorp/react-use-cases/dist/style.css';
@import '~@hashicorp/react-use-cases/style.css';
@import '~@hashicorp/react-vertical-text-block-list/style.css';
/* Global Components - Transpiled */

9
website/pages/use-cases/data-encryption/content.json
View File

@@ -1,13 +1,13 @@
{
"beforeAfterDiagram": {
"beforeImage": {
"url": "https://www.datocms-assets.com/2885/1539885046-data-protectionchallenge.svg",
"url": "/img/use-cases/data-encryption/data-encryption-challenge.png",
"format": "svg"
},
"beforeHeadline": "The Challenge",
"beforeContent": "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",
"afterImage": {
"url": "https://www.datocms-assets.com/2885/1539885039-data-protectionsolution.svg",
"url": "/img/use-cases/data-encryption/data-encryption-solution.png",
"format": "svg"
},
"afterHeadline": "The Solution",
@@ -20,7 +20,7 @@
"content": "Encrypt application data during transit and rest with AES 256-bit CBC data encryption and TLS in transit."
},
"image": {
"url": "https://www.datocms-assets.com/2885/1539314348-eaas.png"
"url": "/img/use-cases/data-encryption/encryption-features.png"
}
},
{
@@ -30,7 +30,8 @@
"textSide": "right"
},
"image": {
"url": "https://www.datocms-assets.com/2885/1539314609-encryption-key-rolling.png"
"url": "/img/use-cases/data-encryption/encryption-keyrolling@3x.png",
"format": "png"
}
}
]

6
website/pages/use-cases/data-encryption/index.jsx
View File

@@ -28,7 +28,11 @@ export default function DataEncryptionUseCase({ content }) {
/>
<div className="button-container">
<Button title="Download" url="/downloads" />
<Button
title="Download"
url="/downloads"
theme={{ brand: 'vault' }}
/>
<Button title="Get Started" url="/intro" theme="dark-outline" />
</div>
</section>

12
website/pages/use-cases/identity-based-access/content.json
View File

@@ -1,12 +1,12 @@
{
"beforeAfterDiagram": {
"beforeImage": {
"url": "https://www.datocms-assets.com/2885/1613077525-vault-identity-based-access-challenge.png"
"url": "/img/use-cases/identity-based-access/identity-based-access-challenge.png"
},
"beforeHeadline": "The Challenge",
"beforeContent": "With the proliferation of different clouds, services, and systems all with their own identity providers, organizations need a way to manage identity sprawl",
"afterImage": {
"url": "https://www.datocms-assets.com/2885/1613077531-vault-identity-based-access-solution.png"
"url": "/img/use-cases/identity-based-access/identity-based-access-solution.png"
},
"afterHeadline": "The Solution",
"afterContent": "Vault merges identities across providers and uses a unified ACL system to broker access to systems and secrets"
@@ -23,7 +23,7 @@
"google",
"kubernetes",
{
"url": "https://www.datocms-assets.com/2885/1608658148-nomad.png"
"url": "https://www.datocms-assets.com/2885/1619808232-nomad-logomark-color.svg"
},
{
"url": "https://www.datocms-assets.com/2885/1556657783-oktalogo.svg"
@@ -42,7 +42,7 @@
"textSide": "right"
},
"image": {
"url": "https://www.datocms-assets.com/2885/1608659415-screenshot-entities.png"
"url": "/img/use-cases/identity-based-access/entities.png"
}
},
{
@@ -51,7 +51,7 @@
"content": "Require multiple Identity Entities or members of Identity Groups to authorize an requested action."
},
"image": {
"url": "https://www.datocms-assets.com/2885/1608659409-screenshot-control-groups.png"
"url": "/img/use-cases/identity-based-access/control-groups.png"
}
},
{
@@ -72,7 +72,7 @@
"textSide": "right"
},
"image": {
"url": "https://www.datocms-assets.com/2885/1608659421-screenshot-identity-groups.png"
"url": "/img/use-cases/identity-based-access/admin.png"
}
},
{

6
website/pages/use-cases/identity-based-access/index.jsx
View File

@@ -28,7 +28,11 @@ export default function DataEncryptionUseCase({ content }) {
/>
<div className="button-container">
<Button title="Download" url="/downloads" />
<Button
title="Download"
url="/downloads"
theme={{ brand: 'vault' }}
/>
<Button title="Get Started" url="/intro" theme="dark-outline" />
</div>
</section>

8
website/pages/use-cases/secrets-management/content.json
View File

@@ -1,14 +1,14 @@
{
"beforeAfterDiagram": {
"beforeImage": {
"url": "https://www.datocms-assets.com/2885/1539885048-secrets-managementchallenge.svg",
"url": "/img/use-cases/secrets-management/secrets-mgmt-challenge.png",
"format": "svg"
},
"beforeHeadline": "The Challenge",
"beforeContent": "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",
"afterImage": {
"url": "https://www.datocms-assets.com/2885/1539885054-secrets-managementsolution.svg",
"format": "svg"
"url": "/img/use-cases/secrets-management/secrets-mgmt-solution.png",
"format": "png"
},
"afterHeadline": "The Solution",
"afterContent": "Vault centrally manages and enforces access to secrets and systems based on trusted sources of application and user identity"
@@ -20,7 +20,7 @@
"content": "Dynamically create, revoke, and rotate secrets programmatically."
},
"image": {
"url": "https://www.datocms-assets.com/2885/1538684923-dynamic-secrets-screenshot.jpg"
"url": "/img/use-cases/secrets-management/dynamic_secrets@3x.png"
}
},
{

90
website/pages/use-cases/secrets-management/index.jsx
View File

@@ -7,6 +7,7 @@ import UseCaseCtaSection from 'components/use-case-cta-section'
import RAW_CONTENT from './content.json'
import highlightData from '@hashicorp/nextjs-scripts/prism/highlight-data'
import processBeforeAfterDiagramProps from 'components/before-after-diagram/server'
import FeaturedSlider from '@hashicorp/react-featured-slider'
export async function getStaticProps() {
const content = await highlightData(RAW_CONTENT)
@@ -29,7 +30,11 @@ export default function SecretsManagmentUseCase({ content }) {
/>
<div className="button-container">
<Button title="Download" url="/downloads" />
<Button
title="Download"
url="/downloads"
theme={{ brand: 'vault' }}
/>
<Button title="Get Started" url="/intro" theme="dark-outline" />
</div>
</section>
@@ -44,62 +49,33 @@ export default function SecretsManagmentUseCase({ content }) {
{/* Case study slider */}
<section className="g-section-block theme-black-background-white-text">
<div className="g-container">
<div className="g-case-study-slider">
<div className="case-study-container">
<div className="slider-container">
<div className="slider-frame single">
<div className="case-study">
<div className="feature-image">
<a href="https://www.hashicorp.com/resources/adobe-100-trillion-transactions-hashicorp-vault">
<picture>
<source
type="image/webp"
srcSet="https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=156.25&amp;q=80&amp;w=250 250w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=312.5&amp;q=80&amp;w=500 500w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=468.75&amp;q=80&amp;w=750 750w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=625&amp;q=80&amp;w=1000 1000w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=937.5&amp;q=80&amp;w=1500 1500w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=1250&amp;q=80&amp;w=2000 2000w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=webp&amp;h=1562.5&amp;q=80&amp;w=2500 2500w"
sizes="100vw"
/>
<img
src="https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=312.5&amp;q=80&amp;w=500"
srcSet="https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=156.25&amp;q=80&amp;w=250 250w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=312.5&amp;q=80&amp;w=500 500w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=468.75&amp;q=80&amp;w=750 750w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=625&amp;q=80&amp;w=1000 1000w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=937.5&amp;q=80&amp;w=1500 1500w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=1250&amp;q=80&amp;w=2000 2000w,https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=1562.5&amp;q=80&amp;w=2500 2500w"
sizes="100vw"
alt="Dan McTeer at HashiConf 2017"
/>
</picture>
</a>
</div>
<div className="feature-content">
<div className="single-logo">
<img
src="https://www.datocms-assets.com/2885/1539889072-1524097013-adobe-white-1.svg"
alt="Adobe logo"
/>
</div>
<h3>
Using Vault to Protect Adobe&apos;s Secrets and User
Data Across Clouds and Datacenters
</h3>
<p>
Securing secrets and application data is a complex task
for globally distributed organizations. For Adobe,
managing secrets for over 20 products across 100,000
hosts, four regions, and trillions of transactions
annually requires a different approach altogether.
</p>
<a
className="g-btn primary-hashicorp-light"
href="https://www.hashicorp.com/resources/adobe-100-trillion-transactions-hashicorp-vault"
>
Read Case Study
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<FeaturedSlider
theme="dark"
features={[
{
logo: {
url:
'https://www.datocms-assets.com/2885/1539889072-1524097013-adobe-white-1.svg',
alt: 'Adobe Logo',
},
image: {
url:
'https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&amp;fm=jpg&amp;h=312.5&amp;q=80&amp;w=500',
alt: 'Dan McTeer at HashiConf 2017',
},
heading:
"Using Vault to Protect Adobe's Secrets and User Data Across Clouds and Datacenters",
content:
'Securing secrets and application data is a complex task for globally distributed organizations. For Adobe, managing secrets for over 20 products across 100,000 hosts, four regions, and trillions of transactions annually requires a different approach altogether.',
link: {
text: 'Read Case Study',
url:
'https://www.hashicorp.com/resources/adobe-100-trillion-transactions-hashicorp-vault',
type: 'outbound',
},
},
]}
/>
{/* Features */}
<section className="no-section-spacing">

8
website/pages/use-cases/style.css
View File

@@ -1,5 +1,7 @@
/* Shared styles in all /use-cases pages */
#use-cases .g-logo-grid li img {
max-height: 50%;
max-width: 50%;
#use-cases {
& .g-logo-grid li img {
max-height: 50%;
max-width: 50%;
}
}

2
website/public/img/docs-sidebar-chevron-active.svg
View File

@@ -1 +1 @@
<svg width="8" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M7.429.9a.5.5 0 1 0-.707-.707L4.075 2.84 1.43.194A.5.5 0 1 0 .722.9l3 3a.5.5 0 0 0 .707 0l3-3z" fill="#1563FF" fill-rule="evenodd"/></svg>
<svg width="8" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M7.429.9a.5.5 0 1 0-.707-.707L4.075 2.84 1.43.194A.5.5 0 1 0 .722.9l3 3a.5.5 0 0 0 .707 0l3-3z" fill="var(--brand, #2e71e5)" fill-rule="evenodd"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 208 B

After

Width:  |  Height:  |  Size: 222 B

2
website/public/img/docs-sidebar-chevron.svg
View File

@@ -1 +1 @@
<svg width="5" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1.429.194A.5.5 0 1 0 .722.9l2.646 2.647L.722 6.194a.5.5 0 1 0 .707.707l3-3a.5.5 0 0 0 0-.708l-3-3z" fill="#9396A2" fill-rule="evenodd"/></svg>
<svg width="5" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1.429.194A.5.5 0 1 0 .722.9l2.646 2.647L.722 6.194a.5.5 0 1 0 .707.707l3-3a.5.5 0 0 0 0-.708l-3-3z" fill="var(--gray-3, #727274)" fill-rule="evenodd"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 213 B

After

Width:  |  Height:  |  Size: 228 B

2
website/public/img/green-check.svg
View File

@@ -1 +1 @@
<svg width="18" height="13" viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>a</title><defs><path d="M6 10.586L1.707 6.293A1 1 0 1 0 .293 7.707l5 5a.997.997 0 0 0 1.414 0l11-11A1 1 0 0 0 16.293.293L6 10.586z" id="a"/></defs><use fill="#00BC7F" xlink:href="#a" fill-rule="evenodd"/></svg>
<svg width="18" height="13" viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>a</title><defs><path d="M6 10.586L1.707 6.293A1 1 0 1 0 .293 7.707l5 5a.997.997 0 0 0 1.414 0l11-11A1 1 0 0 0 16.293.293L6 10.586z" id="a"/></defs><use fill="var(--nomad, #60dea9)" xlink:href="#a" fill-rule="evenodd"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 343 B

After

Width:  |  Height:  |  Size: 357 B

1
website/public/img/icons/alert-check.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="16" viewBox="0 0 18 16" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m17.7979 13.7532-7.5085-13.008778c-.57343-.992563-2.00314-.992563-2.57656 0l-7.51108 13.008778c-.573424.9925.143998 2.232 1.28827 2.232h15.01957c1.1469 0 1.8617-1.2395 1.2883-2.232z" fill="#ffd4d6"/><g fill="#000"><path d="m9.00033 14.1022c.61287 0 1.10967-.4968 1.10967-1.1097s-.4968-1.1097-1.10967-1.1097-1.10971.4968-1.10971 1.1097.49684 1.1097 1.10971 1.1097z"/><path d="m8.83877 4.11523h.32233c.51801 0 .9347.43053.9163.94855l-.16115 4.82099c-.01612.49503-.42363.88873-.91632.88873-.49499 0-.90019-.3914-.91631-.88873l-.16116-4.82099c-.01842-.52032.3983-.94855.91631-.94855z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

2
website/public/img/icons/alert-triangle.svg
View File

@@ -1,5 +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 fill-rule="evenodd" stroke="var(--gray-5, #dbdbdc)" 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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 771 B

After

Width:  |  Height:  |  Size: 786 B

1
website/public/img/icons/alert.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#ffd4d6" r="12"/><g fill="#000"><path d="m12 18.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z"/><path d="m11.7824 5h.4356c.7002 0 1.2635.58195 1.2386 1.28216l-.2178 6.51664c-.0218.669-.5726 1.2012-1.2386 1.2012-.6691 0-1.2168-.529-1.2386-1.2012l-.2178-6.51664c-.0249-.70332.5383-1.28216 1.2386-1.28216z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

4
website/public/img/icons/check-circle.svg
View File

@@ -1,4 +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"/>
<path stroke="var(--gray-5, #dbdbdc)" 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="var(--brand, #2e71e5)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 3L8.25 11.25L6 9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 567 B

4
website/public/img/icons/check-square-vault.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill="#fff9cf"/>
<path d="M17.3334 8.66666L10 16L6.66669 12.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

1
website/public/img/icons/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#000" r="12"/><path d="m16.6654 9.08398-6.4167 6.41672-2.91667-2.9167" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

BIN
website/public/img/use-cases/data-encryption/data-encryption-challenge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
website/public/img/use-cases/data-encryption/data-encryption-solution.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
website/public/img/use-cases/data-encryption/encryption-features.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
website/public/img/use-cases/data-encryption/encryption-keyrolling@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
website/public/img/use-cases/identity-based-access/admin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
website/public/img/use-cases/identity-based-access/challenge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
website/public/img/use-cases/identity-based-access/control-groups.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
website/public/img/use-cases/identity-based-access/entities.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
website/public/img/use-cases/identity-based-access/identity-based-access-challenge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
website/public/img/use-cases/identity-based-access/identity-based-access-solution.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/aws.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/azure.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/gcp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/kubernetes.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.9 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/nomad.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/okta.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/pivotalcf.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

BIN
website/public/img/use-cases/identity-based-access/logos/ssh.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
website/public/img/use-cases/identity-based-access/screenshot-control-groups.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB

BIN
website/public/img/use-cases/identity-based-access/screenshot-entities.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

BIN
website/public/img/use-cases/identity-based-access/screenshot-identity-groups.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
website/public/img/use-cases/identity-based-access/solution.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
website/public/img/use-cases/secrets-management/dynamic_secrets@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
website/public/img/use-cases/secrets-management/secrets-mgmt-challenge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
website/public/img/use-cases/secrets-management/secrets-mgmt-solution.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

30
website/tsconfig.json Normal file
View File

@@ -0,0 +1,30 @@
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "es5"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}