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

---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import Modal from "../components/Modal.astro";
import Icon from "../components/Icon.astro";
import BackToTop from "../components/BackToTop.astro";

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

<StarlightPage
  frontmatter={{
    title: "Awesome GitHub Copilot",
    description:
      "Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience",
    template: "splash",
    pagefind: false,
    prev: false,
    next: false,
    editUrl: false,
    head: [
      {
        tag: "meta",
        attrs: {
          property: "og:type",
          content: "website",
        },
      },
    ],
  }}
  hasSidebar={false}
>
  <div id="main-content">
    <!-- Hero Section -->
    <section class="hero" aria-labelledby="hero-heading">
      <div class="container">
        <h1 id="hero-heading">
          <span class="gradient-text">Awesome GitHub Copilot</span>
        </h1>
        <p class="hero-subtitle">
          Community-contributed agents, instructions, and skills to enhance your
          GitHub Copilot experience
        </p>
      </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 card-category-ai"
            id="card-agents"
            style="--animation-delay: 0ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="robot" size={40} />
            </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 card-category-docs"
            id="card-instructions"
            style="--animation-delay: 50ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="document" size={40} />
            </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 card-category-power"
            id="card-skills"
            style="--animation-delay: 100ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="lightning" size={40} />
            </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 card-category-automation"
            id="card-hooks"
            style="--animation-delay: 150ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="hook" size={40} />
            </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 card-category-automation"
            id="card-workflows"
            style="--animation-delay: 200ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="workflow" size={40} />
            </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 card-category-extension"
            id="card-plugins"
            style="--animation-delay: 250ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="plug" size={40} />
            </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}extensions/`}
            class="card card-with-count card-category-extension"
            id="card-extensions"
            style="--animation-delay: 300ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="plug" size={40} />
            </div>
            <div class="card-content">
              <h3>Canvas Extensions</h3>
              <p>Interactive canvas extensions for Copilot app experiences</p>
            </div>
            <div
              class="card-count"
              data-count="extensions"
              aria-label="Extension count"
            >
              -
            </div>
          </a>
          <a
            href={`${base}tools/`}
            class="card card-with-count card-category-dev"
            id="card-tools"
            style="--animation-delay: 350ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="wrench" size={40} />
            </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 card-category-learn"
            id="card-learning-hub"
            style="--animation-delay: 400ms;"
          >
            <div class="card-icon" aria-hidden="true">
              <Icon name="book" size={40} />
            </div>
            <div class="card-content">
              <h3>Learning Hub</h3>
              <p>Articles and guides to master GitHub Copilot</p>
            </div>
          </a>
        </div>
      </div>
    </section>
  </div>

  <Modal />

  <!-- Back to Top Button -->
  <BackToTop />

  <script>
    import "../scripts/pages/index";
  </script>
</StarlightPage>