forrest-mims-library/site/src/pages/index.astro

---
import Layout from '@/layouts/Layout.astro';
import BookGrid from '@/components/BookGrid.astro';
import { getCollection } from 'astro:content';

const allBooks = await getCollection('books');

const mimsBooks = allBooks
  .filter(book => book.data.collection === 'mims')
  .sort((a, b) => a.data.sortOrder - b.data.sortOrder);

const uglysBooks = allBooks
  .filter(book => book.data.collection === 'uglys')
  .sort((a, b) => a.data.sortOrder - b.data.sortOrder);

const featuredMimsBooks = mimsBooks.slice(0, 4);
const totalBooks = allBooks.length;
---

<Layout title="Home">
  <!-- Hero Section -->
  <section class="text-center py-12 space-y-6">
    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/20 text-accent-foreground text-sm font-medium">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
      </svg>
      Classic Electronics & Electrical Education
    </div>

    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold title-accent max-w-4xl mx-auto leading-tight">
      The Hand-Drawn References That
      <span class="text-primary">Taught Generations</span>
    </h1>

    <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
      Rediscover legendary electronics and electrical references. From Forrest Mims' hand-illustrated
      circuit notebooks to Ugly's essential electrician's guides - timeless knowledge preserved digitally.
    </p>

    <div class="flex flex-wrap items-center justify-center gap-4 pt-4">
      <a
        href="#collections"
        class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
        </svg>
        Browse Collections
      </a>
      <a
        href="https://archive.org"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center gap-2 px-6 py-3 border border-border text-foreground rounded-lg font-medium hover:bg-muted transition-colors"
      >
        About Archive.org
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
          <polyline points="15 3 21 3 21 9"/>
          <line x1="10" x2="21" y1="14" y2="3"/>
        </svg>
      </a>
    </div>
  </section>

  <!-- Stats -->
  <section class="grid grid-cols-2 md:grid-cols-4 gap-4 py-8">
    <div class="text-center p-6 rounded-lg bg-card border border-border">
      <div class="text-3xl font-bold text-primary">{totalBooks}</div>
      <div class="text-sm text-muted-foreground">References</div>
    </div>
    <div class="text-center p-6 rounded-lg bg-card border border-border">
      <div class="text-3xl font-bold text-primary">2</div>
      <div class="text-sm text-muted-foreground">Collections</div>
    </div>
    <div class="text-center p-6 rounded-lg bg-card border border-border">
      <div class="text-3xl font-bold text-primary">100+</div>
      <div class="text-sm text-muted-foreground">Circuit Projects</div>
    </div>
    <div class="text-center p-6 rounded-lg bg-card border border-border">
      <div class="text-3xl font-bold text-primary">Free</div>
      <div class="text-sm text-muted-foreground">PDF Downloads</div>
    </div>
  </section>

  <!-- Collection Cards -->
  <section id="collections" class="py-12 scroll-mt-8">
    <h2 class="text-2xl font-bold title-accent text-center mb-8">Our Collections</h2>

    <div class="grid md:grid-cols-2 gap-6">
      <!-- Mims Collection Card -->
      <a href="/mims" class="group block p-6 rounded-lg bg-card border border-border hover:border-primary/50 transition-all hover:shadow-lg">
        <div class="flex items-start gap-4">
          <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
              <path d="M12 20h9"/>
              <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
            </svg>
          </div>
          <div class="flex-1">
            <div class="flex items-center justify-between">
              <h3 class="text-xl font-semibold group-hover:text-primary transition-colors">Forrest Mims Mini-Notebooks</h3>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground group-hover:text-primary transition-colors">
                <polyline points="9 18 15 12 9 6"/>
              </svg>
            </div>
            <p class="text-sm text-muted-foreground mt-1">
              The legendary Radio Shack Engineer's Mini-Notebook series. Hand-illustrated electronics
              education that taught a generation.
            </p>
            <div class="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
              <span class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                </svg>
                {mimsBooks.length} notebooks
              </span>
              <span>1985-1993</span>
            </div>
          </div>
        </div>
      </a>

      <!-- Ugly's Collection Card -->
      <a href="/uglys" class="group block p-6 rounded-lg bg-card border border-border hover:border-chart-2/50 transition-all hover:shadow-lg">
        <div class="flex items-start gap-4">
          <div class="w-14 h-14 rounded-lg bg-chart-2/10 flex items-center justify-center shrink-0 group-hover:bg-chart-2/20 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-chart-2">
              <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
            </svg>
          </div>
          <div class="flex-1">
            <div class="flex items-center justify-between">
              <h3 class="text-xl font-semibold group-hover:text-chart-2 transition-colors">Ugly's Electrical References</h3>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground group-hover:text-chart-2 transition-colors">
                <polyline points="9 18 15 12 9 6"/>
              </svg>
            </div>
            <p class="text-sm text-muted-foreground mt-1">
              The pocket-sized bible for electricians. Packed with tables, formulas, wiring diagrams,
              and NEC code references.
            </p>
            <div class="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
              <span class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                </svg>
                {uglysBooks.length} reference{uglysBooks.length !== 1 ? 's' : ''}
              </span>
              <span>Since 1970</span>
            </div>
          </div>
        </div>
      </a>
    </div>
  </section>

  <!-- Featured Mims Collection -->
  <section class="py-8">
    <div class="flex items-center justify-between mb-6">
      <div>
        <h2 class="text-2xl font-bold title-accent">Featured: Mims Mini-Notebooks</h2>
        <p class="text-muted-foreground">Hand-illustrated electronics that shaped a generation</p>
      </div>
      <a
        href="/mims"
        class="text-sm font-medium text-primary hover:underline flex items-center gap-1"
      >
        View all {mimsBooks.length} notebooks
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </a>
    </div>

    <BookGrid books={featuredMimsBooks} />
  </section>

  <!-- About Section -->
  <section class="py-12 mt-8 border-t border-border">
    <div class="grid md:grid-cols-2 gap-8 items-center">
      <div class="space-y-4">
        <h2 class="text-2xl font-bold title-accent">Preserving Electronics Heritage</h2>
        <p class="text-muted-foreground leading-relaxed">
          These references represent the golden age of hands-on electronics education. Forrest M. Mims III,
          a Texas A&M graduate and one of the most widely read electronics authors in history, taught millions
          through his hand-drawn Radio Shack notebooks. His work sits alongside Ugly's practical field guides,
          trusted by electricians everywhere.
        </p>
        <p class="text-muted-foreground leading-relaxed">
          What makes these works special is their approach: clear explanations, practical focus, and
          a personal touch that made complex concepts accessible. Many engineers credit these materials
          with sparking their interest in electronics — reading them under the covers with a flashlight,
          building circuits on breadboards, learning schematic symbols for the first time.
        </p>
        <p class="text-muted-foreground leading-relaxed">
          All materials have been preserved and made available through Archive.org. Click any item
          to view it with our embedded PDF reader, or download it in various formats.
        </p>
      </div>
      <div class="circuit-border p-6 bg-card">
        <div class="space-y-4">
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 rounded bg-chart-1/20 flex items-center justify-center shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-chart-1">
                <path d="M12 20h9"/>
                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
              </svg>
            </div>
            <div>
              <h4 class="font-semibold">Hand-Illustrated</h4>
              <p class="text-sm text-muted-foreground">Every diagram drawn by hand with meticulous care</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 rounded bg-accent/20 flex items-center justify-center shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12 6 12 12 16 14"/>
              </svg>
            </div>
            <div>
              <h4 class="font-semibold">Timeless Knowledge</h4>
              <p class="text-sm text-muted-foreground">Fundamentals that remain relevant decades later</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 rounded bg-primary/20 flex items-center justify-center shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
              </svg>
            </div>
            <div>
              <h4 class="font-semibold">Practical Projects</h4>
              <p class="text-sm text-muted-foreground">Real circuits you can build and learn from</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 rounded bg-chart-2/20 flex items-center justify-center shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-chart-2">
                <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
              </svg>
            </div>
            <div>
              <h4 class="font-semibold">Field-Ready</h4>
              <p class="text-sm text-muted-foreground">Pocket references built for real-world use</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</Layout>