website: add alert banner to promote webinar (#10683)

website/data/alert-banner.js

@@ -0,0 +1,13 @@
+export const ALERT_BANNER_ACTIVE = true
+
+// https://github.com/hashicorp/react-components/tree/master/packages/alert-banner
+export default {
+  tag: 'Webinar',
+  url:
+    'https://www.hashicorp.com/events/webinars/cloud-service-networking-secrets-management',
+  text: 'Getting Started with Service Networking & Secrets Management on Cloud',
+  linkText: 'Register Now',
+  // Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
+  // if you'd like the component to stop showing at or after a certain date
+  expirationDate: '2021-02-09T11:59:00-05:00',
+}

website/package-lock.json

@@ -1648,6 +1648,27 @@
       "resolved": "https://registry.npmjs.org/@hashicorp/react-alert/-/react-alert-2.0.3.tgz",
       "integrity": "sha512-03qWTvECGrG2Z0cm/w71J/KmSBJrUem1QTdRuGFHLTPGgAdIgI90xWpYWmUjGw7gXrxJ/q1yY2JwbfpHwRrpPg=="
     },
+    "@hashicorp/react-alert-banner": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-alert-banner/-/react-alert-banner-5.0.0.tgz",
+      "integrity": "sha512-KFSmiX3yrIOhiKTJ7BIVnJ6X+umno5zk6HW1B2Oim3bfSakZdq1ONLblGkX4c4VY91Lw5xRgnutjK3bc8ZBZpw==",
+      "requires": {
+        "js-cookie": "2.2.0",
+        "slugify": "1.3.4"
+      },
+      "dependencies": {
+        "js-cookie": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+          "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+        },
+        "slugify": {
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+          "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+        }
+      }
+    },
     "@hashicorp/react-button": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-4.0.0.tgz",

website/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@hashicorp/mktg-global-styles": "2.1.0",
     "@hashicorp/nextjs-scripts": "14.0.1",
+    "@hashicorp/react-alert-banner": "^5.0.0",
     "@hashicorp/react-button": "4.0.0",
     "@hashicorp/react-case-study-slider": "3.0.3",
     "@hashicorp/react-code-block": "3.0.3",

website/pages/_app.js

@@ -12,6 +12,8 @@ import ProductSubnav from 'components/subnav'
 import HashiStackMenu from '@hashicorp/react-hashi-stack-menu'
 import Footer from 'components/footer'
 import Error from './_error'
+import AlertBanner from '@hashicorp/react-alert-banner'
+import alertBannerData, { ALERT_BANNER_ACTIVE } from '../data/alert-banner'
 
 NProgress({ Router })
 const { ConsentManager, openConsentManager } = createConsentManager({
@@ -56,6 +58,9 @@ export default function App({ Component, pageProps }) {
           },
         ]}
       />
+      {ALERT_BANNER_ACTIVE && (
+        <AlertBanner {...alertBannerData} theme="vault" />
+      )}
       <HashiStackMenu />
       <ProductSubnav />
       <Component {...pageProps} />

website/pages/style.css

@@ -7,6 +7,7 @@
   --highlight-color: var(--brand);
 }
 
+@import '~@hashicorp/react-alert-banner/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-case-study-slider/style.css';
 @import '~@hashicorp/react-code-block/style.css';