From f859194e96b4a0ec59b8e1aa4c2d08c061fa993b Mon Sep 17 00:00:00 2001
From: Latte <latte@hiddenden.cafe>
Date: Sat, 7 Mar 2026 16:08:26 +0100
Subject: [PATCH] Add FAQ page and nav link

---
 docker-compose.yml       |   2 -
 src/components/Nav.astro |  38 +++--
 src/pages/faq.astro      | 289 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 315 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/faq.astro

diff --git a/docker-compose.yml b/docker-compose.yml
index 2f7839d..424c72a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   cozy-den:
     build: .
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 08f494c..efa7cce 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -4,6 +4,7 @@ const currentPath = Astro.url.pathname;
 const links = [
     { href: "/", label: "home" },
     { href: "/start", label: "start" },
+    { href: "/faq", label: "q&a" },
     { href: "/about", label: "about" },
     { href: "/projects", label: "projects" },
     { href: "/now", label: "now" },
@@ -19,18 +20,31 @@ function isActive(href: string, current: string): boolean {
 
 <nav class="nav" aria-label="Main navigation">
     <div class="nav-inner">
-        {links.map((link, i) => (
-            <>
-                {i > 0 && <span class="nav-sep" aria-hidden="true">·</span>}
-                <a
-                    href={link.href}
-                    class:list={["nav-link", { active: isActive(link.href, currentPath) }]}
-                    aria-current={isActive(link.href, currentPath) ? "page" : undefined}
-                >
-                    ~/{link.label}
-                </a>
-            </>
-        ))}
+        {
+            links.map((link, i) => (
+                <>
+                    {i > 0 && (
+                        <span class="nav-sep" aria-hidden="true">
+                            ·
+                        </span>
+                    )}
+                    <a
+                        href={link.href}
+                        class:list={[
+                            "nav-link",
+                            { active: isActive(link.href, currentPath) },
+                        ]}
+                        aria-current={
+                            isActive(link.href, currentPath)
+                                ? "page"
+                                : undefined
+                        }
+                    >
+                        ~/{link.label}
+                    </a>
+                </>
+            ))
+        }
     </div>
 </nav>
 
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
new file mode 100644
index 0000000..b7c2683
--- /dev/null
+++ b/src/pages/faq.astro
@@ -0,0 +1,289 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout
+    title="Q&A - Hidden Den Cafe"
+    description="A quiet Q&A about Cozy Den, why it exists, and the values behind it."
+>
+    <div class="matrix-bg" aria-hidden="true"></div>
+
+    <main class="main">
+        <div class="container">
+            <header class="header fade-in">
+                <p class="eyebrow">Quiet answers</p>
+                <h1 class="title">Q&amp;A</h1>
+                <div class="divider">==============================</div>
+                <p class="lead">
+                    A few short answers for anyone wondering what Cozy Den is,
+                    why it exists, and what kind of space it is trying to be.
+                </p>
+            </header>
+
+            <section class="section fade-in" aria-labelledby="faq-heading">
+                <h2 id="faq-heading" class="sr-only">Questions and answers</h2>
+
+                <div class="faq-list">
+                    <article class="faq-item">
+                        <h3>What is Cozy Den?</h3>
+                        <p>
+                            Cozy Den is a personal website and quiet corner of
+                            the web. It is part writing space, part workshop,
+                            and part home for ideas about self-hosting,
+                            privacy, infrastructure, and building things with
+                            care.
+                        </p>
+                    </article>
+
+                    <article class="faq-item">
+                        <h3>
+                            Why build a personal website instead of using social
+                            media?
+                        </h3>
+                        <p>
+                            Social platforms are useful for discovery, but they
+                            are not good homes. A personal site is calmer, more
+                            durable, and shaped by the person making it instead
+                            of by feeds, algorithms, or platform incentives.
+                        </p>
+                    </article>
+
+                    <article class="faq-item">
+                        <h3>What does privacy-first mean for this site?</h3>
+                        <p>
+                            It means the site tries to ask for as little as
+                            possible. No trackers, no ads, no unnecessary
+                            external scripts, and no design choices built around
+                            surveillance. Visitors are guests here, not data to
+                            be collected.
+                        </p>
+                    </article>
+
+                    <article class="faq-item">
+                        <h3>Who is behind Hidden Den?</h3>
+                        <p>
+                            Hidden Den is built by Latte: a gay furry developer,
+                            homelab enthusiast, and privacy-minded internet
+                            dweller who still believes personal websites should
+                            feel warm, human, and fully their own.
+                        </p>
+                    </article>
+                </div>
+            </section>
+
+            <section class="section fade-in">
+                <div class="note">
+                    <p>
+                        If the short version helps: Cozy Den exists to be a
+                        small, thoughtful place on the internet that belongs to
+                        the person building it.
+                    </p>
+                </div>
+            </section>
+
+            <footer class="footer fade-in">
+                <p>Made with love by Latte</p>
+            </footer>
+        </div>
+    </main>
+</BaseLayout>
+
+<style>
+    .matrix-bg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        opacity: 0.03;
+        background:
+            linear-gradient(var(--color-accent) 1px, transparent 1px),
+            linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
+        background-size: 50px 50px;
+        animation: grid-move 20s linear infinite;
+    }
+
+    @keyframes grid-move {
+        0% {
+            transform: translate(0, 0);
+        }
+        100% {
+            transform: translate(50px, 50px);
+        }
+    }
+
+    .main {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-lg) var(--space-md);
+        padding-top: calc(var(--space-lg) + 3rem);
+    }
+
+    .container {
+        max-width: 700px;
+        width: 100%;
+        background: var(--color-glass);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--color-surface);
+        border-radius: 8px;
+        padding: var(--space-xl);
+    }
+
+    .header {
+        text-align: center;
+        margin-bottom: var(--space-lg);
+    }
+
+    .eyebrow {
+        color: var(--color-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.24em;
+        font-size: 0.75rem;
+        margin-bottom: var(--space-sm);
+    }
+
+    .title {
+        font-size: 2rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+    }
+
+    .divider {
+        color: var(--color-surface);
+        text-align: center;
+        font-size: 0.75rem;
+        margin: var(--space-md) 0;
+        user-select: none;
+    }
+
+    .lead {
+        color: var(--color-text);
+        line-height: 1.8;
+        max-width: 38rem;
+        margin: 0 auto;
+    }
+
+    .section {
+        margin: var(--space-lg) 0;
+    }
+
+    .faq-list {
+        display: grid;
+        gap: var(--space-md);
+    }
+
+    .faq-item {
+        padding: var(--space-md);
+        border-radius: 8px;
+        background: color-mix(in srgb, var(--color-bg-light) 88%, transparent);
+        border: 1px solid color-mix(in srgb, var(--color-surface) 70%, transparent);
+    }
+
+    .faq-item h3 {
+        font-size: 0.98rem;
+        color: var(--color-accent-bright);
+        margin-bottom: var(--space-xs);
+        line-height: 1.5;
+    }
+
+    .faq-item p {
+        color: var(--color-text-dim);
+        line-height: 1.75;
+    }
+
+    .note {
+        padding: var(--space-md);
+        border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+        background:
+            linear-gradient(
+                135deg,
+                color-mix(in srgb, var(--color-accent) 12%, transparent),
+                transparent 70%
+            ),
+            color-mix(in srgb, var(--color-bg-light) 84%, transparent);
+        border-radius: 8px;
+    }
+
+    .note p {
+        color: var(--color-text);
+        line-height: 1.7;
+    }
+
+    .footer {
+        margin-top: var(--space-xl);
+        text-align: center;
+    }
+
+    .footer p {
+        color: var(--color-text-dim);
+        font-size: 0.85rem;
+    }
+
+    .fade-in {
+        animation: fadeIn 0.6s ease-out forwards;
+        opacity: 0;
+    }
+
+    .fade-in:nth-child(1) {
+        animation-delay: 0.1s;
+    }
+
+    .fade-in:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .fade-in:nth-child(3) {
+        animation-delay: 0.3s;
+    }
+
+    .fade-in:nth-child(4) {
+        animation-delay: 0.4s;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @media (max-width: 600px) {
+        .container {
+            padding: var(--space-md);
+        }
+
+        .title {
+            font-size: 1.5rem;
+        }
+
+        .divider {
+            font-size: 0.6rem;
+        }
+
+        .lead {
+            font-size: 0.95rem;
+        }
+
+        .faq-item {
+            padding: var(--space-sm);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .matrix-bg {
+            animation: none;
+        }
+
+        .fade-in {
+            animation: none;
+            opacity: 1;
+        }
+    }
+</style>
-- 
2.52.0