diff --git a/website/components/homepage-hero/HomepageHero.module.css b/website/components/homepage-hero/HomepageHero.module.css index d792d7bb72..04ca64e798 100644 --- a/website/components/homepage-hero/HomepageHero.module.css +++ b/website/components/homepage-hero/HomepageHero.module.css @@ -14,11 +14,27 @@ background: none; padding: 0; - & :global(.g-btn) { + & :global(.g-btn:nth-of-type(1)) { border-color: var(--boundary); background-color: var(--boundary); } + /* Asana ticket to address this debt: https://app.asana.com/0/1100423001970639/1200214305924669/f */ + & :global(.g-btn:nth-of-type(2)) { + color: var(--gray-1); + + &::after { + display: inline-block; + margin-left: 5px; + vertical-align: middle; + content: ' '; + background-image: url('/img/icon-right-arrow.svg'); + background-size: 20px 20px; + height: 20px; + width: 20px; + } + } + & :global(.carousel) { display: flex; flex-direction: column-reverse; diff --git a/website/components/merch-desktop-client/img/apple-logo.svg b/website/components/merch-desktop-client/img/apple-logo.svg new file mode 100644 index 0000000000..9ed72adffb --- /dev/null +++ b/website/components/merch-desktop-client/img/apple-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/components/merch-desktop-client/index.jsx b/website/components/merch-desktop-client/index.jsx new file mode 100644 index 0000000000..b247464e96 --- /dev/null +++ b/website/components/merch-desktop-client/index.jsx @@ -0,0 +1,32 @@ +import s from './merch-desktop-client.module.css' +import InlineSvg from '@hashicorp/react-inline-svg' + +export default function MerchDesktopDownload({ version, releases }) { + const { builds } = releases.versions[version] + + return ( +
+
+ Desktop Client +
+ + {version} +
+
+ {builds.map((build) => ( + + .{getFileExtension(build.filename)} + + ))} +
+
+
+ ) +} + +function getFileExtension(filename) { + return filename.substring(filename.lastIndexOf('.') + 1, filename.length) +} diff --git a/website/components/merch-desktop-client/merch-desktop-client.module.css b/website/components/merch-desktop-client/merch-desktop-client.module.css new file mode 100644 index 0000000000..4ac7b38921 --- /dev/null +++ b/website/components/merch-desktop-client/merch-desktop-client.module.css @@ -0,0 +1,52 @@ +.container { + width: 100%; + border: 1px solid var(--gray-6); + display: flex; + justify-content: center; + min-height: 193px; + padding: 40px 50px; +} + +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-content: center; + text-align: center; +} + +.title { + font-family: var(--font-display); + font-size: 12px; + line-height: 18px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gray-4); + font-weight: bold; +} + +.platformVersion { + display: flex; + align-content: center; + justify-content: center; + + & .logo { + margin-right: 20px; + } + + & .version { + align-self: center; + } +} + +.downloadLinks { + color: var(--brand); + + & a { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } +} diff --git a/website/data/version.js b/website/data/version.js index 7e24ac500e..ac1593c79f 100644 --- a/website/data/version.js +++ b/website/data/version.js @@ -1 +1,2 @@ -export default '0.2.0' +export const VERSION = '0.2.0' +export const DESKTOP_VERSION = '1.0.0' diff --git a/website/pages/downloads/index.jsx b/website/pages/downloads/index.jsx index c2c0a7b9b2..05440d6f72 100644 --- a/website/pages/downloads/index.jsx +++ b/website/pages/downloads/index.jsx @@ -1,16 +1,19 @@ -import VERSION from 'data/version.js' +import { VERSION, DESKTOP_VERSION } from 'data/version.js' import Head from 'next/head' import HashiHead from '@hashicorp/react-head' import { productName, productSlug } from 'data/metadata' import ProductDownloader from '@hashicorp/react-product-downloader' +import MerchDesktopClient from 'components/merch-desktop-client' import styles from './style.module.css' -export default function DownloadsPage({ releases }) { +const DESKTOP_BINARY_SLUG = 'boundary-desktop' + +export default function DownloadsPage({ binaryReleases, desktopReleases }) { return (
+ } />
) } export async function getStaticProps() { - return fetch(`https://releases.hashicorp.com/boundary/index.json`, { - headers: { - 'Cache-Control': 'no-cache', - }, - }) - .then((res) => res.json()) + return Promise.all([ + fetch(`https://releases.hashicorp.com/boundary/index.json`, { + headers: { + 'Cache-Control': 'no-cache', + }, + }).then((res) => res.json()), + fetch(`https://releases.hashicorp.com/boundary-desktop/index.json`, { + headers: { + 'Cache-Control': 'no-cache', + }, + }).then((res) => res.json()), + ]) .then((result) => { + const binaryReleases = result.find( + (releases) => releases.name === productSlug + ) + const desktopReleases = result.find( + (releases) => releases.name === DESKTOP_BINARY_SLUG + ) return { props: { - releases: result, + binaryReleases, + desktopReleases, }, } }) diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index ac14a14da7..b2effa6ad4 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -18,6 +18,10 @@ export default function HomePage() { 'https://learn.hashicorp.com/collections/boundary/getting-started', external: true, }, + { + title: 'Download macOS Client', + url: '/downloads#desktop', + }, ]} uiVideo={{ url: 'https://www.datocms-assets.com/2885/1614100050-hero-ui.mp4', diff --git a/website/public/img/icon-right-arrow.svg b/website/public/img/icon-right-arrow.svg new file mode 100644 index 0000000000..ae41506960 --- /dev/null +++ b/website/public/img/icon-right-arrow.svg @@ -0,0 +1,4 @@ + + + +