From e2e36ad7aefc869f9fd8e8dbd49b62d848827def Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Thu, 30 Oct 2025 14:28:54 +0100
Subject: [PATCH] Add internal styleguide page with HTTP Basic Auth

- Create /internal/styleguide route with protected layout
- Add styleguide.vue layout with auth protection
- Configure internal pages auth credentials in .env.example
- Update nuxt.config for internal routes handling
---
 .env.example                      |   7 +
 app/layouts/styleguide.vue        |  10 +
 app/pages/internal/styleguide.vue | 605 ++++++++++++++++++++++++++++++
 nuxt.config.ts                    |   6 +-
 4 files changed, 627 insertions(+), 1 deletion(-)
 create mode 100644 app/layouts/styleguide.vue
 create mode 100644 app/pages/internal/styleguide.vue

diff --git a/.env.example b/.env.example
index c5f94ca..bbf1ade 100644
--- a/.env.example
+++ b/.env.example
@@ -108,6 +108,13 @@ SMTP_FROM=noreply@experimenta.science
 # SENTRY_DSN=https://xxx@sentry.io/xxx
 # SENTRY_ENVIRONMENT=development
 
+# ==============================================
+# INTERNAL PAGES (Styleguide, Admin)
+# ==============================================
+# HTTP Basic Auth credentials for /internal/* routes
+INTERNAL_AUTH_USERNAME=experimenta
+INTERNAL_AUTH_PASSWORD=change-me-to-secure-password
+
 # ==============================================
 # DEVELOPMENT TOOLS
 # ==============================================
