mirror of
https://github.com/hashicorp/vault.git
synced 2026-01-06 09:11:10 +01:00
Upgrade global styles (#12167)
* website: upgrade global-styles packages * website: remove deprecated --site-max-width on community page * website: replace code-block showWindowBar with showChrome * website: replace old g-container with g-grid-container * website: backfill missing type styles * website: revert change to heading semantics * website: fix mismatched border colour * website: fix spacing issue * website: revert accidental replacement * website: clarify debt intention with comment * website: fix missing search styles, remove cruft * website: hide alert-banner on mobile * website: bump to latest patched dependencies
This commit is contained in:
Zachary Shilton
GitHub
parent
dcb93f1ec3
commit
56ae8bfc15
@ -3,7 +3,7 @@ import Link from 'next/link'
|
||||
export default function Footer({ openConsentManager }) {
|
||||
return (
|
||||
<footer className="g-footer">
|
||||
<div className="g-container">
|
||||
<div className="g-grid-container">
|
||||
<div className="left">
|
||||
<Link href="/docs">
|
||||
<a>Docs</a>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
||||
& .g-container {
|
||||
& .g-grid-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -14,12 +14,12 @@ export default function HcpCalloutSection({
|
||||
<div className={styles.hcpCalloutSection} id={id}>
|
||||
{header ? (
|
||||
<div className={styles.header}>
|
||||
<h2>{header}</h2>
|
||||
<h2 className="g-type-display-2">{header}</h2>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={styles.content}>
|
||||
<div className={styles.info}>
|
||||
<h1>{title}</h1>
|
||||
<h1 className="g-type-display-1">{title}</h1>
|
||||
<span className={styles.chin}>{chin}</span>
|
||||
<p className={styles.description}>{description}</p>
|
||||
<div className={styles.links}>
|
||||
|
||||
@ -47,7 +47,7 @@ export default function HomepageHero({
|
||||
/>
|
||||
{/* A hack to inject a third link styled in tertiary style
|
||||
this is very much a non-ideal way to handle this. */}
|
||||
<div className={classNames('g-container', styles.thirdLinkWrapper)}>
|
||||
<div className={classNames('g-grid-container', styles.thirdLinkWrapper)}>
|
||||
{buttons[2] && (
|
||||
<div className="third-link">
|
||||
<Button
|
||||
|
||||
@ -4,7 +4,7 @@ export default function UseCaseCtaSection() {
|
||||
return (
|
||||
<section className="g-section-block g-cta-section">
|
||||
<div>
|
||||
<h2>Ready to get started?</h2>
|
||||
<h2 className='g-type-display-2'>Ready to get started?</h2>
|
||||
<Button
|
||||
url="/downloads"
|
||||
title="Download"
|
||||
|
||||
1234
website/package-lock.json
generated
1234
website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,28 +4,28 @@
|
||||
"version": "1.0.0",
|
||||
"author": "HashiCorp",
|
||||
"dependencies": {
|
||||
"@hashicorp/mktg-global-styles": "^3.1.0",
|
||||
"@hashicorp/mktg-global-styles": "4.0.0",
|
||||
"@hashicorp/mktg-logos": "^1.2.0",
|
||||
"@hashicorp/platform-code-highlighting": "^0.1.1",
|
||||
"@hashicorp/platform-markdown-utils": "^0.1.3",
|
||||
"@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
|
||||
"@hashicorp/platform-util": "^0.1.0",
|
||||
"@hashicorp/react-alert-banner": "^6.1.2",
|
||||
"@hashicorp/react-alert-banner": "6.2.0",
|
||||
"@hashicorp/react-button": "^5.2.1",
|
||||
"@hashicorp/react-case-study-slider": "^6.1.2",
|
||||
"@hashicorp/react-code-block": "^4.1.4",
|
||||
"@hashicorp/react-consent-manager": "6.0.0",
|
||||
"@hashicorp/react-content": "^7.0.2",
|
||||
"@hashicorp/react-docs-page": "^13.5.1",
|
||||
"@hashicorp/react-content": "8.0.1",
|
||||
"@hashicorp/react-docs-page": "14.0.1",
|
||||
"@hashicorp/react-featured-slider": "^4.1.2",
|
||||
"@hashicorp/react-hashi-stack-menu": "^2.0.6",
|
||||
"@hashicorp/react-head": "^3.1.1",
|
||||
"@hashicorp/react-hero": "^7.3.2",
|
||||
"@hashicorp/react-hero": "7.3.3",
|
||||
"@hashicorp/react-image": "^4.0.2",
|
||||
"@hashicorp/react-inline-svg": "^6.0.2",
|
||||
"@hashicorp/react-logo-grid": "^4.1.2",
|
||||
"@hashicorp/react-markdown-page": "^1.3.1",
|
||||
"@hashicorp/react-product-downloads-page": "^2.3.1",
|
||||
"@hashicorp/react-markdown-page": "1.4.2",
|
||||
"@hashicorp/react-product-downloads-page": "2.4.0",
|
||||
"@hashicorp/react-section-header": "^5.0.3",
|
||||
"@hashicorp/react-subnav": "^8.4.0",
|
||||
"@hashicorp/react-tabs": "^6.0.1",
|
||||
|
||||
@ -33,29 +33,33 @@ export default function App({ Component, pageProps }) {
|
||||
image="https://www.vaultproject.io/img/og-image.png"
|
||||
icon={[
|
||||
{
|
||||
href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=16&w=16',
|
||||
href:
|
||||
'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=16&w=16',
|
||||
type: 'image/png',
|
||||
sizes: '16x16',
|
||||
},
|
||||
{
|
||||
href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=32&w=32',
|
||||
href:
|
||||
'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=32&w=32',
|
||||
type: 'image/png',
|
||||
sizes: '32x32',
|
||||
},
|
||||
{
|
||||
href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=96&w=96',
|
||||
href:
|
||||
'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=96&w=96',
|
||||
type: 'image/png',
|
||||
sizes: '96x96',
|
||||
},
|
||||
{
|
||||
href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=192&w=192',
|
||||
href:
|
||||
'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=192&w=192',
|
||||
type: 'image/png',
|
||||
sizes: '192x192',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{ALERT_BANNER_ACTIVE && (
|
||||
<AlertBanner {...alertBannerData} product="vault" />
|
||||
<AlertBanner {...alertBannerData} product="vault" hideOnMobile />
|
||||
)}
|
||||
<HashiStackMenu />
|
||||
<ProductSubnav />
|
||||
|
||||
@ -2,10 +2,11 @@ import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list/ind
|
||||
import SectionHeader from '@hashicorp/react-section-header'
|
||||
import Head from 'next/head'
|
||||
import HashiHead from '@hashicorp/react-head'
|
||||
import s from './style.module.css'
|
||||
|
||||
function CommunityPage() {
|
||||
return (
|
||||
<main id="community">
|
||||
<main className={s.root}>
|
||||
<HashiHead is={Head} title="Community | Vault by HashiCorp" />
|
||||
<SectionHeader
|
||||
headline="Community"
|
||||
@ -17,19 +18,23 @@ function CommunityPage() {
|
||||
data={[
|
||||
{
|
||||
header: 'Discussion List',
|
||||
body: '<a href="https://discuss.hashicorp.com/c/vault">Vault Community Forum</a>',
|
||||
body:
|
||||
'<a href="https://discuss.hashicorp.com/c/vault">Vault Community Forum</a>',
|
||||
},
|
||||
{
|
||||
header: 'Bug Tracker',
|
||||
body: '<a href="https://github.com/hashicorp/vault/issues">Issue tracker on GitHub</a> for reporting bugs. Use IRC or the mailing list for general help.',
|
||||
body:
|
||||
'<a href="https://github.com/hashicorp/vault/issues">Issue tracker on GitHub</a> for reporting bugs. Use IRC or the mailing list for general help.',
|
||||
},
|
||||
{
|
||||
header: 'Training',
|
||||
body: '<a href="https://www.hashicorp.com/training">Paid HashiCorp</a> training courses are available in a city near you. Private training courses are also available.',
|
||||
body:
|
||||
'<a href="https://www.hashicorp.com/training">Paid HashiCorp</a> training courses are available in a city near you. Private training courses are also available.',
|
||||
},
|
||||
{
|
||||
header: 'Certification',
|
||||
body: 'Learn more about our <a href="https://www.hashicorp.com/certification/">Cloud Engineer Certification program</a> and <a href="https://www.hashicorp.com/certification/vault-associate/">HashiCorp's Security Automation Certification</a> exams.',
|
||||
body:
|
||||
'Learn more about our <a href="https://www.hashicorp.com/certification/">Cloud Engineer Certification program</a> and <a href="https://www.hashicorp.com/certification/vault-associate/">HashiCorp's Security Automation Certification</a> exams.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
#community {
|
||||
max-width: var(--site-max-width);
|
||||
margin: 72px auto;
|
||||
|
||||
& .g-section-header {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
9
website/pages/community/style.module.css
Normal file
9
website/pages/community/style.module.css
Normal file
@ -0,0 +1,9 @@
|
||||
.root {
|
||||
composes: g-grid-container from global;
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
|
||||
& :global(.g-section-header) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
.root {
|
||||
composes: .g-container from global;
|
||||
composes: .g-grid-container from global;
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.merchandisingSlot {
|
||||
width: 100%;
|
||||
border: 1px solid var(--gray-6);
|
||||
border: 1px solid var(--gray-5);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
"content": "Use policy to codify, protect, and automate access to secrets."
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": "true" },
|
||||
"options": { "showChrome": "true" },
|
||||
"language": "shell-session",
|
||||
"code": "$ curl \n --header \"X-Vault-Token: ...\" \n --request POST \n --data @payload.json \n https://127.0.0.1:8200/v1/secret/config"
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ export default function Homepage({ content }) {
|
||||
|
||||
{/* Text Section */}
|
||||
|
||||
<section className="g-container remove-bottom-padding">
|
||||
<section className="g-grid-container remove-bottom-padding">
|
||||
<SectionHeader
|
||||
headline="Secure dynamic infrastructure across clouds and environments"
|
||||
description="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."
|
||||
@ -59,7 +59,7 @@ export default function Homepage({ content }) {
|
||||
|
||||
{/* Before-After Diagram */}
|
||||
|
||||
<section className="g-container before-after">
|
||||
<section className="g-grid-container before-after">
|
||||
<BeforeAfterDiagram
|
||||
{...content.beforeAfterDiagram}
|
||||
beforeImage={{
|
||||
@ -78,7 +78,7 @@ export default function Homepage({ content }) {
|
||||
{/* Use cases */}
|
||||
|
||||
<section>
|
||||
<div className="g-container">
|
||||
<div className="g-grid-container">
|
||||
<UseCases
|
||||
product="vault"
|
||||
items={[
|
||||
@ -155,7 +155,7 @@ export default function Homepage({ content }) {
|
||||
<TextSplits textSplits={content.principles} />
|
||||
</section>
|
||||
|
||||
<section className="g-container">
|
||||
<section className="g-grid-container">
|
||||
<SectionHeader
|
||||
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."
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
& .g-container.remove-bottom-padding {
|
||||
& .g-grid-container.remove-bottom-padding {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .g-container.before-after {
|
||||
& .g-grid-container.before-after {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export default function NotFound() {
|
||||
|
||||
return (
|
||||
<main id="p-404">
|
||||
<h1>Page Not Found</h1>
|
||||
<h1 className="g-type-display-1">Page Not Found</h1>
|
||||
<p>
|
||||
We‘re sorry but we can‘t find the page you‘re looking
|
||||
for.
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
@media print {
|
||||
/* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
|
||||
.g-container {
|
||||
.g-grid-container {
|
||||
/*
|
||||
* A “measure” is the number of characters in a line of text.
|
||||
* Long lines fatique readers as they find the start of a new line of text.
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
/* Global Component Styles */
|
||||
@import '~@hashicorp/mktg-global-styles/style.css';
|
||||
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/layout.css';
|
||||
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
|
||||
|
||||
:root {
|
||||
--highlight-color: var(--brand-link);
|
||||
@ -11,11 +9,10 @@
|
||||
@import '~@hashicorp/react-toggle/style.css';
|
||||
@import '~@hashicorp/react-alert-banner/style.css';
|
||||
@import '~@hashicorp/react-button/styles/index.css';
|
||||
@import '~@hashicorp/react-content/style.css';
|
||||
@import '~@hashicorp/react-docs-page/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-tabs/style.css';
|
||||
@import '~@hashicorp/react-text-split/style.css';
|
||||
@import '~@hashicorp/react-use-cases/style.css';
|
||||
@ -30,7 +27,6 @@
|
||||
|
||||
/* Pages */
|
||||
@import './not-found/style.css';
|
||||
@import './community/style.css';
|
||||
@import './use-cases/style.css';
|
||||
|
||||
/* Print Styles */
|
||||
@ -53,18 +49,23 @@
|
||||
scroll-margin-top: calc(64px + 0.5em);
|
||||
}
|
||||
|
||||
/* Layout Styles */
|
||||
/*
|
||||
* Layout Styles
|
||||
*
|
||||
* Note: this is possibly debt we want to replace.
|
||||
* ref: https://app.asana.com/0/1100423001970639/1200768863236365/f
|
||||
*/
|
||||
.g-section-block section {
|
||||
padding-top: 96px;
|
||||
padding-bottom: 96px;
|
||||
|
||||
& > .g-section-header + *,
|
||||
& > .g-container > .g-section-header + * {
|
||||
& > .g-grid-container > .g-section-header + * {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
&:not(.no-section-spacing) > * + *,
|
||||
& > .g-container > * + * {
|
||||
&:not(.g-featured-slider-section) > .g-grid-container > * + * {
|
||||
margin-top: 96px;
|
||||
}
|
||||
}
|
||||
@ -79,7 +80,7 @@
|
||||
}
|
||||
|
||||
.g-section-block section > * + .button-container,
|
||||
.g-section-block section > .g-container > * + .button-container {
|
||||
.g-section-block section > .g-grid-container > * + .button-container {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@ -91,12 +92,3 @@
|
||||
background: var(--gray-1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/** DEBT: short term patch until the branding changes roll out. Remove this with this PR — https://github.com/hashicorp/vault/pull/11118 **/
|
||||
.g-content {
|
||||
--brand-text: var(--vagrant) !important;
|
||||
}
|
||||
.g-docs-sidenav {
|
||||
--brand: var(--vagrant) !important;
|
||||
--brand-text: var(--vagrant) !important;
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export default function DataEncryptionUseCase({ content }) {
|
||||
return (
|
||||
<main id="use-cases" className="g-section-block page-wrap">
|
||||
{/* Header / Buttons */}
|
||||
<section className="g-container">
|
||||
<section className="g-grid-container">
|
||||
<SectionHeader
|
||||
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"
|
||||
@ -45,7 +45,7 @@ export default function DataEncryptionUseCase({ content }) {
|
||||
|
||||
{/* Before/After Diagram */}
|
||||
<section>
|
||||
<div className="g-container">
|
||||
<div className="g-grid-container">
|
||||
<BeforeAfterDiagram {...content.beforeAfterDiagram} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
"content": "Create and manage policies that authorize access control throughout your infrastructure and organization."
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": true },
|
||||
"options": { "showChrome": true },
|
||||
"language": "hcl",
|
||||
"code": "# User template (user-tmpl.hcl)\n# Grant permissions on user specific path\npath \"user-kv/data/{{identity.entity.name}}/*\" {\n capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]\n}\n\n# For Web UI usage\npath \"user-kv/metadata\" {\n capabilities = [\"list\"]\n}\n\n# Group template (group-tmpl.hcl)\n# Grant permissions on the group specific path\n# The region is specified in the group metadata\npath \"group-kv/data/education/{{identity.groups.names.education.metadata.region}}/*\" {\n capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]\n}\n\n# Group member can update the group information\npath \"identity/group/id/{{identity.groups.names.education.id}}\" {\n capabilities = [ \"update\", \"read\" ]\n}\n\n# For Web UI usage\npath \"group-kv/metadata\" {\n capabilities = [\"list\"]\n}\n\npath \"identity/group/id\" {\n capabilities = [ \"list\" ]\n}\n"
|
||||
}
|
||||
@ -107,7 +107,7 @@
|
||||
"content": "Enforce MFA workflows when accessing a secret or a secret path."
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": true },
|
||||
"options": { "showChrome": true },
|
||||
"language": "shell-session",
|
||||
"code": "$ curl --header \"X-Vault-Token: ...\" \\\n--header \"X-Vault-MFA:my_totp:695452\" \\\nhttp://127.0.0.1:8200/v1/secret/foo"
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export default function DataEncryptionUseCase({ content }) {
|
||||
return (
|
||||
<main id="use-cases" className="g-section-block page-wrap">
|
||||
{/* Header / Buttons */}
|
||||
<section className="g-container">
|
||||
<section className="g-grid-container">
|
||||
<SectionHeader
|
||||
headline="Leverage Trusted Identities in Low Trust Networks"
|
||||
description="Authenticate and access different clouds, systems, and endpoints using trusted identities"
|
||||
@ -44,7 +44,7 @@ export default function DataEncryptionUseCase({ content }) {
|
||||
|
||||
{/* Before/After Diagram */}
|
||||
<section>
|
||||
<div className="g-container">
|
||||
<div className="g-grid-container">
|
||||
<BeforeAfterDiagram {...content.beforeAfterDiagram} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"textSide": "right"
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": true },
|
||||
"options": { "showChrome": true },
|
||||
"language": "shell-session",
|
||||
"code": "$ cat vault.config\nstorage \"consul\" {\n address = \"127.0.0.1:8500\"\n path = \"vault\"\n}\nlistener \"tcp\" {\n address = \"127.0.0.1:8200\"\n}\ntelemetry {\n statsite_address = \"127.0.0.1:8125\"\n disable_hostname = true\n}\n"
|
||||
}
|
||||
@ -89,7 +89,7 @@
|
||||
"textSide": "right"
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": true },
|
||||
"options": { "showChrome": true },
|
||||
"language": "shell-session",
|
||||
"code": "$ cat audit.log | jq {\n \"time\": \"2018-08-27T13:17:11.609621226Z\",\n \"type\": \"response\",\n \"auth\": {\n \"client_token\": \"hmac-sha256:5c40f1e051ea75b83230a5bf16574090f697dfa22a78e437f12c1c9d226f45a5\",\n \"accessor\": \"hmac-sha256:f254a2d442f172f0b761c9fd028f599ad91861ed16ac3a1e8d96771fd920e862\",\n \"display_name\": \"token\",\n \"metadata\": null,\n \"entity_id\": \"\"\n }\n}\n"
|
||||
}
|
||||
@ -100,7 +100,7 @@
|
||||
"content": "Manage authorization and create time-based tokens for automatic revocation or manual revocation."
|
||||
},
|
||||
"codeBlock": {
|
||||
"options": { "showWindowBar": true },
|
||||
"options": { "showChrome": true },
|
||||
"language": "shell-session",
|
||||
"code": "$ vault read database/creds/readonly\nKey Value\n--- -----\nlease_id database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nlease_duration 1h0m0s\nlease_renewable true\npassword A1a-w2xv2zsq4r5ru940\nusername v-token-readonly-48rt0t36sxp4wy81x8x1-1515627434\n[...]\n$ vault renew database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nKey Value\n--- -----\nlease_id database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nlease_duration 1h0m0s\nlease_renewable true\n$ vault lease revoke database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\n"
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export async function getStaticProps() {
|
||||
export default function SecretsManagmentUseCase({ content }) {
|
||||
return (
|
||||
<main id="use-cases" className="g-section-block page-wrap">
|
||||
<section className="g-container">
|
||||
<section className="g-grid-container">
|
||||
{/* Header / Buttons */}
|
||||
|
||||
<SectionHeader
|
||||
@ -47,7 +47,7 @@ export default function SecretsManagmentUseCase({ content }) {
|
||||
{/* Before/After Diagram */}
|
||||
|
||||
<section>
|
||||
<div className="g-container">
|
||||
<div className="g-grid-container">
|
||||
<BeforeAfterDiagram {...content.beforeAfterDiagram} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user