non-building checkpoint 1

frontend/src/pages/index.astro

@@ -0,0 +1,98 @@
+---
+import Layout from '../layouts/Layout.astro';
+import PromptDisplay from '../components/PromptDisplay.jsx';
+import StatsDashboard from '../components/StatsDashboard.jsx';
+---
+
+<Layout>
+  <div class="container">
+    <div class="text-center mb-4">
+      <h1><i class="fas fa-magic"></i> Welcome to Daily Journal Prompt Generator</h1>
+      <p class="mt-2">Get inspired with AI-generated writing prompts for your daily journal practice</p>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+      <div class="lg:col-span-2">
+        <div class="card">
+          <div class="card-header">
+            <h2><i class="fas fa-scroll"></i> Today's Prompts</h2>
+            <div class="flex gap-2">
+              <button class="btn btn-primary">
+                <i class="fas fa-redo"></i> Draw New Prompts
+              </button>
+              <button class="btn btn-secondary">
+                <i class="fas fa-plus"></i> Fill Pool
+              </button>
+            </div>
+          </div>
+
+          <PromptDisplay client:load />
+        </div>
+      </div>
+
+      <div>
+        <div class="card">
+          <div class="card-header">
+            <h2><i class="fas fa-chart-bar"></i> Quick Stats</h2>
+          </div>
+
+          <StatsDashboard client:load />
+        </div>
+
+        <div class="card mt-4">
+          <div class="card-header">
+            <h2><i class="fas fa-lightbulb"></i> Quick Actions</h2>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <button class="btn btn-primary">
+              <i class="fas fa-dice"></i> Draw 6 Prompts
+            </button>
+            <button class="btn btn-secondary">
+              <i class="fas fa-sync"></i> Refill Pool
+            </button>
+            <button class="btn btn-success">
+              <i class="fas fa-palette"></i> Generate Themes
+            </button>
+            <button class="btn btn-warning">
+              <i class="fas fa-history"></i> View History
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card mt-4">
+      <div class="card-header">
+        <h2><i class="fas fa-info-circle"></i> How It Works</h2>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="text-center">
+          <div class="p-4">
+            <i class="fas fa-robot fa-3x mb-3" style="color: var(--primary-color);"></i>
+            <h3>AI-Powered</h3>
+            <p>Prompts are generated using advanced AI models trained on creative writing</p>
+          </div>
+        </div>
+
+        <div class="text-center">
+          <div class="p-4">
+            <i class="fas fa-brain fa-3x mb-3" style="color: var(--secondary-color);"></i>
+            <h3>Smart History</h3>
+            <p>The AI learns from your previous prompts to avoid repetition and improve relevance</p>
+          </div>
+        </div>
+
+        <div class="text-center">
+          <div class="p-4">
+            <i class="fas fa-battery-full fa-3x mb-3" style="color: var(--success-color);"></i>
+            <h3>Prompt Pool</h3>
+            <p>Always have prompts ready with our caching system that maintains a pool of generated prompts</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
+