diff --git a/app/layouts/styleguide.vue b/app/layouts/styleguide.vue
new file mode 100644
index 0000000..706c613
--- /dev/null
+++ b/app/layouts/styleguide.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// Styleguide layout - minimal, no header/footer
+// Used for internal styleguide page
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <slot />
+  </div>
+</template>
diff --git a/app/pages/internal/styleguide.vue b/app/pages/internal/styleguide.vue
new file mode 100644
index 0000000..8effe65
--- /dev/null
+++ b/app/pages/internal/styleguide.vue
@@ -0,0 +1,605 @@
+<script setup lang="ts">
+/**
+ * experimenta Design System Styleguide
+ * Internal page showing all design tokens and components
+ * Protected by Basic Auth via server/middleware/internal-auth.ts
+ */
+
+definePageMeta({
+  layout: 'styleguide',
+})
+
+// Sample button click handler for interactive examples
+const handleClick = () => {
+  console.log('Button clicked!')
+}
+
+// Copy code snippet to clipboard
+const copyCode = async (code: string) => {
+  try {
+    await navigator.clipboard.writeText(code)
+    alert('Code copied to clipboard!')
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-7xl mx-auto">
+      <!-- Header -->
+      <header class="mb-12">
+        <h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experimenta Design System</h1>
+        <p class="text-xl text-white/90 mb-6">
+          Component library and design tokens for my.experimenta.science
+        </p>
+        <div class="flex gap-4">
+          <a href="/" class="link-accent">← Back to Homepage</a>
+        </div>
+      </header>
+
+      <!-- Table of Contents -->
+      <nav class="card-glass mb-12">
+        <h2 class="text-2xl font-semibold mb-4">Contents</h2>
+        <ul class="grid grid-cols-2 md:grid-cols-4 gap-4 text-white/90">
+          <li><a href="#overview" class="link-primary">Overview</a></li>
+          <li><a href="#colors" class="link-primary">Colors</a></li>
+          <li><a href="#typography" class="link-primary">Typography</a></li>
+          <li><a href="#buttons" class="link-primary">Buttons</a></li>
+          <li><a href="#cards" class="link-primary">Cards</a></li>
+          <li><a href="#forms" class="link-primary">Forms</a></li>
+          <li><a href="#links" class="link-primary">Links</a></li>
+          <li><a href="#status" class="link-primary">Status Messages</a></li>
+          <li><a href="#progress" class="link-primary">Progress Bars</a></li>
+          <li><a href="#components" class="link-primary">Components</a></li>
+        </ul>
+      </nav>
+
+      <!-- Overview Section -->
+      <section id="overview" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Overview</h2>
+        <div class="card-info card-accent-border">
+          <h3 class="text-xl font-semibold mb-4">Design Principles</h3>
+          <ul class="list-disc list-inside space-y-2 text-white/90">
+            <li><strong>Mobile-First:</strong> All components optimized for mobile, then scaled up</li>
+            <li><strong>Accessibility:</strong> WCAG 2.1 AA compliance, keyboard navigation</li>
+            <li><strong>Brand Consistency:</strong> experimenta color palette and typography</li>
+            <li><strong>8px Grid:</strong> Spacing system based on 8px increments</li>
+            <li><strong>Dark Theme:</strong> Purple gradient background with high contrast text</li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Colors Section -->
+      <section id="colors" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Colors</h2>
+
+        <!-- Primary Colors -->
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Primary Colors</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+              <div class="h-24 rounded-lg bg-experimenta-primary mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#e6007e</p>
+              <p class="text-sm text-white/70">experimenta-primary</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-experimenta-accent mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#f59d24</p>
+              <p class="text-sm text-white/70">experimenta-accent</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-experimenta-red mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#e40521</p>
+              <p class="text-sm text-white/70">experimenta-red</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-white mb-2"></div>
+              <p class="font-mono text-sm text-black">#ffffff</p>
+              <p class="text-sm text-white/70">white</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Background Colors -->
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Background Colors (Purple Gradient)</h3>
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+            <div>
+              <div class="h-24 rounded-lg bg-purple-950 mb-2 border border-white/20"></div>
+              <p class="font-mono text-sm text-white/90">#2e1065</p>
+              <p class="text-sm text-white/70">purple-950</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-purple-975 mb-2 border border-white/20"></div>
+              <p class="font-mono text-sm text-white/90">#1a0a3a</p>
+              <p class="text-sm text-white/70">purple-975</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-purple-990 mb-2 border border-white/20"></div>
+              <p class="font-mono text-sm text-white/90">#0f051d</p>
+              <p class="text-sm text-white/70">purple-990</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Semantic Colors -->
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Semantic Colors</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+              <div class="h-24 rounded-lg bg-success mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#10b981</p>
+              <p class="text-sm text-white/70">success</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-warning mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#f59e0b</p>
+              <p class="text-sm text-white/70">warning</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-error mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#ef4444</p>
+              <p class="text-sm text-white/70">error</p>
+            </div>
+            <div>
+              <div class="h-24 rounded-lg bg-info mb-2"></div>
+              <p class="font-mono text-sm text-white/90">#3b82f6</p>
+              <p class="text-sm text-white/70">info</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Typography Section -->
+      <section id="typography" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Typography</h2>
+
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Font Family</h3>
+          <p class="text-lg text-white/90 mb-2">
+            <strong>Roboto Variable Font</strong> - Locally hosted, weights 100-900
+          </p>
+          <p class="text-white/70">
+            Loaded from <code class="font-mono bg-white/10 px-2 py-1 rounded">/public/fonts/roboto/</code>
+          </p>
+        </div>
+
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Headings</h3>
+          <div class="space-y-4">
+            <div>
+              <h1 class="text-4xl font-bold">Heading 1 - 4xl Bold</h1>
+              <code class="text-sm text-white/70">text-4xl font-bold</code>
+            </div>
+            <div>
+              <h2 class="text-3xl font-bold">Heading 2 - 3xl Bold</h2>
+              <code class="text-sm text-white/70">text-3xl font-bold</code>
+            </div>
+            <div>
+              <h3 class="text-2xl font-semibold">Heading 3 - 2xl Semibold</h3>
+              <code class="text-sm text-white/70">text-2xl font-semibold</code>
+            </div>
+            <div>
+              <h4 class="text-xl font-semibold">Heading 4 - xl Semibold</h4>
+              <code class="text-sm text-white/70">text-xl font-semibold</code>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Body Text</h3>
+          <div class="space-y-4">
+            <div>
+              <p class="text-lg">Body Large - text-lg (1.125rem / 18px)</p>
+              <code class="text-sm text-white/70">text-lg</code>
+            </div>
+            <div>
+              <p class="text-base">Body Regular - text-base (1rem / 16px)</p>
+              <code class="text-sm text-white/70">text-base</code>
+            </div>
+            <div>
+              <p class="text-sm">Body Small - text-sm (0.875rem / 14px)</p>
+              <code class="text-sm text-white/70">text-sm</code>
+            </div>
+            <div>
+              <p class="text-xs">Body Extra Small - text-xs (0.75rem / 12px)</p>
+              <code class="text-sm text-white/70">text-xs</code>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Buttons Section -->
+      <section id="buttons" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Buttons</h2>
+
+        <!-- experimenta Button -->
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">experimenta Button (Official)</h3>
+          <p class="mb-6 text-white/90">
+            The official experimenta button with animated gradient effect (pink to red on hover).
+          </p>
+
+          <div class="flex flex-wrap gap-4 items-center mb-6">
+            <UiButton variant="experimenta" size="experimenta" @click="handleClick">
+              experimenta Button
+            </UiButton>
+
+            <UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
+              As Link
+            </UiButton>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="experimenta" size="experimenta" @click="handleClick"&gt;
+  experimenta Button
+&lt;/UiButton&gt;</code></pre>
+          </details>
+        </div>
+
+        <!-- shadcn-nuxt Button Variants -->
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-4 text-white">shadcn-nuxt Button Variants</h3>
+          <p class="mb-6 text-white/90">All button variants from shadcn-nuxt component library:</p>
+
+          <div class="flex flex-wrap gap-4 mb-6">
+            <UiButton variant="default" @click="handleClick">Default</UiButton>
+            <UiButton variant="destructive" @click="handleClick">Destructive</UiButton>
+            <UiButton variant="outline" @click="handleClick">Outline</UiButton>
+            <UiButton variant="secondary" @click="handleClick">Secondary</UiButton>
+            <UiButton variant="ghost" @click="handleClick">Ghost</UiButton>
+            <UiButton variant="link" @click="handleClick">Link</UiButton>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="default"&gt;Default&lt;/UiButton&gt;
+&lt;UiButton variant="destructive"&gt;Destructive&lt;/UiButton&gt;
+&lt;UiButton variant="outline"&gt;Outline&lt;/UiButton&gt;
+&lt;UiButton variant="secondary"&gt;Secondary&lt;/UiButton&gt;
+&lt;UiButton variant="ghost"&gt;Ghost&lt;/UiButton&gt;
+&lt;UiButton variant="link"&gt;Link&lt;/UiButton&gt;</code></pre>
+          </details>
+        </div>
+      </section>
+
+      <!-- Cards Section -->
+      <section id="cards" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Cards</h2>
+
+        <!-- Glass Card -->
+        <div class="card-glass mb-8">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Glass Card (.card-glass)</h3>
+          <p class="text-white/90">
+            Semi-transparent card with glassmorphism effect. Perfect for content containers.
+          </p>
+        </div>
+
+        <!-- Info Card -->
+        <div class="card-info card-accent-border mb-8">
+          <h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Info Card (.card-info .card-accent-border)</h3>
+          <p>Info section with Safrangold left border accent. Used for notices and information blocks.</p>
+        </div>
+
+        <!-- Progress Card -->
+        <div class="card-progress card-accent-border mb-8">
+          <div class="progress-header">
+            <h3 class="progress-title">Progress Card (.card-progress)</h3>
+            <div class="progress-stats">2963 / 4931</div>
+          </div>
+          <div class="progress-bar-wrapper">
+            <div class="progress-bar" style="width: 60.1%"></div>
+            <div class="progress-percentage">60.1%</div>
+          </div>
+        </div>
+
+        <!-- White Info Cards (like experimenta.science) -->
+        <div class="mb-8">
+          <h3 class="text-2xl font-semibold mb-6 text-white">White Info Cards (.card-white)</h3>
+          <p class="text-white/90 mb-6">
+            White content cards like on experimenta.science homepage. With pink links that have chevron arrows and hover
+            to orange.
+          </p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="card-white">
+              <h3>Öffnungszeiten</h3>
+              <p>
+                Du möchtest nur in unsere Ausstellung, den Science Dome oder in die Sonderausstellung?
+                Oder doch lieber alles erleben? Weisst aber nicht wann? Hier findest du eine Übersicht
+                über unsere Öffnungszeiten.
+              </p>
+              <a href="#">Unsere Öffnungszeiten</a>
+            </div>
+
+            <div class="card-white">
+              <h3>Preise</h3>
+              <p>
+                Hier findest du einen Überblick über alle unsere Tickets, Preise und Ermäßigungen.
+                Wir haben verschiedene Angebote für dich – je nach dem, wie oft du zu uns kommen und
+                was du erleben möchtest.
+              </p>
+              <a href="#">Zur Preisübersicht</a>
+            </div>
+
+            <div class="card-white">
+              <h3>Ticketshop</h3>
+              <p>
+                Du hast dich für ein Ticket entschieden? Dann kannst du es hier buchen.
+                Wir freuen uns auf deinen Besuch!
+              </p>
+              <a href="#">Jetzt Ticket kaufen</a>
+            </div>
+
+            <div class="card-white">
+              <h3>Anfahrt</h3>
+              <p>
+                Ob mit dem Auto, dem Zug, dem Reisebus oder der Stadtbahn: Es gibt viele Möglichkeiten
+                zu uns zu kommen. Hier haben wir für dich alle Informationen zur Anreise zusammengestellt.
+              </p>
+              <a href="#">Zur Anreise</a>
+            </div>
+          </div>
+        </div>
+
+        <details class="bg-white/5 p-4 rounded-lg card-glass">
+          <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+          <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Glass Card --&gt;
+&lt;div class="card-glass"&gt;
+  &lt;h3&gt;Title&lt;/h3&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;!-- Info Card with Accent Border --&gt;
+&lt;div class="card-info card-accent-border"&gt;
+  &lt;h3&gt;Title&lt;/h3&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;!-- Progress Card --&gt;
+&lt;div class="card-progress card-accent-border"&gt;
+  &lt;div class="progress-header"&gt;
+    &lt;h3 class="progress-title"&gt;Title&lt;/h3&gt;
+    &lt;div class="progress-stats"&gt;2963 / 4931&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="progress-bar-wrapper"&gt;
+    &lt;div class="progress-bar" style="width: 60.1%"&gt;&lt;/div&gt;
+    &lt;div class="progress-percentage"&gt;60.1%&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!-- White Info Card --&gt;
+&lt;div class="card-white"&gt;
+  &lt;h3&gt;Card Title&lt;/h3&gt;
+  &lt;p&gt;
+    Card description text goes here. Links automatically get
+    pink color with chevron arrow and hover to orange.
+  &lt;/p&gt;
+  &lt;a href="#"&gt;Link Text&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+        </details>
+      </section>
+
+      <!-- Forms Section -->
+      <section id="forms" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Forms</h2>
+
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-6 text-white">Form Elements</h3>
+
+          <div class="space-y-6">
+            <!-- Text Input -->
+            <div>
+              <label class="form-label">Text Input (.form-input)</label>
+              <input type="text" class="form-input" placeholder="Enter text..." />
+            </div>
+
+            <!-- Email Input -->
+            <div>
+              <label class="form-label">Email Input</label>
+              <input type="email" class="form-input" placeholder="email@example.com" />
+            </div>
+
+            <!-- Textarea -->
+            <div>
+              <label class="form-label">Textarea</label>
+              <textarea class="form-input" rows="4" placeholder="Enter message..."></textarea>
+            </div>
+
+            <!-- Checkbox -->
+            <div>
+              <label class="flex items-center gap-3">
+                <input type="checkbox" class="form-checkbox" checked />
+                <span class="text-white/90">Checkbox (.form-checkbox)</span>
+              </label>
+            </div>
+
+            <!-- Radio Buttons -->
+            <div>
+              <label class="form-label">Radio Buttons</label>
+              <div class="flex gap-4">
+                <label class="flex items-center gap-2">
+                  <input type="radio" name="demo" class="form-checkbox" checked />
+                  <span class="text-white/90">Option 1</span>
+                </label>
+                <label class="flex items-center gap-2">
+                  <input type="radio" name="demo" class="form-checkbox" />
+                  <span class="text-white/90">Option 2</span>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg mt-6">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;label class="form-label"&gt;Text Input&lt;/label&gt;
+&lt;input type="text" class="form-input" placeholder="Enter text..." /&gt;
+
+&lt;label class="flex items-center gap-3"&gt;
+  &lt;input type="checkbox" class="form-checkbox" /&gt;
+  &lt;span&gt;Checkbox Label&lt;/span&gt;
+&lt;/label&gt;</code></pre>
+          </details>
+        </div>
+      </section>
+
+      <!-- Links Section -->
+      <section id="links" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Links</h2>
+
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-6 text-white">Link Styles</h3>
+
+          <div class="space-y-4">
+            <div>
+              <a href="#" class="link-primary">Primary Link (.link-primary)</a>
+              <p class="text-sm text-white/70 mt-1">Orange color, used for general navigation (WCAG AA compliant, 4.62:1
+                contrast)</p>
+            </div>
+
+            <div>
+              <a href="#" class="link-accent">Accent Link (.link-accent)</a>
+              <p class="text-sm text-white/70 mt-1">Orange color, used for emphasis</p>
+            </div>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg mt-6">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;a href="#" class="link-primary"&gt;Primary Link&lt;/a&gt;
+&lt;a href="#" class="link-accent"&gt;Accent Link&lt;/a&gt;</code></pre>
+          </details>
+        </div>
+      </section>
+
+      <!-- Status Messages Section -->
+      <section id="status" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Status Messages</h2>
+
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3>
+
+          <div class="space-y-4">
+            <div class="status-message status-success">
+              <span class="status-icon">✓</span>
+              <span>Success message</span>
+            </div>
+
+            <div class="status-message status-warning">
+              <span class="status-icon">⚠</span>
+              <span>Warning message</span>
+            </div>
+
+            <div class="status-message status-error">
+              <span class="status-icon">✕</span>
+              <span>Error message</span>
+            </div>
+
+            <div class="status-message status-info">
+              <span class="status-icon">ⓘ</span>
+              <span>Info message</span>
+            </div>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg mt-6">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;div class="status-message status-success"&gt;
+  &lt;span class="status-icon"&gt;✓&lt;/span&gt;
+  &lt;span&gt;Success message&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+        </div>
+      </section>
+
+      <!-- Progress Bars Section -->
+      <section id="progress" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Progress Bars</h2>
+
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-6 text-white">Progress Indicators</h3>
+
+          <div class="space-y-6">
+            <div>
+              <p class="text-sm text-white/90 mb-2">25% Progress</p>
+              <div class="progress-bar-wrapper">
+                <div class="progress-bar" style="width: 25%"></div>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-sm text-white/90 mb-2">50% Progress</p>
+              <div class="progress-bar-wrapper">
+                <div class="progress-bar" style="width: 50%"></div>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-sm text-white/90 mb-2">75% Progress</p>
+              <div class="progress-bar-wrapper">
+                <div class="progress-bar" style="width: 75%"></div>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-sm text-white/90 mb-2">100% Progress</p>
+              <div class="progress-bar-wrapper">
+                <div class="progress-bar" style="width: 100%"></div>
+              </div>
+            </div>
+          </div>
+
+          <details class="bg-white/5 p-4 rounded-lg mt-6">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;div class="progress-bar-wrapper"&gt;
+  &lt;div class="progress-bar" style="width: 60%"&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+        </div>
+      </section>
+
+      <!-- Components Section -->
+      <section id="components" class="mb-16">
+        <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Components</h2>
+
+        <div class="card-info card-accent-border">
+          <h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Available Components</h3>
+          <ul class="list-disc list-inside space-y-2 text-white/90">
+            <li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li>
+            <li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li>
+            <li><strong>UiButton</strong> - shadcn-nuxt Button component with 7 variants</li>
+          </ul>
+          <p class="mt-4 text-sm text-white/70">
+            See individual component files in <code
+              class="font-mono bg-white/10 px-2 py-1 rounded">/app/components/</code>
+          </p>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="mt-16 pt-8 border-t border-white/20 text-center text-white/70">
+        <p>my.experimenta Design System &copy; 2025</p>
+        <p class="text-sm mt-2">
+          For questions or updates, see
+          <a href="/docs/DESIGN_SYSTEM.md" class="link-primary" target="_blank">DESIGN_SYSTEM.md</a>
+        </p>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Additional scoped styles for styleguide page */
+details summary {
+  transition: opacity 0.2s;
+}
+
+details summary:hover {
+  opacity: 0.8;
+}
+
+details[open] summary {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ae0c5eb..58d7252 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,9 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-01-29',
 
-  devtools: { enabled: true },
+  devtools: {
+    enabled: ['true', '1'].includes(process.env.NUXT_DEVTOOLS_ENABLED || ''),
+  },
 
   // App configuration
   app: {
@@ -36,6 +38,8 @@ export default defineNuxtConfig({
     databaseUrl: process.env.DATABASE_URL,
     redisHost: process.env.REDIS_HOST || 'localhost',
     redisPort: process.env.REDIS_PORT || '6379',
+    internalAuthUsername: process.env.INTERNAL_AUTH_USERNAME || '',
+    internalAuthPassword: process.env.INTERNAL_AUTH_PASSWORD || '',
 
     // Public (exposed to client)
     public: {