[Homepage] <IoHomeCallToAction /> component

website/components/io-home-call-to-action/index.tsx

@@ -0,0 +1,33 @@
+import ReactCallToAction from '@hashicorp/react-call-to-action'
+import s from './style.module.css'
+
+interface IoHomeCallToActionProps {
+  brand: string
+  heading: string
+  content: string
+  links: Array<{
+    text: string
+    url: string
+    type?: 'inbound'
+  }>
+}
+
+export default function IoHomeCallToAction({
+  brand,
+  heading,
+  content,
+  links,
+}: IoHomeCallToActionProps) {
+  return (
+    <div className={s.callToAction}>
+      <ReactCallToAction
+        variant="compact"
+        heading={heading}
+        content={content}
+        product={brand}
+        theme="dark"
+        links={links}
+      />
+    </div>
+  )
+}

website/components/io-home-call-to-action/style.module.css

@@ -0,0 +1,7 @@
+.callToAction {
+  background-image: linear-gradient(52.3deg, #2c2d2f 39.83%, #626264 96.92%);
+
+  & > * {
+    background-color: transparent;
+  }
+}

website/package.json

@@ -14,6 +14,7 @@
     "@hashicorp/platform-util": "^0.1.0",
     "@hashicorp/react-alert-banner": "^7.0.1",
     "@hashicorp/react-button": "^6.0.1",
+    "@hashicorp/react-call-to-action": "^4.1.1",
     "@hashicorp/react-consent-manager": "^7.0.1",
     "@hashicorp/react-docs-page": "^14.4.2",
     "@hashicorp/react-featured-slider": "^5.0.1",

website/pages/home/index.tsx

@@ -1,10 +1,7 @@
 import IoHomeHero from 'components/io-home-hero'
+import IoHomeCallToAction from 'components/io-home-call-to-action'
 import IoHomePreFooter from 'components/io-home-pre-footer'
 
-export async function getStaticProps() {
-  return { props: {} }
-}
-
 export default function Homepage({ content }) {
   return (
     <>
@@ -46,6 +43,20 @@ export default function Homepage({ content }) {
         ]}
       />
 
+      <IoHomeCallToAction
+        brand="vault"
+        heading="Get HashiCorp Certified"
+        content="Level up your concepts, skills, and use cases associated with open source HashiCorp Vault."
+        links={[
+          { text: 'Prepare & get certified', url: '#TODO' },
+          {
+            text: 'Learn more about Vault Ops Pro',
+            url: '#TODO',
+            type: 'inbound',
+          },
+        ]}
+      />
+
       <IoHomePreFooter
         brand="vault"
         heading="Next steps"

website/pages/index.tsx

@@ -1,3 +1,2 @@
-import Homepage, { getStaticProps } from './home'
-export { getStaticProps }
+import Homepage from './home'
 export default Homepage