Website Skinning for Beta Preview (#414)
* Removes meganav * Adds base product theming * Adds a homepage hero * Removes community section * Clean up footer
This commit is contained in:
Brandon Romano authored and 
GitHub committed
1 parent
d7731d0ce7
commit
3bd008a118
11 files changed
+166
-62
No files matched your search
@@ -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;
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import s from './style.module.css'
|
||||
import Button from '@hashicorp/react-button'
|
||||
|
||||
export default function HomepageHero({ title, description, links }) {
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div className="g-grid-container">
|
||||
<span className={s.eyebrow}>
|
||||
Welcome to the <span className={s.red}>INTERNAL BETA</span> for
|
||||
HashiCorp Boundary! This is a confidential internal only beta. No
|
||||
details should be shared externally.
|
||||
</span>
|
||||
<h1 className="g-type-display-1">{title}</h1>
|
||||
<div className={s.contentAndLinks}>
|
||||
<p className="g-type-body-large">{description}</p>
|
||||
<div className={s.links}>
|
||||
{links.map((link, index) => {
|
||||
const brand = index === 0 ? 'hashicorp' : 'neutral'
|
||||
const variant = index === 0 ? 'primary' : 'secondary'
|
||||
return (
|
||||
<Button
|
||||
key={link.text}
|
||||
title={link.text}
|
||||
linkType={link.type}
|
||||
url={link.url}
|
||||
theme={{ variant, brand }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@ export default function ProductSubnav() {
|
||||
return (
|
||||
<Subnav
|
||||
titleLink={{
|
||||
text: productSlug,
|
||||
text: 'Boundary',
|
||||
url: '/',
|
||||
}}
|
||||
ctaLinks={[
|
||||
@@ -16,7 +16,7 @@ export default function ProductSubnav() {
|
||||
text: 'GitHub',
|
||||
url: `https://www.github.com/hashicorp/${productSlug}`,
|
||||
},
|
||||
{ text: 'Download', url: '/downloads' },
|
||||
{ text: 'Download', url: '#' },
|
||||
]}
|
||||
currentPath={router.pathname}
|
||||
menuItemsAlign="right"
|
||||
|
||||
@@ -4,9 +4,4 @@ export default [
|
||||
url: '/docs',
|
||||
type: 'inbound',
|
||||
},
|
||||
{
|
||||
text: 'Community',
|
||||
url: '/community',
|
||||
type: 'inbound',
|
||||
},
|
||||
]
|
||||
@@ -1,6 +1,5 @@
|
||||
import './style.css'
|
||||
import '@hashicorp/nextjs-scripts/lib/nprogress/style.css'
|
||||
|
||||
import NProgress from '@hashicorp/nextjs-scripts/lib/nprogress'
|
||||
import createConsentManager from '@hashicorp/nextjs-scripts/lib/consent-manager'
|
||||
import useAnchorLinkAnalytics from '@hashicorp/nextjs-scripts/lib/anchor-link-analytics'
|
||||
@@ -8,7 +7,6 @@ import Router from 'next/router'
|
||||
import HashiHead from '@hashicorp/react-head'
|
||||
import Head from 'next/head'
|
||||
import { ErrorBoundary } from '@hashicorp/nextjs-scripts/lib/bugsnag'
|
||||
import MegaNav from '@hashicorp/react-mega-nav'
|
||||
import ProductSubnav from '../components/subnav'
|
||||
import Footer from 'components/footer'
|
||||
import Error from './_error'
|
||||
@@ -50,7 +48,6 @@ function App({ Component, pageProps }) {
|
||||
{ href: '/fonts/dejavu/mono.woff2', as: 'font' },
|
||||
]}
|
||||
/>
|
||||
<MegaNav product={productName} />
|
||||
<ProductSubnav />
|
||||
<div className="content">
|
||||
<Component {...pageProps} />
|
||||
|
||||
@@ -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 (
|
||||
<div id="p-community">
|
||||
<Head>
|
||||
<title key="title">Community | {productName} by HashiCorp</title>
|
||||
</Head>
|
||||
<SectionHeader
|
||||
headline="Community"
|
||||
description={`${productName} is an open source project with a growing community. There are active, dedicated users willing to help you through various mediums.`}
|
||||
use_h1={true}
|
||||
/>
|
||||
<VerticalTextBlockList
|
||||
data={[
|
||||
{
|
||||
header: 'IRC',
|
||||
body: `#${productSlug} on freenode`,
|
||||
},
|
||||
{
|
||||
header: 'Announcement List',
|
||||
body:
|
||||
'[HashiCorp Announcement Google Group](https://groups.google.com/group/hashicorp-announce)',
|
||||
},
|
||||
{
|
||||
header: 'Bug Tracker',
|
||||
body: `[Issue tracker on GitHub](https://github.com/hashicorp/${productSlug}/issues). Please only use this for reporting bugs. Do not ask for general help here. Use IRC or the mailing list for that.`,
|
||||
},
|
||||
{
|
||||
header: 'Training',
|
||||
body:
|
||||
'Paid [HashiCorp training courses](https://www.hashicorp.com/training) are also available in a city near you. Private training courses are also available.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
#p-community {
|
||||
max-width: var(--site-max-width);
|
||||
margin: 72px auto;
|
||||
|
||||
& .g-section-header {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,24 @@
|
||||
import HomepageHero from 'components/homepage-hero'
|
||||
|
||||
export default function HomePage() {
|
||||
return <p className="g-grid-container">Home page template</p>
|
||||
return (
|
||||
<div className="p-home">
|
||||
<HomepageHero
|
||||
title="Identity-based secure access management"
|
||||
description="Access any system from anywhere based on user identity."
|
||||
links={[
|
||||
{
|
||||
text: 'Download',
|
||||
url: '#',
|
||||
type: 'download',
|
||||
},
|
||||
{
|
||||
text: 'Get Started',
|
||||
url: '/docs/introduction',
|
||||
type: 'inbound',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+43
-2
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="1600" height="509" viewBox="0 0 1600 509" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="0" y="0" width="1600" height="509"><path fill="#00BC7F" d="M0 0h1600v509H0z"/></mask><g mask="url(#a)"><g opacity=".75"><path opacity=".8" d="M1363.61 182.572c-.24 0-.4-.08-.48-.321-.16-.321-.08-.641.24-.802l18.68-10.823c.32-.161.64-.08.8.24.16.321.08.642-.24.802l-18.67 10.824c-.09.08-.17.08-.33.08z" fill="url(#paint0_linear)"/><path opacity=".9" d="M1382.37 171.828c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.823c.32-.161.64-.081.8.24.16.321.08.642-.24.802l-18.68 10.823c-.16 0-.24.08-.32.08z" fill="url(#paint1_linear)"/><path opacity=".6" d="M1401.05 182.572c-.24 0-.4-.08-.48-.321-.16-.321-.08-.641.24-.802l18.67-10.823c.32-.161.65-.08.81.24.16.321.08.642-.24.802l-18.68 10.824c-.16.08-.24.08-.32.08z" fill="url(#paint2_linear)"/><path opacity=".6" d="M1401.05 161.005c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.67-10.824c.32-.16.65-.08.81.241.16.321.08.641-.24.802l-18.68 10.823c-.16.08-.24.08-.32.08z" fill="url(#paint3_linear)"/><path opacity=".4" d="M1288.91 225.785c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.67-10.824c.32-.16.65-.08.81.241.16.32.08.641-.24.801l-18.68 10.824c-.16 0-.24.08-.32.08z" fill="url(#paint4_linear)"/><path opacity=".5" d="M1307.58 214.961c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.823c.32-.161.64-.08.8.24.16.321.08.642-.24.802l-18.67 10.823c-.09.08-.25.08-.33.08z" fill="url(#paint5_linear)"/><path opacity=".6" d="M1326.26 225.785c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.68-10.824c.32-.16.64-.08.8.241.16.32.08.641-.24.801l-18.68 10.824c-.08 0-.24.08-.32.08z" fill="url(#paint6_linear)"/><path opacity=".6" d="M1326.26 204.138c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.824c.32-.16.64-.08.8.241.16.321.08.641-.24.802l-18.68 10.823c-.08.08-.24.08-.32.08z" fill="url(#paint7_linear)"/><path opacity=".7" d="M1344.94 214.961c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.67-10.823c.32-.161.65-.08.81.24.16.321.08.642-.24.802l-18.68 10.823c-.08.08-.16.08-.32.08z" fill="url(#paint8_linear)"/><path opacity=".8" d="M1363.61 225.785c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.68-10.824c.32-.16.64-.08.8.241.16.32.08.641-.24.801l-18.67 10.824c-.09 0-.17.08-.33.08z" fill="url(#paint9_linear)"/><path opacity=".7" d="M1344.94 193.395c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.67-10.824c.32-.16.65-.08.81.241.16.321.08.641-.24.802l-18.68 10.823c-.08 0-.16.08-.32.08z" fill="url(#paint10_linear)"/><path opacity=".8" d="M1363.61 204.138c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.824c.32-.16.64-.08.8.241.16.321.08.641-.24.802l-18.67 10.823c-.09.08-.17.08-.33.08z" fill="url(#paint11_linear)"/><path opacity=".9" d="M1382.37 214.961c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.823c.32-.161.64-.08.8.24.16.321.08.642-.24.802l-18.68 10.823c-.16.08-.24.08-.32.08z" fill="url(#paint12_linear)"/><path opacity=".6" d="M1401.05 225.785c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.67-10.824c.32-.16.65-.08.81.241.16.32.08.641-.24.801l-18.68 10.824c-.16 0-.24.08-.32.08z" fill="url(#paint13_linear)"/><path opacity=".9" d="M1382.37 193.395c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.68-10.824c.32-.16.64-.08.8.241.16.321.08.641-.24.802l-18.68 10.823c-.16 0-.24.08-.32.08z" fill="url(#paint14_linear)"/><path opacity=".6" d="M1401.05 204.138c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.67-10.824c.32-.16.65-.08.81.241.16.321.08.641-.24.802l-18.68 10.823c-.16.08-.24.08-.32.08z" fill="url(#paint15_linear)"/><path opacity=".1" d="M1232.8 258.095c-.24 0-.4-.081-.48-.321-.16-.321-.08-.641.24-.802l18.67-10.823c.32-.161.65-.08.81.24.16.321.08.642-.24.802l-18.68 10.823c-.08.081-.16.081-.32.081z" fill="url(#paint16_linear)"/><path opacity=".2" d="M1251.55 268.918c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.68-10.824c.32-.16.64-.08.8.241.16.321.08.641-.24.802l-18.67 10.823c-.17.08-.25.08-.33.08z" fill="url(#paint17_linear)"/><path opacity=".2" d="M1251.55 247.351c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.68-10.823c.32-.161.64-.081.8.24.16.321.08.642-.24.802l-18.67 10.823c-.17 0-.25.08-.33.08z" fill="url(#paint18_linear)"/><path opacity=".3" d="M1270.23 258.095c-.24 0-.4-.081-.48-.321-.16-.321-.08-.641.24-.802l18.68-10.823c.32-.161.64-.08.8.24.16.321.08.642-.24.802l-18.68 10.823c-.16.081-.24.081-.32.081z" fill="url(#paint19_linear)"/><path opacity=".4" d="M1288.91 268.918c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.67-10.824c.32-.16.65-.08.81.241.16.321.08.641-.24.802l-18.68 10.823c-.16.08-.24.08-.32.08z" fill="url(#paint20_linear)"/><path opacity=".3" d="M1270.23 236.528c-.24 0-.4-.08-.48-.321-.16-.32-.08-.641.24-.801l18.68-10.824c.32-.16.64-.08.8.241.16.321.08.641-.24.802l-18.68 10.823c-.16.08-.24.08-.32.08z" fill="url(#paint21_linear)"/><path opacity=".4" d="M1288.91 247.351c-.24 0-.4-.08-.48-.32-.16-.321-.08-.642.24-.802l18.67-10.823c.32-.161.65-.08Line truncated
|
||||
|
After Width: | Height: | Size: 165 KiB |
Reference in new issue
Block a user