From cafa1eb7e6c3e8d7c66977c11198a6e55b596e2a Mon Sep 17 00:00:00 2001
From: Jeremias Menichelli <jmenichelli@gmail.com>
Date: Fri, 4 Sep 2026 10:59:49 +0200
Subject: [PATCH] feat(kb): Add footer (#49964)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Add footer to KB.

<img width="1641" height="1833" alt="Screen Shot 2026-09-03 at 17 04 55"
src="https://github.com/user-attachments/assets/cd1a8255-35ad-41e3-9c4e-bb371a47099f"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
  - Added a site-wide footer to the knowledge base.
- Added links to support, changelog, system status, social channels, and
secondary navigation.
  - Improved page structure with semantic main-content markup.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/kb/src/components/Footer.astro | 79 +++++++++++++++++++++++++++++
 apps/kb/src/layouts/Layout.astro    |  6 ++-
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 apps/kb/src/components/Footer.astro

diff --git a/apps/kb/src/components/Footer.astro b/apps/kb/src/components/Footer.astro
new file mode 100644
index 00000000000..2e9ff17bba6
--- /dev/null
+++ b/apps/kb/src/components/Footer.astro
@@ -0,0 +1,79 @@
+---
+import { CheckCircle, FlaskConical, LifeBuoy } from 'lucide-react'
+import { IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid } from 'ui'
+
+const primaryLinks = [
+	{
+		Icon: LifeBuoy,
+		text: 'Need some help?',
+		ctaLabel: 'Contact support',
+		url: 'https://supabase.com/support',
+	},
+	{
+		Icon: FlaskConical,
+		text: 'Latest product updates?',
+		ctaLabel: 'See Changelog',
+		url: 'https://supabase.com/changelog',
+	},
+	{
+		Icon: CheckCircle,
+		text: "Something's not right?",
+		ctaLabel: 'Check system status',
+		url: 'https://status.supabase.com/',
+	},
+]
+
+const secondaryLinks = [
+	{ title: 'Open Source', url: 'https://supabase.com/open-source' },
+	{ title: 'SupaSquad', url: 'https://supabase.com/supasquad' },
+	{ title: 'Privacy', url: 'https://supabase.com/privacy' },
+]
+---
+
+<footer role="contentinfo" aria-label="footer" class="max-w-6xl px-6 mx-auto pt-12 pb-6">
+	<ul class="flex flex-col gap-2">
+		{
+			primaryLinks.map(({ Icon, text, ctaLabel, url }) => (
+				<li class="flex items-center gap-1 text-xs text-foreground-lighter">
+					<Icon aria-hidden="true" size={16} strokeWidth={1} />
+					<p>{text}</p>
+					<a href={url} class="text-brand-link hover:underline" target="_blank" rel="noreferrer noopener">
+						{ctaLabel}
+					</a>
+				</li>
+			))
+		}
+	</ul>
+	<hr class="border-default my-6" />
+	<div class="flex gap-4 items-center justify-between flex-wrap">
+		<div class="flex flex-col lg:flex-row gap-3">
+			<a href="https://supabase.com/" class="text-xs text-foreground-lighter">&copy; Supabase Inc</a>
+			<span class="text-xs text-foreground-lighter">—</span>
+			{
+				secondaryLinks.map(({ title, url }) => (
+					<a href={url} class="text-xs text-foreground-lighter hover:underline">
+						{title}
+					</a>
+				))
+			}
+		</div>
+		<div class="flex items-center gap-4">
+			<a href="https://twitter.com/supabase" class="text-foreground-muted hover:text-foreground transition">
+				<span class="sr-only">Twitter</span>
+				<IconTwitterX size={14} />
+			</a>
+			<a href="https://github.com/supabase" class="text-foreground-muted hover:text-foreground transition">
+				<span class="sr-only">GitHub</span>
+				<IconGitHubSolid size={14} />
+			</a>
+			<a href="https://discord.supabase.com/" class="text-foreground-muted hover:text-foreground transition">
+				<span class="sr-only">Discord</span>
+				<IconDiscord size={14} />
+			</a>
+			<a href="https://youtube.com/c/supabase" class="text-foreground-muted hover:text-foreground transition">
+				<span class="sr-only">Youtube</span>
+				<IconYoutubeSolid size={14} />
+			</a>
+		</div>
+	</div>
+</footer>
diff --git a/apps/kb/src/layouts/Layout.astro b/apps/kb/src/layouts/Layout.astro
index b49bd216520..5dc9556cf7a 100644
--- a/apps/kb/src/layouts/Layout.astro
+++ b/apps/kb/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import Footer from '../components/Footer.astro'
 import { Header } from '../components/Header'
 import '../styles/globals.css'
 
@@ -62,7 +63,10 @@ const { title, description } = Astro.props
 	</head>
 	<body>
 		<Header client:load />
-		<slot />
+		<main>
+			<slot />
+		</main>
+		<Footer />
 	</body>
 </html>