1 files changed, 81 insertions, 0 deletions
diff --git a/website.templ b/website.templ
new file mode 100644
index 0000000..a3f137a
--- /dev/null
+++ b/website.templ
@@ -0,0 +1,81 @@
+package main
+
+import "fmt"
+
+// 1. Shared Base Layout Component
+templ PageLayout(title string) {
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>{ title }</title>
+        <style>
+            body { font-family: monospace; background: #0f172a; color: #f8fafc; padding: 2rem; line-height: 1.5; }
+            nav a { color: #38bdf8; margin-right: 1rem; text-decoration: none; }
+            nav a:hover { text-decoration: underline; }
+            .card { background: #1e293b; padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid #334155; }
+            .badge-active { color: #4ade80; }
+            .badge-inactive { color: #f87171; }
+        </style>
+        <link rel="stylesheet" href="/public/style.css"/>
+    </head>
+    <body>
+        <nav>
+            <a href="/">/home</a>
+            <a href="/about">/about</a>
+            <a href="/items">/items</a>
+        </nav>
+        <hr style="border-color: #334155; margin: 1rem 0;"/>
+        { children... }
+    </body>
+    </html>
+}
+
+// 2. Page 1: Home
+templ HomePage() {
+    @PageLayout("Home") {
+        <h1>Home</h1>
+        <p>Go server running with Templ templates and Air hot-reloading.</p>
+    }
+}
+
+// 3. Page 2: About
+templ AboutPage() {
+    @PageLayout("About") {
+        <h1 class="text-3xl font-bold underline">About</h1>
+        <p>Single-binary web app using Go's standard library net/http.</p>
+    }
+}
+
+// Data struct for dynamic rendering
+type Item struct {
+    Name   string
+    Active bool
+}
+
+// 4. Page 3: Dynamic Data (Conditionals + Loops)
+templ ItemsPage(items []Item) {
+    @PageLayout("Items") {
+        <h1>Items</h1>
+        <div class="card">
+            if len(items) == 0 {
+                <p>No items in database.</p>
+            } else {
+                <ul>
+                    for _, item := range items {
+                        <li>
+                            <span>{ item.Name }</span>
+                            if item.Active {
+                                <span class="badge-active"> [ACTIVE]</span>
+                            } else {
+                                <span class="badge-inactive"> [INACTIVE]</span>
+                            }
+                        </li>
+                    }
+                </ul>
+            }
+        </div>
+        <p style="color: #94a3b8; font-size: 0.8rem; margin-top: 1rem;">
+            { fmt.Sprintf("Total items processed: %d", len(items)) }
+        </p>
+    }