Adding the survey banner to the landing page

buildwithsuhana · buildwithsuhana · commit a03b2fb0a640 · 2025-10-14T08:10:36.000+05:30
diff --git a/theme/css/landing.css b/theme/css/landing.css
@@ -390,6 +390,25 @@ body {
   margin-top: 32px;
 }
 
+.survey__banner {
+    background-color: #A30000;
+    padding: 10px;
+    text-align: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    box-sizing: border-box;
+}
+
+.survey__banner a {
+    color: white;
+    font-size: 15px;
+    font-weight: 500;
+    margin: 0;
+}
+
 @media only screen and (min-width: 1200px) {
   h1 {
     font-size: 72px;
diff --git a/theme/landing.html b/theme/landing.html
@@ -83,6 +83,13 @@
   </head>
 
   <body>
+
+    <div class="survey__banner">
+      <a href="https://google.qualtrics.com/jfe/form/SV_5psTvNYQKv2mAwC">
+        Shape the future of Keras! Take a quick 3-minute survey by October 17 to share your experience.
+      </a>
+    </div>
+
     <!-- Google Tag Manager (noscript) -->
     <noscript
       ><iframe
@@ -661,6 +668,21 @@ <h2 class="contacts__title text--white">Contributions welcome!</h2>
 
     <script src="./js/glide.min.js"></script>
 
+    <script>
+      function adjustNavMargin() {
+        const banner = document.querySelector('.survey__banner');
+        const nav = document.querySelector('.nav__container');
+
+        if (banner && nav) {
+          const bannerHeight = banner.offsetHeight;
+          nav.style.marginTop = bannerHeight + 'px';
+        }
+      }
+
+      document.addEventListener('DOMContentLoaded', adjustNavMargin);
+      window.addEventListener('resize', adjustNavMargin);
+    </script>
+
     <script>
       const carousels = document.querySelector(".glide");
       let perView = 3;
@@ -700,4 +722,4 @@ <h2 class="contacts__title text--white">Contributions welcome!</h2>
     <script src="./js/prism.min.js"></script>
     <script src="./js/prism-python.min.js"></script>
   </body>
-</html>
+</html>
