@grove-dev/astro 0.1.0

package/templates/default/src/components/DecisionRow.astro

@@ -0,0 +1,219 @@
+---
+import type { OpenSourceApp } from "../data/types";
+import Icon from "./icons/Icon.astro";
+import {
+  getOwnerAndRepoFromRepoUrl,
+  getOwnerAvatarUrl,
+} from "../lib/repo";
+import { formatStars } from "../lib/format";
+
+interface Props {
+  app: OpenSourceApp;
+}
+
+const { app } = Astro.props;
+
+const { owner, repo } = getOwnerAndRepoFromRepoUrl(app.repoUrl);
+const avatar = app.logoUrl ?? getOwnerAvatarUrl(owner, 80);
+
+const label =
+  app.labels?.find((l) => l === "new" || l === "hot" || l === "mature") ??
+  app.labels?.[0];
+
+const allStacks = [app.stack, ...(app.stacks ?? [])].filter(Boolean);
+const visibleStacks = allStacks.slice(0, 5);
+const stackOverflow = allStacks.length - visibleStacks.length;
+
+const visiblePlatforms = app.platforms.slice(0, 5);
+const platformOverflow = app.platforms.length - visiblePlatforms.length;
+
+const detailHref = `/apps/${app.slug}`;
+
+const isCurated = !!app.curation;
+
+const projectTypeLabel = (() => {
+  switch (app.projectType) {
+    case "real-app": return "Real app";
+    case "production": return "Production";
+    case "reference": return "Reference";
+    case "demo": return "Demo";
+    case "template": return "Template";
+    default: return null;
+  }
+})();
+
+const starsLabel = formatStars(app.stars);
+---
+
+<article
+  class="decision-row group relative flex flex-col gap-3 rounded-lg border border-ink-200 bg-white p-4 transition-colors hover:border-ink-300 hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-700 dark:hover:shadow-[0_1px_2px_rgba(0,0,0,0.4),0_4px_12px_-2px_rgba(0,0,0,0.3)]"
+  data-slug={app.slug}
+>
+  {/* Avatar + name + badges */}
+  <header class="flex items-start gap-3">
+    <a
+      href={detailHref}
+      class="relative z-10 flex shrink-0"
+      aria-hidden="true"
+      tabindex="-1"
+    >
+      {avatar ? (
+        <img
+          src={avatar}
+          alt={`${app.name} avatar`}
+          width="44"
+          height="44"
+          loading="lazy"
+          decoding="async"
+          class="h-11 w-11 rounded-md border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
+        />
+      ) : (
+        <span
+          aria-hidden="true"
+          class="flex h-11 w-11 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-sm font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"
+        >
+          {app.name.slice(0, 2).toUpperCase()}
+        </span>
+      )}
+    </a>
+
+    <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <div class="flex flex-wrap items-baseline gap-x-2">
+        <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          <a
+            href={detailHref}
+            class="relative z-10 text-inherit no-underline hover:underline"
+          >
+            {app.name}
+          </a>
+        </h3>
+        {projectTypeLabel && (
+          <span class="inline-flex items-center rounded border border-ink-200 bg-ink-50 px-1.5 py-0 text-[10px] font-medium uppercase tracking-wider text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300">
+            {projectTypeLabel}
+          </span>
+        )}
+        {label && (
+          <span
+            class={`inline-flex items-center rounded border px-1.5 py-0 text-[10px] font-medium uppercase tracking-wider ${
+              label === "new"
+                ? "border-emerald-300/60 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300"
+                : label === "hot"
+                  ? "border-orange-300/60 bg-orange-50 text-orange-800 dark:border-orange-800/60 dark:bg-orange-950/40 dark:text-orange-300"
+                  : "border-blue-300/60 bg-blue-50 text-blue-800 dark:border-blue-800/60 dark:bg-blue-950/40 dark:text-blue-300"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        {isCurated && !app.curation?.reviewed && (
+          <span class="inline-flex items-center gap-1 rounded border border-amber-300/60 bg-amber-50 px-1.5 py-0 text-[10px] font-medium text-amber-800 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-300">
+            <svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true" fill="currentColor">
+              <path d="M8 1.5a.75.75 0 0 1 .65.376l5.7 9.788A.75.75 0 0 1 13.7 12.75H2.3a.75.75 0 0 1-.65-1.086l5.7-9.788A.75.75 0 0 1 8 1.5ZM8 6a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 6Zm0 6.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"/>
+            </svg>
+            Auto-curated · Needs review
+          </span>
+        )}
+        {isCurated && app.curation?.reviewed && (
+          <span class="inline-flex items-center gap-1 rounded border border-emerald-300/60 bg-emerald-50 px-1.5 py-0 text-[10px] font-medium text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300">
+            <svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true" fill="currentColor">
+              <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
+            </svg>
+            Curator reviewed
+          </span>
+        )}
+      </div>
+      <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-2xs text-ink-500 dark:text-ink-400">
+        {owner && (
+          <a
+            href={app.repoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="relative z-10 font-mono hover:text-ink-900 dark:hover:text-ink-100"
+          >
+            <span class="text-ink-400 dark:text-ink-500">@</span>{owner}
+            {repo && <span class="text-ink-400 dark:text-ink-500">/{repo}</span>}
+          </a>
+        )}
+        <span class="text-ink-300 dark:text-ink-700">·</span>
+        <span>{app.category}</span>
+        {app.status && (
+          <>
+            <span class="text-ink-300 dark:text-ink-700">·</span>
+            <span class="capitalize">{app.status}</span>
+          </>
+        )}
+        {starsLabel && (
+          <>
+            <span class="text-ink-300 dark:text-ink-700">·</span>
+            <span class="inline-flex items-center gap-0.5 font-mono">
+              <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" fill="currentColor">
+                <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/>
+              </svg>
+              {starsLabel}
+            </span>
+          </>
+        )}
+      </div>
+    </div>
+
+    <a
+      href={detailHref}
+      class="relative z-10 hidden shrink-0 self-start text-2xs font-medium text-ink-500 hover:text-ink-900 sm:inline dark:text-ink-400 dark:hover:text-ink-100"
+    >
+      View details →
+    </a>
+  </header>
+
+  {/* One-line summary */}
+  <p class="m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-600 dark:text-ink-300">
+    {app.description}
+  </p>
+
+  {/* Metadata grid: stack, platforms, license — compact one-liner each */}
+  <dl class="grid grid-cols-1 gap-x-4 gap-y-1 text-2xs sm:grid-cols-3">
+    <div class="flex items-baseline gap-1.5">
+      <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Stack</dt>
+      <dd class="flex flex-wrap items-center gap-1 text-ink-700 dark:text-ink-300">
+        {visibleStacks.map((s) => (
+          <span class="inline-flex items-center gap-0.5">
+            <Icon name={s} category="stack" size={10} class="h-2.5 w-2.5" />
+            <span>{s}</span>
+          </span>
+        ))}
+        {stackOverflow > 0 && <span class="text-ink-400 dark:text-ink-500">+{stackOverflow}</span>}
+      </dd>
+    </div>
+    <div class="flex items-baseline gap-1.5">
+      <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Platforms</dt>
+      <dd class="flex flex-wrap items-center gap-1 text-ink-700 dark:text-ink-300">
+        {visiblePlatforms.map((p) => (
+          <span class="inline-flex items-center gap-0.5">
+            <Icon name={p} category="platform" size={10} class="h-2.5 w-2.5" />
+            <span>{p}</span>
+          </span>
+        ))}
+        {platformOverflow > 0 && <span class="text-ink-400 dark:text-ink-500">+{platformOverflow}</span>}
+      </dd>
+    </div>
+    <div class="flex items-baseline gap-1.5">
+      <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">License</dt>
+      <dd class="font-mono text-ink-700 dark:text-ink-300">
+        {app.license ?? "—"}
+        {app.codebaseSize && (
+          <>
+            <span class="ml-2 text-ink-300 dark:text-ink-700">·</span>
+            <span class="ml-1 text-ink-500 dark:text-ink-400">{app.codebaseSize}</span>
+          </>
+        )}
+        {app.difficulty && (
+          <>
+            <span class="ml-2 text-ink-300 dark:text-ink-700">·</span>
+            <span class="ml-1 text-ink-500 dark:text-ink-400">{app.difficulty}</span>
+          </>
+        )}
+      </dd>
+    </div>
+  </dl>
+
+  {/* Scores row — kept off the list to avoid bloat. See detail page. */}
+</article>

package/templates/default/src/components/ExploreByCategory.astro

@@ -0,0 +1,74 @@
+---
+import type { Category } from "../data/categories";
+import Container from "./layout/Container.astro";
+import { countByCategory } from "../lib/taxonomy-counts";
+
+interface Props {
+  categories: Category[];
+  class?: string;
+}
+
+const { categories, class: className = "" } = Astro.props;
+const counts = countByCategory();
+
+// Sort by count desc, drop empty (already done in CategoryGrid, but
+// re-apply here for safety in case the consumer rendered a raw list).
+const visible = categories
+  .map((c) => ({ ...c, count: counts.get(c.name) ?? 0 }))
+  .filter((c) => c.count > 0)
+  .sort((a, b) => b.count - a.count)
+  .slice(0, 12);
+---
+
+<section
+  id="explore-categories"
+  class={`section scroll-mt-20 border-t border-ink-200 dark:border-ink-800 ${className}`}
+>
+  <Container>
+    <div class="flex flex-col gap-1.5">
+      <span
+        class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
+        >Explore</span
+      >
+      <h2
+        class="m-0 text-[1.5rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+      >
+        Browse by category
+      </h2>
+      <p
+        class="m-0 text-[0.875rem] text-ink-500 dark:text-ink-400"
+      >
+        Jump straight to a category — links take you to a filtered list,
+        not a static browse page.
+      </p>
+    </div>
+
+    <ul class="mt-5 grid list-none grid-cols-1 gap-2 p-0 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        visible.map((c) => (
+          <li>
+            <a
+              href={`/apps?category=${encodeURIComponent(c.name)}`}
+              class="card card-hover group flex h-full items-start gap-3 p-3.5 no-underline"
+            >
+              <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+                <h3 class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                  {c.name}
+                </h3>
+                <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">
+                  {c.blurb}
+                </p>
+              </div>
+              <span
+                class="shrink-0 inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400"
+                title={`${c.count} apps in this category`}
+              >
+                {c.count}
+              </span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </Container>
+</section>

package/templates/default/src/components/ExploreByStack.astro

@@ -0,0 +1,102 @@
+---
+import type { Stack } from "../data/stacks";
+import Container from "./layout/Container.astro";
+import Icon from "./icons/Icon.astro";
+import { countByStack } from "../lib/taxonomy-counts";
+
+interface Props {
+  stacks: Stack[];
+  class?: string;
+}
+
+const { stacks, class: className = "" } = Astro.props;
+const counts = countByStack();
+
+const statusLabel: Record<Stack["status"], string> = {
+  live: "Available now",
+  expanding: "Expanding",
+  planned: "Planned",
+};
+
+const statusBadge: Record<Stack["status"], string> = {
+  live: "border-emerald-300/60 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300",
+  expanding: "border-ink-200 bg-ink-50 text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300",
+  planned: "border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-500",
+};
+
+const enriched = stacks
+  .map((s) => ({ ...s, count: counts.get(s.name) ?? 0 }))
+  .sort((a, b) => b.count - a.count);
+---
+
+<section
+  id="explore-stacks"
+  class={`section scroll-mt-20 border-t border-ink-200 dark:border-ink-800 ${className}`}
+>
+  <Container>
+    <div class="flex flex-col gap-1.5">
+      <span
+        class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
+        >Explore</span
+      >
+      <h2
+        class="m-0 text-[1.5rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+      >
+        Browse by stack
+      </h2>
+      <p
+        class="m-0 text-[0.875rem] text-ink-500 dark:text-ink-400"
+      >
+        Pick a stack to see every curated app built with it. Live stacks
+        have apps right now; planned ones are on the roadmap.
+      </p>
+    </div>
+
+    <div class="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        enriched.map((stack) => (
+          <a
+            href={`/apps?stack=${encodeURIComponent(stack.name)}`}
+            class="card card-hover group flex h-full items-center gap-3 p-3.5 no-underline"
+          >
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950"
+              aria-hidden="true"
+            >
+              <Icon
+                name={stack.name}
+                category="stack"
+                size={18}
+                class="h-[18px] w-[18px]"
+              />
+            </div>
+
+            <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div class="flex items-center gap-2">
+                <h3 class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                  {stack.name}
+                </h3>
+                <span
+                  class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400"
+                  title={`${stack.count} apps in this stack`}
+                >
+                  {stack.count} apps
+                </span>
+              </div>
+              <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">
+                {stack.blurb}
+              </p>
+            </div>
+
+            <span
+              class={`shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider ${statusBadge[stack.status]}`}
+              aria-label={`Status: ${statusLabel[stack.status]}`}
+            >
+              {statusLabel[stack.status]}
+            </span>
+          </a>
+        ))
+      }
+    </div>
+  </Container>
+</section>

package/templates/default/src/components/Hero.astro

@@ -0,0 +1,176 @@
+---
+import { siteConfig } from "../data/config";
+import Container from "./layout/Container.astro";
+import { stats } from "../data/stats";
+import { compact } from "../lib/format";
+
+const githubUrl = stats.originalRepo;
+
+const trustStats: { value: string; label: string }[] = [
+  { value: compact(stats.apps), label: "apps indexed" },
+  { value: String(stats.categories), label: "categories" },
+  { value: String(stats.stacks), label: "stacks" },
+  { value: compact(stats.contributors), label: "contributors" },
+  { value: compact(stats.stars), label: "GitHub stars" },
+];
+---
+
+<section class="relative overflow-hidden border-b border-ink-200 dark:border-ink-800">
+  {/* Soft animated background gradient — subtle, not loud. */}
+  <div
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
+    style="
+      background-image:
+        radial-gradient(60% 50% at 15% 20%, rgba(31, 111, 235, 0.12), transparent 60%),
+        radial-gradient(50% 40% at 85% 10%, rgba(110, 231, 183, 0.10), transparent 60%),
+        radial-gradient(40% 40% at 50% 90%, rgba(251, 146, 60, 0.08), transparent 60%);
+    "
+  ></div>
+
+  <Container>
+    <div class="relative py-14 sm:py-20">
+      <div class="max-w-3xl">
+        <span
+          class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
+        >
+          <span
+            aria-hidden="true"
+            class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"
+          ></span>
+          A directory of real open-source apps
+          <span
+            class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
+            aria-label="Pre-1.0 — data and UI are still being curated. Expect rough edges."
+          >
+            Beta
+          </span>
+          <span class="text-ink-400 dark:text-ink-500">·</span>
+          <span>v0.1</span>
+        </span>
+
+        <h1
+          class="mt-3 animate-fade-in-up text-[2.25rem] sm:text-[2.75rem] md:text-[3rem] font-semibold tracking-[-0.02em] leading-[1.05] text-ink-900 dark:text-ink-100 m-0"
+          style="animation-delay: 0.05s;"
+        >
+          Find open-source apps you can actually<br class="hidden sm:block" />
+          <span
+            class="bg-gradient-to-r from-ink-900 via-ink-700 to-ink-900 bg-clip-text text-transparent dark:from-ink-100 dark:via-ink-300 dark:to-ink-100"
+            style="background-size: 200% 200%; animation: fade-in-up 0.7s ease-out 0.1s both, gradient-shift 8s ease-in-out 1s infinite;"
+          >
+            run, study, and contribute to.
+          </span>
+        </h1>
+
+        <p
+          class="mt-4 animate-fade-in-up text-[0.9375rem] sm:text-[1rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
+          style="animation-delay: 0.15s;"
+        >
+          {siteConfig.name} is a curated directory of real applications with public source code.
+          Browse by stack, category, maturity, platform, license, stars, and activity — without
+          digging through random GitHub searches and outdated README lists.
+        </p>
+      </div>
+
+      {/* Trust stats row — the single most credibility-critical block on the
+          page. Number + label, monospaced numbers so they line up. */}
+      <dl
+        class="mt-7 grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-5"
+        aria-label="Directory at a glance"
+      >
+        {
+          trustStats.map((s) => (
+            <div class="flex flex-col gap-0.5">
+              <dt class="sr-only">{s.label}</dt>
+              <dd class="m-0 font-mono text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+                {s.value}
+              </dd>
+              <dd class="m-0 text-2xs uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                {s.label}
+              </dd>
+            </div>
+          ))
+        }
+      </dl>
+
+      {/* Search + filters */}
+      <form
+        class="mt-7 flex flex-col gap-2 sm:flex-row sm:items-stretch"
+        role="search"
+        action="/apps"
+        method="get"
+      >
+        <label class="relative flex-1">
+          <span class="sr-only">Search apps, stacks, categories, licenses</span>
+          <svg
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+            aria-hidden="true"
+            class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400"
+            fill="currentColor"
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            ></path>
+          </svg>
+          <input
+            type="search"
+            name="q"
+            placeholder="Search apps, stacks, categories, licenses, platforms..."
+            class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
+          />
+        </label>
+        <a
+          href="/apps"
+          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          aria-label="Browse all apps with filters"
+        >
+          <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
+            <path d="M.75 3h14.5a.75.75 0 0 1 .55 1.26l-5.55 6.1v4.39a.75.75 0 0 1-1.2.6l-2.5-1.87a.75.75 0 0 1-.3-.6v-2.52L.2 4.26A.75.75 0 0 1 .75 3Z"/>
+          </svg>
+          <span>Filters</span>
+        </a>
+        <button
+          type="submit"
+          class="btn-primary h-10 px-4 sm:px-5"
+        >
+          Search
+        </button>
+      </form>
+
+      <p
+        class="mt-2 text-2xs text-ink-500 dark:text-ink-400 m-0"
+        aria-hidden="true"
+      >
+        Try{" "}
+        <a href="/apps?stack=Flutter" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Flutter apps</a>
+        <span class="mx-1">·</span>
+        <a href="/apps?category=Finance" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Finance</a>
+        <span class="mx-1">·</span>
+        <a href="/apps?label=hot" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Hot projects</a>
+        <span class="mx-1">·</span>
+        <a href="/apps?platform=Android" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Android</a>
+        <span class="mx-1">·</span>
+        <a href="/apps?label=mature" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Mature</a>
+      </p>
+
+      <div class="mt-5 flex flex-wrap items-center gap-2">
+        <a href="#new" class="btn-primary">Browse apps</a>
+        <a
+          href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-outline">Submit via GitHub</a
+        >
+        <a
+          href={githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-ghost"
+          >View source on GitHub →</a
+        >
+      </div>
+    </div>
+  </Container>
+</section>

package/templates/default/src/components/MinimalAbout.astro

@@ -0,0 +1,57 @@
+---
+import { siteConfig } from "../data/config";
+import Container from "./layout/Container.astro";
+
+const points = [
+  {
+    title: "Real codebases",
+    body: "Not just tutorials or packages — apps that actually run.",
+  },
+  {
+    title: "Searchable context",
+    body: "Find apps by stack, platform, category, license, and activity.",
+  },
+  {
+    title: "Open data",
+    body: "Static site. GitHub-based data. Community maintained.",
+  },
+];
+---
+
+<section id="about" class="section scroll-mt-20">
+  <Container size="narrow">
+    <span
+      class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
+      >About</span
+    >
+    <h2
+      class="mt-1 text-[1.5rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0"
+    >
+      Why this exists
+    </h2>
+    <p
+      class="mt-3 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0"
+    >
+      Most app examples are either toy projects, abandoned lists, or hard to
+      search. {siteConfig.name} focuses on real application codebases that
+      developers can study, compare, and contribute to.
+    </p>
+
+    <ul
+      class="mt-6 grid list-none grid-cols-1 gap-3 p-0 m-0 sm:grid-cols-3"
+    >
+      {
+        points.map((p) => (
+          <li class="card p-4">
+            <h3 class="m-0 text-[0.875rem] font-semibold text-ink-900 dark:text-ink-100">
+              {p.title}
+            </h3>
+            <p class="mt-1 m-0 text-2xs leading-relaxed text-ink-500 dark:text-ink-400">
+              {p.body}
+            </p>
+          </li>
+        ))
+      }
+    </ul>
+  </Container>
+</section>