From 3c306ef2d3f4c2a8068637651b50aedac90595b8 Mon Sep 17 00:00:00 2001 From: nicolelyn Date: Fri, 14 Feb 2020 10:11:37 -0500 Subject: [PATCH] Homepage redesign & use-cases pages --- website/components/basic-hero/index.jsx | 34 + website/components/basic-hero/style.css | 46 + .../case-study-carousel/case-study-slide.jsx | 44 + .../img/active-control-dot.svg | 1 + .../img/inactive-control-dot.svg | 1 + .../img/left-arrow-control.svg | 1 + .../case-study-carousel/img/quote.svg | 3 + .../img/right-arrow-control.svg | 1 + .../components/case-study-carousel/index.jsx | 90 + .../components/case-study-carousel/style.css | 249 + .../components/enterprise-info/img/arrow.svg | 4 + .../img/complexity-advanced.png | Bin 0 -> 5195 bytes .../enterprise-info/img/complexity-basic.png | Bin 0 -> 1478 bytes website/components/enterprise-info/index.jsx | 47 + website/components/enterprise-info/nomad.jsx | 39 + website/components/enterprise-info/style.css | 92 + .../featured-slider-section/index.jsx | 12 + .../featured-slider-section/style.css | 12 + .../components/featured-slider/StatusBar.jsx | 16 + website/components/featured-slider/index.jsx | 221 + .../components/featured-slider/index.props.js | 41 + website/components/featured-slider/style.css | 176 + website/components/features-list/index.jsx | 20 + website/components/features-list/style.css | 84 + website/components/homepage-hero/index.jsx | 33 + website/components/homepage-hero/style.css | 40 + website/components/learn-nomad/index.jsx | 58 + website/components/learn-nomad/style.css | 151 + .../mega-nav/img/hashicorp-logo.svg | 1 + .../img/temporary_suite/icon-angle.svg | 1 + .../img/temporary_suite/logo-consul.svg | 1 + .../logo-hashicorp-wordmark.svg | 1 + .../img/temporary_suite/logo-hashicorp.svg | 1 + .../img/temporary_suite/logo-nomad.svg | 1 + .../img/temporary_suite/logo-packer.svg | 1 + .../img/temporary_suite/logo-terraform.svg | 1 + .../img/temporary_suite/logo-vagrant.svg | 1 + .../img/temporary_suite/logo-vault.svg | 1 + website/components/mega-nav/index.jsx | 16 + website/components/mega-nav/style.css | 22 + .../components/mega-nav/temporary_suite.css | 918 +++ .../components/mega-nav/temporary_suite.jsx | 287 + website/components/mini-cta/index.jsx | 23 + website/components/mini-cta/style.css | 35 + website/components/subnav/img/carat.svg | 1 - website/components/subnav/img/download.svg | 1 - website/components/subnav/img/github.svg | 1 - website/components/subnav/index.jsx | 265 +- website/components/subnav/style.css | 542 -- website/layouts/use-cases/index.jsx | 49 + website/layouts/use-cases/style.css | 40 + website/lib/polyfills.js | 35 + website/package-lock.json | 211 +- website/package.json | 7 + website/pages/_app.js | 8 +- website/pages/home/img/flexible-workloads.svg | 1 - website/pages/home/img/hybrid-multi-cloud.svg | 1 - website/pages/home/img/learn-nomad/cap.svg | 3 + website/pages/home/img/learn-nomad/cubes.svg | 3 + website/pages/home/img/logo.svg | 1 - website/pages/home/img/maintain-1.svg | 1 - website/pages/home/img/maintain-2.svg | 1 - website/pages/home/img/maintain-3.svg | 1 - ...tomated-service-networking-with-consul.svg | 1 + ...ontainerized-application-orchestration.svg | 1 + .../simple-container-orchestration.svg | 1 + website/pages/home/img/utilization-costs.svg | 1 - .../pages/home/img/why-nomad/federation.svg | 1 + .../why-nomad/flexible-workload-support.svg | 1 + .../modernize-legacy-applications.svg | 1 + .../home/img/why-nomad/native-integration.svg | 1 + .../pages/home/img/why-nomad/performance.svg | 1 + website/pages/home/img/why-nomad/servers.svg | 1 + .../img/why-nomad/simple-and-lightweight.svg | 1 + website/pages/home/index.jsx | 608 +- website/pages/home/style.css | 231 +- website/pages/style.css | 18 +- ...tomated-service-networking-with-consul.jsx | 122 + .../img/auto-clustering-with-consul.svg | 1 + ...auto-service-to-service-communications.svg | 1 + ...utomated-service-discovery-with-consul.png | Bin 0 -> 147436 bytes website/pages/use-cases/img/bin-packing.svg | 1 + website/pages/use-cases/img/deluxe.png | Bin 0 -> 2152414 bytes .../pages/use-cases/img/edge-deployment.svg | 202 + website/pages/use-cases/img/grey_meta.png | Bin 0 -> 2514247 bytes .../img/high-performance-batch-workloads.png | Bin 0 -> 260198 bytes .../img/non-containerized-orchestration.png | Bin 0 -> 58644 bytes .../pages/use-cases/img/on-prem-with-ease.svg | 1 + website/pages/use-cases/img/seatgeek.png | Bin 0 -> 2485327 bytes .../pages/use-cases/img/single-workflow.svg | 1 + .../use-cases/img/specialized-hardware.png | Bin 0 -> 35358 bytes .../use-cases/img/stateful-workloads.svg | 1 + .../img/zero-downtime-deployments.png | Bin 0 -> 130078 bytes ...ontainerized-application-orchestration.jsx | 128 + .../simple-container-orchestration.jsx | 252 + website/public/img/nomad-hero-pattern.svg | 1688 +++++ website/public/img/nomad-panel-learn.svg | 712 ++ .../public/img/nomad-pattern-gray_joined.svg | 6398 +++++++++++++++++ website/public/img/pattern.svg | 319 + 99 files changed, 13355 insertions(+), 1339 deletions(-) create mode 100644 website/components/basic-hero/index.jsx create mode 100644 website/components/basic-hero/style.css create mode 100644 website/components/case-study-carousel/case-study-slide.jsx create mode 100644 website/components/case-study-carousel/img/active-control-dot.svg create mode 100644 website/components/case-study-carousel/img/inactive-control-dot.svg create mode 100644 website/components/case-study-carousel/img/left-arrow-control.svg create mode 100644 website/components/case-study-carousel/img/quote.svg create mode 100644 website/components/case-study-carousel/img/right-arrow-control.svg create mode 100644 website/components/case-study-carousel/index.jsx create mode 100644 website/components/case-study-carousel/style.css create mode 100644 website/components/enterprise-info/img/arrow.svg create mode 100644 website/components/enterprise-info/img/complexity-advanced.png create mode 100644 website/components/enterprise-info/img/complexity-basic.png create mode 100644 website/components/enterprise-info/index.jsx create mode 100644 website/components/enterprise-info/nomad.jsx create mode 100644 website/components/enterprise-info/style.css create mode 100644 website/components/featured-slider-section/index.jsx create mode 100644 website/components/featured-slider-section/style.css create mode 100644 website/components/featured-slider/StatusBar.jsx create mode 100644 website/components/featured-slider/index.jsx create mode 100644 website/components/featured-slider/index.props.js create mode 100644 website/components/featured-slider/style.css create mode 100644 website/components/features-list/index.jsx create mode 100644 website/components/features-list/style.css create mode 100644 website/components/homepage-hero/index.jsx create mode 100644 website/components/homepage-hero/style.css create mode 100644 website/components/learn-nomad/index.jsx create mode 100644 website/components/learn-nomad/style.css create mode 100644 website/components/mega-nav/img/hashicorp-logo.svg create mode 100644 website/components/mega-nav/img/temporary_suite/icon-angle.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-consul.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-nomad.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-packer.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-terraform.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-vagrant.svg create mode 100644 website/components/mega-nav/img/temporary_suite/logo-vault.svg create mode 100644 website/components/mega-nav/index.jsx create mode 100644 website/components/mega-nav/style.css create mode 100644 website/components/mega-nav/temporary_suite.css create mode 100644 website/components/mega-nav/temporary_suite.jsx create mode 100644 website/components/mini-cta/index.jsx create mode 100644 website/components/mini-cta/style.css delete mode 100644 website/components/subnav/img/carat.svg delete mode 100644 website/components/subnav/img/download.svg delete mode 100644 website/components/subnav/img/github.svg delete mode 100644 website/components/subnav/style.css create mode 100644 website/layouts/use-cases/index.jsx create mode 100644 website/layouts/use-cases/style.css create mode 100644 website/lib/polyfills.js delete mode 100644 website/pages/home/img/flexible-workloads.svg delete mode 100644 website/pages/home/img/hybrid-multi-cloud.svg create mode 100755 website/pages/home/img/learn-nomad/cap.svg create mode 100755 website/pages/home/img/learn-nomad/cubes.svg delete mode 100644 website/pages/home/img/logo.svg delete mode 100644 website/pages/home/img/maintain-1.svg delete mode 100644 website/pages/home/img/maintain-2.svg delete mode 100644 website/pages/home/img/maintain-3.svg create mode 100644 website/pages/home/img/use-cases/automated-service-networking-with-consul.svg create mode 100644 website/pages/home/img/use-cases/non-containerized-application-orchestration.svg create mode 100644 website/pages/home/img/use-cases/simple-container-orchestration.svg delete mode 100644 website/pages/home/img/utilization-costs.svg create mode 100644 website/pages/home/img/why-nomad/federation.svg create mode 100644 website/pages/home/img/why-nomad/flexible-workload-support.svg create mode 100644 website/pages/home/img/why-nomad/modernize-legacy-applications.svg create mode 100644 website/pages/home/img/why-nomad/native-integration.svg create mode 100644 website/pages/home/img/why-nomad/performance.svg create mode 100644 website/pages/home/img/why-nomad/servers.svg create mode 100644 website/pages/home/img/why-nomad/simple-and-lightweight.svg create mode 100644 website/pages/use-cases/automated-service-networking-with-consul.jsx create mode 100644 website/pages/use-cases/img/auto-clustering-with-consul.svg create mode 100644 website/pages/use-cases/img/auto-service-to-service-communications.svg create mode 100755 website/pages/use-cases/img/automated-service-discovery-with-consul.png create mode 100644 website/pages/use-cases/img/bin-packing.svg create mode 100644 website/pages/use-cases/img/deluxe.png create mode 100644 website/pages/use-cases/img/edge-deployment.svg create mode 100644 website/pages/use-cases/img/grey_meta.png create mode 100755 website/pages/use-cases/img/high-performance-batch-workloads.png create mode 100644 website/pages/use-cases/img/non-containerized-orchestration.png create mode 100644 website/pages/use-cases/img/on-prem-with-ease.svg create mode 100644 website/pages/use-cases/img/seatgeek.png create mode 100644 website/pages/use-cases/img/single-workflow.svg create mode 100644 website/pages/use-cases/img/specialized-hardware.png create mode 100644 website/pages/use-cases/img/stateful-workloads.svg create mode 100755 website/pages/use-cases/img/zero-downtime-deployments.png create mode 100644 website/pages/use-cases/non-containerized-application-orchestration.jsx create mode 100644 website/pages/use-cases/simple-container-orchestration.jsx create mode 100644 website/public/img/nomad-hero-pattern.svg create mode 100644 website/public/img/nomad-panel-learn.svg create mode 100644 website/public/img/nomad-pattern-gray_joined.svg create mode 100644 website/public/img/pattern.svg diff --git a/website/components/basic-hero/index.jsx b/website/components/basic-hero/index.jsx new file mode 100644 index 000000000..550721636 --- /dev/null +++ b/website/components/basic-hero/index.jsx @@ -0,0 +1,34 @@ +import Button from '@hashicorp/react-button' + +export default function BasicHero({ heading, content, links }) { + return ( +
+
+

{heading}

+

{content}

+ {links && ( +
+ {links.map((link, stableIdx) => { + const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary' + const linkType = link.type || 'inbound' + return ( +
+ )} +
+
+ ) +} diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css new file mode 100644 index 000000000..7f787bd39 --- /dev/null +++ b/website/components/basic-hero/style.css @@ -0,0 +1,46 @@ +.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-3); + 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; + } + } +} diff --git a/website/components/case-study-carousel/case-study-slide.jsx b/website/components/case-study-carousel/case-study-slide.jsx new file mode 100644 index 000000000..6dd99a90c --- /dev/null +++ b/website/components/case-study-carousel/case-study-slide.jsx @@ -0,0 +1,44 @@ +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 new file mode 100644 index 000000000..ee15572f4 --- /dev/null +++ b/website/components/case-study-carousel/img/active-control-dot.svg @@ -0,0 +1 @@ + diff --git a/website/components/case-study-carousel/img/inactive-control-dot.svg b/website/components/case-study-carousel/img/inactive-control-dot.svg new file mode 100644 index 000000000..c28dc9680 --- /dev/null +++ b/website/components/case-study-carousel/img/inactive-control-dot.svg @@ -0,0 +1 @@ + diff --git a/website/components/case-study-carousel/img/left-arrow-control.svg b/website/components/case-study-carousel/img/left-arrow-control.svg new file mode 100644 index 000000000..67809357d --- /dev/null +++ b/website/components/case-study-carousel/img/left-arrow-control.svg @@ -0,0 +1 @@ + \ 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 new file mode 100644 index 000000000..d47007ce7 --- /dev/null +++ b/website/components/case-study-carousel/img/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/components/case-study-carousel/img/right-arrow-control.svg b/website/components/case-study-carousel/img/right-arrow-control.svg new file mode 100644 index 000000000..717c98126 --- /dev/null +++ b/website/components/case-study-carousel/img/right-arrow-control.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/case-study-carousel/index.jsx b/website/components/case-study-carousel/index.jsx new file mode 100644 index 000000000..5fbc9bca7 --- /dev/null +++ b/website/components/case-study-carousel/index.jsx @@ -0,0 +1,90 @@ +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, + featuredLogos +}) { + const [slideIndex, setSlideIndex] = useState(0) + const caseStudySlides = caseStudies.map(caseStudy => ( + + )) + 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.map(featuredLogo => ( + {featuredLogo.companyName} + ))} +
+
+
+ ) +} diff --git a/website/components/case-study-carousel/style.css b/website/components/case-study-carousel/style.css new file mode 100644 index 000000000..4a96628af --- /dev/null +++ b/website/components/case-study-carousel/style.css @@ -0,0 +1,249 @@ +.g-case-carousel { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + padding-top: 0 !important; + padding-bottom: 0 !important; + + & h2 { + margin-top: 128px; + 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: ''; + background: var(--gray-7); + width: 100%; + height: 500px; + position: absolute; + bottom: 0px; + z-index: -1; + } + + & .background-section { + width: 100%; + background: var(--gray-7); + & .mono-logos { + display: flex; + justify-content: center; + max-width: 750px; + margin: 0 auto; + margin-top: 70px; + flex-wrap: wrap; + + & img { + max-height: 40px; + width: 33.33%; + padding: 0 30px; + margin: 24px 0px; + + @media (max-width: 800px) { + padding: 0 20px; + max-height: 28px; + } + } + } + } + + & .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-5); + } + } + + & .case-slide { + display: flex; + flex-wrap: wrap; + width: 100%; + background: var(--white); + padding: 64px; + box-shadow: 0px 8px 22px #dedede; + + @media (max-width: 800px) { + box-shadow: none; + border: 1px solid var(--gray-6); + 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 { + & h5 { + margin: 0; + } + + @media (max-width: 400px) { + & h5 { + font-size: 16px; + } + & p { + font-size: 15px; + } + } + } + } + + & .company-logo { + max-height: 40px; + max-width: 180px; + + @media (max-width: 800px) { + display: none; + } + } + + & .case { + color: var(--gray-5); + 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/enterprise-info/img/arrow.svg b/website/components/enterprise-info/img/arrow.svg new file mode 100644 index 000000000..2dcd4406c --- /dev/null +++ b/website/components/enterprise-info/img/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/components/enterprise-info/img/complexity-advanced.png b/website/components/enterprise-info/img/complexity-advanced.png new file mode 100644 index 0000000000000000000000000000000000000000..eeac1f3b967b761d4b9d8de5f6ee6fce4b749cbc GIT binary patch literal 5195 zcmd6rdpJ~k+sD~aa!9spN|IFb?mb(gBBz-|=zyILVlYZ#7Y)WCj8mxWiY6g6R1$46 z&Kk^e3Q0pbH9Ly*~GMP0}9@ zwo3BbcsbBU;Ued>%b}v8&rLj)7 zN2N--wts_mWPB{`Ev2N&QWRD$%1TM8jvu$SJbOcWZp7nr@*3EPK)@RC;-&`1swWlW$3E=@oN9tvs9A9sqamw(bj7O7|S!q#hkdqy6rJMAy zDK_x(*mbOc$aMCWuI?A(l6|X6UI5aJt!Fz6XAaq2usovtTwB#v5GeI-UGUd^g8t3g z@jP5U)`QmMS*jR3U_GrS@^Rc8(W|c|`_58sQF{OI98YNVu{C_Y;cO$qm7(Ah9r_1n ze>!>z1Ak1}WO|X^Bmcz${q4zsGYrVFTR8@+Ps=RXIhYh!-;oqxlOseH&a(cd*QLnt zzedsoG|C~Zm2a}^jcc-J%vYkdNa5YirVNgjqWD5lK0BD+(JeDtJu^FJaR~&I8Db<= zs;!A-(bUSeFoDxX;Em*~>n>gE{N<)cOvp7=lN+mp`#Ugs*E98R{lO7}SHSMCB(R!Q zbox&~>4PKFxGbrkGQg*viZx>AQElX%Xs!3Pd+&ubM*=-2MCRowSQ4vatiOL|7W^|u zh=Dh#pLWJ@EGl7H%(_%u>c#-pV_G`7({92}8ykb4eH^i?tUX)&#Bj6Zp2;8XhAvO2WkOpSz064}jlLi8G*FXt&s6#2_kgb#S4{Pm4aIbe&~a13tt4OI za8y1Q(KFKIypgK#&uXa+P+vV$j_2WB8#mDu6lo&mH1{hM<0$=rW#yh7n-M(*z5YoP zt7jS~m6x_w61_ zICl+EB6e6D1*5%D&gQ)aH4kn<>&PaDYmMKh_*;w*0&-3mBd>h=>IK3=sv6wyR(AP# zjgEW7GTEcxwQWV3^Z6YxQ~^7Y2YmU`RvR6fGv||>m5Jm{eq9@c!93-gVkc8|QT#xb zP!p;=%{+v1mLt6*Y_NER+M(XH@|pJc4%3iC4WQMJn>`_y!71%oRhQ_GKa_q!_Cva( zHhVT~>F_RXZr3|3=zq5u8TbjejuOTw#(fzra?wF-H0H#$=$)cIsy8QpE)9=+PPSnr zBJPVRw!>#6i)%t8+9yP8VbCuGzz_19gU{`>lD@U;#%29Hmt_l(K1BjysyZO3s`6iL zYK#@7(;NB?rz4bpKEGrZxmonMRB64kRCuhz=rM3&w$fZfF+FZR%Z~gUoZWa7BiLh> z_H~UgQx1*TAZiSce}X{*oQ4p6uh|3(=}mv{Xk#htE!dmWD#1*-{6#bAyKm9K&8W<8 z@;3<@?dGb3#ZP#&D4-|2gg7UoGx-Kd;Z&zjMDDe)pnfOJxttw~{#`;Q0{zW=VBmbT{__&*bfmB2L0TA$zgKm9(x5>vG6Ua+ zN6^K)`VFN2128`>2$(?Ni99m}l`vS2OZAE+PXG30+_x=jyS4qLe*C;_}&Uv{ll`ll7F47h`HGH)@mM%)!CK3$~7fHmFaq!QxgZgq~2BEDPNRsMmFp^DuMt`)mh zKDB^OB!VE-qC2^Zv(I&#Liv=c<-dQe10EXWlK0FH6mHm7gYPV4OX-Dp5%m5ec=_LH z-S3XETff1pczEh2;40{GB(mTZLXm2FRoV=vU;3|7eOBIC%zw$0-2_?=uWPn7y;80h zc(hQJp=z;gLQl7Yt?9upA$o3^-{}unQEI$nGNDd%MxkeHr(babuY_{KzQ_JT6@6lw zxrHGL%OwWq%#0BIW*+*O(tqiBaHaT9z?itMzKryG!}bw%%W2A$;)uv`;cF=rSDX5FOL< zqo9V{3cKU!so^XwBX~m?EAc=Br{?e54(>X)Fb3Ho`r&5hj4-DcWp97;tj5*S$C&>F zS|er&c(%9>>K@&kD!p>?+hc5{gET?~D-lb)lDNEkv~NRl&HnH+EY^~13tjdv?lywD z;Gn=*+sE-xwjAg53Z-oPye}*98~LW9tj1sCc=Ej~UwA9o89yeq$dnt3+4cW-d*0g| zj^3g&%hdjd=JAc!&&{N>$L8hoJ|Rmh&vq^@8VE!P#Cj(GFPK^>ZAI_YRWmZ_-cnwX z_Q~N`FOgeAv#rDt{PGm=afpp?I--y4Cz9Ph(}L|`Su?J&IXjnL(t=)~&E<4vuO3>O zsL)w(+js5xVh-^}{QG@#)n)f;J>nB)1jHP%_CNLw6L!d@9NW-ONv>$ci=frM8RSi< z@xz}1sU7^?wD%iW7QQS_(U;q|!ZAPLR+bHd`-9KDz@ix|Y9F?&H#11CNl#DDajy$i zGJ*U+eY@tzNKTPPXVeE*wC4swX+Hd>&ztI`VoAT}2^{t^!dd<~hg8~X+IE=tcTDw1 z=n-Is!f~Vf)asdf9Dl%FQ&$~I+{d^?JrsUH3Az)5vKvNz;o=n0}ni!?jjuW{g!hTz8vG zDv_xr%w29zSj%HL;VQhhV{$az7hncVw9~^ZT%@_dL9ZU1kTdG^IA#j5sHDKSME+I6 z<9e_Q+F?`!MkXT$$NOHTr&+Q^Pbavu+MmulPXre4rWYbqr;i*N#yP)qe0~t#=yB%@YWEdKr&%VmKyD7IgNS#3pa(6dMZ1k% znNS0)0a9USSyP&4I|I+QquyD!d)S_&vehuVho*~UucOhDb4b9+hX>H5xH8oM)y&|d zZ<5oYygb?jyN*SXSNqbA4Hh1^SIwS{gNifrA1ASIZe|8b6F1;&NUx}QE813P@JR@E zJ@rB!kt9aE>&Iy=>|L7y8|CcDkG9#DrOy?LbfX@d9D#^y%H6Cdsm*Bb_CI?D2DqNW z=@!k?T^}F^1ND7>v7t%wo0O$29HpXBr!Q5nN|0MhEX&nido?Wr1Ft&2hbU^Q>R-qayg4&ei#!%gs+d zc64AwicA~(`^BMpar6euQd?gx5tB3KjhP!7yCdi9Qg>+a|aDSpL$k{W}ofst@5 z0Fy=3!oTk2H`k$QBbvp!!O^k)Td`$$Wq#s35O8h^wc>0jmkoVW>!E~(tuV!jcRr9vE^cuxYIVNX2=h{Af;k&^D=kbk<-SxN>1-m%@k$S z{JB)^&Y0?Km>22h&B>gDW1>x zIuhSdcoiS{W_fGIM>kkPuHU_m3x7(WxHivG{H0zqNAsNzJ{nc<|-`>ClaIwwkSqp589wc}Do}z)A=ol` z@1d#mu(C#qS0X<>O}l(_`-?|Lu*}>A=qYO!yjjstE4sou=}My?f3%zDk}Eq0n!}DF zyVdZ%jw}fxAB$vK4phWHN-cPWVy}+5G^1k`brGUwO?Ktp+lU;W>6i;OP_Hou}FyQaK4hXb_amCpq{UG?U!YkG!C4T8+&RW*lBZ6cb z?yZS>{;oTBetBdcYc+{Y;NE%%I|lS9NuG$^7u;y{sBO^UE$c4dIVBSmD}kXTyxlW0 zz2(5CmyJ4xW#aa-aTPwv_zZsqH?5AxUDgO}4au|#;83PB1>)hPuFax`c zuGI|fvhus9*-Nf=`kr7NWMdugRF>!$+Zvre8oDiBBZFx#r2Um#7E%i`396Sdn9}5r zeCg`=>BM)>D8(d<8^lBCsUYBAl!Ts~l3)$JeqMbU`YEqLtY1nwh&l<>S6}8e`Fi`pg{b`21CSN{#b993z$JOLeVx<}~s+ zgp%6XFhS$z%Wk literal 0 HcmV?d00001 diff --git a/website/components/enterprise-info/img/complexity-basic.png b/website/components/enterprise-info/img/complexity-basic.png new file mode 100644 index 0000000000000000000000000000000000000000..9a35d60b14714f07b0030a0f6f24c547561053ef GIT binary patch literal 1478 zcmaKsdpy&77{`BWE}LA^IOI~flsc5lsq91;^I|WTp-$7>h9q5FlcQN>ER`Ig+@e(+ zb1!9S$zE02qi*y5V z8rl5peGqxjQ2Qj*QgaM&*^#V2FBaz1?`S9JIP@&c?i@9Oltf9c`i=Pc{bhYDCG51o z@$=f=)~d$G@Xn`X=GDS2OLAe+*H6}`bf9ENU;b%!Q=FnR@l6-z4Ppx!htX&ftEx^s zFwi||w7Tz0y!jwc(BboJ?{nq@Tw@?nUjJh9_$5ith_Z;!8A zw<~`Bvr<#Bg{mO+4RS{a6qjt(+ch?0@(J=*`LMSqs1et53)xjFcE}QNyLEKJE^d-; zAQnikVWLAlj`c^~_P8SogT6BG)?0(voA>5CN_-W(5+ygQog7qYy5H%XUu);`a0bFXythj|HtUPevg1oKFduZ&%(ZGlU+v8;;lHRfG$ zM7OU3PImZ6(}oja!;_8I`HsvGx%sPYIM5!IahedT24{+_USs=swfnR@sVx!`7v~-t z%%En17*-Gi7jejLv13LB%mp9ozDUY1Eaw{}Z?lK#NyT|j9&@)>6qS%2@*3#sS7YIp z`$`%Qvu#DXpSu}oiK#jAEFIraf3CaBs8oJb4dc&;JZ-N{BG_VX6k?P-t)!D14S6nC zEQC!&9sh46WtH?f0iru;j0F|#;n01m7Wh1b3Fi&E%V?;gf-PEvgT&E*=9{IaQ7xfN zY$*jBiF6&jS=kZyMC>?4B2NuicG7St5s92+ZT^u)uUJ61Dv81bbL%pq_=u8@be&m5 zs{swPL0LyrA93ccnAu-y^Ny#Edk{*nGCiyCBbmdl)ZS_)*5fVzYE)5bKXN|(gKW6~ zap_=sCALhZeeY1qhEI-SOcG=T|e^ymYP$E~R26M-dQm;6i? z(^mLNexdANEEk)Rl3A;J<|D0RJ-mG5U9n>)eqDy-Fyr^;aWI7!UfgjXM_EQY-31G5 zm(o2YhLFwm{@C&V%F>j@VOu*iR{)w6yO09D)ZKY$sRdP(3kVL>%Slb$N?lBRZBYYx zZt`(qY-WtZ9`--gnhS0Y zg+f_%adCOpW`aYq-IvEr>!LAZEK)Q@T8!iIB;o5?*{vLPaX%n#hwd6=yfd~oX^Bwf zY)qe5qfZ{6R#=#r0R7jrK56@T_KykEN*N6pRe!R#_mo0_ALIkKby^$A^I6-k?`g%kdv&qBYwh{zhMC@h5q5%P^M6b@`-;7;73gV2U%o%2 z4Hf!MSk%R7WW1BDH|L1eV_51t*#f1!W)_XnP?PIZ9ho<@p2|!h6ZJyH?LN{MBkedC zLyT*SCejX2U8Gfu=@8pA#*{+()Jphp#?X2nuU!yQZT9QlmUhn|3TiWKP@v2#q8Mui z`$?_?bvKE;3_qd@+r*&#&$P?P`Iq^o3d*3U<7p~j7l|x^oWCa;;}7PWNxxkH +
+

{title}

+ +
+
+ +
{itemOne.label}
+

{itemOne.title}

+ +

{itemOne.description}

+
+
+
+ +
+
+ +
{itemTwo.label}
+

{itemTwo.title}

+ +

{itemTwo.description}

+
+
+
+ + ) +} diff --git a/website/components/enterprise-info/nomad.jsx b/website/components/enterprise-info/nomad.jsx new file mode 100644 index 000000000..0e622ce67 --- /dev/null +++ b/website/components/enterprise-info/nomad.jsx @@ -0,0 +1,39 @@ +import EnterpriseInfo from './index.jsx' + +const technicalComplexity = { + title: 'Technical Complexity', + label: 'Open Source', + imageUrl: + 'https://www.datocms-assets.com/2885/1579883486-complexity-basic.png', + description: + 'Nomad Open Source addresses the technical complexity of workload orchestration across the cloud, on-prem, and hybrid infrastructure.', + link: { + text: 'View Open Source Features', + url: 'https://www.hashicorp.com/products/nomad/pricing/', + type: 'outbound' + } +} + +const organizationalComplexity = { + title: 'Organizational Complexity', + label: 'Enterprise', + imageUrl: + 'https://www.datocms-assets.com/2885/1579883488-complexity-advanced.png', + description: + 'Nomad Enterprise addresses the complexity of collaboration and governance across multi-team and multi-cluster deployments.', + link: { + text: 'View Enterprise Features', + url: 'https://www.hashicorp.com/products/nomad/pricing/', + type: 'outbound' + } +} + +export default function NomadEnterpriseInfo() { + return ( + + ) +} diff --git a/website/components/enterprise-info/style.css b/website/components/enterprise-info/style.css new file mode 100644 index 000000000..cb7ccf39a --- /dev/null +++ b/website/components/enterprise-info/style.css @@ -0,0 +1,92 @@ +.g-enterprise-info { + padding-top: 128px; + padding-bottom: 128px; + background: var(--gray-7); + + & h2 { + text-align: center; + } + + @media (max-width: 800px) { + padding-top: 64px; + padding-bottom: 64px; + } + + & .complexity-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/featured-slider-section/index.jsx b/website/components/featured-slider-section/index.jsx new file mode 100644 index 000000000..d8292dfb8 --- /dev/null +++ b/website/components/featured-slider-section/index.jsx @@ -0,0 +1,12 @@ +import FeaturedSlider from '../featured-slider' + +export default function FeaturedSliderSection({ heading, features }) { + return ( +
+
+

{heading}

+ +
+
+ ) +} diff --git a/website/components/featured-slider-section/style.css b/website/components/featured-slider-section/style.css new file mode 100644 index 000000000..42820cf8d --- /dev/null +++ b/website/components/featured-slider-section/style.css @@ -0,0 +1,12 @@ +.g-featured-slider-section { + background: var(--black); + padding-top: 128px; + padding-bottom: 128px; + color: var(--white); + + & h2 { + margin-top: 0px; + color: var(--white); + text-align: center; + } +} diff --git a/website/components/featured-slider/StatusBar.jsx b/website/components/featured-slider/StatusBar.jsx new file mode 100644 index 000000000..3eb388f11 --- /dev/null +++ b/website/components/featured-slider/StatusBar.jsx @@ -0,0 +1,16 @@ +import React from 'react' + +export default function StatusBar({ theme, active, timing, brand }) { + return ( +
+ +
+ ) +} diff --git a/website/components/featured-slider/index.jsx b/website/components/featured-slider/index.jsx new file mode 100644 index 000000000..cd55bbd54 --- /dev/null +++ b/website/components/featured-slider/index.jsx @@ -0,0 +1,221 @@ +import React, { Component } from 'react' +import StatusBar from './StatusBar' +import marked from 'marked' +import Button from '@hashicorp/react-button' +import Image from '@hashicorp/react-image' + +class FeaturedSlider extends Component { + constructor(props) { + super(props) + const timing = this.props.timing ? parseInt(this.props.timing) : 10 + this.state = { + active: 0, + timing: timing, + numFrames: this.props.features.length, + measure: true, + containerWidth: 0 + } + + this.frames = [] + + this.handleClick = this.handleClick.bind(this) + this.throttledResize = this.throttledResize.bind(this) + this.measureFrameSize = this.measureFrameSize.bind(this) + this.resetTimer = this.resetTimer.bind(this) + this.resizeTimeout = null + } + + componentDidMount() { + if (this.state.numFrames > 1) { + this.timer = setInterval(() => this.tick(), this.state.timing * 1000) + this.measureFrameSize() + } + window.addEventListener('resize', this.throttledResize, false) + } + + componentWillUnmount() { + clearInterval(this.timer) + window.removeEventListener('resize', this.throttledResize) + } + + componentDidUpdate(prevProps, prevState) { + if (this.props.features !== prevProps.features) { + if (this.props.features.length != prevState.numFrames) { + this.setState( + { + numFrames: this.props.features.length, + measure: true + }, + () => { + if (this.props.features.length === 1) { + clearInterval(this.timer) + window.removeEventListener('resize', this.throttledResize) + } + } + ) + } + if (prevState.active > this.props.features.length - 1) { + this.setState({ active: 0 }) + } + } + + if (this.props.timing && parseInt(this.props.timing) != prevState.timing) { + this.setState( + { + timing: parseInt(this.props.timing), + active: 0 + }, + this.resetTimer + ) + } + // If we're measuring on this update get the width + if (!prevState.measure && this.state.measure && this.state.numFrames > 1) { + this.measureFrameSize() + } + } + + resetTimer() { + clearInterval(this.timer) + this.timer = setInterval(() => this.tick(), this.state.timing * 1000) + } + + throttledResize() { + this.resizeTimeout && clearTimeout(this.resizeTimeout) + this.resizeTimeout = setTimeout(() => { + this.resizeTimeout = null + this.setState({ measure: true }) + }, 250) + } + + tick() { + const nextSlide = + this.state.active === this.state.numFrames - 1 ? 0 : this.state.active + 1 + this.setState({ active: nextSlide }) + } + + handleClick(i) { + if (i === this.state.active) return + this.setState({ active: i }, this.resetTimer) + } + + measureFrameSize() { + // All frames are the same size, so we measure the first one + if (this.frames[0]) { + const { width } = this.frames[0].getBoundingClientRect() + this.setState({ + frameSize: width, + containerWidth: width * this.state.numFrames, + measure: false + }) + } + } + + render() { + // Clear our frames array so we don't keep old refs around + this.frames = [] + const { theme, brand, features } = this.props + const { measure, active, timing, numFrames, containerWidth } = this.state + + const single = numFrames === 1 + + // Create inline styling for slide container + // If we're measuring, or have a single slide then no inline styles should be applied + const containerStyle = + measure || single + ? {} + : { + width: `${containerWidth}px`, + transform: `translateX(-${(containerWidth / numFrames) * active}px` + } + + // Create inline styling to apply to each frame + // If we're measuring or have a single slide then no inline styles should be applied + const frameStyle = + measure || single ? {} : { float: 'left', width: `${100 / numFrames}%` } + + return ( +
+ {!single && ( +
+ {features.map((feature, i) => ( +
this.handleClick(i)} + key={feature.logo.url} + > +
+ {feature.logo.alt} +
+ +
+ ))} +
+ )} +
+
+ {/* React pushes a null ref the first time, so we're filtering those out. */} + {/* see https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs */} + {features.map(feature => ( +
el && this.frames.push(el)} + key={feature.heading} + > +
+
+ + {feature.image.alt} + +
+
+ {single && ( +
+ {feature.logo.alt} +
+ )} +

+

+

+
+
+ ))} +
+
+
+ ) + } +} + +export default FeaturedSlider diff --git a/website/components/featured-slider/index.props.js b/website/components/featured-slider/index.props.js new file mode 100644 index 000000000..b8b13d264 --- /dev/null +++ b/website/components/featured-slider/index.props.js @@ -0,0 +1,41 @@ +import React from 'react' +import PropTypes from 'prop-types' +import FeaturedSlider from './dist/index.js' + +function FeaturedSliderProps(props) { + return +} + +FeaturedSliderProps.propTypes = { + theme: PropTypes.oneOf(['light', 'dark']), + brand: PropTypes.oneOf([ + 'hashicorp', + 'terraform', + 'vault', + 'consul', + 'nomad', + 'packer', + 'vagrant' + ]), + features: PropTypes.arrayOf( + PropTypes.shape({ + logo: PropTypes.shape({ + url: PropTypes.string, + alt: PropTypes.string + }), + image: PropTypes.shape({ + url: PropTypes.string, + alt: PropTypes.string + }), + heading: PropTypes.string, + content: PropTypes.string, + link: PropTypes.shape({ + text: PropTypes.string, + url: PropTypes.string, + type: PropTypes.oneOf(['anchor', 'inbound', 'outbound']) + }) + }) + ) +} + +export default FeaturedSliderProps diff --git a/website/components/featured-slider/style.css b/website/components/featured-slider/style.css new file mode 100644 index 000000000..5924b7d1f --- /dev/null +++ b/website/components/featured-slider/style.css @@ -0,0 +1,176 @@ +.g-featured-slider { + & .logo-bar-container { + display: flex; + padding: 32px 0; + align-items: center; + justify-content: center; + + & .logo-bar { + flex-basis: 33.333%; + cursor: pointer; + position: relative; + transition: transform 0.2s ease; + margin-right: 32px; + + &:last-child { + margin-right: 0; + } + + & .logo-container { + height: 84px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 24px; + + & picture, + & img { + object-fit: contain; + width: 100%; + height: 100%; + } + + @media (min-width: 768px) { + height: 92px; + padding: 32px; + } + } + + & .progress-bar { + width: 100%; + height: 2px; + display: block; + background-color: var(--DEPRECATED-gray-9); + + &.dark { + background-color: var(--DEPRECATED-gray-3); + } + + & span { + width: 0; + background-color: var(--brand); + height: 100%; + display: block; + animation-duration: 10s; + &.nomad { + background-color: var(--nomad); + } + &.consul { + background-color: var(--consul); + } + &.terraform { + background-color: var(--terraform); + } + &.active { + animation-name: case-study-bar; + animation-timing-function: linear; + } + } + } + + &:hover { + transform: translateY(-4px); + } + } + + /* When there are two case studies */ + &.double { + & .logo-bar { + flex-basis: 50%; + } + } + + @media (min-width: 768px) { + padding: 0 0 48px; + } + } + + & .feature-container { + overflow: hidden; + + & .slider-container { + transition: transform 400ms ease-out; + + & .slider-frame { + & .feature { + & .feature-image { + margin-bottom: 2rem; + + & img, + & picture { + width: 100%; + height: auto; + } + } + + & .feature-content { + text-align: center; + + & h3 { + margin: 0 0 8px; + } + + & .single-logo { + margin-bottom: 32px; + width: 100%; + height: 65px; + + & picture, + & img { + height: 100%; + width: auto; + } + } + + & .g-btn { + margin-top: 32px; + } + } + + @media (min-width: 768px) { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + + & .feature-image { + margin-bottom: 0; + flex-basis: 60%; + margin-right: 64px; + } + + & .feature-content { + flex-basis: 40%; + text-align: left; + + & p { + margin: 0; + + & + p { + margin-top: 1em; + } + } + } + } + } + + &.single { + & .case-study { + align-items: flex-start; + } + } + } + } + } +} + +@keyframes case-study-bar { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} diff --git a/website/components/features-list/index.jsx b/website/components/features-list/index.jsx new file mode 100644 index 000000000..8adbb4fba --- /dev/null +++ b/website/components/features-list/index.jsx @@ -0,0 +1,20 @@ +export default function FeaturesList({ title, items }) { + return ( +
+

{title}

+
+ {items.map(({ title, content, icon }) => ( +
+
+ {title} +
+
+

{title}

+

{content}

+
+
+ ))} +
+
+ ) +} diff --git a/website/components/features-list/style.css b/website/components/features-list/style.css new file mode 100644 index 000000000..d6c1b5f62 --- /dev/null +++ b/website/components/features-list/style.css @@ -0,0 +1,84 @@ +.g-features-list { + padding-top: 64px; + padding-bottom: 24px; + & h2 { + text-align: center; + margin-top: 0px; + margin-bottom: 64px; + } + + & .items-container { + display: flex; + flex-wrap: wrap; + + & .item { + border: 1px solid var(--gray-6); + flex-basis: calc(50% - 16px); + margin-bottom: 32px; + padding: 40px; + display: flex; + + @media (max-width: 468px) { + flex-direction: column; + } + + & h4 { + margin: 0; + margin-bottom: 8px; + } + + & p { + margin: 0; + } + + & .item-icon img { + width: 72px; + height: 72px; + margin-right: 32px; + + @media (max-width: 468px) { + margin-bottom: 18px; + } + } + + &:nth-child(odd) { + margin-right: 16px; + } + + &:nth-child(even) { + margin-left: 16px; + } + + @media (max-width: 1200px) { + padding: 32px; + & .item-icon img { + display: flex; + width: 50px; + height: 50px; + margin-right: 24px; + } + } + + @media (max-width: 991px) { + flex-basis: 100%; + padding: 32px; + margin-bottom: 36px; + + & .item-icon img { + display: flex; + width: 72px; + height: 72px; + margin-right: 24px; + } + + &:nth-child(odd) { + margin-right: 0px; + } + + &:nth-child(even) { + margin-left: 0px; + } + } + } + } +} diff --git a/website/components/homepage-hero/index.jsx b/website/components/homepage-hero/index.jsx new file mode 100644 index 000000000..58b8971d5 --- /dev/null +++ b/website/components/homepage-hero/index.jsx @@ -0,0 +1,33 @@ +import Button from '@hashicorp/react-button' + +export default function HomepageHero({ title, description, links }) { + return ( +
+
+

+ {title} +

+
+

+ {description} +

+
+ {links.map((link, index) => { + const brand = index === 0 ? 'nomad' : 'neutral' + const variant = index === 0 ? 'primary' : 'secondary' + return ( +
+
+
+
+ ) +} diff --git a/website/components/homepage-hero/style.css b/website/components/homepage-hero/style.css new file mode 100644 index 000000000..aa24387ac --- /dev/null +++ b/website/components/homepage-hero/style.css @@ -0,0 +1,40 @@ +.g-homepage-hero { + background-repeat: no-repeat; + background-color: var(--gray-7); + background-image: url(/img/nomad-hero-pattern.svg); + width: 100%; + background-size: cover; + background-position: center; + padding: 88px 0; + + @media (max-width: 758px) { + background-image: url(/img/pattern.svg); + } + + & h1 { + text-align: center; + white-space: pre-wrap; + } + + & p { + margin: 0 auto 0 auto; + text-align: center; + max-width: 40em; + } + + & .g-grid-container { + max-width: 700px; + } + + & .links { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: calc(32px - 8px); + margin-bottom: -8px; + + & a { + margin: 8px; + } + } +} diff --git a/website/components/learn-nomad/index.jsx b/website/components/learn-nomad/index.jsx new file mode 100644 index 000000000..c77f56e3e --- /dev/null +++ b/website/components/learn-nomad/index.jsx @@ -0,0 +1,58 @@ +import Button from '@hashicorp/react-button' + +export default function LearnNomad({ items }) { + return ( +
+
+
+
+
+

+ Learn the latest Nomad skills +

+
+
+ {items.map(item => { + return ( + +
+
+
{item.time}
+ {item.title} +
+
+
+ +

{item.title}

+
+
+
+ + ) + })} +
+
+
+ ) +} diff --git a/website/components/learn-nomad/style.css b/website/components/learn-nomad/style.css new file mode 100644 index 000000000..2a8f70359 --- /dev/null +++ b/website/components/learn-nomad/style.css @@ -0,0 +1,151 @@ +.g-learn-nomad { + padding-top: 88px; + padding-bottom: 88px; + background-image: url(/img/nomad-panel-learn.svg); + background-size: contain; + background-position: bottom right; + background-repeat: no-repeat; + + @media (max-width: 768px) { + padding-top: 64px; + padding-bottom: 64px; + } + + & .g-grid-container { + @media (max-width: 1200px) { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + & .mobile-button { + @media (min-width: 1201px) { + display: none; + } + } + } + + & .column-container { + display: flex; + justify-content: space-between; + margin: 0 36px; + + @media (max-width: 1200px) { + margin: 0 -16px; + flex-wrap: wrap; + } + + & .column-content { + & h2 { + @media (max-width: 1200px) { + margin: 0; + } + } + } + + & .desktop-button { + @media (max-width: 1200px) { + display: none; + } + } + + & > div { + display: flex; + flex-wrap: wrap; + align-items: center; + margin: 0 16px; + width: 33.333%; + overflow: auto; + + @media (max-width: 1200px) { + text-align: center; + display: block; + width: 100%; + margin: 0; + margin-bottom: 48px; + } + } + + & > a { + margin: 0 16px; + width: 33.333%; + transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s; + + &:hover { + box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12); + transform: translateY(-4px); + } + + @media (max-width: 1200px) { + width: calc(50% - 32px); + margin-bottom: 48px; + } + + @media (max-width: 768px) { + width: 100%; + + &:last-child { + margin-bottom: 48px; + } + } + } + + & > a { + display: flex; + cursor: pointer; + } + + & > a .course { + border: 1px solid var(--gray-6); + display: flex; + flex-direction: column; + width: 100%; + + & > div { + min-height: 200px; + padding: 25px; + } + + & .image { + background: var(--gray-7); + position: relative; + display: flex; + justify-content: center; + align-items: center; + + & img { + max-width: 80px; + max-height: 80px; + } + } + + & h4 { + color: var(--gray-2); + } + + & .time { + color: var(--gray-4); + position: absolute; + top: 10px; + right: 10px; + } + + & .content { + text-align: center; + background: #fff; + @media (max-width: 768px) { + display: flex; + justify-content: center; + align-items: center; + } + + & h4 { + margin: 24px 0px; + } + } + + & .content label { + color: var(--nomad); + } + } + } +} diff --git a/website/components/mega-nav/img/hashicorp-logo.svg b/website/components/mega-nav/img/hashicorp-logo.svg new file mode 100644 index 000000000..e420635de --- /dev/null +++ b/website/components/mega-nav/img/hashicorp-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/icon-angle.svg b/website/components/mega-nav/img/temporary_suite/icon-angle.svg new file mode 100644 index 000000000..be57f0f48 --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/icon-angle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-consul.svg b/website/components/mega-nav/img/temporary_suite/logo-consul.svg new file mode 100644 index 000000000..d86dd56fb --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-consul.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg b/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg new file mode 100644 index 000000000..14f72784e --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg b/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg new file mode 100644 index 000000000..66e0b9147 --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-nomad.svg b/website/components/mega-nav/img/temporary_suite/logo-nomad.svg new file mode 100644 index 000000000..77765cb6a --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-nomad.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-packer.svg b/website/components/mega-nav/img/temporary_suite/logo-packer.svg new file mode 100644 index 000000000..fad79eb5b --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-packer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-terraform.svg b/website/components/mega-nav/img/temporary_suite/logo-terraform.svg new file mode 100644 index 000000000..cb8bcf4df --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-terraform.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg b/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg new file mode 100644 index 000000000..f0b1ec3d1 --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/img/temporary_suite/logo-vault.svg b/website/components/mega-nav/img/temporary_suite/logo-vault.svg new file mode 100644 index 000000000..5c9ddce22 --- /dev/null +++ b/website/components/mega-nav/img/temporary_suite/logo-vault.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/components/mega-nav/index.jsx b/website/components/mega-nav/index.jsx new file mode 100644 index 000000000..6f40445ae --- /dev/null +++ b/website/components/mega-nav/index.jsx @@ -0,0 +1,16 @@ +import InlineSvg from '@hashicorp/react-inline-svg' +import hashicorpLogo from './img/hashicorp-logo.svg?include' +import TemporarySuite from './temporary_suite' + +export default function MegaNav({ product }) { + return ( +
+
+ + + + +
+
+ ) +} diff --git a/website/components/mega-nav/style.css b/website/components/mega-nav/style.css new file mode 100644 index 000000000..ee699e477 --- /dev/null +++ b/website/components/mega-nav/style.css @@ -0,0 +1,22 @@ +@import './temporary_suite.css'; + +.g-mega-nav { + background: black; + width: 100%; + height: 48px; + display: flex; + align-items: center; + + & .hashicorp-logo { + line-height: 0; + } + + & .g-nav-inner { + width: 100%; + padding-left: 32px; + padding-right: 32px; + display: flex; + justify-content: space-between; + align-items: center; + } +} diff --git a/website/components/mega-nav/temporary_suite.css b/website/components/mega-nav/temporary_suite.css new file mode 100644 index 000000000..4f7bb7ae2 --- /dev/null +++ b/website/components/mega-nav/temporary_suite.css @@ -0,0 +1,918 @@ +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox * { + font-size: 14px; + letter-spacing: 0; + line-height: 1.42857143; + margin-bottom: 0; + margin-top: 0; + text-transform: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h1, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h2, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h3, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h4, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h5, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h6 { + line-height: 1.1; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner { + background-color: black; + color: white; + font-family: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, + sans-serif; + font-size: 16px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner + > .container { + align-items: center; + display: flex; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner + .text-muted { + color: #a4b1b2; + font-family: metro-web; + font-weight: 500; + margin-right: 5px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-logo { + opacity: 1; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-logo:hover { + opacity: 0.7; + transition: opacity 0.25s ease-in-out; + -moz-transition: opacity 0.25s ease-in-out; + -webkit-transition: opacity 0.25s ease-in-out; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-logo + > img { + height: 25px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-item:first-child { + display: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-item:last-child { + margin-left: auto; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tagline { + align-items: center; + display: inline-flex; + margin-bottom: 0; + vertical-align: -1px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tagline + > img { + margin: 0 0.375em 0 0.5em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox .mega-nav { + display: inline-block; + font-family: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, + sans-serif; + font-size: 14px; + line-height: 1.35714; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h1, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h2, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h3, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h4, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h5, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + h6, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + ul, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + p { + margin-top: 0; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + img { + max-width: 100%; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox .mega-nav, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + * { + box-sizing: border-box; + transition: background-color 0.25s ease, border-color 0.25s ease, + color 0.25s ease, fill 0.25s ease, transform 0.25s ease, stroke 0.25s ease; +} +.mega-nav-tagline + + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav { + margin-left: 0.57143em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav + .visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-icon { + display: inline-block; + fill: currentColor; + height: 1em; + stroke: currentColor; + width: 1em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-icon-angle-right { + height: 0.8em; + transform: rotate(-90deg); + width: 0.8em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .open + > .mega-nav-ctrl + .mega-nav-icon-angle-right { + transform: rotate(0); +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl { + background-color: transparent; + border: 0; + margin-left: 0.5em; + padding: 0; + text-align: center; + vertical-align: middle; + cursor: pointer; + transition: opacity 0.25s ease; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl:hover { + opacity: 0.8; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl:active, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl:visited { + outline: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl + strong { + margin: 0 0.8em 0px 0.5em; + color: white; + font-family: klavika-web, sans-serif; + font-size: 0.9rem; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-ctrl-items { + align-items: center; + display: flex; + padding-top: 1px; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-icon-outline { + border: 1px solid; + margin-top: -1px; + padding: 0.5em; + color: white; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-icon-outline + .mega-nav-icon { + display: block; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-ct { + bottom: 0; + display: none; + left: 0; + overflow-y: auto; + position: fixed; + right: 0; + top: 0; + z-index: 1100; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav.open + .mega-nav-body-ct { + display: block; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body { + background-color: white; + box-shadow: 0 2px 16px rgba(79, 99, 122, 0.2); + color: black; + margin: 1em; + padding: 1em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-footer { + color: #a4b1b2; + display: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-footer + > :last-child { + margin-bottom: 0; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close { + background-color: transparent; + border: 1px solid currentColor; + float: right; + margin-left: 1em; + margin-bottom: 1em; + padding: 0.5em; + text-align: center; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close:focus { + color: #333333; + outline: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close:active { + outline: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close + .mega-nav-icon { + display: block; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h1 { + font-size: 1.28571em; + font-weight: bold; + margin-bottom: 0.11111em; + text-transform: uppercase; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h2 { + color: #a4b1b2; + font-size: 1.14286em; + font-weight: 500; + margin-bottom: 1.1875em; + text-transform: uppercase; + font-weight: 600; + font-family: metro-web, Metro; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h3 { + color: #a4b1b2; + font-size: 1em; + font-weight: 500; + margin-bottom: 0.5em; + text-transform: uppercase; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid { + list-style: none; + margin-bottom: 1em; + padding-left: 0; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid + > li { + display: flex; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item { + align-items: center; + border: 1px solid #d4dcdd; + display: flex; + margin-bottom: -1px; + min-height: 3.57143em; + padding: 0.28571em 0.71429em; + position: relative; + width: 100%; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item.is-active { + color: inherit; + text-decoration: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item.is-active { + border-color: #bfc6c7; + z-index: 1; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > b { + display: block; + font-size: 1.28571em; + font-weight: 600; + letter-spacing: -0.02em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul { + list-style: none; + margin-left: auto; + padding-left: 0; + text-align: right; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul + > li + + li { + margin-top: 0.28571em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant.is-active { + border-color: #1563ff; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer.is-active { + border-color: #1daeff; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform.is-active { + border-color: #5c4ee5; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault.is-active { + border-color: #000; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad.is-active { + border-color: #25ba81; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:focus, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul.is-active { + border-color: #c62a71; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-img { + margin-right: 0.67857em; + text-align: center; + width: 2em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-img + > img { + max-height: 2em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag { + background-color: white; + border: 1px solid currentColor; + color: #a4b1b2; + display: inline-block; + font-size: 0.85714em; + line-height: 1; + font-weight: 500; + padding: 0.16667em 0.25em; + text-transform: uppercase; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag:focus { + background-color: #949fa0; + border-color: #949fa0; + color: white; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-vagrant:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-vagrant:focus { + background-color: #1563ff; + border-color: #1563ff; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-packer:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-packer:focus { + background-color: #1daeff; + border-color: #1daeff; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-terraform:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-terraform:focus { + background-color: #5c4ee5; + border-color: #5c4ee5; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-vault:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-vault:focus { + background-color: #000; + border-color: #000; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-nomad:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-nomad:focus { + background-color: #25ba81; + border-color: #25ba81; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:hover + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:focus + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul.is-active + .mega-nav-tag, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-consul:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag-consul:focus { + background-color: #c62a71; + border-color: #c62a71; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn { + align-items: center; + background-color: #1563ff; + box-shadow: 3px 3px 0 rgba(21, 99, 255, 0.32); + display: inline-flex; + font-size: 1.07143em; + font-weight: 500; + line-height: 1; + margin-bottom: 1.26667em; + padding: 0.7em 1.07143em; + text-transform: uppercase; + width: 100%; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:focus { + color: white; + text-decoration: none; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:hover, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:focus { + background-color: #2c73ff; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn + > img:first-child { + margin-right: 0.63333em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn + > svg:last-child { + margin-left: 0.63333em; +} +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:hover + > .mega-nav-icon-angle-right:last-child, +.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn:focus + > .mega-nav-icon-angle-right:last-child { + transform: translateX(3px) rotate(-90deg); +} +@media (min-width: 570px) { + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn { + margin-bottom: 2.53333em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body { + padding: 2em 2em 1em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid { + display: flex; + flex-wrap: wrap; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(1) { + width: 100%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(2) { + width: 33.33333%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(3) { + width: 33.33333%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(4) { + width: 33.33333%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h1 { + font-size: 2em; + margin-bottom: 0.07143em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h2 { + font-size: 1.28571em; + margin-bottom: 1.05556em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h3 { + color: black; + font-size: 1.28571em; + font-weight: bold; + margin-bottom: 0.64286em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid { + border: 0; + display: flex; + margin-bottom: 2.71429em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid + > li { + flex-grow: 1; + margin-bottom: -1px; + margin-right: -1px; + width: calc(100% + 1px); + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item { + display: block; + border: 1px solid #d4dcdd; + margin-bottom: 0; + padding: 1.35714em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul { + text-align: center; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul { + display: flex; + justify-content: center; + margin-top: 1.35714em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul + > li + + li { + margin-left: 0.67857em; + margin-top: 0; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-img { + margin-right: 0; + width: auto; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-img + > img { + max-height: 4.71429em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-tag { + font-size: 1em; + padding: 0.14286em 0.21429em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn { + width: auto; + } +} +@media (min-width: 768px) { + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-banner-item:first-child { + display: flex; + align-items: center; + } +} +@media (min-width: 992px) { + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav { + position: relative; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav::before { + border-bottom: 1em solid white; + border-left: 0.71429em solid transparent; + border-right: 0.71429em solid transparent; + content: ' '; + display: none; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%); + width: 0; + z-index: 1101; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav.open::before { + display: block; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-btn { + margin-bottom: 1.26667em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-ct { + bottom: auto; + left: auto; + overflow: visible; + position: absolute; + right: 0; + top: 100%; + width: 940px; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body { + margin: 1em 0 0; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-header { + display: flex; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-header-item:last-child { + margin-left: auto; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-footer { + display: block; + padding-top: 1em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h2 { + margin-bottom: 2.11111em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid { + position: relative; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid::before { + background-color: #d4dcdd; + content: ' '; + height: 1px; + left: -2em; + margin-top: -0.78571em; + position: absolute; + right: -2em; + top: 100%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(1) { + width: 50%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(2) { + width: 16.66667%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(3) { + width: 16.66667%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-grid-item:nth-child(4) { + width: 16.66667%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-close { + display: none; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h3 { + padding-left: 1.05556em; + padding-top: 0.52778em; + position: relative; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-h3::before { + background-color: #d4dcdd; + content: ' '; + height: 1px; + left: 0; + position: absolute; + right: 0.67857em; + top: 0; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid { + margin-bottom: 2.42857em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item { + position: relative; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item::before { + background-color: #d4dcdd; + content: ' '; + height: 1px; + left: 0; + margin-top: 1.64286em; + position: absolute; + right: 0; + top: 100%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item.is-active::before { + background-color: #bfc6c7; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul { + left: 0; + margin-top: 0; + padding-top: 1em; + position: absolute; + right: 0; + top: 100%; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item + > ul + > li + + li { + margin-left: 1.14286em; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vagrant.is-active::before { + background-color: #1563ff; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-packer.is-active::before { + background-color: #1daeff; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-terraform.is-active::before { + background-color: #5c4ee5; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-vault.is-active::before { + background-color: #000; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-nomad.is-active::before { + background-color: #25ba81; + } + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:hover::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul:focus::before, + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-grid-item-consul.is-active::before { + background-color: #c62a71; + } +} +@media (min-width: 1200px) { + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox + .mega-nav-body-ct { + width: 1140px; + } +} diff --git a/website/components/mega-nav/temporary_suite.jsx b/website/components/mega-nav/temporary_suite.jsx new file mode 100644 index 000000000..d3bece080 --- /dev/null +++ b/website/components/mega-nav/temporary_suite.jsx @@ -0,0 +1,287 @@ +import React, { useState } from 'react' + +export default function TemporaryMegaNavSuite({ product }) { + const [open, setOpen] = useState(false) + + function activeProduct(name) { + return name.toLowerCase() === (product || '').toLowerCase() + ? 'is-active' + : '' + } + + return ( +
+ +
+
+
+

+ + {product + ? `Learn how ${product} fits into the` + : 'Learn more about the'} + +

+
+ +
+
+ +
+
+

+ Provision, Secure, Connect, and Run +

+

+ Any infrastructure for any application +

+
+ +
+ +
+

Seven elements of the modern Application Lifecycle

+
+
+
+
+
+
+
+
+ ) +} diff --git a/website/components/mini-cta/index.jsx b/website/components/mini-cta/index.jsx new file mode 100644 index 000000000..a1f1a95e9 --- /dev/null +++ b/website/components/mini-cta/index.jsx @@ -0,0 +1,23 @@ +import Button from '@hashicorp/react-button' + +export default function MiniCTA({ title, description, link }) { + return ( +
+
+
+
{title}
+ {description ?

{description}

: null} +
+
+ ) +} diff --git a/website/components/mini-cta/style.css b/website/components/mini-cta/style.css new file mode 100644 index 000000000..989864123 --- /dev/null +++ b/website/components/mini-cta/style.css @@ -0,0 +1,35 @@ +.g-mini-cta { + background: var(--gray-7); + text-align: center; + padding-bottom: 64px; + + & hr { + width: 64px; + color: var(--gray-5); + 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/subnav/img/carat.svg b/website/components/subnav/img/carat.svg deleted file mode 100644 index 3fb2ab403..000000000 --- a/website/components/subnav/img/carat.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/subnav/img/download.svg b/website/components/subnav/img/download.svg deleted file mode 100644 index 2160eee30..000000000 --- a/website/components/subnav/img/download.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/subnav/img/github.svg b/website/components/subnav/img/github.svg deleted file mode 100644 index 16be53114..000000000 --- a/website/components/subnav/img/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx index 2b4581015..d712b1ccb 100644 --- a/website/components/subnav/index.jsx +++ b/website/components/subnav/index.jsx @@ -1,203 +1,66 @@ -import React, { Component } from 'react' -import Link from 'next/link' -import LinkWrap from '@hashicorp/react-link-wrap' -import InlineSvg from '@hashicorp/react-inline-svg' -import caratIcon from './img/carat.svg?include' -import downloadIcon from './img/download.svg?include' -import githubIcon from './img/github.svg?include' +import Subnav from '@hashicorp/react-subnav' +import { useRouter } from 'next/router' -class ProductSubnav extends Component { - constructor(props) { - super(props) - - this.state = { - fixNav: true, - menuOpen: false - } - - this.toggleMenu = this.toggleMenu.bind(this) - this.openSubmenu = this.openSubmenu.bind(this) - this.closeSubmenu = this.closeSubmenu.bind(this) - } - - toggleMenu() { - this.setState({ menuOpen: !this.state.menuOpen }) - } - - openSubmenu(e) { - const dropdown = e.currentTarget.nextElementSibling - dropdown && dropdown.classList.add('open') - } - - closeSubmenu(e) { - e.currentTarget.parentElement.classList.remove('open') - } - - render() { - const { - rootUrl, - buttonText, - hideDownloadIcon, - buttonExternal, - links - } = this.props - const currentProduct = { - slug: 'nomad', - siteUrl: 'https://www.nomadproject.io', - downloadUrl: '/downloads', - githubUrl: 'https://github.com/hashicorp/nomad', - colorLogo: { - url: 'https://www.datocms-assets.com/2885/1537300284-nomad-color.svg', - alt: 'Nomad Logo' - } - } - - return ( -
-
-
- -
- - - -
-
-
-
    - {links.map(link => { - if (link.title === '|') - return
  • - return link.links ? ( -
  • - - {link.title} - - -
      -
    • - - Back - -
      • -
    • {link.title}
      • - {link.links.map(sublink => ( -
    • - - {sublink.title} - -
      • - ))} -
    -
    • - ) : ( -
  • - - {link.title} - -
    • - ) - })} -
-
- {currentProduct.githubUrl && ( - - GitHub - - )} - {currentProduct.downloadUrl && ( - - {!hideDownloadIcon && } - {buttonText || 'Download'} - - )} -
-
-
-
- {currentProduct.githubUrl && ( - - - - )} - {currentProduct.downloadUrl && ( - - {!hideDownloadIcon && } - {buttonText || 'Download'} - - )} -
-
-
-
- ) - } +export default function NomadSubnav() { + const router = useRouter() + return ( + + ) } - -// This function ensures that if the root url is the same as the link's url, -// we strip the root and resolve from a relative path, so as to not redirect -// from the local dev environment to production unexpectedly. -function resolveLocalUrl(rootUrl, url) { - const urlRegex = new RegExp(`^(?:http(?:s)*://)?(?:www.)?${rootUrl}`) - return url.replace(/\.html$/, '').replace(urlRegex, '') -} - -export default ProductSubnav diff --git a/website/components/subnav/style.css b/website/components/subnav/style.css deleted file mode 100644 index 1e3e63fb7..000000000 --- a/website/components/subnav/style.css +++ /dev/null @@ -1,542 +0,0 @@ -.g-product-subnav { - position: relative; - z-index: 75; - font-size: 0.875rem; - line-height: 1.25rem; - font-family: var(--font-body); - - @media (max-width: 1140px) { - height: 64px; - } - - @media (max-width: 767px) { - height: 54px; - } - - & .wrapper { - padding: 25px 0; - - @media (max-width: 1140px) { - background-color: var(--white); - padding: 0; - } - - &.fixed { - @media (max-width: 1140px) { - position: fixed; - top: 0; - left: 0; - width: 100%; - } - } - } - - & .g-container { - display: flex; - align-items: center; - height: 100%; - - @media (max-width: 1140px) { - justify-content: space-between; - height: 64px; - } - - @media (max-width: 767px) { - height: 54px; - } - } - - & .dropdown { - cursor: pointer; - - @media (min-width: 1140px) { - position: relative; - } - - &:hover ul { - @media (min-width: 1140px) { - visibility: visible; - opacity: 1; - } - } - - & ul { - display: flex; - flex-direction: column; - position: absolute; - top: 100%; - left: 0; - visibility: hidden; - opacity: 0; - list-style: none; - background: var(--white); - color: var(--DEPRECATED-gray-1); - box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08); - min-width: 180px; - margin: 0 0 0 -18px; - padding: 0; - border-radius: 2px; - z-index: 4; - } - } - - & .logo { - padding-bottom: 10px; - margin-bottom: -13px; - margin-right: 32px; - - @media (max-width: 1140px) { - margin-right: 0; - width: auto; - } - - & > a { - align-items: center; - color: var(--black); - display: flex; - - & > img { - width: 45px; - height: 45px; - - @media (max-width: 1140px) { - width: 30px; - height: 30px; - } - } - - & > svg { - margin-left: 10px; - - & path { - stroke: var(--DEPRECATED-gray-5); - } - - @media (max-width: 1140px) { - display: none; - } - } - } - - & h4 { - display: flex; - align-items: center; - font-family: var(--font-klavika); - font-size: 2.2rem; - margin: 0; - padding: 6px 0 6px 10px; - font-weight: var(--font-weight-bold); - - @media (max-width: 1140px) { - font-size: 1.8em; - } - } - } - - & .toggle { - display: none; - - @media (max-width: 1140px) { - align-items: center; - display: flex; - position: absolute; - right: 20px; - } - - &.center { - height: 100%; - justify-content: center; - left: 0; - position: absolute; - top: 0; - width: 100%; - - @media (max-width: 767px) { - position: relative; - } - } - - &.open svg { - transform: rotate(-180deg); - } - - & span { - cursor: pointer; - padding: 5px; - line-height: 0; - } - - & svg { - width: 14px; - height: 9px; - transition: 0.25s ease; - transition-property: transform; - } - - & path { - stroke: var(--highlight-color); - } - } - - & .links-wrapper { - background-color: var(--white); - margin-left: auto; - margin-right: 32px; - - @media (max-width: 1140px) { - position: absolute; - top: 100%; - left: 0; - height: 0; - overflow: hidden; - transition: 0.25s ease; - transition-property: height; - z-index: 4; - width: 100%; - } - - &.open { - @media (max-width: 1140px) { - overflow-y: visible; - height: 100vh; - } - } - } - - & .links { - display: flex; - font-weight: var(--font-weight-bold); - position: relative; - - @media (max-width: 1140px) { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - padding: 10px 24px; - overflow-x: hidden; - } - - & ul a, - & ul span { - color: inherit; - padding: 0 0 8px; - transition: 0.25s ease; - transition-property: border-bottom-color; - - @media (max-width: 1140px) { - display: block; - padding: 12px 0; - border-bottom: 1px solid var(--DEPRECATED-gray-9); - } - } - - & span { - @media (max-width: 1140px) { - display: flex; - justify-content: space-between; - align-items: center; - } - } - - & > ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - @media (max-width: 1140px) { - flex-direction: column; - justify-content: flex-start; - font-size: 1.125rem; - line-height: 1.75rem; - font-weight: normal; - } - - & + ul { - @media (min-width: 1140px) { - border-left: 1px solid var(--DEPRECATED-gray-8); - padding-left: 24px; - margin-left: 24px; - } - - @media (min-width: 1200px) { - padding-left: 32px; - margin-left: 32px; - } - } - - & > li { - margin-right: 35px; - - @media (max-width: 1140px) { - margin-right: 28px; - } - - @media (max-width: 1140px) { - margin-right: 0; - } - - &:last-child { - @media (min-width: 1140px) { - margin-right: 0; - } - } - - & > a, - & > span { - @media (min-width: 1140px) { - border-bottom: 2px solid transparent; - } - } - - & .selected, - & > a:hover { - @media (min-width: 1140px) { - border-bottom-color: var(--highlight-color); - } - } - } - } - - & .dropdown { - & > span > div { - margin: -2px 0 0 8px; - float: right; - - @media (max-width: 1140px) { - display: inline-block; - float: none; - margin: 0; - transform: rotate(-90deg); - width: 12px; - } - } - - & path { - stroke: var(--DEPRECATED-gray-6); - - @media (max-width: 1140px) { - stroke: var(--DEPRECATED-gray-1); - } - } - - & ul { - transition: 0.25s ease; - transition-property: left, opacity, visibility; - margin: 6px 0 0 -23px; - padding: 15px 29px 15px 24px; - - @media (max-width: 1140px) { - visibility: visible; - opacity: 1; - position: absolute; - top: 0; - bottom: 0; - left: 100%; - padding: 10px 24px; - margin: 0; - width: 100%; - box-shadow: none; - } - - &.open { - @media (max-width: 1140px) { - left: 0; - } - } - } - - & li { - @media (min-width: 1140px) { - margin: 9px 0; - } - - &.close, - &.name { - @media (min-width: 1140px) { - display: none; - } - } - - &.close { - & span { - justify-content: flex-start; - } - - & div { - display: inline-block; - } - - & svg { - margin: 2px 12px 3px 0; - transform: rotate(90deg); - } - } - - &.name { - border: none; - color: var(--DEPRECATED-gray-5); - font-weight: var(--font-weight-bold); - font-size: 0.75rem; - letter-spacing: 0.03125rem; - text-transform: uppercase; - padding: 24px 0 12px; - } - - & a, - & span { - white-space: nowrap; - - @media (min-width: 1140px) { - border: none; - } - - &:hover { - @media (min-width: 1140px) { - color: var(--DEPRECATED-gray-3); - } - } - } - } - } - } - - & .divider { - border-left: 1px solid #d2d4db; - width: 1px; - height: 100%; - } - - & .ctas-mobile, - & .ctas { - & .download, - & .github { - font-size: 0.875rem; - border-radius: 2px; - display: flex; - align-items: center; - - & > div { - line-height: 0; - } - } - - & .download { - color: var(--white); - border: none; - - & path { - fill: var(--white); - } - } - - & .github { - border: 1px solid var(--DEPRECATED-gray-8); - transition: 0.25s ease; - transition-property: transform; - color: inherit; - - & path { - fill: var(--DEPRECATED-gray-1); - } - } - } - - & .ctas { - display: flex; - - & .github { - padding: 7px; - height: 2.25rem; - width: 2.25rem; - - @media (max-width: 1140px) { - display: none; - } - - &:hover { - transform: translateY(-1px); - - & path { - fill: var(--DEPRECATED-gray-3); - } - } - } - - & .download { - margin-left: 16px; - padding: 10px 15px 10px 12px; - white-space: nowrap; - - &:hover { - @media (max-width: 1140px) { - color: var(--DEPRECATED-gray-5); - transform: none; - } - - &:after { - @media (max-width: 1140px) { - display: none; - } - } - } - - & div { - margin-right: 8px; - line-height: 0; - - @media (max-width: 767px) { - display: none; - } - } - - & path { - fill: var(--white); - } - - & span { - line-height: 1em; - } - } - } - - & .ctas-mobile { - margin: 56px 0 28px; - - @media (min-width: 1140px) { - display: none; - } - - & a { - display: flex; - align-items: center; - justify-content: center; - - & + a { - margin-top: 16px; - } - - &.github { - padding: 13px; - background: transparent; - - & > div { - line-height: 0; - } - } - - &.download { - padding: 14px; - } - - & svg { - margin-right: 8px; - } - } - } -} diff --git a/website/layouts/use-cases/index.jsx b/website/layouts/use-cases/index.jsx new file mode 100644 index 000000000..bb0f27c00 --- /dev/null +++ b/website/layouts/use-cases/index.jsx @@ -0,0 +1,49 @@ +import CallToAction from '@hashicorp/react-call-to-action' +import NomadEnterpriseInfo from '../../components/enterprise-info/nomad' +import BasicHero from '../../components/basic-hero' + +export default function UseCaseLayout({ title, description, children }) { + return ( +
+ +
+

Features

+
+ {children} + + +
+ ) +} diff --git a/website/layouts/use-cases/style.css b/website/layouts/use-cases/style.css new file mode 100644 index 000000000..24beb9f36 --- /dev/null +++ b/website/layouts/use-cases/style.css @@ -0,0 +1,40 @@ +#p-use-case { + & .features-header { + text-align: center; + margin-bottom: 0px; + } + + /* 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; + } + } + } + + & .with-border { + & .g-text-split { + & .children { + border-width: 1px; + border-color: rgba(174, 176, 183, 0.45); + border-style: solid; + } + } + } +} diff --git a/website/lib/polyfills.js b/website/lib/polyfills.js new file mode 100644 index 000000000..bc7e69b55 --- /dev/null +++ b/website/lib/polyfills.js @@ -0,0 +1,35 @@ +// If you run into issues with features missing in IE11, you likely need to +// make additions to this file for those features. +// See https://github.com/zloirock/core-js +import 'core-js/fn/array' +import 'core-js/fn/object/assign' +import 'core-js/fn/string/ends-with' +import 'core-js/fn/string/includes' +import 'core-js/fn/string/repeat' +import 'core-js/fn/string/starts-with' +import 'core-js/fn/symbol' + +/* NodeList.forEach */ +if (window.NodeList && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = Array.prototype.forEach +} + +/* Element.matches */ +if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector +} + +/* Element.closest */ +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this + + do { + if (el.matches(s)) return el + el = el.parentElement || el.parentNode + } while (el !== null && el.nodeType === 1) + return null + } +} diff --git a/website/package-lock.json b/website/package-lock.json index fd6946b0e..135a8e461 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -2853,6 +2853,27 @@ "slugify": "^1.3.6" } }, + "@hashicorp/react-call-to-action": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@hashicorp/react-call-to-action/-/react-call-to-action-0.1.2.tgz", + "integrity": "sha512-NQzDcZg3FgtAXPArNF5tnvfhp+WdI4wX/WrmLIbIm/PQu17NFKInqJc9QBZud6zqUVk4NJqFAX22Y0e+6Ae0Kw==", + "requires": { + "@hashicorp/react-button": "^2.1.5", + "@hashicorp/react-global-styles": "^4.0.9" + }, + "dependencies": { + "@hashicorp/react-button": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.1.5.tgz", + "integrity": "sha512-eE99jDgJMmK8B5z2VcC3qs4rBH+7OJi+vdCR1fdsCqFJOb3jw3mv1FsOT/Jd95q542usvGEOT9jeQqod9kVeVw==", + "requires": { + "@hashicorp/react-global-styles": "^4.0.9", + "@hashicorp/react-inline-svg": "^1.0.0", + "slugify": "^1.3.6" + } + } + } + }, "@hashicorp/react-case-study-slider": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@hashicorp/react-case-study-slider/-/react-case-study-slider-2.0.6.tgz", @@ -3022,6 +3043,31 @@ } } }, + "@hashicorp/react-subnav": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-subnav/-/react-subnav-1.1.0.tgz", + "integrity": "sha512-DWUbEHzsHzawe4LCRq34GKZyxRpX1hE/hFA7n+Fb3NNJrxDCh9zLwAaDG82PcxymipLupgFZsl+kQeEj2Et/jw==", + "requires": { + "@hashicorp/react-button": "^2.1.5", + "@hashicorp/react-global-styles": "^4.0.9", + "@hashicorp/react-inline-svg": "^1.0.0", + "@hashicorp/react-link-wrap": "0.0.3", + "@primer/octicons-react": "^9.4.0", + "isomorphic-unfetch": "^3.0.0" + }, + "dependencies": { + "@hashicorp/react-button": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.1.5.tgz", + "integrity": "sha512-eE99jDgJMmK8B5z2VcC3qs4rBH+7OJi+vdCR1fdsCqFJOb3jw3mv1FsOT/Jd95q542usvGEOT9jeQqod9kVeVw==", + "requires": { + "@hashicorp/react-global-styles": "^4.0.9", + "@hashicorp/react-inline-svg": "^1.0.0", + "slugify": "^1.3.6" + } + } + } + }, "@hashicorp/react-text-and-content": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@hashicorp/react-text-and-content/-/react-text-and-content-4.0.3.tgz", @@ -3042,6 +3088,58 @@ "uuid": "^3.3.2" } }, + "@hashicorp/react-text-split": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@hashicorp/react-text-split/-/react-text-split-0.2.2.tgz", + "integrity": "sha512-sIrQd+TWXwdDIHeSk3DUjGKFv0cJqvsL721NhFlHxHvRXHN3M5ZLfMx3blQPVgRSW9KYbmdmte/NcVZuMtsVnA==", + "requires": { + "@hashicorp/react-button": "^2.1.5", + "@hashicorp/react-global-styles": "^2.1.11-fonts.0" + }, + "dependencies": { + "@hashicorp/react-button": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.1.5.tgz", + "integrity": "sha512-eE99jDgJMmK8B5z2VcC3qs4rBH+7OJi+vdCR1fdsCqFJOb3jw3mv1FsOT/Jd95q542usvGEOT9jeQqod9kVeVw==", + "requires": { + "@hashicorp/react-global-styles": "^4.0.9", + "@hashicorp/react-inline-svg": "^1.0.0", + "slugify": "^1.3.6" + }, + "dependencies": { + "@hashicorp/react-global-styles": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.0.9.tgz", + "integrity": "sha512-2I5cgGrn34rBsmcoku4Wbu9qq/WramrYn8r9brMVNfHqvnJojORfIr0uMBEheh3ic9fZiN7XtnbovYcqt4Oy2g==" + } + } + }, + "@hashicorp/react-global-styles": { + "version": "2.1.11-fonts.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-2.1.11-fonts.0.tgz", + "integrity": "sha512-Esy8CYsqTtYsEDWYaS3G8XTOl0HwzvYJZLtmSbcLwxYcK3hntNO4Sfko7y5hLWNNxN8CN0Gm/QujKlMnK7LmnQ==" + } + } + }, + "@hashicorp/react-text-split-with-code": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@hashicorp/react-text-split-with-code/-/react-text-split-with-code-0.0.3.tgz", + "integrity": "sha512-btzR51R+LHmPQ/U/jaeZ77z6Hok/JOtJV3YlyG3cw4fw4n1j1om4BT5NnkvNsbs9ryXJY8M+68xlm30hAmXyKQ==", + "requires": { + "@hashicorp/react-code-block": "^1.2.4", + "@hashicorp/react-global-styles": "^4.0.9", + "@hashicorp/react-text-split": "^0.2.2" + } + }, + "@hashicorp/react-text-split-with-image": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@hashicorp/react-text-split-with-image/-/react-text-split-with-image-1.2.2.tgz", + "integrity": "sha512-olux2MWfb9wMyD3ooRcCU1JXScnP9A9aERT/gYQTnurVMCJs0miLwuoyf2YycX2A8gWde3ks2yVoiwdlFiXYDA==", + "requires": { + "@hashicorp/react-image": "^2.0.0", + "@hashicorp/react-text-split": "^0.2.2" + } + }, "@hashicorp/react-toggle": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@hashicorp/react-toggle/-/react-toggle-1.0.1.tgz", @@ -3346,6 +3444,14 @@ "fastq": "^1.6.0" } }, + "@primer/octicons-react": { + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-9.4.0.tgz", + "integrity": "sha512-TAPjzQaIrPqI5TpxNKkBTxS7b8Y1v7iMuiN5ZshhSp9GHbdymWKtCXRDk13lo6woDeSn/8tIdZTSerTR3c0bQA==", + "requires": { + "prop-types": "^15.6.1" + } + }, "@samverschueren/stream-to-observable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", @@ -6565,6 +6671,11 @@ "css-tree": "1.0.0-alpha.37" } }, + "csstype": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz", + "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -6587,6 +6698,16 @@ "type": "^1.0.1" } }, + "d3-ease": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz", + "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ==" + }, + "d3-timer": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz", + "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==" + }, "damerau-levenshtein": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz", @@ -7580,6 +7701,11 @@ } } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -10104,6 +10230,14 @@ "object.assign": "^4.1.0" } }, + "kapellmeister": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/kapellmeister/-/kapellmeister-3.0.1.tgz", + "integrity": "sha512-S7+gYcziMREv8RxG46138mb1O4Xf9II/bCxEJPYkhlZ7PgGWTlicgsyNad/DGc5oEAlWGLXE5ExLbTDVvJmgDA==", + "requires": { + "d3-timer": "^1.0.9" + } + }, "keyv": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", @@ -11894,6 +12028,18 @@ "boolbase": "~1.0.0" } }, + "nuka-carousel": { + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/nuka-carousel/-/nuka-carousel-4.6.3.tgz", + "integrity": "sha512-w/ZYZhA1pHyL+yu0sYtpPqwKxJ27TIwK6wHmyJ2XnH9pahHMTEd05Wy3zg0FewNbCD5F79oX5lQiP8hMRDDTfA==", + "requires": { + "csstype": "^2.6.6", + "d3-ease": "^1.0.3", + "exenv": "^1.2.0", + "prop-types": "^15.6.0", + "react-move": "^5.0.0" + } + }, "nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -14999,6 +15145,14 @@ "@apollo/react-ssr": "^3.1.3" } }, + "react-device-detect": { + "version": "1.11.14", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.11.14.tgz", + "integrity": "sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==", + "requires": { + "ua-parser-js": "^0.7.20" + } + }, "react-dom": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", @@ -15025,6 +15179,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-move": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-move/-/react-move-5.2.1.tgz", + "integrity": "sha512-2If8uw9jJUQC8KxT1V1bJJ9amDvbHM4zCT42UekmP9KKrkf6elbc1PsXmPprfMjd20PkejtKnvs9T/TTXmTymA==", + "requires": { + "@babel/runtime": "^7.3.4", + "kapellmeister": "^3.0.1", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "react-reconciler": { "version": "0.24.0", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.24.0.tgz", @@ -17952,8 +18122,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -17971,13 +18140,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -17990,18 +18157,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -18104,8 +18268,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -18115,7 +18278,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -18128,20 +18290,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -18158,7 +18317,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -18239,8 +18397,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -18250,7 +18407,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -18326,8 +18482,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -18357,7 +18512,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -18375,7 +18529,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -18414,13 +18567,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, diff --git a/website/package.json b/website/package.json index 8d721291b..6c6841ff1 100644 --- a/website/package.json +++ b/website/package.json @@ -11,6 +11,7 @@ "@hashicorp/react-button": "^2.1.5", "@hashicorp/react-case-study-slider": "^2.0.6", "@hashicorp/react-consent-manager": "^2.0.5", + "@hashicorp/react-call-to-action": "^0.1.2", "@hashicorp/react-content": "^2.2.0", "@hashicorp/react-docs-sidenav": "^3.0.2", "@hashicorp/react-docs-sitemap": "^1.0.0", @@ -23,6 +24,10 @@ "@hashicorp/react-product-downloader": "^2.5.1", "@hashicorp/react-section-header": "^2.0.0", "@hashicorp/react-text-and-content": "^4.0.3", + "@hashicorp/react-subnav": "^1.1.0", + "@hashicorp/react-text-split": "^0.2.2", + "@hashicorp/react-text-split-with-code": "0.0.3", + "@hashicorp/react-text-split-with-image": "^1.2.2", "@hashicorp/react-use-cases": "^1.0.4", "@hashicorp/react-vertical-text-block-list": "^2.0.1", "babel-plugin-import-glob-array": "^0.2.0", @@ -34,7 +39,9 @@ "marked": "^0.7.0", "next": "9.2.1", "nprogress": "^0.2.0", + "nuka-carousel": "^4.6.3", "react": "^16.12.0", + "react-device-detect": "^1.11.14", "react-dom": "^16.12.0", "slugify": "^1.3.6", "stringify-object": "^3.3.0" diff --git a/website/pages/_app.js b/website/pages/_app.js index 51e3eb7b1..c9c98012c 100644 --- a/website/pages/_app.js +++ b/website/pages/_app.js @@ -4,7 +4,7 @@ import NProgress from 'nprogress' import Router from 'next/router' import DefaultHeadTags from '../components/default-head-tags' import ProductSubnav from '../components/subnav' -import MegaNav from '@hashicorp/react-mega-nav' +import MegaNav from '../components/mega-nav' import Footer from '@hashicorp/react-footer' import { ConsentManager, open } from '@hashicorp/react-consent-manager' import consentManagerConfig from '../lib/consent-manager-config' @@ -46,11 +46,7 @@ class NextApp extends App { - +