From 4e1c6464012f5bf43de02fb26fa5044dd924260f Mon Sep 17 00:00:00 2001
From: LWinterberg <87814144+LWinterberg@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:19:44 +0200
Subject: [PATCH] Add banner for surveys

---
 src/components/banner/SurveyBanner.jsx | 42 ++++++++++++++++++++++++++
 src/layouts/BaseLayout.astro           |  2 ++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/banner/SurveyBanner.jsx

diff --git a/src/components/banner/SurveyBanner.jsx b/src/components/banner/SurveyBanner.jsx
new file mode 100644
index 0000000..b3663a5
--- /dev/null
+++ b/src/components/banner/SurveyBanner.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import "../../styles/icons.css";
+
+function SurveyBanner(url) {
+
+  function handleButtonClick() {
+    if (typeof _paq !== "undefined") {
+      _paq.push([
+        "trackEvent",
+        "Survey CTA",
+        "Survey CTA button",
+        "Go to Survey",
+      ]);
+    }
+  }
+
+  return (
+    <div
+      id="survey-banner"
+      className="flex items-center justify-center min-h-24 bg-orange-400 gap-4 flex-wrap"
+    >
+      <div className="flex gap-2 flex-wrap my-4 mx-2">
+        <p className="text-lg font-bold text-gray-900">
+          1-2 minute survey:
+        </p>
+        <p className="text-lg text-gray-900">
+          Help us understand why and how people are using AI tools for audio editing, VO and production work.
+        </p>
+      </div>
+      <a
+        href="https://xo9ucdlwlod.typeform.com/to/LPNgta5L"
+        id="survey-button"
+        onClick={() => {handleButtonClick();}}
+        className="flex text-lg h-12 my-4 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white"
+      >
+        Take the survey
+      </a>
+    </div>
+  );
+}
+
+export default SurveyBanner;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0d4326a..3dfa423 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -4,6 +4,7 @@ import NavigationReact from "../components/navigation/NavigationReact";
 import CookieConsent from "../components/banner/CookieConsent";
 import "../styles/input.css";
 import BetaBanner from "../components/banner/BetaBanner";
+import SurveyBanner from "../components/banner/SurveyBanner";
 
 export interface Props {
   title: string;
@@ -42,6 +43,7 @@ const {
       <header class="z-50 sticky left-0 right-0 top-0">
         <NavigationReact client:load currentURL={Astro.request.url} />
         <BetaBanner client:load url={Astro.request.url}/>
+        <SurveyBanner client:load url={Astro.request.url}/>
       </header>
 
       <div class="flex-1">