doc/website: add banner (#786)

Author: hilakashai

doc/website/docusaurus.config.js

@@ -88,6 +88,11 @@ module.exports = {
       <br/>
       `,
     },
+    announcementBar: {
+      id: 'announcementBar-1', // Increment on change
+      content: `️🚀 Sign up for a user testing session and receive exclusive Atlas swag, register <a target="_blank" rel="noopener noreferrer" href="https://calendly.com/ariga-user-testing/atlas-user-testing">here!</a>`,
+      isCloseable: true,
+    },
   },
   plugins: [
     [

doc/website/src/css/custom.css

@@ -136,4 +136,28 @@ span.token.punctuation {
 
 div.language-hcl * span.token.property {
   color: #9CDCFE;
+}
+
+:root {
+  --site-primary-hue-saturation: 217, 73%, 78%;
+  --ifm-footer-title-color: white;
+}
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+          var(--site-primary-hue-saturation),
+          30%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+          var(--site-primary-hue-saturation),
+          55%
+  );
+  background: repeating-linear-gradient(
+          35deg,
+          var(--site-announcement-bar-stripe-color1),
+          var(--site-announcement-bar-stripe-color1) 20px,
+          var(--site-announcement-bar-stripe-color2) 10px,
+          var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
 }

doc/website/src/pages/index.module.css

@@ -593,4 +593,28 @@ html[data-theme='dark'] .subtitle2 {
 }
 html[data-theme='dark'] .subtitleMargin {
   color: white;
+}
+
+:root {
+  --site-primary-hue-saturation: 217, 73%, 78%;
+  --ifm-footer-title-color: white;
+}
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+          var(--site-primary-hue-saturation),
+          30%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+          var(--site-primary-hue-saturation),
+          55%
+  );
+  background: repeating-linear-gradient(
+          35deg,
+          var(--site-announcement-bar-stripe-color1),
+          var(--site-announcement-bar-stripe-color1) 20px,
+          var(--site-announcement-bar-stripe-color2) 10px,
+          var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
 }