feat: added pages, forms, and functionality.

syleguide.md

@@ -0,0 +1,74 @@
+# Move. Compete. Play. — Design System
+
+**Version:** 1.0 (MVP)
+**Theme:** Warm Futurism / The Developer Gym
+**Vibe:** Dark, focused, high-performance, but welcoming. Think "Nike Pro meets VS Code."
+
+---
+
+## 1. Color Palette
+
+### **Primary (The Gym Floor)**
+* **Slate 950 (`#020617`):** The main background. Deep, infinite, focused.
+* **Slate 900 (`#0f172a`):** Surface / Cards. Slightly elevated to create depth.
+* **Slate 50 (`#f8fafc`):** Primary Text. High contrast but not harsh white.
+
+### **Accent (The Energy)**
+* **Amber 500 (`#f59e0b`):** "The Spark." Used for primary buttons, active states, and key highlights.
+* **Amber 400 (`#fbbf24`):** Hover states and glowing text effects.
+* **Emerald 500 (`#10b981`):** "Success." Used for passing tests, deployed status, and growth metrics.
+
+### **Gradients (The Atmosphere)**
+* **The Warm Glow:** `bg-gradient-to-r from-amber-500/20 to-transparent` (Used for background blobs).
+* **The Glass Surface:** `bg-slate-900/50 backdrop-blur-md border border-slate-800` (Used for HUDs and floating navs).
+
+---
+
+## 2. Typography
+
+**Font Family:** `Inter` (Sans-serif) for UI / `Calistoga` (Serif) for Headlines (Optional).
+
+* **H1 (Hero):** Text-5xl / Bold / Tight Tracking.
+    * *Usage:* Landing page main statement.
+* **H2 (Section):** Text-3xl / Semibold.
+    * *Usage:* "Build Seasons," "Leaderboard."
+* **Body:** Text-base / Text-slate-400.
+    * *Usage:* Paragraphs. Easy to read, low eye strain.
+* **Mono:** `JetBrains Mono` or `Fira Code`.
+    * *Usage:* Code snippets, terminal outputs, and data values.
+
+---
+
+## 3. Core Components
+
+### **Buttons**
+* **Primary (Action):**
+    * `bg-amber-500 text-slate-950 font-bold px-6 py-3 rounded-lg hover:bg-amber-400 transition-all`
+    * *Effect:* Subtle shadow glow on hover.
+* **Secondary (Ghost):**
+    * `border border-slate-700 text-slate-300 px-6 py-3 rounded-lg hover:border-slate-500 hover:text-white transition-all`
+
+### **Cards (Bento Grid Style)**
+* **Container:** `bg-slate-900 border border-slate-800 rounded-xl p-6`
+* **Hover Effect:** Border color shifts to `slate-600` or subtle `amber-500/20` glow.
+* **Content:** Icon top-left, heavy bold title, muted description.
+
+### **Badges / Tags**
+* **Status (Live):** `bg-green-500/10 text-green-400 border border-green-500/20 rounded-full px-3 py-1 text-xs uppercase tracking-wider`
+* **Tag (Tech):** `bg-slate-800 text-slate-400 border border-slate-700 rounded-md px-2 py-1 text-xs font-mono`
+
+---
+
+## 4. Imagery & Effects
+
+* **Noise Texture:** A subtle grain overlay (5% opacity) to prevent the dark background from looking "flat."
+* **Glow Orbs:** Blurred circles of Amber or Indigo positioned behind text to separate it from the background.
+* **Grid Lines:** Very faint (`slate-800/50`) background grid patterns to reinforce the "engineering" aesthetic.
+
+---
+
+## 5. Tone of Voice
+
+* **Direct & Action-Oriented:** "Ship Code," "Deploy Now," "Join the League."
+* **No Fluff:** Avoid corporate jargon like "synergy" or "innovative solutions."
+* **Encouraging but Tough:** "The code won't write itself." / "Respect the grind."