diff --git a/.circleci/config.yml b/.circleci/config.yml index 9f61213127..91e75376ca 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -596,50 +596,6 @@ jobs: NOMAD_VERSION: main steps: *NOMAD_INTEGRATION_TEST_STEPS - build-website-docker-image: - docker: - - image: docker.mirror.hashicorp.services/circleci/buildpack-deps - shell: /usr/bin/env bash -euo pipefail -c - steps: - - checkout - - setup_remote_docker - - run: - name: Build Docker Image if Necessary - command: | - # Ignore job if running an enterprise build - IMAGE_TAG=$(cat website/Dockerfile website/package-lock.json | sha256sum | awk '{print $1;}') - echo "Using $IMAGE_TAG" - if [ "$CIRCLE_REPOSITORY_URL" != "git@github.com:hashicorp/consul.git" ]; then - echo "Not Consul OSS Repo, not building website docker image" - elif curl https://hub.docker.com/v2/repositories/hashicorp/consul-website/tags/$IMAGE_TAG -fsL > /dev/null; then - echo "Dependencies have not changed, not building a new website docker image." - else - cd website/ - docker build -t hashicorp/consul-website:$IMAGE_TAG . - docker tag hashicorp/consul-website:$IMAGE_TAG hashicorp/consul-website:latest - docker login -u $WEBSITE_DOCKER_USER -p $WEBSITE_DOCKER_PASS - docker push hashicorp/consul-website - fi - - run: *notify-slack-failure - - algolia-index: - docker: - - image: docker.mirror.hashicorp.services/node:14 - steps: - - checkout - - run: - name: Push content to Algolia Index - command: | - if [ "$CIRCLE_REPOSITORY_URL" != "git@github.com:hashicorp/consul.git" ]; then - echo "Not Consul OSS Repo, not indexing Algolia" - exit 0 - fi - cd website/ - npm install -g npm@latest - npm install - node scripts/index_search_content.js - - run: *notify-slack-failure - # build frontend yarn cache frontend-cache: docker: @@ -1155,20 +1111,6 @@ workflows: requires: - dev-build - website: - unless: << pipeline.parameters.trigger-load-test >> - jobs: - - build-website-docker-image: - context: website-docker-image - filters: - branches: - only: - - main - - algolia-index: - filters: - branches: - only: - - stable-website frontend: unless: << pipeline.parameters.trigger-load-test >> jobs: diff --git a/website/components/basic-hero/img/right-arrow-icon.svg b/website/components/basic-hero/img/right-arrow-icon.svg deleted file mode 100644 index 01a621cdce..0000000000 --- a/website/components/basic-hero/img/right-arrow-icon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/website/components/basic-hero/index.jsx b/website/components/basic-hero/index.jsx deleted file mode 100644 index a33bcb0c8c..0000000000 --- a/website/components/basic-hero/index.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import Button from '@hashicorp/react-button' - -export default function BasicHero({ - heading, - content, - links, - brand, - backgroundImage, -}) { - return ( -
-
-

{heading}

