diff --git a/website/components/section-break-cta/hcp-packer.svg b/website/components/section-break-cta/hcp-packer.svg new file mode 100644 index 000000000..b850f2df8 --- /dev/null +++ b/website/components/section-break-cta/hcp-packer.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/components/section-break-cta/index.tsx b/website/components/section-break-cta/index.tsx index e0a87c730..1bc0accdb 100644 --- a/website/components/section-break-cta/index.tsx +++ b/website/components/section-break-cta/index.tsx @@ -1,22 +1,44 @@ +import Image from 'next/image' import Button from '@hashicorp/react-button' +import InlineSvg from '@hashicorp/react-inline-svg' import s from './style.module.css' -export default function SectionBreakCta({ heading, description, link }) { +export default function SectionBreakCta({ + badge, + heading, + description, + link, + media, +}) { return (
-
-

{heading}

- {description &&

{description}

} -
+
+ {media.alt} +
) } diff --git a/website/components/section-break-cta/style.module.css b/website/components/section-break-cta/style.module.css index d685f70fa..a355afe8b 100644 --- a/website/components/section-break-cta/style.module.css +++ b/website/components/section-break-cta/style.module.css @@ -1,41 +1,74 @@ .sectionBreakCta { - padding: 88px 24px; - max-width: 800px; - display: grid; - grid-gap: 24px; - text-align: center; - position: relative; - box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08); - margin: 0 16px; - background-color: var(--white); + display: flex; align-items: center; + flex-direction: column; + padding: 32px 0 32px 24px; + background-color: var(--black); + background-image: radial-gradient( + 88.57% 111.76% at 51.65% 103.99%, + rgba(99, 208, 255, 0.4) 0%, + rgba(0, 0, 0, 0) 100% + ), + linear-gradient(0deg, #000, #000); + border-radius: 3px; + color: var(--white); + overflow: hidden; @media (--medium-up) { - margin: 0 auto 104px auto; + flex-direction: row; + padding: 50px 0 50px 50px; } - & hr { - position: absolute; - top: 56px; - left: calc(50% - 32px); - width: 64px; - background-color: var(--packer); - margin-top: 0; - margin-bottom: 24px; + + @media (--large) { + padding: 50px 0 50px 80px; } } -.heading { - composes: g-type-display-4 from global; - margin: 0; +.content { + margin-bottom: 48px; + padding-right: 24px; + @media (--medium-up) { - padding: 0 88px; + margin-bottom: 0; } } -.description { - composes: g-type-body-large from global; - margin: 0; +.media { + flex-shrink: 0; + width: 100%; + @media (--medium-up) { - padding: 0 80px; + width: 45%; + margin-left: 60px; } } + +.eyebrow { + margin-bottom: 30px; + display: flex; + align-items: center; +} + +.logo { + display: flex; +} + +.badge { + margin-left: 16px; + padding: 2px 10px; + background-color: var(--packer-secondary); + color: var(--black); + composes: g-type-label from global; + border-radius: 2px; +} + +.heading { + margin: 0; + composes: g-type-display-3 from global; +} + +.description { + margin: 16px 0 32px; + composes: g-type-body from global; + color: var(--gray-5); +} diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx index dbdbc7372..968780ccd 100644 --- a/website/components/subnav/index.jsx +++ b/website/components/subnav/index.jsx @@ -12,8 +12,14 @@ export default function PackerSubnav() { }} ctaLinks={[ { text: 'GitHub', url: 'https://www.github.com/hashicorp/packer' }, - { text: 'Download', url: '/downloads' }, + { text: 'Install Packer', url: '/downloads' }, + { + text: 'Try HCP Packer', + url: + 'https://cloud.hashicorp.com/products/packer?utm_source=packer_io&utm_content=top_nav_packer', + }, ]} + hideGithubStars={true} currentPath={router.asPath} menuItemsAlign="right" menuItems={subnavItems} diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index cb67153a2..9ae06ac91 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -13,22 +13,22 @@ export default function Homepage() {
diff --git a/website/public/img/hcp-callout.svg b/website/public/img/hcp-callout.svg new file mode 100644 index 000000000..c4b862b7d --- /dev/null +++ b/website/public/img/hcp-callout.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +