daily-journal-prompt/frontend/src/pages/index.astro

---
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 Writing Prompt</h2>
          </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-warning" onclick="window.location.href='/api/v1/prompts/history'">
              <i class="fas fa-history"></i> View History (API)
            </button>
            <button class="btn btn-info" onclick="window.location.href='/docs'">
              <i class="fas fa-book"></i> API Documentation
            </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>