From 870cf5102eccf2079f6d474470f06bc7edbd860a Mon Sep 17 00:00:00 2001
From: Brandon Romano <brandon@hashicorp.com>
Date: Tue, 8 Jun 2021 21:26:12 -0700
Subject: [PATCH] Homepage Update

---
 website/components/section-break-cta/index.tsx  |  3 ++-
 .../section-break-cta/style.module.css          |  8 ++++++++
 website/pages/home/index.jsx                    | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/website/components/section-break-cta/index.tsx b/website/components/section-break-cta/index.tsx
index 5a034eb0f..e0a87c730 100644
--- a/website/components/section-break-cta/index.tsx
+++ b/website/components/section-break-cta/index.tsx
@@ -1,11 +1,12 @@
 import Button from '@hashicorp/react-button'
 import s from './style.module.css'
 
-export default function SectionBreakCta({ heading, link }) {
+export default function SectionBreakCta({ heading, description, link }) {
   return (
     <div className={s.sectionBreakCta}>
       <hr />
       <h4 className={s.heading}>{heading}</h4>
+      {description && <p className={s.description}>{description}</p>}
       <Button
         title={link.text}
         url={link.url}
diff --git a/website/components/section-break-cta/style.module.css b/website/components/section-break-cta/style.module.css
index ca8582644..d685f70fa 100644
--- a/website/components/section-break-cta/style.module.css
+++ b/website/components/section-break-cta/style.module.css
@@ -31,3 +31,11 @@
     padding: 0 88px;
   }
 }
+
+.description {
+  composes: g-type-body-large from global;
+  margin: 0;
+  @media (--medium-up) {
+    padding: 0 80px;
+  }
+}
diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index a1ee95640..26b68a6bb 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -3,6 +3,7 @@ import AnimatedTerminal from 'components/animated-terminal'
 import BrandedCta from 'components/branded-cta'
 import HomepageHero from 'components/homepage-hero'
 import IntegrationsTextSplit from 'components/integrations-text-split'
+import SectionBreakCta from 'components/section-break-cta'
 
 import s from './style.module.css'
 
@@ -11,6 +12,11 @@ export default function Homepage() {
     <div id="p-home" className={s.home}>
       <section id="hero">
         <HomepageHero
+          alert={{
+            url: 'https://www.hashicorp.com/blog/announcing-hcp-packer',
+            tag: 'BLOG POST',
+            text: 'Announcing HCP Packer',
+          }}
           heading="Build automated machine images"
           subheading="Create identical machine images for multiple platforms from a single source configuration."
           links={[
@@ -116,7 +122,16 @@ export default function Homepage() {
           ]}
         />
       </section>
-
+      <section className={s.sectionGridContainer}>
+        <SectionBreakCta
+          heading="Announcing HCP Packer"
+          description="Bridge the gap between image creation and deployment with image management workflows."
+          link={{
+            text: 'Sign up to be a beta tester',
+            url: 'https://go.hashicorp.com/HCP-Packer-Beta',
+          }}
+        />
+      </section>
       <section>
         <IntegrationsTextSplit
           heading="Extending Packer with Plugins"