From 3bd008a118aa17d8ffb01e37d39097de072e2da5 Mon Sep 17 00:00:00 2001 From: Brandon Romano Date: Wed, 23 Sep 2020 12:50:02 -0700 Subject: [PATCH] Website Skinning for Beta Preview (#414) * Removes meganav * Adds base product theming * Adds a homepage hero * Removes community section * Clean up footer --- website/components/footer/style.css | 1 + website/components/homepage-hero/index.jsx | 35 +++++++++++ .../components/homepage-hero/style.module.css | 62 +++++++++++++++++++ website/components/subnav/index.jsx | 4 +- website/data/navigation.js | 5 -- website/pages/_app.js | 3 - website/pages/community/index.jsx | 41 ------------ website/pages/community/style.css | 8 --- website/pages/home/index.jsx | 23 ++++++- website/pages/style.css | 45 +++++++++++++- website/public/img/hero-pattern.svg | 1 + 11 files changed, 166 insertions(+), 62 deletions(-) create mode 100644 website/components/homepage-hero/index.jsx create mode 100644 website/components/homepage-hero/style.module.css delete mode 100644 website/pages/community/index.jsx delete mode 100644 website/pages/community/style.css create mode 100644 website/public/img/hero-pattern.svg diff --git a/website/components/footer/style.css b/website/components/footer/style.css index bd11930e6..7d7263289 100644 --- a/website/components/footer/style.css +++ b/website/components/footer/style.css @@ -2,6 +2,7 @@ padding: 25px 0 17px 0; flex-shrink: 0; display: flex; + border-top: 1px solid var(--gray-6); & .g-container { display: flex; diff --git a/website/components/homepage-hero/index.jsx b/website/components/homepage-hero/index.jsx new file mode 100644 index 000000000..289bb6cf6 --- /dev/null +++ b/website/components/homepage-hero/index.jsx @@ -0,0 +1,35 @@ +import s from './style.module.css' +import Button from '@hashicorp/react-button' + +export default function HomepageHero({ title, description, links }) { + return ( +
+
+ + Welcome to the INTERNAL BETA for + HashiCorp Boundary! This is a confidential internal only beta. No + details should be shared externally. + +

{title}

+
+

{description}

+
+ {links.map((link, index) => { + const brand = index === 0 ? 'hashicorp' : 'neutral' + const variant = index === 0 ? 'primary' : 'secondary' + return ( +
+
+
+
+ ) +} diff --git a/website/components/homepage-hero/style.module.css b/website/components/homepage-hero/style.module.css new file mode 100644 index 000000000..3b1f45fe3 --- /dev/null +++ b/website/components/homepage-hero/style.module.css @@ -0,0 +1,62 @@ +.root { + /* 100% height - nav - footer */ + min-height: calc(100vh - (64px + 77px)); + width: 100%; + padding: 150px 0; + background-repeat: no-repeat; + background-color: var(--gray-7); + background-image: url(/img/hero-pattern.svg); + background-size: contain; + + @media (max-width: 758px) { + padding: 64px 0; + } + + & .eyebrow { + font-family: var(--font-body); + text-align: center; + display: block; + font-weight: var(--font-weight-bold); + font-size: 1.1rem; + + & .red { + color: #ba2226; + } + } + + @media (max-width: 758px) { + background-image: url(/img/mobile-hero-pattern.svg); + } + + & h1 { + text-align: center; + white-space: pre-wrap; + } + + & p { + margin: 0 auto 0 auto; + text-align: center; + max-width: 40em; + } + + & :global(.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; + + &:global(.variant-primary) { + border-color: var(--boundary); + background-color: var(--boundary); + } + } + } +} diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx index e2f09fe69..9b977cb38 100644 --- a/website/components/subnav/index.jsx +++ b/website/components/subnav/index.jsx @@ -8,7 +8,7 @@ export default function ProductSubnav() { return ( -
diff --git a/website/pages/community/index.jsx b/website/pages/community/index.jsx deleted file mode 100644 index 2441a1589..000000000 --- a/website/pages/community/index.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list' -import SectionHeader from '@hashicorp/react-section-header' -import Head from 'next/head' -import { productName, productSlug } from 'data/metadata' - -export default function CommunityPage() { - return ( -
- - Community | {productName} by HashiCorp - - - -
- ) -} diff --git a/website/pages/community/style.css b/website/pages/community/style.css deleted file mode 100644 index 6ec5efb6a..000000000 --- a/website/pages/community/style.css +++ /dev/null @@ -1,8 +0,0 @@ -#p-community { - max-width: var(--site-max-width); - margin: 72px auto; - - & .g-section-header { - margin-bottom: 100px; - } -} diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index 2664624db..eb09fc964 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -1,3 +1,24 @@ +import HomepageHero from 'components/homepage-hero' + export default function HomePage() { - return

Home page template

+ return ( +
+ +
+ ) } diff --git a/website/pages/style.css b/website/pages/style.css index dce5b7290..a80e8643a 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -25,7 +25,6 @@ /* Local Pages */ @import './downloads/style.css'; -@import './community/style.css'; @import './home/style.css'; /* Print Styles */ @@ -55,7 +54,10 @@ /* Sticky Footer */ .content { - min-height: calc(100vh - 260px); + overflow-y: auto; + + /* 100% height - nav - footer */ + min-height: calc(100vh - (64px + 77px)); } /* Web Fonts */ @@ -141,3 +143,42 @@ font-style: normal; font-weight: 400; } + +/* + * TODO, eventually remove: + * Temporary Boundary Branding + */ +:root { + --boundary: #f04e54; +} +.g-docs-sidenav { + --highlight-color: var(--boundary); +} + +.g-subnav { + & a.variant-primary { + border-color: var(--boundary); + background-color: var(--boundary); + } + & .g-subnav-inner { + & .style-menu-item { + & .text::after { + background: var(--boundary); + } + } + } +} + +.g-content { + --highlight-color: var(--boundary); +} + +.g-vertical-text-block-list { + & .list { + & .body-text { + & a { + color: var(--boundary) !important; + } + } + } +} diff --git a/website/public/img/hero-pattern.svg b/website/public/img/hero-pattern.svg new file mode 100644 index 000000000..01b6103b8 --- /dev/null +++ b/website/public/img/hero-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file