From 917972fcbd69ad447b25f1503aae77e854316af7 Mon Sep 17 00:00:00 2001
From: Victor Pacyna <victor@cedardb.com>
Date: Fri, 21 Aug 2026 11:04:42 +0200
Subject: [PATCH] add waitlist banner to navbar

---
 assets/css/custom.css                 | 32 ++++++++++++++++++++++
 layouts/partials/custom/head-end.html |  2 +-
 layouts/partials/navbar.html          |  2 ++
 layouts/partials/waitlist-banner.html | 38 +++++++++++++++++++++++++++
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/waitlist-banner.html

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 82fa0b41..ef36f933 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -113,6 +113,38 @@ kbd,
     max-width: var(--cedar-max);
 }
 
+.banner {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    padding: 0.5rem 2.5rem;
+}
+
+.banner.hide {
+    display: none;
+}
+
+.banner__link {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+}
+
+.banner__close {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    background: none;
+    border: 0;
+    padding: 0;
+    line-height: 1;
+    font-size: 1.25rem;
+    color: inherit;
+    cursor: pointer;
+}
+
 .nav-text-link {
     border-radius: 0;
 }
diff --git a/layouts/partials/custom/head-end.html b/layouts/partials/custom/head-end.html
index b96a0ed2..ed585db5 100644
--- a/layouts/partials/custom/head-end.html
+++ b/layouts/partials/custom/head-end.html
@@ -31,7 +31,7 @@
         });
 
         // Add a click event on various child elements to close the parent modal
-        (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-body .delete, .modal-card-foot .button') || []).forEach(($close) => {
+        (document.querySelectorAll('.modal-background, .modal-close, .modal-close-button, .modal-card-head .delete, .modal-card-body .delete, .modal-card-foot .button') || []).forEach(($close) => {
             const $target = $close.closest('.modal');
 
             $close.addEventListener('click', () => {
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 57452307..5ca3e8cf 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -15,6 +15,8 @@
     class="hextra-nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
   ></div>
 
+  {{ partial "waitlist-banner.html" . }}
+
   <nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
     {{ partial "navbar-title.html" . }}
 
diff --git a/layouts/partials/waitlist-banner.html b/layouts/partials/waitlist-banner.html
new file mode 100644
index 00000000..7cc1f8b9
--- /dev/null
+++ b/layouts/partials/waitlist-banner.html
@@ -0,0 +1,38 @@
+<div class="banner" id="banner">
+  <a href="https://demo.cedardb.cloud" class="banner__link">CedarDB Cloud</a> coming soon! 
+  <a class="js-modal-trigger button hx:whitespace-nowrap hx:px-2" data-target="modal-waitlist" href="#">Join our waitlist →</a>
+  <button type="button" class="banner__close" id="banner-close" aria-label="Dismiss">&times;</button>
+</div>
+<script>
+  (function () {
+    var banner = document.getElementById("banner");
+    if (!banner) return;
+
+    if (sessionStorage.getItem("waitlist-banner-closed") === "true") {
+      banner.classList.add("hide");
+      return;
+    }
+
+    document.getElementById("banner-close").addEventListener("click", function () {
+      banner.classList.add("hide");
+      sessionStorage.setItem("waitlist-banner-closed", "true");
+    });
+  })();
+</script>
+<div id="modal-waitlist" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card hx:p-1">
+        <div class="modal-card-body hx:p-6 hx:has-background-color-secondary hx:is-rounded-small">
+            <div class="hx:title hx:has-text-left hx:mb-6" style="font-size: 2rem; color: white; margin-bottom: 10px;">Join our Waitlist</div>
+            <script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
+            <script>
+              hbspt.forms.create({
+                region: "eu1",
+                portalId: "144471709",
+                formId: "a9d14ba0-afcf-40c4-8a1c-4543a9d7c9fa",
+              });
+            </script>
+            <button class="hx:delete hx:is-right modal-close-button" aria-label="close"></button>
+        </div>
+    </div>
+</div>