awesome-copilot/website/src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Modal from '../components/Modal.astro';

const base = import.meta.env.BASE_URL;
---

<BaseLayout title="Home" activeNav="">
  <main id="main-content">
    <!-- Hero Section -->
    <section class="hero" aria-labelledby="hero-heading">
      <div class="container">
        <h1 id="hero-heading">Awesome GitHub Copilot</h1>
        <p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
        <div class="hero-search">
          <label for="global-search" class="sr-only">Search all resources</label>
          <input type="text" id="global-search" placeholder="Search all resources..." autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="search-results">
          <div id="search-results" class="search-results hidden" role="listbox" aria-label="Search results"></div>
        </div>
      </div>
    </section>

    <!-- Quick Links -->
    <section class="quick-links" aria-labelledby="quick-links-heading">
      <h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
      <div class="container">
        <div class="cards-grid">
          <a href={`${base}agents/`} class="card card-with-count" id="card-agents">
            <div class="card-icon" aria-hidden="true">🤖</div>
            <div class="card-content">
              <h3>Agents</h3>
              <p>Custom agents for specialized Copilot experiences</p>
            </div>
            <div class="card-count" data-count="agents" aria-label="Agent count">-</div>
          </a>
          <a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
            <div class="card-icon" aria-hidden="true">📋</div>
            <div class="card-content">
              <h3>Instructions</h3>
              <p>Coding standards and best practices for Copilot</p>
            </div>
            <div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
          </a>
          <a href={`${base}skills/`} class="card card-with-count" id="card-skills">
            <div class="card-icon" aria-hidden="true">⚡</div>
            <div class="card-content">
              <h3>Skills</h3>
              <p>Self-contained folders with instructions and resources</p>
            </div>
            <div class="card-count" data-count="skills" aria-label="Skill count">-</div>
          </a>
          <a href={`${base}hooks/`} class="card card-with-count" id="card-hooks">
            <div class="card-icon" aria-hidden="true">🪝</div>
            <div class="card-content">
              <h3>Hooks</h3>
              <p>Automated workflows triggered by agent events</p>
            </div>
            <div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
          </a>
          <a href={`${base}workflows/`} class="card card-with-count" id="card-workflows">
            <div class="card-icon" aria-hidden="true">⚡</div>
            <div class="card-content">
              <h3>Workflows</h3>
              <p>AI-powered automations for GitHub Actions</p>
            </div>
            <div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
          </a>
          <a href={`${base}plugins/`} class="card card-with-count" id="card-plugins">
            <div class="card-icon" aria-hidden="true">🔌</div>
            <div class="card-content">
              <h3>Plugins</h3>
              <p>Curated plugins organized by themes</p>
            </div>
            <div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
          </a>
          <a href={`${base}tools/`} class="card card-with-count" id="card-tools">
            <div class="card-icon" aria-hidden="true">🔧</div>
            <div class="card-content">
              <h3>Tools</h3>
              <p>MCP servers and developer tools</p>
            </div>
            <div class="card-count" data-count="tools" aria-label="Tool count">-</div>
          </a>
          <a href={`${base}learning-hub/`} class="card card-with-count" id="card-learning-hub">
            <div class="card-icon" aria-hidden="true">📚</div>
            <div class="card-content">
              <h3>Learning Hub</h3>
              <p>Articles and guides to master GitHub Copilot</p>
            </div>
          </a>
        </div>
      </div>
    </section>

    <!-- Featured Plugins -->
    <section class="featured" aria-labelledby="featured-heading">
      <div class="container">
        <h2 id="featured-heading">Featured Plugins</h2>
        <div id="featured-plugins" class="cards-grid" aria-live="polite">
          <!-- Populated by JS -->
        </div>
      </div>
    </section>

    <!-- Getting Started -->
    <section class="getting-started" aria-labelledby="getting-started-heading">
      <div class="container">
        <h2 id="getting-started-heading">Getting Started</h2>
        <div class="steps">
          <div class="step">
            <div class="step-number" aria-hidden="true">1</div>
            <h3>Browse</h3>
            <p>Explore agents, instructions, skills, and plugins</p>
          </div>
          <div class="step">
            <div class="step-number" aria-hidden="true">2</div>
            <h3>Preview</h3>
            <p>Click any item to view its full content</p>
          </div>
          <div class="step">
            <div class="step-number" aria-hidden="true">3</div>
            <h3>Install</h3>
            <p>One-click install to VS Code or copy to clipboard</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <Modal />

  <script>
    import '../scripts/pages/index';
  </script>
</BaseLayout>