- {content &&

{content}

} - {links && links.length > 0 && ( - <> -
- {links.slice(0, 2).map((link, stableIdx) => { - const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary' - return ( -
- {links[2] && ( -
-
- )} - - )} -
-
- ) -} diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css deleted file mode 100644 index 257d6680f4..0000000000 --- a/website/components/basic-hero/style.css +++ /dev/null @@ -1,76 +0,0 @@ -.g-basic-hero { - padding: 88px 0; - - & .g-type-display-1 { - color: var(--gray-1); - text-align: center; - margin-left: auto; - margin-right: auto; - margin-top: 0; - max-width: 14em; - } - - & .g-type-body-large { - color: var(--gray-2); - margin: 0 auto 0 auto; - text-align: center; - max-width: 40em; - } - - & .links { - display: flex; - flex-wrap: wrap; - justify-content: center; - - /* - * Margins here compensate for extra 8px margin on buttons - * which are needed to center and space properly regardless of whether - * buttons are wrapping to multiple lines or not. - */ - margin-top: calc(32px - 8px); - margin-bottom: -8px; - @media (--large) { - margin-top: calc(40px - 8px); - } - - & .g-btn { - /* - * This ensures 16px between buttons at all times, while maintaining proper centering - * when buttons wrap to multiple lines. - * There will be an extra 8px space on all sides of the button group. - * The top and bottom are accounted for by the -8px adjustment on `.action` margins. - * The left and right excess is left as is - it's needed for proper centering when wrapping. - */ - margin: 8px; - } - } - - & .third-link { - display: flex; - justify-content: center; - margin-top: 32px; - & a { - color: var(--gray-2); - } - & svg * { - stroke: var(--gray-2) !important; - } - } - - &.has-background { - background-repeat: no-repeat; - background-color: var(--gray-6); - background-image: url(/img/hero/pattern-desktop.svg); - width: 100%; - background-size: cover; - background-position: center; - - @media (max-width: 800px) { - background-image: url(/img/hero/pattern-mobile.svg); - } - - & .g-btn { - background: var(--gray-6); - } - } -} diff --git a/website/components/block-list/index.tsx b/website/components/block-list/index.tsx deleted file mode 100644 index 07e10fffb6..0000000000 --- a/website/components/block-list/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import s from './style.module.css' - -interface Block { - title: string - description: string - image: string -} - -interface BlockListProps { - blocks: Block[] -} - -export default function BlockList({ blocks }: BlockListProps) { - return ( -
- {blocks.map(({ image, title, description }) => ( -
-
- {title} -
-
-

{title}

-

{description}

-
-
- ))} -
- ) -} diff --git a/website/components/block-list/style.module.css b/website/components/block-list/style.module.css deleted file mode 100644 index d6f2938262..0000000000 --- a/website/components/block-list/style.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.blocksContainer { - display: grid; - row-gap: 64px; - - & .block { - display: flex; - - & .imageContainer { - margin-right: 40px; - } - } -} - -.title { - composes: g-type-display-5 from global; - margin: 0 0 16px 0; -} - -.description { - composes: g-type-body-small from global; - margin: 0; - color: var(--gray-2); -} diff --git a/website/components/callout-blade/CalloutBlade.module.css b/website/components/callout-blade/CalloutBlade.module.css deleted file mode 100644 index cb2e50b609..0000000000 --- a/website/components/callout-blade/CalloutBlade.module.css +++ /dev/null @@ -1,131 +0,0 @@ -.calloutBlade { - padding-top: 56px; - padding-bottom: 56px; - - --shadow-level-3: 0 16px 28px rgba(37, 38, 45, 0.12); - - & .contentWrapper { - & > h3 { - margin-top: 0; - margin-bottom: 48px; - @media (max-width: 1000px) { - margin-bottom: 28px; - } - } - } -} - -.contentWrapper { - composes: g-grid-container from global; -} - -.callouts { - display: grid; - list-style: none; - margin: 0; - padding: 0; - - &.twoUp { - grid-template-columns: 1fr 1fr; - grid-gap: 32px; - - & .linkWrap { - padding: 64px 32px; - display: flex; - flex-direction: row; - background: var(--gray-6); - &:hover { - background: var(--gray-5); - box-shadow: var(--shadow-level-3); - } - - & .icon { - margin-right: 48px; - } - @media (max-width: 1200px) { - padding: 48px 32px; - flex-direction: column; - & .icon { - margin-right: 0; - } - } - } - @media (max-width: 900px) { - grid-template-columns: 1fr; - } - } - - &.threeUp { - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 32px; - - & .linkWrap { - padding: 64px 32px; - border: 1px solid var(--gray-5); - border-radius: 2px; - &:hover { - background: var(--gray-6); - box-shadow: var(--shadow-level-3); - border-color: var(--gray-6); - } - } - - @media (max-width: 1220px) { - grid-template-columns: 1fr; - & .linkWrap { - padding: 48px 32px; - } - } - } - - & .linkWrap { - color: inherit; - height: 100%; - transition: all 0.3s ease; - display: flex; - flex-direction: column; - - & .icon { - margin-bottom: 16px; - & svg { - height: 50px; - } - } - - & .flexWrapper { - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: space-between; - - & .infoWrapper { - display: flex; - flex-direction: column; - - & > h5 { - margin-top: 0; - margin-bottom: 16px; - } - - & > p { - color: var(--gray-3); - margin-top: 0; - margin-bottom: 48px; - } - } - - & .linkWrapper { - & .eyebrow { - margin-bottom: 8px; - } - & :global(.g-btn) { - text-align: left; - } - } - } - } -} - -.eyebrow { - composes: g-type-label from global; -} diff --git a/website/components/callout-blade/index.jsx b/website/components/callout-blade/index.jsx deleted file mode 100644 index e86ad03b9e..0000000000 --- a/website/components/callout-blade/index.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import classNames from 'classnames' -import styles from './CalloutBlade.module.css' -import Button from '@hashicorp/react-button' -import InlineSvg from '@hashicorp/react-inline-svg' - -export default function CalloutBlade({ title, callouts }) { - return ( -
-
-

{title}

- -
-
- ) -} diff --git a/website/components/card-list/index.tsx b/website/components/card-list/index.tsx deleted file mode 100644 index 7c6a8a0687..0000000000 --- a/website/components/card-list/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import s from './style.module.css' - -interface Card { - heading: string - description: string - url: string - eyebrow: string -} - -interface CardListProps { - title: string - cards: Card[] - className?: string -} - -export default function CardList({ title, cards, className }: CardListProps) { - return ( -
-

{title}

-
- {cards.map(({ heading, description, url, eyebrow }) => ( - -
- {eyebrow} - {heading} -

{description}

-
- consul-icon - - ))} -
-
- ) -} diff --git a/website/components/card-list/style.module.css b/website/components/card-list/style.module.css deleted file mode 100644 index 37defd3633..0000000000 --- a/website/components/card-list/style.module.css +++ /dev/null @@ -1,61 +0,0 @@ -.cardsWrapper { - display: grid; - column-gap: 40px; - row-gap: 40px; - grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); - - & .card { - border: 1px solid var(--gray-5); - box-shadow: 0 2px 3px rgba(37, 41, 55, 0.08); - border-radius: 1px; - transition: box-shadow 0.25s, transform 0.25s; - display: flex; - flex-direction: column; - padding: 24px 24px 28px; - justify-content: space-between; - - &:hover { - box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12); - transform: translateY(-4px); - } - - & .cardContent { - display: flex; - flex-direction: column; - } - - & .icon { - width: 12px; - } - } -} - -.title { - composes: g-type-display-3 from global; - margin-top: 0; - margin-bottom: 46px; -} - -.eyebrow { - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; - composes: g-type-label from global; - color: var(--gray-2); - margin-bottom: 14px; -} - -.heading { - composes: g-type-display-6 from global; - margin-top: 0; - margin-bottom: 8px; - color: var(--black); -} - -.description { - composes: g-type-body from global; - color: var(--gray-1); - margin-top: 0; - margin-bottom: 17px; -} diff --git a/website/components/case-study-carousel/case-study-slide.jsx b/website/components/case-study-carousel/case-study-slide.jsx deleted file mode 100644 index 315a8504d8..0000000000 --- a/website/components/case-study-carousel/case-study-slide.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import InlineSvg from '@hashicorp/react-inline-svg' -import Image from '@hashicorp/react-image' -import Button from '@hashicorp/react-button' -import QuoteMarksIcon from './img/quote.svg?include' - -export default function CaseStudySlide({ - caseStudy: { person, quote, company, caseStudyURL }, -}) { - return ( -
- -

{quote}

-
-
- {`${person.firstName} -
-
- {person.firstName} {person.lastName} -
-

- {person.title}, {company.name} -

-
-
- {company.name} -
-
- ) -} diff --git a/website/components/case-study-carousel/img/active-control-dot.svg b/website/components/case-study-carousel/img/active-control-dot.svg deleted file mode 100644 index ee15572f4f..0000000000 --- a/website/components/case-study-carousel/img/active-control-dot.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/website/components/case-study-carousel/img/inactive-control-dot.svg b/website/components/case-study-carousel/img/inactive-control-dot.svg deleted file mode 100644 index c28dc96807..0000000000 --- a/website/components/case-study-carousel/img/inactive-control-dot.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/website/components/case-study-carousel/img/left-arrow-control.svg b/website/components/case-study-carousel/img/left-arrow-control.svg deleted file mode 100644 index 0cec5c4b62..0000000000 --- a/website/components/case-study-carousel/img/left-arrow-control.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/case-study-carousel/img/quote.svg b/website/components/case-study-carousel/img/quote.svg deleted file mode 100644 index 4e597a2319..0000000000 --- a/website/components/case-study-carousel/img/quote.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/website/components/case-study-carousel/img/right-arrow-control.svg b/website/components/case-study-carousel/img/right-arrow-control.svg deleted file mode 100644 index eb390dd7c8..0000000000 --- a/website/components/case-study-carousel/img/right-arrow-control.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/case-study-carousel/index.jsx b/website/components/case-study-carousel/index.jsx deleted file mode 100644 index 0d2a9358ae..0000000000 --- a/website/components/case-study-carousel/index.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useState } from 'react' -import { isIE } from 'react-device-detect' - -import Carousel from 'nuka-carousel' -import CaseSlide from './case-study-slide' -import Image from '@hashicorp/react-image' -import InlineSvg from '@hashicorp/react-inline-svg' -import ActiveControlDot from './img/active-control-dot.svg?include' -import InactiveControlDot from './img/inactive-control-dot.svg?include' -import LeftArrow from './img/left-arrow-control.svg?include' -import RightArrow from './img/right-arrow-control.svg?include' - -export default function CaseStudyCarousel({ - caseStudies, - title, - logoSection = { grayBackground: false, featuredLogos: [] }, -}) { - const [slideIndex, setSlideIndex] = useState(0) - const { grayBackground, featuredLogos } = logoSection - - const caseStudySlides = caseStudies.map((caseStudy) => ( - - )) - const logoRows = featuredLogos && Math.ceil(featuredLogos.length / 3) - - function renderControls() { - return ( -
- {caseStudies.map((caseStudy, stableIdx) => { - return ( - - ) - })} -
- ) - } - - function sideControls(icon, direction) { - return ( - - ) - } - - return ( -
-

{title}

- {!isIE ? ( - renderControls()} - renderCenterLeftControls={({ previousSlide }) => { - return sideControls(LeftArrow, previousSlide) - }} - renderCenterRightControls={({ nextSlide }) => { - return sideControls(RightArrow, nextSlide) - }} - afterSlide={(slideIndex) => setSlideIndex(slideIndex)} - > - {caseStudySlides} - - ) : null} -
- {featuredLogos && featuredLogos.length > 0 && ( -
- {featuredLogos.map((featuredLogo) => ( - {featuredLogo.companyName} - ))} -
- )} -
-
- ) -} diff --git a/website/components/case-study-carousel/style.css b/website/components/case-study-carousel/style.css deleted file mode 100644 index e7adad1307..0000000000 --- a/website/components/case-study-carousel/style.css +++ /dev/null @@ -1,283 +0,0 @@ -.g-case-carousel { - display: flex; - flex-direction: column; - align-items: center; - position: relative; - padding-top: 0 !important; - padding-bottom: 0 !important; - - & h2 { - margin-bottom: 30px; - max-width: 600px; - text-align: center; - white-space: pre-wrap; - - @media (max-width: 800px) { - margin-top: 64px; - white-space: initial; - margin-left: 24px; - margin-right: 24px; - } - } - - &::after { - content: ''; - width: 100%; - height: var(--background-height); - position: absolute; - bottom: 0; - z-index: -1; - } - - &.has-background { - &::after { - content: ''; - background: var(--gray-6); - } - - & .background-section { - background: var(--gray-6); - padding-bottom: 64px; - } - } - - & .background-section { - width: 100%; - - & .mono-logos { - align-items: baseline; - display: flex; - justify-content: center; - max-width: 750px; - margin: 0 auto; - margin-top: 70px; - flex-wrap: wrap; - - & > img { - height: 100%; - max-height: 40px; - width: 33.33%; - padding: 0 30px; - margin: 24px 0; - - @media (max-width: 800px) { - padding: 0 20px; - max-height: 28px; - } - } - - & > picture { - max-height: 40px; - width: 33.33%; - padding: 0 30px; - margin: 24px 0; - - @media (max-width: 800px) { - padding: 0 20px; - max-height: 28px; - } - - & > img { - width: 100%; - height: auto; - display: flex; - } - } - } - } - - & .slider-control-bottomcenter { - bottom: -35px !important; - } - - /* Begin `nuka-carousel` styles */ - & .slider { - max-width: 1200px; - - &:focus { - outline: none !important; - } - - @media (max-width: 800px) { - width: calc(100% - 48px) !important; - } - - & .slider-list { - margin-bottom: 50px !important; - - @media (max-width: 800px) { - margin-bottom: 30px !important; - } - } - - & .slider-frame:focus { - outline: none !important; - } - - & .slider-slide:focus { - outline: none !important; - } - } - - /* End `nuka-carousel` styles */ - - & .side-control { - border: none; - background: none; - margin: 20px; - - &:focus { - outline: none; - } - - &:hover:not([disabled]) { - cursor: pointer; - } - - @media (max-width: 991px) { - display: none; - } - - & svg path { - stroke: var(--gray-2); - } - - &:disabled svg path { - stroke: var(--gray-4); - } - } - - & .case-slide { - display: flex; - flex-wrap: wrap; - width: 100%; - background: var(--white); - padding: 64px; - box-shadow: 0 8px 22px #dedede; - - @media (max-width: 800px) { - box-shadow: none; - border: 1px solid var(--gray-5); - padding: 48px; - } - - @media (--medium-up) { - max-width: 750px; - } - - & button { - margin-top: 24px; - } - - & .quotes { - display: flex; - margin-bottom: 24px; - } - - & h4 { - margin: 0; - - &.case { - min-height: 130px; - margin-bottom: 24px; - color: var(--gray-2); - - @media (max-width: 800px) { - min-height: 155px; - font-size: 22px; - } - - @media (max-width: 650px) { - min-height: 190px; - } - - @media (max-width: 550px) { - font-size: 20px; - } - - @media (max-width: 400px) { - font-size: 18px; - line-height: 28px; - } - } - } - - & p { - margin: 0; - } - - & a { - margin-top: 24px; - } - - & .case-content { - display: flex; - justify-content: space-between; - width: 100%; - align-items: center; - } - - & .person-container { - display: flex; - align-items: center; - - & picture { - display: flex; - } - - & .person-photo { - border-radius: 50%; - max-height: 72px; - margin-right: 24px; - } - - & .person-name { - padding-right: 16px; - - & h5 { - margin: 0; - - @media (max-width: 400px) { - font-size: 16px; - } - } - - @media (max-width: 400px) { - & p { - font-size: 15px; - } - } - } - } - - & .company-logo { - max-height: 40px; - max-width: 180px; - - @media (max-width: 800px) { - display: none; - } - } - - & .case { - color: var(--gray-4); - font-size: 24px; - line-height: 31px; /* Called for within the design, no custom property seemed appropriate */ - } - } - - & .carousel-controls { - width: 100%; - display: flex; - flex-wrap: nowrap; - justify-content: center; - - & .carousel-controls-button { - height: 20px; - background: transparent; - box-shadow: none; - cursor: pointer; - border: none; - } - } -} diff --git a/website/components/cloud-offerings-list/index.jsx b/website/components/cloud-offerings-list/index.jsx deleted file mode 100644 index 7a32e1e9ff..0000000000 --- a/website/components/cloud-offerings-list/index.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import Button from '@hashicorp/react-button' - -export default function CloudOfferingsList({ offerings }) { - return ( - - ) -} diff --git a/website/components/cloud-offerings-list/style.css b/website/components/cloud-offerings-list/style.css deleted file mode 100644 index a1b0317cd7..0000000000 --- a/website/components/cloud-offerings-list/style.css +++ /dev/null @@ -1,57 +0,0 @@ -ul.g-cloud-offerings-list { - list-style: none; - padding: 0; - margin: -16px; - display: flex; - - @media (width < 769px) { - flex-direction: column; - } - - & li { - flex-grow: 1; - margin: 16px; - background: var(--white); - border: 1px solid var(--gray-5); - border-radius: 2px; - text-align: center; - transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s; - - &:hover { - box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12); - transform: translateY(-4px); - cursor: pointer; - } - - & > a { - display: block; - padding: 32px; - color: inherit; - - & > img { - display: block; - width: 400px; - max-width: 100%; - margin-left: auto; - margin-right: auto; - margin-bottom: 14px; - } - - & > span { - color: var(--gray-3); - } - - & > h4 { - text-decoration: none; - margin-top: 8px; - margin-bottom: 0; - } - - & > p { - font-size: 19px; - margin-top: 8px; - margin-bottom: 24px; - } - } - } -} diff --git a/website/components/config-entry-reference/index.jsx b/website/components/config-entry-reference/index.jsx deleted file mode 100644 index 329092371a..0000000000 --- a/website/components/config-entry-reference/index.jsx +++ /dev/null @@ -1,200 +0,0 @@ -import Tabs, { Tab } from '@hashicorp/react-tabs' -import EnterpriseAlertBase from '@hashicorp/react-enterprise-alert' - -/** - * ConfigEntryReference renders the reference docs for a config entry. - * It creates two tabs, one for HCL docs and one for Kubernetes docs. - * - * @param {array} keys Array of objects, that describe all - * keys that can be set for this config entry. - * @param {boolean} topLevel Indicates this is a reference block that contains - * the top level keys vs a reference block that documents - * nested keys and that is separated out for clarity. - * - * The objects in the keys array support the following keys: - * - name : the name of the HCL key, e.g. Name, Listener. This case sensitive. - * - description : the description of the key. If this key has different descriptions - * for HCL vs. Kube YAML then description can be an object: - * description: { - * hcl: 'HCL description', - * yaml: 'YAML description' - * } - * - hcl : a boolean to indicate if this key should be shown in the HCL - * documentation. Defaults to true. - * - yaml : a boolean to indicate if this key should be shown in the YAML - * documentation. Defaults to true. - * - enterprise : a boolean to indicate if this key is Consul Enterprise - * only. Defaults to false. - * - children : accepts an array of keys that must be set under this key. - * The schema for these keys is the same as the top level keys. - * - type : the type and default of this key, e.g. string: "default". - */ -export default function ConfigEntryReference({ keys, topLevel = true }) { - // Kube needs to have its non-top-level keys nested under a "spec" key. - const kubeKeys = topLevel ? toKubeKeys(keys) : keys - return ( - - {renderKeys(keys, true)} - {renderKeys(kubeKeys, false)} - - ) -} - -/** - * Renders keys as HTML. It works recursively through all keys. - * @param {array} keys - * @param {boolean} isHCLTab - * @returns {JSX.Element|null} - */ -function renderKeys(keys, isHCLTab) { - if (!keys) return null - return
    {keys.map((key) => renderKey(key, isHCLTab))}
-} - -/** - * Renders a single key as its HTML element. - * - * @param {object} key - * @param {boolean} isHCLTab - * @returns {JSX.Element|null} - */ -function renderKey(key, isHCLTab) { - if (!key.name) return null - if (isHCLTab && key.hcl === false) return null - if (!isHCLTab && key.yaml === false) return null - - const keyName = isHCLTab ? key.name : toYAMLKeyName(key.name) - - let description = '' - if (key.description) { - if (typeof key.description === 'string') { - description = key.description - } else if (!isHCLTab && key.description.yaml) { - description = key.description.yaml - } else if (key.description.hcl) { - description = key.description.hcl - } - } - - const htmlDescription = description && markdownToHtml(' - ' + description) - const type = key.type && {`(${key.type})`} - const enterpriseAlert = key.enterprise && - const keyLower = keyName.toLowerCase() - - // NOTE: This code copies from https://github.com/hashicorp/remark-plugins/blob/df606efc844319a2532ec54e4cf6ff2d575108ff/plugins/anchor-links/index.js - // to ensure the styling of each bullet is correct. The two locations should be kept - // in sync. - return ( -
  • - -

    - - {keyName} - {' '} - {type} - {enterpriseAlert} - -

    - {renderKeys(key.children, isHCLTab)} -
    • - ) -} - -/** - * Constructs a keys object for Kubernetes out of HCL keys. - * Really all this entails is nesting the correct keys under the Kubernetes - * 'spec' key since in HCL there is no 'spec' key. - * - * @param {array} keys - * @returns {array} - */ -function toKubeKeys(keys) { - const topLevelKeys = keys.filter((key) => isTopLevelKubeKey(key.name)) - const keysUnderSpec = keys.filter((key) => !isTopLevelKubeKey(key.name)) - return topLevelKeys.concat([{ name: 'spec', children: keysUnderSpec }]) -} - -/** - * Converts an HCL key name to a kube yaml key name. - * - * Examples: - * - Protocol => protocol - * - MeshGateway => meshGateway - * - ACLToken => aclToken - * - HTTP => http - * - * @param {string} hclKey - * @returns {string} - */ -function toYAMLKeyName(hclKey) { - // Handle something like HTTP. - if (hclKey.toUpperCase() === hclKey) { - return hclKey.toLowerCase() - } - - let indexFirstLowercaseChar = hclKey - .split('') - .findIndex((c) => c === c.toLowerCase()) - // Special case to handle something like ACLToken => aclToken. - if (indexFirstLowercaseChar > 1) { - indexFirstLowercaseChar-- - } - - let lowercasePortion = '' - for (let i = 0; i < indexFirstLowercaseChar; i++) { - lowercasePortion += hclKey[i].toLowerCase() - } - return ( - lowercasePortion + hclKey.split('').slice(indexFirstLowercaseChar).join('') - ) -} - -/** - * Converts a markdown string to its HTML representation. - * Currently it only supports inline code blocks (e.g. `code here`) and - * links (e.g. [link text](http://link-url) because these were the most - * commonly used markdown features in the key descriptions. - * - * @param {string} markdown the input markdown - * @returns {string} - */ -function markdownToHtml(markdown) { - let html = markdown - - // Replace inline code blocks defined by backticks with . - while (html.indexOf('`') > 0) { - html = html.replace('`', '') - if (html.indexOf('`') <= 0) { - throw new Error(`'${markdown} does not have matching '\`' characters`) - } - html = html.replace('`', '') - } - - // Replace links, e.g. [link text](http://link-url), - // with link text. - return html.replace(/\[(.*?)]\((.*?)\)/g, '$1') -} - -/** - * Returns true if key is a key used at the top level of a CRD. By top level we - * mean not nested under any other key. - * - * @param {string} name name of the key - * - * @return {boolean} - */ -function isTopLevelKubeKey(name) { - return ( - name.toLowerCase() === 'metadata' || - name.toLowerCase() === 'kind' || - name.toLowerCase() === 'apiversion' - ) -} - -function EnterpriseAlert(props) { - return -} diff --git a/website/components/consul-on-kubernetes-hero/images/bg-dots.svg b/website/components/consul-on-kubernetes-hero/images/bg-dots.svg deleted file mode 100644 index 4e0be2d9a9..0000000000 --- a/website/components/consul-on-kubernetes-hero/images/bg-dots.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/website/components/consul-on-kubernetes-hero/images/bg-right.svg b/website/components/consul-on-kubernetes-hero/images/bg-right.svg deleted file mode 100644 index ed32816ae4..0000000000 --- a/website/components/consul-on-kubernetes-hero/images/bg-right.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/website/components/consul-on-kubernetes-hero/images/bg-top.svg b/website/components/consul-on-kubernetes-hero/images/bg-top.svg deleted file mode 100644 index 877abcb9f3..0000000000 --- a/website/components/consul-on-kubernetes-hero/images/bg-top.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/website/components/consul-on-kubernetes-hero/index.tsx b/website/components/consul-on-kubernetes-hero/index.tsx deleted file mode 100644 index 78c062cba9..0000000000 --- a/website/components/consul-on-kubernetes-hero/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import Button from '@hashicorp/react-button' -import ReactPlayer from 'react-player' -import s from './style.module.css' - -interface Cta { - url: string - text: string -} - -interface ConsulOnKubernetesHeroProps { - title: string - description: string - ctas: Cta[] - video: { - src: string - poster: string - } -} - -export default function ConsulOnKubernetesHero({ - title, - description, - ctas, - video, -}: ConsulOnKubernetesHeroProps) { - return ( -
    -
    -
    -

    {title}

    -

    {description}

    -
    - {ctas.map(({ text, url }, idx) => ( -
    -
    -
    - background top - background right - background bottom - background left -
    - - - - - } - /> -
    -
    -
    -
    - ) -} diff --git a/website/components/consul-on-kubernetes-hero/style.module.css b/website/components/consul-on-kubernetes-hero/style.module.css deleted file mode 100644 index 6aae256a08..0000000000 --- a/website/components/consul-on-kubernetes-hero/style.module.css +++ /dev/null @@ -1,162 +0,0 @@ -.ckHero { - background-color: var(--black); - color: var(--white); - padding-top: 130px; - padding-bottom: 142px; - overflow: hidden; - - @media (--medium) { - padding-top: 78px; - padding-bottom: 104px; - } - - @media (--small) { - padding-top: 56px; - padding-bottom: 80px; - } -} - -.contentWrapper { - --columns: 1; - - column-gap: 32px; - composes: g-grid-container from global; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - row-gap: 48px; - - @media (--medium-up) { - --columns: 12; - } - - & .headline { - text-align: center; - grid-column: 1 / -1; - margin: 0 auto; - - @media (--large) { - margin: 0; - text-align: left; - grid-column: 1 / 6; - } - - & .buttons { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - - @media (--large) { - justify-content: flex-start; - } - - & .button:not(:last-of-type) { - margin-right: 30px; - } - } - } - - & .media { - position: relative; - grid-column: 1 / -1; - - @media (--medium) { - grid-column: 3 / 11; - } - - @media (--large) { - grid-column: 7 / -1; - } - - & > div { - border: 1px var(--gray-3) solid; - border-radius: 4px; - } - - & .video { - background-color: var(--black); - position: relative; - padding-top: 56.25%; - width: 100%; - - & .player { - position: absolute; - top: 0; - left: 0; - - & div { - border-radius: 4px; - } - } - - & iframe { - border-radius: 4px; - } - - & > * { - bottom: 0; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - } - } -} - -.title { - composes: g-type-display-1 from global; - margin: 0; -} - -.description { - composes: g-type-body-large from global; - margin-top: 16px; - margin-bottom: 40px; - color: var(--gray-5); - max-width: 500px; - - @media (--large) { - max-width: 385px; - } -} - -.backgroundImage { - height: auto; - position: absolute; -} - -.bgTop { - composes: backgroundImage; - left: auto; - right: 0; - top: -130px; - display: none; - width: 75%; - - @media (--large) { - display: block; - } -} - -.bgRight { - composes: backgroundImage; - top: 20%; - left: 99.5%; -} - -.bgBottom { - composes: backgroundImage; - width: auto; - top: 80%; - left: 8%; -} - -.bgLeft { - composes: backgroundImage; - width: auto; - top: 86px; - left: -77px; -} diff --git a/website/components/cta-hero/img/consul-stack.svg b/website/components/cta-hero/img/consul-stack.svg deleted file mode 100644 index 34335e7acc..0000000000 --- a/website/components/cta-hero/img/consul-stack.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - Consul Stack - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/website/components/cta-hero/index.jsx b/website/components/cta-hero/index.jsx deleted file mode 100644 index 9043245e93..0000000000 --- a/website/components/cta-hero/index.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import TextSplit from '@hashicorp/react-text-split' -import Button from '@hashicorp/react-button' -import s from './style.module.css' -import InlineSvg from '@hashicorp/react-inline-svg' -import ConsulStack from './img/consul-stack.svg?include' - -export default function CtaHero({ title, description, links, cta }) { - return ( -
    - - - -
    - ) -} - -function CTA({ title, description, link }) { - return ( -
    - -

    {title}

    -

    {description}

    -
    - ) -} diff --git a/website/components/cta-hero/style.module.css b/website/components/cta-hero/style.module.css deleted file mode 100644 index 3bad47d84a..0000000000 --- a/website/components/cta-hero/style.module.css +++ /dev/null @@ -1,123 +0,0 @@ -.ctaHero { - & :global(.g-text-split) :global(.g-grid-container) { - @media (width < 1120px) { - flex-direction: column-reverse; - } - - & > div { - @media (768px < width < 1120px) { - width: 40em; - } - - &:last-child { - @media (width < 1120px) { - margin-bottom: 64px; - text-align: center; - } - - & p { - @media (width < 1120px) { - margin: 16px auto; - } - } - } - } - - /** - * HACK: - * Overrides the H2 with styling from - * our global g-type-display-1 class. - * - * This was because there's no way to - * override the heading in - * with the designed h1 styling. - * - * TODO: - * Address this at the component - * level or revert to just using h2 - * as is default. - */ - & h2 { - font-size: 2.125rem; - letter-spacing: -0.008em; - line-height: 1.265em; - - @media (--medium-up) { - font-size: 2.625rem; - letter-spacing: -0.01em; - line-height: 1.19em; - } - - @media (--large) { - font-size: 3.125rem; - line-height: 1.2em; - } - } - - & p { - max-width: 440px; - } - } -} - -.cta { - max-width: 525px; - border: var(--gray-5) 1px solid; - padding: 32px; - position: relative; - margin-top: 44px; - margin-left: auto; - margin-right: auto; - - @media (min-width: 1120px) { - margin-top: unset; - margin-left: unset; - margin-right: unset; - - /* Pull this down on Desktop to line the - * buttons up with the other CTA buttons */ - margin-bottom: -38px; - } - - & > h3 { - margin-top: 0; - margin-bottom: 16px; - max-width: 135px; - } - - & > p { - color: var(--gray-3); - margin-top: 28px; - margin-bottom: 40px; - } - - & .stackIcon { - display: block; - margin-left: auto; - margin-right: auto; - - & svg { - position: absolute; - max-width: 100%; - left: 209px; - top: -34px; - - @media (max-width: 600px) { - right: 20px; - left: unset; - } - - @media (max-width: 470px) { - position: unset; - display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: 18px; - } - } - } -} - -.description { - composes: .g-type-body-small from global; -} diff --git a/website/components/docs-list/index.tsx b/website/components/docs-list/index.tsx deleted file mode 100644 index 21366492b3..0000000000 --- a/website/components/docs-list/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import Button from '@hashicorp/react-button' -import s from './style.module.css' -interface Doc { - icon: { - src: string - alt: string - } - description: string - cta: { - text: string - url: string - } -} - -interface DocsListProps { - title: string - docs: Doc[] - className?: string -} - -export default function DocsList({ title, docs, className }: DocsListProps) { - return ( -
    -

    {title}

    -
    - {docs.map(({ icon, description, cta }) => ( -
    -
    - {icon.alt} -
    -

    {description}

    -
    - ))} -
    -
    - ) -} diff --git a/website/components/docs-list/style.module.css b/website/components/docs-list/style.module.css deleted file mode 100644 index 94314758fe..0000000000 --- a/website/components/docs-list/style.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.docsList { - display: grid; - row-gap: 48px; -} - -.title { - composes: g-type-display-3 from global; - margin-top: 0; - margin-bottom: 46px; -} - -.image { - border: 1px solid var(--gray-5); - box-sizing: border-box; - border-radius: 3px; - width: 64px; - height: 64px; - display: flex; - align-items: center; - justify-content: center; - - & img { - width: 40px; - height: 40px; - } -} - -.description { - composes: g-body from global; - margin-top: 12px; - margin-bottom: 24px; -} diff --git a/website/components/downloads-props/index.jsx b/website/components/downloads-props/index.jsx deleted file mode 100644 index 047db15a09..0000000000 --- a/website/components/downloads-props/index.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import Button from '@hashicorp/react-button' -import s from '../../pages/downloads/style.module.css' - -export default function DownloadsProps(preMerchandisingSlot) { - return { - getStartedDescription: - 'Follow step-by-step tutorials on the essentials of Consul.', - getStartedLinks: [ - { - label: 'CLI Quickstart', - href: 'https://learn.hashicorp.com/collections/consul/getting-started', - }, - { - label: 'HCP Consul', - href: - 'https://learn.hashicorp.com/collections/consul/cloud-get-started', - }, - { - label: 'HCS on Azure', - href: 'https://learn.hashicorp.com/collections/consul/hcs-azure', - }, - { - label: 'Kubernetes Quickstart', - href: - 'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh', - }, - { - label: 'View all Consul tutorials', - href: 'https://learn.hashicorp.com/consul', - }, - ], - tutorialLink: { - href: 'https://learn.hashicorp.com/consul', - label: 'View Tutorials at HashiCorp Learn', - }, - logo: ( - Consul - ), - merchandisingSlot: ( - <> - {preMerchandisingSlot && preMerchandisingSlot} -
    -
    -

    - Looking for a way to secure and automate application networking - without the added complexity of managing the infrastructure? -

    -
    -
    - -

    - » Download Consul Tools -

    - -
    -

    Note for ARM users:

    - -
      -
    • Use Armelv5 for all 32-bit armel systems
      • -
    • Use Armhfv6 for all armhf systems with v6+ architecture
      • -
    • Use Arm64 for all v8 64-bit architectures
      • -
    - -

    - The following commands can help determine the right version for your - system: -

    - - $ uname -m -
    - - $ readelf -a /proc/self/exe | grep -q -c Tag_ABI_VFP_args && echo - "armhf" || echo "armel" - -
    - - ), - } -} diff --git a/website/components/enterprise-comparison/consul/img/enterprise_complexity_1.svg b/website/components/enterprise-comparison/consul/img/enterprise_complexity_1.svg deleted file mode 100644 index 8cf3786cb1..0000000000 --- a/website/components/enterprise-comparison/consul/img/enterprise_complexity_1.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/website/components/enterprise-comparison/consul/img/enterprise_complexity_2.svg b/website/components/enterprise-comparison/consul/img/enterprise_complexity_2.svg deleted file mode 100644 index fc1f1d5de0..0000000000 --- a/website/components/enterprise-comparison/consul/img/enterprise_complexity_2.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/website/components/enterprise-comparison/consul/index.jsx b/website/components/enterprise-comparison/consul/index.jsx deleted file mode 100644 index 7231adbb60..0000000000 --- a/website/components/enterprise-comparison/consul/index.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import EnterpriseComparison from '../../enterprise-comparison' - -export default function ConsulEnterpriseComparison() { - return ( - - ) -} diff --git a/website/components/enterprise-comparison/img/arrow.svg b/website/components/enterprise-comparison/img/arrow.svg deleted file mode 100644 index 0e395bd6fd..0000000000 --- a/website/components/enterprise-comparison/img/arrow.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/website/components/enterprise-comparison/img/complexity-advanced.png b/website/components/enterprise-comparison/img/complexity-advanced.png deleted file mode 100644 index eeac1f3b96..0000000000 Binary files a/website/components/enterprise-comparison/img/complexity-advanced.png and /dev/null differ diff --git a/website/components/enterprise-comparison/img/complexity-basic.png b/website/components/enterprise-comparison/img/complexity-basic.png deleted file mode 100644 index 9a35d60b14..0000000000 Binary files a/website/components/enterprise-comparison/img/complexity-basic.png and /dev/null differ diff --git a/website/components/enterprise-comparison/index.jsx b/website/components/enterprise-comparison/index.jsx deleted file mode 100644 index 810f2acca7..0000000000 --- a/website/components/enterprise-comparison/index.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import Image from '@hashicorp/react-image' -import Button from '@hashicorp/react-button' -import InlineSvg from '@hashicorp/react-inline-svg' -import ArrowIcon from './img/arrow.svg?include' - -export default function EnterpriseComparison({ - title, - itemOne, - itemTwo, - brand, -}) { - return ( -
    -
    -

    {title}

    - -
    -
    - -
    {itemOne.label}
    -

    {itemOne.title}

    - -

    {itemOne.description}

    - - {itemOne.links.map((link) => ( -
    -
    - ))} -
    -
    -
    - -
    -
    - -
    {itemTwo.label}
    -

    {itemTwo.title}

    - -

    {itemTwo.description}

    - {itemTwo.links.map((link) => ( -
    -
    - ))} -
    -
    -
    -
    - ) -} diff --git a/website/components/enterprise-comparison/style.css b/website/components/enterprise-comparison/style.css deleted file mode 100644 index ac9946b44d..0000000000 --- a/website/components/enterprise-comparison/style.css +++ /dev/null @@ -1,92 +0,0 @@ -.g-enterprise-comparison { - padding-top: 128px; - padding-bottom: 128px; - background: var(--gray-6); - - & h2 { - text-align: center; - } - - @media (max-width: 800px) { - padding-top: 64px; - padding-bottom: 64px; - } - - & .content-container { - display: flex; - justify-content: space-between; - margin: 0 auto 64px auto; - - @media (max-width: 800px) { - flex-wrap: wrap; - } - & .item { - flex-basis: 50%; - justify-content: center; - text-align: center; - margin-top: 64px; - - @media (max-width: 800px) { - margin-top: 64px; - flex-basis: 100%; - } - - & .g-type-label-strong { - margin-top: 64px; - - @media (max-width: 800px) { - margin-top: 32px; - } - } - - & h4 { - white-space: pre; - margin-top: 24px; - margin-bottom: 8px; - - @media (max-width: 800px) { - margin-top: 16px; - } - } - - & picture { - display: inline-block; - } - - & img { - max-width: 160px; - max-height: 98px; - } - & p { - margin-top: 0; - margin-bottom: 24px; - - @media (max-width: 800px) { - max-width: 600px; - margin-right: auto; - margin-left: auto; - } - } - } - - & .spacer { - & .vertical-spacer { - height: 93px; - } - - & .arrow { - display: flex; - align-items: center; - } - - @media (max-width: 800px) { - display: none; - } - } - } - - & .more-features-link { - display: flex; - justify-content: center; - } -} diff --git a/website/components/features-list/feature.tsx b/website/components/features-list/feature.tsx deleted file mode 100644 index 6be7add94d..0000000000 --- a/website/components/features-list/feature.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { ReactNode } from 'react' -import Button from '@hashicorp/react-button' -import s from './style.module.css' - -interface InfoSection { - heading: string - content: ReactNode -} - -interface Cta { - text: string - url: string -} - -export interface FeatureProps { - number: number - title: string - subtitle: string - infoSections: InfoSection[] - cta: Cta - image: string -} - -export default function Feature({ - number, - title, - subtitle, - infoSections, - cta, - image, -}: FeatureProps) { - return ( -
    -
    - {title} -
    -
    -
    - {number} -
    -
    -

    {title}

    -

    {subtitle}

    -
    - {infoSections.map(({ heading, content }) => ( -
    -

    {heading}

    - {content} -
    - ))} -
    -
    -
    -
    - ) -} diff --git a/website/components/features-list/images/bottom-left-design.svg b/website/components/features-list/images/bottom-left-design.svg deleted file mode 100644 index a899b8c2a4..0000000000 --- a/website/components/features-list/images/bottom-left-design.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/website/components/features-list/images/top-right-design.svg b/website/components/features-list/images/top-right-design.svg deleted file mode 100644 index f20ec362cd..0000000000 --- a/website/components/features-list/images/top-right-design.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/website/components/features-list/index.tsx b/website/components/features-list/index.tsx deleted file mode 100644 index 8599ec739f..0000000000 --- a/website/components/features-list/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import Feature from './feature' -import s from './style.module.css' -import { FeatureProps } from './feature' - -interface FeaturesListProps { - title: string - features: Omit[] -} - -export default function FeaturesList({ title, features }: FeaturesListProps) { - return ( -
    -
    -

    {title}

    -
    - {features.map((feature, i) => ( - - ))} -
    -
    -
    - ) -} diff --git a/website/components/features-list/style.module.css b/website/components/features-list/style.module.css deleted file mode 100644 index f8479110f4..0000000000 --- a/website/components/features-list/style.module.css +++ /dev/null @@ -1,109 +0,0 @@ -.featureListContainer { - background-color: #000; - padding-top: 128px; - background-position: right top, left bottom; - background-repeat: no-repeat; - color: #fff; -} - -.contentWrapper { - composes: g-grid-container from global; -} - -.featureContainer { - display: flex; - align-items: center; - flex-wrap: wrap; - - & .featureTextContainer { - display: flex; - } - - & .imageContainer { - max-width: 490px; - margin: 0 auto; - padding-bottom: 40px; - - & img { - max-width: 100%; - } - } - - @media (--large) { - flex-wrap: nowrap; - flex-direction: row-reverse; - justify-content: space-between; - - & .featureTextContainer { - margin-right: 60px; - } - - & .featureText { - max-width: 488px; - } - - & .imageContainer { - margin: 0; - } - } -} - -.featuresContainer { - padding-top: 157px; - padding-bottom: 394px; - display: grid; - row-gap: 120px; -} - -.title { - composes: g-type-display-1 from global; - max-width: 488px; - margin: 0; -} - -.listNumber { - composes: g-type-display-5 from global; - min-width: 40px; - height: 40px; - background-color: var(--consul); - display: flex; - justify-content: center; - align-items: center; - margin-right: 64px; - margin-top: 10px; - - @media (--small) { - margin-right: 30px; - margin-top: 6px; - } -} - -.featureTitle { - composes: g-type-display-2 from global; - margin: 0; -} - -.featureSubtitle { - composes: g-type-body-large from global; - margin-top: 16px; - margin-bottom: 0; -} - -.infoTitle { - composes: g-type-display-5 from global; - margin-top: 0; - margin-bottom: 8px; -} - -.infoSection { - composes: g-type-body from global; - margin-top: 32px; - margin-bottom: 40px; - display: grid; - row-gap: 24px; - - & p, - & ul { - margin: 0; - } -} diff --git a/website/components/footer/index.jsx b/website/components/footer/index.jsx deleted file mode 100644 index 6df5112338..0000000000 --- a/website/components/footer/index.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from 'next/link' - -export default function Footer({ openConsentManager }) { - return ( - - ) -} diff --git a/website/components/footer/style.css b/website/components/footer/style.css deleted file mode 100644 index 5f04743afd..0000000000 --- a/website/components/footer/style.css +++ /dev/null @@ -1,32 +0,0 @@ -.g-footer { - padding: 25px 0 17px 0; - flex-shrink: 0; - display: flex; - - & .g-grid-container { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - & a { - color: black; - opacity: 0.5; - transition: opacity 0.25s ease; - cursor: pointer; - display: inline-block; - - &:hover { - opacity: 1; - } - } - - & .left > a { - margin-right: 20px; - margin-bottom: 8px; - - &:last-child { - margin-right: 0; - } - } -} diff --git a/website/components/hcp-callout-section/HCPCalloutSection.module.css b/website/components/hcp-callout-section/HCPCalloutSection.module.css deleted file mode 100644 index 461213ad22..0000000000 --- a/website/components/hcp-callout-section/HCPCalloutSection.module.css +++ /dev/null @@ -1,82 +0,0 @@ -.hcpCalloutSection { - composes: g-grid-container from global; - padding-top: 88px; - padding-bottom: 88px; - - & .header { - display: flex; - justify-content: center; - margin-bottom: 88px; - @media (max-width: 1120px) { - margin-bottom: 48px; - } - & h2 { - margin: 0; - text-align: center; - max-width: 450px; - } - } - - & .content { - display: flex; - flex-direction: row; - justify-content: space-between; - - @media (max-width: 1120px) { - flex-direction: column-reverse; - - & .info { - margin-top: 32px; - } - } - - & .info { - max-width: 488px; - margin-right: 32px; - - & h1 { - margin-top: 0; - margin-bottom: 8px; - } - & .chin { - color: var(--gray-3); - } - & .description { - color: var(--gray-2); - margin-top: 28px; - margin-bottom: 0; - - @media (max-width: 900px) { - margin-top: 18px; - } - } - & .links { - margin-top: 32px; - display: inline-flex; - flex-direction: column; - - & > * { - &:not(:last-child) { - margin-bottom: 24px; - } - } - } - } - - & > img { - align-self: center; - margin-right: -48px; - @media (max-width: 670px) { - max-width: 100%; - } - } - } -} - -.chin { - composes: g-type-label from global; -} - -.description { - composes: g-type-long-body from global; -} diff --git a/website/components/hcp-callout-section/index.jsx b/website/components/hcp-callout-section/index.jsx deleted file mode 100644 index 605429be3b..0000000000 --- a/website/components/hcp-callout-section/index.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import styles from './HCPCalloutSection.module.css' -import Button from '@hashicorp/react-button' - -export default function HcpCalloutSection({ - id, - header, - title, - description, - chin, - image, - links, -}) { - return ( -
    -
    -

    {header}

    -
    - -
    -
    -

    {title}

    - {chin} -

    {description}

    -
    - {links.map((link, index) => { - const variant = index === 0 ? 'primary' : 'tertiary' - return ( -
    -
    - ) - })} -
    -
    - {title} -
    -
    - ) -} diff --git a/website/components/homepage-hero/index.jsx b/website/components/homepage-hero/index.jsx deleted file mode 100644 index cadbe232c2..0000000000 --- a/website/components/homepage-hero/index.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import s from './style.module.css' -import Hero from '@hashicorp/react-hero' - -export default function HomepageHero({ - title, - description, - links, - uiVideo, - cliVideo, - alert, - image, -}) { - return ( -
    - -
    - ) -} diff --git a/website/components/homepage-hero/style.module.css b/website/components/homepage-hero/style.module.css deleted file mode 100644 index 4aa5d4a9e8..0000000000 --- a/website/components/homepage-hero/style.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.consulHero { - /* Customize the branding */ - & :global(.carousel .controls .control) { - color: var(--gray-2); - & :global(.progress-bar) { - background: var(--gray-5); - & span { - background: var(--consul); - } - } - } - & :global(.g-hero .carousel) { - & :global(.video-wrapper.is-active) { - /* Padding % modifier differs slightly from react-hero to accommodate video heights */ - padding-top: calc((100% * 0.57) + 28px); /* !important; */ - } - } -} diff --git a/website/components/io-card-container/index.tsx b/website/components/io-card-container/index.tsx deleted file mode 100644 index e71ab886e0..0000000000 --- a/website/components/io-card-container/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react' -import classNames from 'classnames' -import Button from '@hashicorp/react-button' -import IoCard, { IoCardProps } from 'components/io-card' -import s from './style.module.css' - -interface IoCardContaianerProps { - theme?: 'light' | 'dark' - heading?: string - description?: string - label?: string - cta?: { - url: string - text: string - } - cardsPerRow: 3 | 4 - cards: Array -} - -export default function IoCardContaianer({ - theme = 'light', - heading, - description, - label, - cta, - cardsPerRow = 3, - cards, -}: IoCardContaianerProps): React.ReactElement { - return ( -
    - {heading || description ? ( -
    - {heading ?

    {heading}

    : null} - {description ?

    {description}

    : null} -
    - ) : null} - {cards.length ? ( - <> - {label || cta ? ( -
    - {label ?

    {label}

    : null} - {cta ? ( -
    - ) : null} -
      - {cards.map((card, index) => { - return ( - // Index is stable - // eslint-disable-next-line react/no-array-index-key -
    • - -
      • - ) - })} -
    - - ) : null} -
    - ) -} diff --git a/website/components/io-card-container/style.module.css b/website/components/io-card-container/style.module.css deleted file mode 100644 index b7b9b08d28..0000000000 --- a/website/components/io-card-container/style.module.css +++ /dev/null @@ -1,114 +0,0 @@ -.cardContainer { - position: relative; - - & + .cardContainer { - margin-top: 64px; - - @media (--medium-up) { - margin-top: 132px; - } - } -} - -.header { - margin: 0 auto 64px; - text-align: center; - max-width: 600px; -} - -.heading { - margin: 0; - composes: g-type-display-2 from global; - - @nest .dark & { - color: var(--white); - } -} - -.description { - margin: 8px 0 0; - composes: g-type-body-large from global; - - @nest .dark & { - color: var(--gray-5); - } -} - -.subHeader { - margin: 0 0 32px; - display: flex; - align-items: center; - justify-content: space-between; - - @nest .dark & { - color: var(--gray-5); - } -} - -.label { - margin: 0; - composes: g-type-display-4 from global; -} - -.cardList { - list-style: none; - - --minCol: 250px; - --columns: var(--length); - - position: relative; - gap: 32px; - padding: 0; - - @media (--small) { - display: flex; - overflow-x: auto; - -ms-overflow-style: none; - scrollbar-width: none; - margin: 0; - padding: 6px 24px; - left: 50%; - margin-left: -50vw; - width: 100vw; - - /* This is to ensure there is overflow padding right on mobile. */ - &::after { - content: ''; - display: block; - width: 1px; - flex-shrink: 0; - } - } - - @media (--medium-up) { - display: grid; - grid-template-columns: repeat(var(--columns), minmax(var(--minCol), 1fr)); - } - - &.threeUp { - @media (--medium-up) { - --columns: 3; - --minCol: 0; - } - } - - &.fourUp { - @media (--medium-up) { - --columns: 3; - --minCol: 0; - } - - @media (--large) { - --columns: 4; - } - } - - & > li { - display: flex; - - @media (--small) { - flex-shrink: 0; - width: 250px; - } - } -} diff --git a/website/components/io-card/index.tsx b/website/components/io-card/index.tsx deleted file mode 100644 index 64baa40816..0000000000 --- a/website/components/io-card/index.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import * as React from 'react' -import Link from 'next/link' -import InlineSvg from '@hashicorp/react-inline-svg' -import classNames from 'classnames' -import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24' -import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24' -import { productLogos } from './product-logos' -import s from './style.module.css' - -export interface IoCardProps { - variant?: 'light' | 'gray' | 'dark' - products?: Array<{ - name: keyof typeof productLogos - }> - link: { - url: string - type: 'inbound' | 'outbound' - } - inset?: 'none' | 'sm' | 'md' - eyebrow?: string - heading?: string - description?: string - children?: React.ReactNode -} - -function IoCard({ - variant = 'light', - products, - link, - inset = 'md', - eyebrow, - heading, - description, - children, -}: IoCardProps): React.ReactElement { - const LinkWrapper = ({ className, children }) => - link.type === 'inbound' ? ( - - {children} - - ) : ( - - {children} - - ) - - return ( -
    - - {children ? ( - children - ) : ( - <> - {eyebrow ? {eyebrow} : null} - {heading ? {heading} : null} - {description ? {description} : null} - - )} -
    - {products && ( -
      - {products.map(({ name }, index) => { - const key = name.toLowerCase() - const version = variant === 'dark' ? 'neutral' : 'color' - return ( - // eslint-disable-next-line react/no-array-index-key -
    • - -
      • - ) - })} -
    - )} - - {link.type === 'inbound' ? ( - - ) : ( - - )} - -
    -     -
    - ) -} - -interface EyebrowProps { - children: string -} - -function Eyebrow({ children }: EyebrowProps) { - return

    {children}

    -} - -interface HeadingProps { - as?: 'h2' | 'h3' | 'h4' - children: React.ReactNode -} - -function Heading({ as: Component = 'h2', children }: HeadingProps) { - return {children} -} - -interface DescriptionProps { - children: string -} - -function Description({ children }: DescriptionProps) { - return

    {children}

    -} - -IoCard.Eyebrow = Eyebrow -IoCard.Heading = Heading -IoCard.Description = Description - -export default IoCard diff --git a/website/components/io-card/product-logos.ts b/website/components/io-card/product-logos.ts deleted file mode 100644 index 9c24e3bf47..0000000000 --- a/website/components/io-card/product-logos.ts +++ /dev/null @@ -1,34 +0,0 @@ -export const productLogos = { - boundary: { - color: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/boundary/logomark/white.svg?include'), - }, - consul: { - color: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/consul/logomark/white.svg?include'), - }, - nomad: { - color: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/nomad/logomark/white.svg?include'), - }, - packer: { - color: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/packer/logomark/white.svg?include'), - }, - terraform: { - color: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/terraform/logomark/white.svg?include'), - }, - vagrant: { - color: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/vagrant/logomark/white.svg?include'), - }, - vault: { - color: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/vault/logomark/white.svg?include'), - }, - waypoint: { - color: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'), - neutral: require('@hashicorp/mktg-logos/product/waypoint/logomark/white.svg?include'), - }, -} diff --git a/website/components/io-card/style.module.css b/website/components/io-card/style.module.css deleted file mode 100644 index 44df36cedf..0000000000 --- a/website/components/io-card/style.module.css +++ /dev/null @@ -1,148 +0,0 @@ -.card { - /* Radii */ - --token-radius: 6px; - - /* Spacing */ - --token-spacing-03: 8px; - --token-spacing-04: 16px; - --token-spacing-05: 24px; - --token-spacing-06: 32px; - - /* Elevations */ - --token-elevation-mid: 0 2px 3px rgba(101, 106, 118, 0.1), - 0 8px 16px -10px rgba(101, 106, 118, 0.2); - --token-elevation-high: 0 2px 3px rgba(101, 106, 118, 0.15), - 0 16px 16px -10px rgba(101, 106, 118, 0.2); - - /* Transition */ - --token-transition: ease-in-out 0.2s; - - display: flex; - flex-direction: column; - flex-grow: 1; - min-height: 300px; - - & a { - display: flex; - flex-direction: column; - flex-grow: 1; - border-radius: var(--token-radius); - box-shadow: 0 0 0 1px rgba(38, 53, 61, 0.1), var(--token-elevation-mid); - transition: var(--token-transition); - transition-property: background-color, box-shadow; - - &:hover { - box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15), var(--token-elevation-high); - cursor: pointer; - } - - /* Variants */ - &.dark { - background-color: var(--gray-1); - - &:hover { - background-color: var(--gray-2); - } - } - - &.gray { - background-color: #f9f9fa; - } - - &.light { - background-color: var(--white); - } - - /* Spacing */ - &.none { - padding: 0; - } - - &.sm { - padding: var(--token-spacing-05); - } - - &.md { - padding: var(--token-spacing-06); - } - } -} - -.eyebrow { - margin: 0; - composes: g-type-label-small from global; - color: var(--gray-3); - - @nest .dark & { - color: var(--gray-5); - } -} - -.heading { - margin: 0; - composes: g-type-display-5 from global; - color: var(--black); - - @nest * + & { - margin-top: var(--token-spacing-05); - } - - @nest .dark & { - color: var(--white); - } -} - -.description { - margin: 0; - composes: g-type-body-small from global; - color: var(--gray-3); - - @nest * + & { - margin-top: var(--token-spacing-03); - } - - @nest .dark & { - color: var(--gray-5); - } -} - -.footer { - margin-top: auto; - display: flex; - justify-content: space-between; - align-items: flex-end; - padding-top: 32px; -} - -.products { - display: flex; - gap: 8px; - margin: 0; - padding: 0; - - & > li { - width: 32px; - height: 32px; - display: grid; - place-items: center; - } - - & .logo { - display: flex; - - & svg { - width: 32px; - height: 32px; - } - } -} - -.linkType { - margin-left: auto; - display: flex; - color: var(--black); - - @nest .dark & { - color: var(--white); - } -} diff --git a/website/components/io-dialog/index.tsx b/website/components/io-dialog/index.tsx deleted file mode 100644 index 14298b3053..0000000000 --- a/website/components/io-dialog/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react' -import { DialogOverlay, DialogContent, DialogOverlayProps } from '@reach/dialog' -import { AnimatePresence, motion } from 'framer-motion' -import s from './style.module.css' - -export interface IoDialogProps extends DialogOverlayProps { - label: string -} - -export default function IoDialog({ - isOpen, - onDismiss, - children, - label, -}: IoDialogProps): React.ReactElement { - const AnimatedDialogOverlay = motion(DialogOverlay) - return ( - - {isOpen && ( - -
    - - - - {children} - - -
    -     - )} -     - ) -} diff --git a/website/components/io-dialog/style.module.css b/website/components/io-dialog/style.module.css deleted file mode 100644 index 306619ac8a..0000000000 --- a/website/components/io-dialog/style.module.css +++ /dev/null @@ -1,62 +0,0 @@ -.dialogOverlay { - background-color: rgba(0, 0, 0, 0.75); - height: 100%; - left: 0; - overflow-y: auto; - position: fixed; - top: 0; - width: 100%; - z-index: 666666667 /* higher than global nav */; -} - -.dialogWrapper { - display: grid; - min-height: 100vh; - padding: 24px; - place-items: center; -} - -.dialogContent { - background-color: var(--gray-1); - color: var(--white); - max-width: 800px; - outline: none; - overflow-y: auto; - padding: 24px; - position: relative; - width: 100%; - - @media (min-width: 768px) { - padding: 48px; - } -} - -.dialogClose { - appearance: none; - background-color: transparent; - border: 0; - composes: g-type-display-5 from global; - cursor: pointer; - margin: 0; - padding: 0; - position: absolute; - color: var(--white); - right: 24px; - top: 24px; - z-index: 1; - - @media (min-width: 768px) { - right: 48px; - top: 48px; - } - - @nest html[dir='rtl'] & { - left: 24px; - right: auto; - - @media (min-width: 768px) { - left: 48px; - right: auto; - } - } -} diff --git a/website/components/io-home-call-to-action/index.tsx b/website/components/io-home-call-to-action/index.tsx deleted file mode 100644 index 7296b361b1..0000000000 --- a/website/components/io-home-call-to-action/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import ReactCallToAction from '@hashicorp/react-call-to-action' -import { Products } from '@hashicorp/platform-product-meta' -import s from './style.module.css' - -interface IoHomeCallToActionProps { - brand: Products - heading: string - content: string - links: Array<{ - text: string - url: string - }> -} - -export default function IoHomeCallToAction({ - brand, - heading, - content, - links, -}: IoHomeCallToActionProps) { - return ( -
    - { - return { - text, - url, - type: index === 1 ? 'inbound' : null, - } - })} - /> -
    - ) -} diff --git a/website/components/io-home-call-to-action/style.module.css b/website/components/io-home-call-to-action/style.module.css deleted file mode 100644 index 76cb034469..0000000000 --- a/website/components/io-home-call-to-action/style.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.callToAction { - margin: 60px auto; - background-image: linear-gradient(52.3deg, #2c2d2f 39.83%, #626264 96.92%); - - @media (--medium-up) { - margin: 120px auto; - } - - & > * { - background-color: transparent; - } -} diff --git a/website/components/io-home-case-studies/index.tsx b/website/components/io-home-case-studies/index.tsx deleted file mode 100644 index 3155749e27..0000000000 --- a/website/components/io-home-case-studies/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16' -import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16' -import s from './style.module.css' - -interface IoHomeCaseStudiesProps { - isInternalLink: (link: string) => boolean - heading: string - description: string - primary: Array<{ - thumbnail: { - url: string - alt: string - } - link: string - heading: string - }> - secondary: Array<{ - link: string - heading: string - }> -} - -export default function IoHomeCaseStudies({ - isInternalLink, - heading, - description, - primary, - secondary, -}: IoHomeCaseStudiesProps): React.ReactElement { - return ( -
    -
    -
    -

    {heading}

    -

    {description}

    -
    -
    - - - -
    -
    -
    - ) -} diff --git a/website/components/io-home-case-studies/style.module.css b/website/components/io-home-case-studies/style.module.css deleted file mode 100644 index 63ff3102fd..0000000000 --- a/website/components/io-home-case-studies/style.module.css +++ /dev/null @@ -1,170 +0,0 @@ -.root { - position: relative; - margin: 60px auto; - max-width: 1600px; - - @media (--medium-up) { - margin: 120px auto; - } -} - -.container { - composes: g-grid-container from global; -} - -.header { - margin-bottom: 32px; - - @media (--medium-up) { - max-width: calc(100% * 5 / 12); - } -} - -.heading { - margin: 0; - composes: g-type-display-3 from global; -} - -.description { - margin: 8px 0 0; - composes: g-type-body from global; - color: var(--gray-3); -} - -.caseStudies { - --columns: 1; - - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 12; - } -} - -.primary { - --columns: 1; - - grid-column: 1 / -1; - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 2; - } - - @media (--large) { - grid-column: 1 / 9; - } -} - -.primaryItem { - display: flex; -} - -.card { - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: flex-end; - padding: 32px; - box-shadow: 0 8px 16px -10px rgba(101, 106, 118, 0.2); - background-color: #000; - border-radius: 6px; - color: var(--white); - transition: ease-in-out 0.2s; - transition-property: box-shadow; - min-height: 300px; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - border-radius: 6px; - background-image: linear-gradient( - to bottom, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.45) - ); - transition: opacity ease-in-out 0.2s; - } - - &:hover { - box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15), - 0 16px 16px -10px rgba(101, 106, 118, 0.2); - - &::before { - opacity: 0.75; - } - } -} - -.cardThumbnail { - transition: transform 0.4s; - - @nest .card:hover & { - transform: scale(1.04); - } -} - -.cardHeading { - margin: 0; - composes: g-type-display-4 from global; - z-index: 10; -} - -.secondary { - grid-column: 1 / -1; - list-style: none; - margin: 0; - padding: 0; - - @media (--large) { - margin-top: -32px; - grid-column: 9 / -1; - } -} - -.secondaryItem { - border-bottom: 1px solid var(--gray-5); -} - -.link { - display: flex; - width: 100%; - color: var(--black); -} - -.linkInner { - display: flex; - width: 100%; - justify-content: space-between; - padding-top: 32px; - padding-bottom: 32px; - transition: transform ease-in-out 0.2s; - - @nest .link:hover & { - transform: translateX(4px); - } - - & svg { - margin-top: 6px; - flex-shrink: 0; - } -} - -.linkHeading { - margin: 0 32px 0 0; - composes: g-type-display-6 from global; -} diff --git a/website/components/io-home-feature/index.tsx b/website/components/io-home-feature/index.tsx deleted file mode 100644 index f3e910fcdd..0000000000 --- a/website/components/io-home-feature/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import Link from 'next/link' -import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16' -import s from './style.module.css' - -export interface IoHomeFeatureProps { - isInternalLink: (link: string) => boolean - link?: string - image: { - url: string - alt: string - } - heading: string - description: string -} - -export default function IoHomeFeature({ - isInternalLink, - link, - image, - heading, - description, -}: IoHomeFeatureProps): React.ReactElement { - return ( - -
    - {image.alt} -
    -
    -

    {heading}

    -

    {description}

    - {link ? ( - - Learn more{' '} - - - - - ) : null} -
    -     - ) -} - -interface IoHomeFeatureWrapProps { - isInternalLink: (link: string) => boolean - href: string - children: React.ReactNode -} - -function IoHomeFeatureWrap({ - isInternalLink, - href, - children, -}: IoHomeFeatureWrapProps) { - if (!href) { - return
    {children}
    - } - - if (isInternalLink(href)) { - return ( - - {children} - - ) - } - - return ( - - {children} - - ) -} diff --git a/website/components/io-home-feature/style.module.css b/website/components/io-home-feature/style.module.css deleted file mode 100644 index 70c2cc5103..0000000000 --- a/website/components/io-home-feature/style.module.css +++ /dev/null @@ -1,79 +0,0 @@ -.feature { - display: flex; - align-items: center; - flex-direction: column; - padding: 32px; - gap: 24px 64px; - border-radius: 6px; - background-color: #f9f9fa; - color: var(--black); - box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1), - 0 8px 16px -10px rgba(101, 106, 118, 0.2); - - @media (--medium-up) { - flex-direction: row; - } -} - -.featureLink { - transition: box-shadow ease-in-out 0.2s; - - &:hover { - box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15), - 0 16px 16px -10px rgba(101, 106, 118, 0.2); - } -} - -.featureMedia { - flex-shrink: 0; - display: flex; - width: 100%; - border-radius: 6px; - overflow: hidden; - border: 1px solid var(--gray-5); - - @media (--medium-up) { - width: 300px; - } - - @media (--large) { - width: 400px; - } - - & > * { - width: 100%; - } -} - -.featureContent { - max-width: 520px; -} - -.featureHeading { - margin: 0; - composes: g-type-display-4 from global; -} - -.featureDescription { - margin: 8px 0 24px; - composes: g-type-body-small from global; - color: var(--gray-3); -} - -.featureCta { - display: inline-flex; - align-items: center; - - & > span { - display: flex; - margin-left: 12px; - - & > svg { - transition: transform 0.2s; - } - } - - @nest .feature:hover & span svg { - transform: translateX(2px); - } -} diff --git a/website/components/io-home-hero/index.tsx b/website/components/io-home-hero/index.tsx deleted file mode 100644 index fabaafd37c..0000000000 --- a/website/components/io-home-hero/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import * as React from 'react' -import { Products } from '@hashicorp/platform-product-meta' -import Button from '@hashicorp/react-button' -import classNames from 'classnames' -import s from './style.module.css' - -interface IoHomeHeroProps { - pattern: string - brand: Products | 'neutral' - heading: string - description: string - ctas: Array<{ - title: string - link: string - }> - cards: Array -} - -export default function IoHomeHero({ - pattern, - brand, - heading, - description, - ctas, - cards, -}: IoHomeHeroProps) { - const [loaded, setLoaded] = React.useState(false) - - React.useEffect(() => { - setTimeout(() => { - setLoaded(true) - }, 250) - }, []) - - return ( -
    - -
    -
    -

    {heading}

    -

    {description}

    - {ctas && ( -
    - {ctas.map((cta, index) => { - return ( -
    - )} -
    - {cards && ( -
    - {cards.map((card, index) => { - return ( - - ) - })} -
    - )} -
    -
    - ) -} - -interface IoHomeHeroCardProps { - index?: number - heading: string - description: string - cta: { - title: string - link: string - brand?: 'neutral' | Products - } - subText: string -} - -function IoHomeHeroCard({ - index, - heading, - description, - cta, - subText, -}: IoHomeHeroCardProps): React.ReactElement { - return ( -
    -

    {heading}

    -

    {description}

    -
    - ) -} diff --git a/website/components/io-home-hero/style.module.css b/website/components/io-home-hero/style.module.css deleted file mode 100644 index c7f47026ff..0000000000 --- a/website/components/io-home-hero/style.module.css +++ /dev/null @@ -1,148 +0,0 @@ -.hero { - position: relative; - padding-top: 64px; - padding-bottom: 64px; - background: linear-gradient(180deg, #f9f9fa 0%, #fff 28.22%, #fff 100%); - - @media (--medium-up) { - padding-top: 128px; - padding-bottom: 128px; - } -} - -.pattern { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - max-width: 1600px; - width: 100%; - margin: auto; - - @media (--medium-up) { - background-image: var(--pattern); - background-repeat: no-repeat; - background-position: top right; - } -} - -.container { - --columns: 1; - - composes: g-grid-container from global; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 48px 32px; - - @media (--medium-up) { - --columns: 12; - } -} - -.content { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 1 / 6; - } - - & > * { - max-width: 415px; - } -} - -.heading { - margin: 0; - composes: g-type-display-1 from global; -} - -.description { - margin: 8px 0 0; - composes: g-type-body-small from global; - color: var(--gray-3); -} - -.ctas { - margin-top: 24px; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; -} - -.cards { - --columns: 1; - - grid-column: 1 / -1; - align-self: start; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (min-width: 600px) { - --columns: 2; - } - - @media (--medium-up) { - --columns: 1; - - grid-column: 7 / -1; - } - - @media (--large) { - --columns: 2; - - grid-column: 6 / -1; - } -} - -.card { - --token-radius: 6px; - --token-elevation-mid: 0 2px 3px rgba(101, 106, 118, 0.1), - 0 8px 16px -10px rgba(101, 106, 118, 0.2); - - opacity: 0; - padding: 40px 32px; - display: flex; - align-items: flex-start; - flex-direction: column; - flex-grow: 1; - background-color: var(--white); - border-radius: var(--token-radius); - box-shadow: 0 0 0 1px rgba(38, 53, 61, 0.1), var(--token-elevation-mid); - - @nest .loaded & { - animation-name: slideIn; - animation-duration: 0.5s; - animation-delay: calc(var(--index) * 0.1s); - animation-fill-mode: forwards; - } -} - -.cardHeading { - margin: 0; - composes: g-type-display-4 from global; -} - -.cardDescription { - margin: 8px 0 16px; - composes: g-type-display-6 from global; -} - -.cardSubText { - margin: 32px 0 0; - composes: g-type-body-small from global; - color: var(--gray-3); -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(50px); - } - to { - opacity: 1; - transform: translateY(0); - } -} diff --git a/website/components/io-home-in-practice/index.tsx b/website/components/io-home-in-practice/index.tsx deleted file mode 100644 index 6e145b2e95..0000000000 --- a/website/components/io-home-in-practice/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import Button from '@hashicorp/react-button' -import { Products } from '@hashicorp/platform-product-meta' -import { IoCardProps } from 'components/io-card' -import IoCardContainer from 'components/io-card-container' -import s from './style.module.css' - -interface IoHomeInPracticeProps { - brand: Products - pattern: string - heading: string - description: string - cards: Array - cta: { - heading: string - description: string - link: string - image: { - url: string - alt: string - width: number - height: number - } - } -} - -export default function IoHomeInPractice({ - brand, - pattern, - heading, - description, - cards, - cta, -}: IoHomeInPracticeProps) { - return ( -
    -
    - - - {cta.heading ? ( -
    -
    -

    {cta.heading}

    - {cta.description ? ( -

    {cta.description}

    - ) : null} - {cta.link ? ( -
    - {cta.image?.url ? ( -
    - {cta.image.alt} -
    - ) : null} -
    - ) : null} -
    -
    - ) -} diff --git a/website/components/io-home-in-practice/style.module.css b/website/components/io-home-in-practice/style.module.css deleted file mode 100644 index 13ed2bfd99..0000000000 --- a/website/components/io-home-in-practice/style.module.css +++ /dev/null @@ -1,98 +0,0 @@ -.inPractice { - position: relative; - margin: 60px auto; - padding: 64px 0; - max-width: 1600px; - - @media (--medium-up) { - padding: 80px 0; - margin: 120px auto; - } - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--black); - background-image: var(--pattern); - background-repeat: no-repeat; - background-size: 50%; - background-position: top 200px left; - - @media (--large) { - border-radius: 6px; - left: 24px; - right: 24px; - background-size: 35%; - background-position: top 64px left; - } - } -} - -.container { - composes: g-grid-container from global; -} - -.inPracticeCta { - --columns: 1; - - position: relative; - margin-top: 64px; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 64px 32px; - - @media (--medium-up) { - --columns: 12; - } - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - bottom: -64px; - background-image: radial-gradient( - 42.33% 42.33% at 50% 100%, - #363638 0%, - #000 100% - ); - - @media (--medium-up) { - bottom: -80px; - } - } -} - -.inPracticeCtaContent { - position: relative; - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 1 / 5; - } -} - -.inPracticeCtaMedia { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 6 / -1; - } -} - -.inPracticeCtaHeading { - margin: 0; - color: var(--white); - composes: g-type-display-3 from global; -} - -.inPracticeCtaDescription { - margin: 8px 0 32px; - color: var(--gray-5); - composes: g-type-body from global; -} diff --git a/website/components/io-home-intro/index.tsx b/website/components/io-home-intro/index.tsx deleted file mode 100644 index c8081b4f79..0000000000 --- a/website/components/io-home-intro/index.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import classNames from 'classnames' -import { Products } from '@hashicorp/platform-product-meta' -import Button from '@hashicorp/react-button' -import IoVideoCallout, { - IoHomeVideoCalloutProps, -} from 'components/io-video-callout' -import IoHomeFeature, { IoHomeFeatureProps } from 'components/io-home-feature' -import s from './style.module.css' - -interface IoHomeIntroProps { - isInternalLink: (link: string) => boolean - brand: Products - heading: string - description: string - features?: Array - offerings?: { - image: { - src: string - width: number - height: number - alt: string - } - list: Array<{ - heading: string - description: string - }> - cta?: { - title: string - link: string - } - } - video?: IoHomeVideoCalloutProps -} - -export default function IoHomeIntro({ - isInternalLink, - brand, - heading, - description, - features, - offerings, - video, -}: IoHomeIntroProps) { - return ( -
    -
    -
    -
    -

    {heading}

    -

    {description}

    -
    -
    -
    - - {features ? ( -
      - {features.map((feature, index) => { - return ( - // Index is stable - // eslint-disable-next-line react/no-array-index-key -
    • -
      - -
      -
      • - ) - })} -
    - ) : null} - - {offerings ? ( -
    - {offerings.image ? ( -
    - {offerings.image.alt} -
    - ) : null} -
    -
      - {offerings.list.map((offering, index) => { - return ( - // Index is stable - // eslint-disable-next-line react/no-array-index-key -
    • -

      - {offering.heading} -

      -

      - {offering.description} -

      -
      • - ) - })} -
    - {offerings.cta ? ( -
    -
    - ) : null} -
    -
    - ) : null} - - {video ? ( -
    - -
    - ) : null} -
    - ) -} diff --git a/website/components/io-home-intro/style.module.css b/website/components/io-home-intro/style.module.css deleted file mode 100644 index 6227a49ba3..0000000000 --- a/website/components/io-home-intro/style.module.css +++ /dev/null @@ -1,169 +0,0 @@ -.root { - position: relative; - margin-bottom: 60px; - - @media (--medium-up) { - margin-bottom: 120px; - } - - &.withOfferings:not(.withFeatures)::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: radial-gradient( - 93.55% 93.55% at 50% 0%, - var(--gray-6) 0%, - rgba(242, 242, 243, 0) 100% - ); - - @media (--large) { - border-radius: 6px; - left: 24px; - right: 24px; - } - } -} - -.container { - composes: g-grid-container from global; -} - -.header { - padding-top: 64px; - padding-bottom: 64px; - text-align: center; - - @nest .withFeatures & { - background-color: var(--brand); - } - - @nest .withFeatures.consul & { - color: var(--white); - } -} - -.headerInner { - margin: auto; - - @media (--medium-up) { - max-width: calc(100% * 7 / 12); - } -} - -.heading { - margin: 0; - composes: g-type-display-2 from global; -} - -.description { - margin: 24px 0 0; - composes: g-type-body-large from global; - - @nest .withOfferings:not(.withFeatures) & { - color: var(--gray-3); - } -} - -/* - * Features - */ - -.features { - list-style: none; - margin: 0; - padding: 0; - display: grid; - gap: 32px; - - & li:first-of-type { - background-image: linear-gradient( - to bottom, - var(--brand) 50%, - var(--white) 50% - ); - } -} - -/* - * Offerings - */ - -.offerings { - --columns: 1; - - composes: g-grid-container from global; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 64px 32px; - - @media (--medium-up) { - --columns: 12; - } - - @nest .features + & { - margin-top: 60px; - - @media (--medium-up) { - margin-top: 120px; - } - } -} - -.offeringsMedia { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 1 / 6; - } -} - -.offeringsContent { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 7 / -1; - } -} - -.offeringsList { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 32px; - - @media (--small) { - grid-template-columns: repeat(1, 1fr); - } -} - -.offeringsListHeading { - margin: 0; - composes: g-type-display-4 from global; -} - -.offeringsListDescription { - margin: 16px 0 0; - composes: g-type-body-small from global; -} - -.offeringsCta { - margin-top: 48px; -} - -/* - * Video - */ - -.video { - margin-top: 60px; - composes: g-grid-container from global; - - @media (--medium-up) { - margin-top: 120px; - } -} diff --git a/website/components/io-home-pre-footer/index.tsx b/website/components/io-home-pre-footer/index.tsx deleted file mode 100644 index 98127443dd..0000000000 --- a/website/components/io-home-pre-footer/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react' -import classNames from 'classnames' -import { Products } from '@hashicorp/platform-product-meta' -import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16' -import s from './style.module.css' - -interface IoHomePreFooterProps { - brand: Products - heading: string - description: string - ctas: [IoHomePreFooterCard, IoHomePreFooterCard, IoHomePreFooterCard] -} - -export default function IoHomePreFooter({ - brand, - heading, - description, - ctas, -}: IoHomePreFooterProps) { - return ( -
    -
    -
    -

    {heading}

    -

    {description}

    -
    -
    - {ctas.map((cta, index) => { - return ( - - ) - })} -
    -
    -
    - ) -} - -interface IoHomePreFooterCard { - brand?: string - link: string - heading: string - description: string - cta: string -} - -function IoHomePreFooterCard({ - brand, - link, - heading, - description, - cta, -}: IoHomePreFooterCard): React.ReactElement { - return ( - -

    {heading}

    -

    {description}

    - - {cta} - -     - ) -} diff --git a/website/components/io-home-pre-footer/style.module.css b/website/components/io-home-pre-footer/style.module.css deleted file mode 100644 index 1273e2087d..0000000000 --- a/website/components/io-home-pre-footer/style.module.css +++ /dev/null @@ -1,122 +0,0 @@ -.preFooter { - margin: 60px auto; -} - -.container { - --columns: 1; - - composes: g-grid-container from global; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 12; - } -} - -.content { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 1 / 6; - } - - @media (--large) { - grid-column: 1 / 4; - } -} - -.heading { - margin: 0; - composes: g-type-display-1 from global; -} - -.description { - margin: 24px 0 0; - composes: g-type-body from global; - color: var(--gray-3); -} - -.cards { - grid-column: 1 / -1; - - --columns: 1; - - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 3; - - grid-column: 1 / -1; - } - - @media (--large) { - grid-column: 5 / -1; - } -} - -.card { - display: flex; - flex-direction: column; - flex-grow: 1; - padding: 32px 24px; - background-color: var(--primary); - color: var(--black); - border-radius: 6px; - box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1), - 0 8px 16px -10px rgba(101, 106, 118, 0.2); - transition: ease-in-out 0.2s; - transition-property: box-shadow; - - &:hover { - box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15), - 0 16px 16px -10px rgba(101, 106, 118, 0.2); - } - - &:nth-of-type(1) { - color: var(--white); - - @nest .vault & { - color: var(--black); - } - } - - &:nth-of-type(2) { - background-color: var(--secondary); - } - - &:nth-of-type(3) { - background-color: var(--gray-6); - } -} - -.cardHeading { - margin: 0; - composes: g-type-display-4 from global; -} - -.cardDescription { - margin: 8px 0 0; - padding-bottom: 48px; - color: inherit; - composes: g-type-display-6 from global; -} - -.cardCta { - margin-top: auto; - display: inline-flex; - align-items: center; - composes: g-type-buttons-and-standalone-links from global; - - & svg { - margin-left: 12px; - transition: transform 0.2s; - } - - @nest .card:hover & svg { - transform: translate(2px); - } -} diff --git a/website/components/io-usecase-call-to-action/index.tsx b/website/components/io-usecase-call-to-action/index.tsx deleted file mode 100644 index 252be27f18..0000000000 --- a/website/components/io-usecase-call-to-action/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Image from 'next/image' -import * as React from 'react' -import classNames from 'classnames' -import Button from '@hashicorp/react-button' -import s from './style.module.css' - -interface IoUsecaseCallToActionProps { - brand: string - theme?: 'light' | 'dark' - heading: string - description: string - links: Array<{ - text: string - url: string - }> - pattern: string -} - -export default function IoUsecaseCallToAction({ - brand, - theme, - heading, - description, - links, - pattern, -}: IoUsecaseCallToActionProps): React.ReactElement { - return ( -
    -

    {heading}

    -
    -

    {description}

    -
    - {links.map((link, index) => { - return ( -
    -
    -
    - -
    -
    - ) -} diff --git a/website/components/io-usecase-call-to-action/style.module.css b/website/components/io-usecase-call-to-action/style.module.css deleted file mode 100644 index 1afcb903d6..0000000000 --- a/website/components/io-usecase-call-to-action/style.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.callToAction { - --columns: 1; - - position: relative; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 0 32px; - padding: 32px; - background-color: var(--background-color); - border-radius: 6px; - - &.light { - color: var(--black); - } - - &.dark { - color: var(--white); - } - - @media (--medium-up) { - --columns: 12; - - padding: 0; - } -} - -.heading { - grid-column: 1 / -1; - margin: 0 0 16px; - composes: g-type-display-3 from global; - - @media (--medium-up) { - grid-column: 1 / 6; - padding: 88px 32px 88px 64px; - } -} - -.content { - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 6 / 11; - padding: 88px 0; - } -} - -.description { - margin: 0 0 32px; - composes: g-type-body-large from global; -} - -.links { - display: flex; - flex-wrap: wrap; - gap: 16px 32px; -} - -.pattern { - position: relative; - display: none; - - @media (--medium-up) { - grid-column: 11 / -1; - display: flex; - } -} diff --git a/website/components/io-usecase-customer/index.tsx b/website/components/io-usecase-customer/index.tsx deleted file mode 100644 index 288b953b85..0000000000 --- a/website/components/io-usecase-customer/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import Button from '@hashicorp/react-button' -import s from './style.module.css' - -interface IoUsecaseCustomerProps { - media: { - src: string - width: string - height: string - alt: string - } - logo: { - src: string - width: string - height: string - alt: string - } - heading: string - description: string - stats?: Array<{ - value: string - key: string - }> - link: string -} - -export default function IoUsecaseCustomer({ - media, - logo, - heading, - description, - stats, - link, -}: IoUsecaseCustomerProps): React.ReactElement { - return ( -
    -
    -
    -
    - {/* eslint-disable-next-line jsx-a11y/alt-text */} - -
    -
    -
    -
    - {/* eslint-disable-next-line jsx-a11y/alt-text */} - -
    - Customer case study -
    -

    {heading}

    -

    {description}

    - {link ? ( -
    -
    - ) : null} -
    -
    - {stats.length > 0 ? ( -
      - {stats.map(({ key, value }, index) => { - return ( - // Index is stable - // eslint-disable-next-line react/no-array-index-key -
    • -

      {value}

      -

      {key}

      -
      • - ) - })} -
    - ) : null} -
    -
    - ) -} diff --git a/website/components/io-usecase-customer/style.module.css b/website/components/io-usecase-customer/style.module.css deleted file mode 100644 index b881560735..0000000000 --- a/website/components/io-usecase-customer/style.module.css +++ /dev/null @@ -1,119 +0,0 @@ -.customer { - position: relative; - background-color: var(--black); - color: var(--white); - padding-bottom: 64px; - - @media (--medium-up) { - padding-bottom: 132px; - } -} - -.container { - composes: g-grid-container from global; -} - -.columns { - --columns: 1; - - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 64px 32px; - - @media (--medium-up) { - --columns: 12; - } -} - -.media { - margin-top: -64px; - grid-column: 1 / -1; - - @media (--medium-up) { - grid-column: 1 / 7; - } -} - -.content { - grid-column: 1 / -1; - - @media (--medium-up) { - padding-top: 64px; - grid-column: 8 / -1; - } -} - -.eyebrow { - display: flex; - align-items: center; -} - -.eyebrowLogo { - display: flex; - max-width: 120px; -} - -.eyebrowLabel { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - margin-left: 12px; - border-left: 1px solid var(--gray-5); - align-self: center; - composes: g-type-label-small-strong from global; -} - -.heading { - margin: 32px 0 24px; - composes: g-type-display-2 from global; -} - -.description { - margin: 0; - composes: g-type-body from global; -} - -.cta { - margin-top: 32px; -} - -.stats { - --columns: 1; - - list-style: none; - margin: 64px 0 0; - padding: 0; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 12; - - margin-top: 132px; - } - - & > li { - border-top: 1px solid var(--gray-2); - grid-column: span 4; - } -} - -.value { - margin: 0; - padding-top: 32px; - font-family: var(--font-display); - font-size: 50px; - font-weight: 700; - line-height: 1; - - @media (--large) { - font-size: 80px; - } -} - -.key { - margin: 12px 0 0; - composes: g-type-display-4 from global; - color: var(--gray-3); -} diff --git a/website/components/io-usecase-hero/index.tsx b/website/components/io-usecase-hero/index.tsx deleted file mode 100644 index 4838678e8f..0000000000 --- a/website/components/io-usecase-hero/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import s from './style.module.css' - -interface IoUsecaseHeroProps { - eyebrow: string - heading: string - description: string - pattern?: string -} - -export default function IoUsecaseHero({ - eyebrow, - heading, - description, - pattern, -}: IoUsecaseHeroProps): React.ReactElement { - return ( -
    -
    -
    - {pattern ? ( - - ) : null} -
    -
    -

    {eyebrow}

    -

    {heading}

    -

    {description}

    -
    -
    -
    - ) -} diff --git a/website/components/io-usecase-hero/pattern.svg b/website/components/io-usecase-hero/pattern.svg deleted file mode 100644 index f4b1ef3af0..0000000000 --- a/website/components/io-usecase-hero/pattern.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/io-usecase-hero/style.module.css b/website/components/io-usecase-hero/style.module.css deleted file mode 100644 index 5fd729c8e8..0000000000 --- a/website/components/io-usecase-hero/style.module.css +++ /dev/null @@ -1,83 +0,0 @@ -.hero { - position: relative; - max-width: 1600px; - margin-right: auto; - margin-left: auto; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: radial-gradient( - 95.97% 95.97% at 50% 100%, - #f2f2f3 0%, - rgba(242, 242, 243, 0) 100% - ); - - @media (--medium-up) { - border-radius: 6px; - left: 24px; - right: 24px; - } - } -} - -.container { - @media (--medium-up) { - display: grid; - grid-template-columns: 1fr max-content 1fr; - gap: 32px; - } -} - -.pattern { - margin-left: 24px; - transform: translateY(24px); - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-end; - - @media (--small) { - display: none; - } - - @media (--medium) { - & > * { - display: none !important; - } - } -} - -.content { - position: relative; - max-width: 520px; - width: 100%; - margin-right: auto; - margin-left: auto; - padding: 64px 24px; - - @media (--medium-up) { - padding-top: 132px; - padding-bottom: 132px; - } -} - -.eyebrow { - margin: 0; - composes: g-type-label-strong from global; -} - -.heading { - margin: 24px 0; - composes: g-type-display-1 from global; -} - -.description { - margin: 0; - composes: g-type-body-large from global; - color: var(--gray-2); -} diff --git a/website/components/io-usecase-section/index.tsx b/website/components/io-usecase-section/index.tsx deleted file mode 100644 index 11ed7917f6..0000000000 --- a/website/components/io-usecase-section/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react' -import { Products } from '@hashicorp/platform-product-meta' -import classNames from 'classnames' -import Image from 'next/image' -import Button from '@hashicorp/react-button' -import s from './style.module.css' - -interface IoUsecaseSectionProps { - brand?: Products | 'neutral' - bottomIsFlush?: boolean - eyebrow: string - heading: string - description: string - media?: { - src: string - width: string - height: string - alt: string - } - cta?: { - text: string - link: string - } -} - -export default function IoUsecaseSection({ - brand = 'neutral', - bottomIsFlush = false, - eyebrow, - heading, - description, - media, - cta, -}: IoUsecaseSectionProps): React.ReactElement { - return ( -
    -
    -

    {eyebrow}

    -
    -
    -

    {heading}

    - {media?.src ? ( -
    - ) : null} - {cta?.link && cta?.text ? ( -
    -
    - ) : null} -
    -
    - {media?.src ? ( - // eslint-disable-next-line jsx-a11y/alt-text - - ) : ( -
    - )} -
    -
    -
    -
    - ) -} diff --git a/website/components/io-usecase-section/style.module.css b/website/components/io-usecase-section/style.module.css deleted file mode 100644 index a2b56d1f58..0000000000 --- a/website/components/io-usecase-section/style.module.css +++ /dev/null @@ -1,106 +0,0 @@ -.section { - position: relative; - max-width: 1600px; - margin-right: auto; - margin-left: auto; - padding-top: 64px; - padding-bottom: 64px; - - @media (--medium-up) { - padding-top: 132px; - padding-bottom: 132px; - } - - & + .section { - padding-bottom: 132px; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--gray-6); - opacity: 0.4; - - @media (--medium-up) { - border-radius: 6px; - left: 24px; - right: 24px; - } - } - } - - &.isFlush { - padding-bottom: 96px; - - @media (--medium-up) { - padding-bottom: 164px; - } - - &::before { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } -} - -.container { - composes: g-grid-container from global; -} - -.columns { - --columns: 1; - - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - - @media (--medium-up) { - --columns: 12; - } -} - -.column { - &:nth-child(1) { - @media (--medium-up) { - grid-column: 1 / 7; - } - } - - &:nth-child(2) { - @media (--medium-up) { - grid-column: 8 / -1; - padding-top: 16px; - } - } -} - -.eyebrow { - margin: 0; - composes: g-type-display-5 from global; -} - -.heading { - margin: 16px 0 32px; - padding-bottom: 32px; - composes: g-type-display-3 from global; - border-bottom: 1px solid var(--black); -} - -.description { - composes: g-type-body from global; - - & > p { - margin: 0; - - & + p { - margin-top: 16px; - } - } -} - -.cta { - margin-top: 32px; -} diff --git a/website/components/io-video-callout/index.tsx b/website/components/io-video-callout/index.tsx deleted file mode 100644 index 7889348d86..0000000000 --- a/website/components/io-video-callout/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react' -import Image from 'next/image' -import ReactPlayer from 'react-player' -import VisuallyHidden from '@reach/visually-hidden' -import IoDialog from 'components/io-dialog' -import PlayIcon from './play-icon' -import s from './style.module.css' - -export interface IoHomeVideoCalloutProps { - youtubeId: string - thumbnail: string - heading: string - description: string - person: { - avatar: string - name: string - description: string - } -} - -export default function IoVideoCallout({ - youtubeId, - thumbnail, - heading, - description, - person, -}: IoHomeVideoCalloutProps): React.ReactElement { - const [showDialog, setShowDialog] = React.useState(false) - const showVideo = () => setShowDialog(true) - const hideVideo = () => setShowDialog(false) - return ( - <> -
    - -
    -

    {heading}

    -

    {description}

    - {person && ( -
    - {person.avatar ? ( -
    - {`${person.name} -
    - ) : null} -
    -

    {person.name}

    -

    {person.description}

    -
    -
    - )} -
    -
    - -

    {heading}

    -
    - -
    -     - - ) -} diff --git a/website/components/io-video-callout/play-icon.tsx b/website/components/io-video-callout/play-icon.tsx deleted file mode 100644 index 37395ba2b6..0000000000 --- a/website/components/io-video-callout/play-icon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' - -export default function PlayIcon(): React.ReactElement { - return ( - - - - - ) -} diff --git a/website/components/io-video-callout/style.module.css b/website/components/io-video-callout/style.module.css deleted file mode 100644 index 815601ff0f..0000000000 --- a/website/components/io-video-callout/style.module.css +++ /dev/null @@ -1,128 +0,0 @@ -.videoCallout { - --columns: 1; - - margin: 0; - display: grid; - grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); - gap: 32px; - background-color: var(--black); - border-radius: 6px; - overflow: hidden; - - @media (--medium-up) { - --columns: 12; - } -} - -.thumbnail { - position: relative; - display: grid; - place-items: center; - grid-column: 1 / -1; - background-color: transparent; - border: 0; - cursor: pointer; - padding: 96px 32px; - min-height: 300px; - - @media (--medium-up) { - grid-column: 1 / 7; - } - - @media (--large) { - grid-column: 1 / 9; - } - - & > svg { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1; - - @media (--small) { - width: 52px; - height: 52px; - } - } - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.45; - transition: opacity ease-in-out 0.2s; - } - - &:hover::after { - opacity: 0.2; - } -} - -.content { - padding: 32px; - grid-column: 1 / -1; - - @media (--medium-up) { - padding: 80px 32px; - grid-column: 7 / -1; - } - - @media (--large) { - grid-column: 9 / -1; - } -} - -.heading { - margin: 0; - composes: g-type-display-4 from global; - color: var(--white); -} - -.description { - margin: 8px 0 0; - composes: g-type-body-small from global; - color: var(--white); -} - -.person { - margin-top: 64px; - display: flex; - align-items: center; - gap: 16px; -} - -.personThumbnail { - display: flex; - border-radius: 9999px; - overflow: hidden; -} - -.personName { - margin: 0; - composes: g-type-body-strong from global; - color: var(--white); -} - -.personDescription { - margin: 4px 0 0; - composes: g-type-label-strong from global; - color: var(--gray-3); -} - -.videoHeading { - margin-top: 0; - margin-bottom: 32px; - padding-right: 100px; - composes: g-type-display-4 from global; -} - -.video { - position: relative; - background-color: var(--gray-2); - aspect-ratio: 16 / 9; -} diff --git a/website/components/mini-cta/index.jsx b/website/components/mini-cta/index.jsx deleted file mode 100644 index 02d5faff33..0000000000 --- a/website/components/mini-cta/index.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import Button from '@hashicorp/react-button' - -export default function MiniCTA({ title, description, link }) { - return ( -
    -
    -
    -
    {title}
    - {description &&

    {description}

    } -
    -
    - ) -} diff --git a/website/components/mini-cta/style.css b/website/components/mini-cta/style.css deleted file mode 100644 index 8f76813ac1..0000000000 --- a/website/components/mini-cta/style.css +++ /dev/null @@ -1,36 +0,0 @@ -.g-mini-cta { - background: var(--gray-6); - text-align: center; - padding-bottom: 64px; - padding-top: 48px; - - & hr { - width: 64px; - color: var(--gray-4); - margin: 0 auto 64px auto; - - @media (max-width: 800px) { - margin: 0 auto 24px auto; - } - } - - & h5 { - margin: 0; - margin-bottom: 14px; - } - - & p { - margin: 0; - margin-bottom: 24px; - - @media (max-width: 800px) { - margin-bottom: 16px; - } - } - - & .g-btn { - & span { - font-weight: 500; - } - } -} diff --git a/website/components/prefooter-cta/index.jsx b/website/components/prefooter-cta/index.jsx deleted file mode 100644 index 6180587289..0000000000 --- a/website/components/prefooter-cta/index.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import CallToAction from '@hashicorp/react-call-to-action' - -export default function PrefooterCTA() { - return ( - - ) -} diff --git a/website/components/side-by-side/index.tsx b/website/components/side-by-side/index.tsx deleted file mode 100644 index c1a29b0ff4..0000000000 --- a/website/components/side-by-side/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ReactNode } from 'react' -import classNames from 'classnames' -import s from './style.module.css' - -interface SideBySideProps { - left: ReactNode - right: ReactNode -} - -export default function SideBySide({ left, right }: SideBySideProps) { - return ( -
    -
    -
    {left}
    -
    -
    -
    {right}
    -
    -
    - ) -} diff --git a/website/components/side-by-side/style.module.css b/website/components/side-by-side/style.module.css deleted file mode 100644 index 683a7de24e..0000000000 --- a/website/components/side-by-side/style.module.css +++ /dev/null @@ -1,61 +0,0 @@ -.sideBySide { - display: flex; - flex-wrap: wrap; - - @media (--large) { - flex-wrap: nowrap; - } - - & .sideWrapper { - padding: 105px 0; - width: 100%; - - @media (--large) { - width: 50%; - padding-bottom: 176px; - } - - &.leftSide { - background: var(--consul-secondary); - - @media (--large) { - padding-left: 48px; - padding-right: 104px; - } - } - - &.rightSide { - @media (--large) { - padding-right: 48px; - padding-left: 75px; - } - } - - & .side { - margin: 0 auto; - - @media (--small) { - max-width: 616px; - padding-left: 24px; - padding-right: 24px; - } - - @media (--medium) { - max-width: 944px; - padding-left: 40px; - padding-right: 40px; - } - - @media (--large) { - margin: 0; - max-width: 490px; - } - } - - &:first-child .side { - @media (--large) { - float: right; - } - } - } -} diff --git a/website/components/static-dynamic-diagram/before-after-diagram.jsx b/website/components/static-dynamic-diagram/before-after-diagram.jsx deleted file mode 100644 index c81124ed4c..0000000000 --- a/website/components/static-dynamic-diagram/before-after-diagram.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import Image from '@hashicorp/react-image' -import InlineSvg from '@hashicorp/react-inline-svg' -import alertIcon from 'public/img/static-dynamic-diagram/alert.svg?include' -import checkIcon from 'public/img/static-dynamic-diagram/check.svg?include' -import s from './before-after-diagram.module.css' - -export default function BeforeAfterDiagram({ - beforeHeadline, - beforeContent, - beforeImage, - afterHeadline, - afterContent, - afterImage, -}) { - return ( -
    -
    -
    -
    - -
    -
    -
    - - - - -
    - {beforeHeadline && ( -

    - )} - {beforeContent && ( -
    - )} -
    -

    -
    -
    -
    -
    - -
    -
    -
    - - - -
    - {afterHeadline && ( -

    - )} - {afterContent && ( -
    - )} -
    -

    -
    -
    - ) -} diff --git a/website/components/static-dynamic-diagram/before-after-diagram.module.css b/website/components/static-dynamic-diagram/before-after-diagram.module.css deleted file mode 100644 index 49796a3c28..0000000000 --- a/website/components/static-dynamic-diagram/before-after-diagram.module.css +++ /dev/null @@ -1,351 +0,0 @@ -.beforeAfterDiagram { - /* CSS custom properties to control theming */ - --product-color: var(--black); - --gray-6-transparent: rgba(210, 212, 219, 0); - --after-bullet-background: url('/img/static-dynamic-diagram/check-square.svg'); - --after-bullet-height: 18px; - - 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; - } - - --after-bullet-background: url('/img/static-dynamic-diagram/check-square-consul.svg'); - --after-bullet-height: 19px; -} - -/* Before and after columns */ - -.side { - 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%; - } -} - -.beforeSide { - composes: side; - @media (max-width: 767px) { - margin-bottom: 62px; - } -} - -.afterSide { - composes: side; -} - -/* Diagram images */ - -.image { - align-items: flex-end; - 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%; - } - - & picture { - height: 100%; - } - & img, - & svg { - height: 100%; - max-width: 100%; - object-fit: contain; - } - - @media (--medium-up) { - height: unset; - - & div { - height: unset; - } - - & picture { - height: unset; - } - & img, - & svg { - height: unset; - } - } -} - -/* icon / line container above content */ - -.iconLineContainer { - padding: 0; - position: absolute; - right: 0; - top: -75px; - width: 100%; - - @media (max-width: 767px) { - height: 100%; - left: -28px; - right: auto; - top: 28px; - width: auto; - } -} - -/* Line segment above content (before side only) */ - -.lineSegment { - background: black; - display: block; - height: 2px; - left: calc(50% + 30px); - position: absolute; - top: 12px; - width: calc(100% - 24px); - - @media (max-width: 767px) { - height: calc(100% + 375px); - left: auto; - top: 38px; - width: 2px; - } - - @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); - } - - &::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: 6px 0 6px 8px; - content: ''; - height: 0; - position: absolute; - right: -8px; - top: -5px; - width: 0; - - @media (max-width: 767px) { - bottom: -8px; - right: -4px; - top: auto; - transform: rotate(90deg); - } - } -} - -/* Icon above each content container */ - -.contentIcon { - & svg { - left: 50%; - margin: 0 0 0 -11px; - position: absolute; - } -} - -.beforeIcon { - composes: contentIcon; -} - -.afterIcon { - composes: contentIcon; - & svg path:first-child { - fill: var(--product-color); - stroke: var(--product-color); - } -} - -/* Content container */ - -.contentContainer { - border: 1px solid var(--gray-5); - flex-grow: 1; - padding: 24px 32px 20px; - position: relative; - - @media (max-width: 1023px) { - padding-left: 24px; - padding-right: 24px; - } - - @media (max-width: 767px) { - padding-left: 20px; - padding-right: 20px; - } - - &::before, - &::after { - border: solid transparent; - bottom: 100%; - content: ''; - height: 0; - left: 50%; - pointer-events: none; - position: absolute; - width: 0; - } - - &::before { - border-color: rgba(229, 230, 235, 0); - border-bottom-color: var(--gray-5); - 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%; - - & > div { - @media (min-width: 768px) { - margin: 0 auto; - max-width: 480px; - } - } - } -} - -/* Content headline */ - -.contentHeadline { - border-bottom: 1px solid var(--gray-5); - color: var(--black); - composes: g-type-display-3 from global; - margin: 0 0 24px; - padding-bottom: 24px; - text-align: center; -} - -/* Content styles (for rendered markdown) */ - -.content { - & :global(.__permalink-h) { - display: none; - } - - & :global(.g-type-label) { - margin: 24px 0 26px 0; - } - - & ul, - & ol { - list-style: none; - padding-left: 32px; - position: relative; - } - - & li { - margin: 8px 0; - - &::before { - background-repeat: no-repeat; - content: ''; - left: 0; - position: absolute; - } - } -} - -.beforeContent { - composes: content; - - & li::before { - background: url('/img/static-dynamic-diagram/alert-check.svg'); - background-repeat: no-repeat; - height: var(--after-bullet-height); - margin-top: 3px; - width: 20px; - } -} - -.afterContent { - composes: content; - - & li::before { - background: var(--after-bullet-background); - height: var(--after-bullet-height); - margin-top: 4px; - width: 18px; - } -} diff --git a/website/components/static-dynamic-diagram/index.tsx b/website/components/static-dynamic-diagram/index.tsx deleted file mode 100644 index 9b5cf3fad1..0000000000 --- a/website/components/static-dynamic-diagram/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import BeforeAfterDiagram from './before-after-diagram' -import s from './style.module.css' - -export default function StaticDynamicDiagram({ - heading, - description, - diagrams, -}) { - return ( -
    -
    -

    {heading}

    - {description &&

    {description}

    } -
    - -
    - ) -} diff --git a/website/components/static-dynamic-diagram/style.module.css b/website/components/static-dynamic-diagram/style.module.css deleted file mode 100644 index 2b1a7ff2d6..0000000000 --- a/website/components/static-dynamic-diagram/style.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.staticDynamic { - composes: g-grid-container from global; - display: grid; - grid-gap: 64px; - justify-items: center; -} - -.content { - max-width: 784px; - text-align: center; -} -.description { - composes: g-type-body-large from global; - color: var(--gray-2); -} -.heading { - composes: g-type-display-2 from global; - margin: 0; -} diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx deleted file mode 100644 index 4a70b89c1a..0000000000 --- a/website/components/subnav/index.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import Subnav from '@hashicorp/react-subnav' -import { useRouter } from 'next/router' -import s from './style.module.css' - -export default function ConsulSubnav({ menuItems }) { - const router = useRouter() - return ( - - ) -} diff --git a/website/components/subnav/style.module.css b/website/components/subnav/style.module.css deleted file mode 100644 index 5cb3cbccd8..0000000000 --- a/website/components/subnav/style.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.subnav { - border-top: 1px solid transparent; -} diff --git a/website/components/use-cases-layout/index.jsx b/website/components/use-cases-layout/index.jsx deleted file mode 100644 index 2459107113..0000000000 --- a/website/components/use-cases-layout/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import BasicHero from 'components/basic-hero' -import PrefooterCTA from 'components/prefooter-cta' -import ConsulEnterpriseComparison from 'components/enterprise-comparison/consul' -import Head from 'next/head' -import HashiHead from '@hashicorp/react-head' - -export default function UseCaseLayout({ - title, - description, - guideLink, - children, -}) { - const pageTitle = `Consul ${title}` - return ( - <> - - - - -
    - -
    -

    Features

    -
    - {children} - - -
    - - ) -} diff --git a/website/components/use-cases-layout/style.css b/website/components/use-cases-layout/style.css deleted file mode 100644 index e51ec7e4c1..0000000000 --- a/website/components/use-cases-layout/style.css +++ /dev/null @@ -1,30 +0,0 @@ -#p-use-case { - & .features-header { - text-align: center; - margin-bottom: 0; - } - - /* Overriding the g-text-split component to have - * a header size closer to a h3 than a h2, as within - * the context of this page this text-split is more deeply - * nested within the page than we normally have it. - * */ - & .g-text-split { - & h2 { - font-size: 1.5rem; - letter-spacing: -0.004em; - line-height: 1.375em; - - @media (--medium-up) { - font-size: 1.75rem; - line-height: 1.321em; - } - - @media (--large) { - font-size: 2rem; - letter-spacing: -0.006em; - line-height: 1.313em; - } - } - } -} diff --git a/website/data/alert-banner.js b/website/data/alert-banner.js deleted file mode 100644 index 6fe9887949..0000000000 --- a/website/data/alert-banner.js +++ /dev/null @@ -1,13 +0,0 @@ -export const ALERT_BANNER_ACTIVE = false - -// https://github.com/hashicorp/web-components/tree/master/packages/alert-banner -export default { - tag: 'Blog post', - url: 'https://www.hashicorp.com/blog/a-new-chapter-for-hashicorp', - text: - 'HashiCorp shares have begun trading on the Nasdaq. Read the blog from our founders, Mitchell Hashimoto and Armon Dadgar.', - linkText: 'Read the post', - // Set the expirationDate prop with a datetime string (e.g. '2020-01-31T12:00:00-07:00') - // if you'd like the component to stop showing at or after a certain date - expirationDate: '2021-12-17T23:00:00-07:00', -} diff --git a/website/data/metadata.js b/website/data/metadata.js deleted file mode 100644 index 646d7fcec0..0000000000 --- a/website/data/metadata.js +++ /dev/null @@ -1,2 +0,0 @@ -export const productName = 'Consul' -export const productSlug = 'consul' diff --git a/website/data/version.js b/website/data/version.js deleted file mode 100644 index a5beaddf65..0000000000 --- a/website/data/version.js +++ /dev/null @@ -1 +0,0 @@ -export default '1.11.5' diff --git a/website/layouts/standard/index.tsx b/website/layouts/standard/index.tsx deleted file mode 100644 index 38bb3f8c56..0000000000 --- a/website/layouts/standard/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import query from './query.graphql' -import ProductSubnav from 'components/subnav' -import Footer from 'components/footer' -import { open } from '@hashicorp/react-consent-manager' - -export default function StandardLayout(props: Props): React.ReactElement { - const { useCaseNavItems } = props.data - - return ( - <> - { - return { - text: item.text, - url: `/use-cases/${item.url}`, - } - }), - ].sort((a, b) => a.text.localeCompare(b.text)), - }, - { - text: 'Enterprise', - url: - 'https://www.hashicorp.com/products/consul/?utm_source=oss&utm_medium=header-nav&utm_campaign=consul', - type: 'outbound', - }, - 'divider', - { - text: 'Tutorials', - url: 'https://learn.hashicorp.com/consul', - type: 'outbound', - }, - { - text: 'Docs', - url: '/docs', - type: 'inbound', - }, - { - text: 'API', - url: '/api-docs', - type: 'inbound', - }, - { - text: 'CLI', - url: '/commands', - type: 'inbound,', - }, - { - text: 'Community', - url: '/community', - type: 'inbound', - }, - ]} - /> - {props.children} -