Homepage Update

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}

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;
+  }
+}

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"