From 475a28acdace8aeaa1a1ebefb90589eea47da511 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:38:10 +0200
Subject: [PATCH] docs: link bounda.dev and the live demo from the docs header
 and the README

The docs led nowhere but GitHub, and the README did not mention the demo. With the launch, every piece links the others.
---
 README.md                             |  1 +
 docs/src/components/SocialIcons.astro | 22 +++++++++++++++++++++-
 docs/src/site.ts                      |  4 ++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6a1b4ef6..9c22ffce 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ npm create bounda@latest my-app
 ```
 
 [bounda.dev](https://bounda.dev) ·
+[Live demo](https://demo.bounda.dev) ·
 **[Documentation](https://docs.bounda.dev)** ·
 [Getting started](https://docs.bounda.dev/getting-started/) ·
 [Core concepts](https://docs.bounda.dev/getting-started/core-concepts/) ·
diff --git a/docs/src/components/SocialIcons.astro b/docs/src/components/SocialIcons.astro
index eb6e0cb2..826a4508 100644
--- a/docs/src/components/SocialIcons.astro
+++ b/docs/src/components/SocialIcons.astro
@@ -1,8 +1,10 @@
 ---
 import { Icon } from "@astrojs/starlight/components";
-import { REPOSITORY } from "../site.ts";
+import { DEMO, HOME, REPOSITORY } from "../site.ts";
 ---
 
+<a class="text" href={HOME}>bounda.dev</a>
+<a class="text" href={DEMO}>Demo</a>
 <a href={REPOSITORY} aria-label="GitHub">
   <Icon name="github" size="1.25rem" />
 </a>
@@ -10,13 +12,31 @@ import { REPOSITORY } from "../site.ts";
 <style>
   a {
     display: flex;
+    align-items: center;
     padding: 0.5em;
     margin: -0.5em;
     color: var(--sl-color-gray-3);
+    text-decoration: none;
+  }
+
+  /* Set like bounda.dev's nav links. */
+  .text {
+    font-family: var(--bounda-display);
+    font-weight: 600;
+    font-stretch: 125%;
+    font-size: 0.6875rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
   }
 
   a:hover,
   a:focus-visible {
     color: var(--sl-color-white);
   }
+
+  @media (max-width: 50rem) {
+    .text {
+      display: none;
+    }
+  }
 </style>
diff --git a/docs/src/site.ts b/docs/src/site.ts
index 177cd2e7..44024e2a 100644
--- a/docs/src/site.ts
+++ b/docs/src/site.ts
@@ -2,6 +2,10 @@ export const SITE = "https://docs.bounda.dev";
 
 export const REPOSITORY = "https://github.com/bounda-dev/bounda";
 
+export const HOME = "https://bounda.dev";
+
+export const DEMO = "https://demo.bounda.dev";
+
 // Cloudflare Web Analytics, without cookies; the site is bounda.dev's, which counts this subdomain too.
 export const analytics: HeadTag = {
   tag: "script",