From 69128bc06b4a1bbcf4016092bfabe660a211dd71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= <benatespina@gmail.com>
Date: Sat, 24 Oct 2026 22:33:28 +0200
Subject: [PATCH] feat: link the live demo from the nav, the call to action and
 the footer

The demo is announced with the launch, so the landing now leads to it. On a phone the nav has no room for a third link, and the call to action already offers it.
---
 src/components/actions.astro | 11 +++++++++++
 src/components/footer.astro  |  1 +
 src/components/nav.astro     |  6 ++++++
 3 files changed, 18 insertions(+)

diff --git a/src/components/actions.astro b/src/components/actions.astro
index 279598d..4299830 100644
--- a/src/components/actions.astro
+++ b/src/components/actions.astro
@@ -9,6 +9,7 @@ const attributes = Astro.props;
   <Install />
   <div class="links">
     <a class="text-link" href="https://docs.bounda.dev/getting-started/">Read the docs</a>
+    <a class="text-link" href="https://demo.bounda.dev">Live demo</a>
     <a class="text-link dim" href="https://github.com/bounda-dev/bounda">GitHub</a>
   </div>
 </div>
@@ -35,7 +36,17 @@ const attributes = Astro.props;
     }
 
     .links {
+      gap: 16px;
       justify-content: center;
     }
+
+    .links a {
+      white-space: nowrap;
+    }
+
+    /* Three links fit a phone's width only without the ochre rule after each. */
+    .links a::after {
+      display: none;
+    }
   }
 </style>
diff --git a/src/components/footer.astro b/src/components/footer.astro
index 0ade1c0..0c72bb4 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -9,6 +9,7 @@ const year = new Date().getFullYear();
     <a class="brand" href="/" aria-label="Bounda home"><Lockup /></a>
     <ul>
       <li><a class="link" href="https://docs.bounda.dev/getting-started/">Documentation</a></li>
+      <li><a class="link" href="https://demo.bounda.dev">Live demo</a></li>
       <li><a class="link" href="https://github.com/bounda-dev/bounda">GitHub</a></li>
       <li><a class="link" href="https://www.npmjs.com/org/bounda-dev">npm</a></li>
       <li><a class="link" href="https://github.com/bounda-dev/bounda/blob/main/LICENSE">Apache 2.0</a></li>
diff --git a/src/components/nav.astro b/src/components/nav.astro
index d2052b2..0a61aa8 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -9,6 +9,7 @@ import ThemeToggle from "./theme-toggle.astro";
   <a class="brand" href="/" aria-label="Bounda home"><Lockup /></a>
   <ul data-enter style="--enter-delay: 0.46s">
     <li><a class="link" href="https://docs.bounda.dev/getting-started/">Docs</a></li>
+    <li class="wide"><a class="link" href="https://demo.bounda.dev">Demo</a></li>
     <li><a class="link" href="https://github.com/bounda-dev/bounda">GitHub</a></li>
     <li><ThemeToggle /></li>
   </ul>
@@ -83,5 +84,10 @@ import ThemeToggle from "./theme-toggle.astro";
     .brand :global(.lockup) {
       height: 20px;
     }
+
+    /* The hero's call to action already offers the demo, and the bar has no room for it. */
+    .wide {
+      display: none;
+    }
   }
 </style>