@grove-dev/astro 0.1.0

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

@@ -0,0 +1,81 @@
+---
+import Container from "./layout/Container.astro";
+
+const points = [
+  {
+    title: "Real apps",
+    body: "Not SDKs, templates, or tiny demos. Focused on complete applications you can actually run.",
+    icon: "app",
+  },
+  {
+    title: "Codebase context",
+    body: "Stack, platform, license, activity, maturity, and contribution signals — one card per app.",
+    icon: "code",
+  },
+  {
+    title: "Searchable discovery",
+    body: "Browse by category, stack, platform, stars, recency, and status — not a flat README list.",
+    icon: "search",
+  },
+];
+---
+
+<section id="about" class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800">
+  <Container>
+    <div class="flex flex-col gap-2">
+      <span
+        class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
+        >Why this exists</span
+      >
+      <h2
+        class="text-[1.5rem] sm:text-[1.75rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0 max-w-[40ch]"
+      >
+        Most open-source app discovery is fragmented.
+      </h2>
+      <p
+        class="text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
+      >
+        GitHub search shows repositories, not always usable products. Awesome
+        lists are helpful, but they tend to become long static README files.
+        This project focuses on real applications: projects with source code,
+        product context, stack information, activity signals, and enough
+        structure to help developers learn, compare, and contribute.
+      </p>
+    </div>
+
+    <ul
+      class="mt-7 grid list-none grid-cols-1 gap-3 p-0 m-0 sm:grid-cols-3"
+    >
+      {
+        points.map((p) => (
+          <li class="card p-4">
+            <div
+              class="mb-3 flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"
+              aria-hidden="true"
+            >
+              {p.icon === "app" ? (
+                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                  <path d="M3 2.75A2.25 2.25 0 0 1 5.25.5h5.5A2.25 2.25 0 0 1 13 2.75v10.5A2.25 2.25 0 0 1 10.75 15.5h-5.5A2.25 2.25 0 0 1 3 13.25V2.75ZM5.25 2a.75.75 0 0 0-.75.75v10.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75V2.75a.75.75 0 0 0-.75-.75h-5.5Z"/>
+                </svg>
+              ) : p.icon === "code" ? (
+                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                  <path d="M4.72 3.22a.75.75 0 0 1 1.06 1.06L2.06 8l3.72 3.72a.75.75 0 1 1-1.06 1.06L.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25Zm6.56 0a.75.75 0 1 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L13.94 8l-3.66-3.72Z"/>
+                </svg>
+              ) : (
+                <svg viewBox="0 0 16 16" width="16" height="16" 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"/>
+                </svg>
+              )}
+            </div>
+            <h3 class="m-0 text-[0.9375rem] font-semibold text-ink-900 dark:text-ink-100">
+              {p.title}
+            </h3>
+            <p class="mt-1.5 m-0 text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400">
+              {p.body}
+            </p>
+          </li>
+        ))
+      }
+    </ul>
+  </Container>
+</section>

package/templates/default/src/components/icons/Icon.astro

@@ -0,0 +1,148 @@
+---
+// Brand icon registry.
+//
+// Strategy: icons live as static SVGs in `public/icons/`. The fetch
+// script (`scripts/fetch-icons.mjs`) downloads the well-known
+// brand icons from the public `xandemon/developer-icons` repo on
+// prebuild. Missing icons (windows, web, desktop, chromeos,
+// embedded, ionic, capacitor) are hand-rolled in `public/icons/`.
+//
+// Theme-aware variants: some icons (Apple for iOS / macOS) ship
+// in light and dark silhouettes and need to be swapped with
+// the page's color scheme. The Icon component renders BOTH img
+// tags and uses Tailwind's `dark:hidden` / `hidden dark:block` to
+// show only the right one.
+//
+// Usage:
+//   <Icon name="Flutter" category="stack"   size={12} />
+//   <Icon name="iOS"      category="platform" size={12} />
+//
+// Falls back to a small generic dot if no icon is found so the chip
+// still has visual weight.
+
+interface Props {
+  /** Friendly name, e.g. "Flutter", "React Native", "iOS", "Web". */
+  name: string;
+  /** "stack" or "platform" — controls where we look in /icons/. */
+  category?: "stack" | "platform";
+  size?: number;
+  class?: string;
+  title?: string;
+}
+
+const { name, category = "stack", size = 12, class: className = "", title } = Astro.props;
+
+function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/\+/g, "plus")
+    .replace(/\./g, "")
+    .replace(/[\s/]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "")
+    .replace(/[^a-z0-9-]/g, "");
+}
+
+// Friendly name → icon filename. Add a new alias when a chip needs
+// to render an icon that lives under a different filename.
+const ALIASES: Record<string, string> = {
+  // stacks
+  react: "react",
+  "react-native": "react-native",
+  "node-js": "nodejs",
+  nodejs: "nodejs",
+  "node.js": "nodejs",
+  mongodb: "mongodb",
+  tensorflow: "tensorflow",
+  ionic: "ionic",
+  "ionic-capacitor": "ionic",
+  ionicframework: "ionic",
+  capacitor: "capacitor",  // distinct from ionic — proper Capacitor brand mark
+  "kotlin-multiplatform": "kotlin",
+  kmp: "kotlin",
+  // platforms
+  ios: "ios",
+  ipados: "ios",
+  macos: "macos",
+  osx: "macos",
+  "mac-os": "macos",
+  web: "web",
+  chromeos: "chromeos",
+  "chrome-os": "chromeos",
+  windows: "windows",
+  win: "windows",
+  desktop: "desktop",
+  embedded: "embedded",
+};
+
+// These icons have explicit light + dark variants. We render both
+// and let CSS swap based on the `.dark` class on <html>.
+const THEME_AWARE = new Set([
+  "ios",         // maps to apple-dark (light) + apple-light (dark)
+  "macos",       // maps to apple-light (light) + apple-dark (dark)
+]);
+
+const slug = slugify(name);
+const resolved = ALIASES[slug] ?? slug;
+const baseDir = category === "platform" ? "platforms" : "stacks";
+const url = (file: string) => `/icons/${baseDir}/${file}.svg`;
+
+const isThemeAware = THEME_AWARE.has(resolved);
+
+// Map theme-aware platform → { light: file, dark: file }
+const THEME_PAIRS: Record<string, { light: string; dark: string }> = {
+  ios:   { light: "apple-dark",  dark: "apple-light" },
+  macos: { light: "apple-light", dark: "apple-dark"  },
+};
+---
+
+{
+  isThemeAware ? (
+    <>
+      {/* Light theme → light variant */}
+      <img
+        src={url(THEME_PAIRS[resolved].light)}
+        alt=""
+        width={size}
+        height={size}
+        loading="lazy"
+        decoding="async"
+        aria-hidden={title ? undefined : "true"}
+        class={`inline-block shrink-0 object-contain select-none dark:hidden ${className}`}
+        style={`width:${size}px;height:${size}px;`}
+      />
+      {/* Dark theme → dark variant */}
+      <img
+        src={url(THEME_PAIRS[resolved].dark)}
+        alt=""
+        width={size}
+        height={size}
+        loading="lazy"
+        decoding="async"
+        aria-hidden={title ? undefined : "true"}
+        class={`inline-block shrink-0 object-contain select-none hidden dark:inline-block ${className}`}
+        style={`width:${size}px;height:${size}px;`}
+      />
+    </>
+  ) : resolved ? (
+    <img
+      src={url(resolved)}
+      alt=""
+      width={size}
+      height={size}
+      loading="lazy"
+      decoding="async"
+      aria-hidden={title ? undefined : "true"}
+      class={`inline-block shrink-0 object-contain select-none ${className}`}
+      style={`width:${size}px;height:${size}px;`}
+    />
+  ) : (
+    <span
+      aria-hidden="true"
+      class={`inline-block shrink-0 rounded-full bg-current opacity-40 ${className}`}
+      style={`width:${size}px;height:${size}px;`}
+    />
+  )
+}
+{title && <span class="sr-only">{title}</span>}

package/templates/default/src/components/layout/BaseLayout.astro

@@ -0,0 +1,94 @@
+---
+// SPDX-License-Identifier: MIT
+
+/**
+ * BaseLayout — wraps every page. Owns the theme-detection inline script
+ * and the global shell (Header, Footer). Per-page SEO (title, description,
+ * OG, JSON-LD) is delegated to <Seo /> so each page can declare what it
+ * needs without polluting the layout file.
+ */
+import "../../styles/global.css";
+import Header from "./Header.astro";
+import Footer from "./Footer.astro";
+import Seo from "./Seo.astro";
+
+interface Props {
+  title: string;
+  description: string;
+  type?: "website" | "article" | "profile";
+  noindex?: boolean;
+  jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+}
+
+const {
+  title,
+  description,
+  type,
+  noindex,
+  jsonLd,
+} = Astro.props;
+
+const favicon =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%2318181b'/%3E%3C/svg%3E";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="theme-color" content="#0a0a0c" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+    <link rel="icon" href={favicon} />
+    <link rel="sitemap" href="/sitemap.xml" />
+    <link rel="alternate" type="text/plain" href="/llms.txt" title="LLM usage guidance" />
+
+    <Seo
+      title={title}
+      description={description}
+      type={type}
+      noindex={noindex}
+      jsonLd={jsonLd}
+    />
+
+    <slot name="head" />
+    <script is:inline>
+      (function () {
+        var STORAGE_KEY = "open-apps-theme";
+        function getMode() {
+          var stored = localStorage.getItem(STORAGE_KEY);
+          if (stored === "light" || stored === "dark" || stored === "system") return stored;
+          return "system";
+        }
+        function apply(mode) {
+          var resolved =
+            mode === "system"
+              ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+              : mode;
+          var root = document.documentElement;
+          if (resolved === "dark") root.classList.add("dark");
+          else root.classList.remove("dark");
+          root.dataset.theme = mode;
+          root.dataset.resolvedTheme = resolved;
+        }
+        apply(getMode());
+        window.addEventListener("theme:set", function (e) { apply(e.detail); });
+        var mq = window.matchMedia("(prefers-color-scheme: dark)");
+        mq.addEventListener("change", function () {
+          if (getMode() === "system") apply("system");
+        });
+      })();
+    </script>
+  </head>
+  <body class="min-h-screen bg-white text-ink-900 dark:bg-ink-950 dark:text-ink-100">
+    <Header />
+
+    <main>
+      <slot />
+    </main>
+
+    <Footer />
+    <slot name="body-end" />
+  </body>
+</html>

package/templates/default/src/components/layout/Container.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  size?: "default" | "wide" | "narrow";
+  class?: string;
+}
+
+const { size = "default", class: className = "" } = Astro.props;
+const sizeClass =
+  size === "wide"
+    ? "max-w-wide"
+    : size === "narrow"
+      ? "max-w-narrow"
+      : "max-w-container";
+---
+
+<div class={`${sizeClass} mx-auto px-5 sm:px-7 ${className}`}>
+  <slot />
+</div>

package/templates/default/src/components/layout/Footer.astro

@@ -0,0 +1,145 @@
+---
+import { siteConfig } from "../../data/config";
+import { stats } from "../../data/stats";
+
+const githubUrl = stats.originalRepo;
+const year = new Date().getFullYear();
+
+// One-line positioning. Should be the same on every page so the
+// project's identity is consistent.
+const positioning =
+  "A searchable directory of real open-source applications — organized by stack, category, platform, license, activity, and maturity.";
+---
+
+<footer class="mt-16 border-t border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-400">
+  <div
+    class="mx-auto grid max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
+  >
+    <div class="col-span-2 md:col-span-1">
+      <div
+        class="mb-2 inline-flex items-center gap-2 text-[0.95rem] font-semibold text-ink-900 dark:text-ink-100"
+      >
+        <span
+          aria-hidden="true"
+          class="inline-block h-3.5 w-3.5 rounded bg-ink-900 dark:bg-ink-100"
+        ></span>
+        <span>{siteConfig.name}</span>
+      </div>
+      <p class="m-0 max-w-[36ch] text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400">
+        {positioning}
+      </p>
+      <p class="mt-3 m-0 text-2xs text-ink-500 dark:text-ink-400">
+        <span class="font-mono">{stats.apps}</span> apps
+        <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+        <span class="font-mono">{stats.categories}</span> categories
+        <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+        <span class="font-mono">{stats.contributors}</span> contributors
+      </p>
+    </div>
+
+    <div>
+      <h4
+        class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100"
+      >
+        Discover
+      </h4>
+      <ul class="m-0 flex list-none flex-col gap-2 p-0">
+        <li><a href="#hot" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">Hot apps</a></li>
+        <li><a href="#new" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">New apps</a></li>
+        <li><a href="#mature" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">Mature apps</a></li>
+        <li><a href="#stacks" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">By stack</a></li>
+        <li><a href="#categories" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">By category</a></li>
+      </ul>
+    </div>
+
+    <div>
+      <h4
+        class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100"
+      >
+        Contribute
+      </h4>
+      <ul class="m-0 flex list-none flex-col gap-2 p-0">
+        <li>
+          <a
+            href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >Submit via GitHub</a
+          >
+        </li>
+        <li><a href="#contributors" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">Contributors</a></li>
+        <li>
+          <a
+            href={`${githubUrl}/issues`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >Report an issue</a
+          >
+        </li>
+        <li>
+          <a
+            href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >Contributing guide</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <h4
+        class="mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-900 dark:text-ink-100"
+      >
+        Project
+      </h4>
+      <ul class="m-0 flex list-none flex-col gap-2 p-0">
+        <li>
+          <a
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >Source on GitHub</a
+          >
+        </li>
+        <li><a href="#about" class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100">Why this exists</a></li>
+        <li>
+          <a
+            href={`${githubUrl}/blob/main/README.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >README</a
+          >
+        </li>
+        <li>
+          <a
+            href="/about"
+            class="text-sm transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+            >About</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="border-t border-ink-200 dark:border-ink-800">
+    <div
+      class="mx-auto flex max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
+    >
+      <span>© {year} {siteConfig.name}. Content under CC BY-SA 4.0.</span>
+      <span class="text-ink-300 dark:text-ink-700">·</span>
+      <a
+        href={githubUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="transition-colors hover:text-ink-900 dark:hover:text-ink-100"
+        >View source on GitHub</a
+      >
+    </div>
+  </div>
+</footer>

package/templates/default/src/components/layout/Header.astro

@@ -0,0 +1,144 @@
+---
+import { siteConfig } from "../../data/config";
+import ThemeToggle from "./ThemeToggle.astro";
+import { stats } from "../../data/stats";
+import { compact } from "../../lib/format";
+
+const githubUrl = stats.originalRepo;
+
+// Nav items. Order is information-architecture: discover → browse → act.
+// `Contributors` is intentionally not a top-level item — it lives lower
+// on the page. The watchlist was removed in v0.1 (see CHANGELOG).
+//
+// All links point to /apps with a filter rather than in-page anchors.
+// This keeps the nav usable from any page (e.g. /about) — anchor links
+// would only work on the home page, leaving /apps and /about with dead
+// links. Category/Stack filters are exposed via the /apps refine panel
+// and the home page's "Browse by stack"/"Browse by category" sections.
+const navItems = [
+  { label: "New", href: "/apps?label=new" },
+  { label: "Hot", href: "/apps?label=hot" },
+  { label: "Categories", href: "/apps" },
+  { label: "Stacks", href: "/apps" },
+  { label: "About", href: "/about" },
+];
+
+const starsLabel = compact(stats.stars);
+---
+
+<header
+  class="sticky top-0 z-50 border-b border-ink-200 bg-white/85 backdrop-blur dark:border-ink-800 dark:bg-ink-950/85"
+>
+  <div
+    class="mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
+  >
+    <a
+      href="/"
+      class="inline-flex items-center gap-2 text-[0.95rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+    >
+      <span
+        aria-hidden="true"
+        class="inline-block h-[18px] w-[18px] rounded bg-ink-900 dark:bg-ink-100"
+      ></span>
+      <span>{siteConfig.name}</span>
+    </a>
+
+    <nav class="hidden flex-1 md:block" aria-label="Primary">
+      <ul class="m-0 flex list-none gap-5 p-0">
+        {
+          navItems.map((item) => (
+            <li>
+              <a
+                href={item.href}
+                class="text-[0.875rem] font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+              >
+                {item.label}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+
+    <div class="ml-auto flex items-center gap-2">
+      <a
+        href="/submit"
+        class="hidden h-9 items-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 sm:inline-flex dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+      >
+        <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
+          <path d="M7.75 2a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 7.75 2Z"/>
+        </svg>
+        <span>Submit app</span>
+      </a>
+
+      {/* GitHub button. The star count is rendered as text, not an
+          external badge image, so it works offline, doesn't depend
+          on shields.io, and reflects what we already know (stats.stars). */}
+      <a
+        href={githubUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`View source on GitHub — ${stats.stars} stars`}
+        title="View source on GitHub"
+        class="inline-flex h-9 items-center divide-x divide-ink-200 overflow-hidden rounded-md border border-ink-200 text-[0.875rem] font-medium transition-colors hover:border-ink-300 hover:bg-ink-50 dark:divide-ink-800 dark:border-ink-800 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+      >
+        <span class="flex items-center gap-1.5 px-2.5 py-1.5 text-ink-900 dark:text-ink-100">
+          <svg
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+            aria-hidden="true"
+            fill="currentColor"
+          >
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"
+            />
+          </svg>
+          <span>Star</span>
+        </span>
+        <span class="flex items-center gap-1 bg-ink-50 px-2 py-1.5 text-ink-700 dark:bg-ink-900/60 dark:text-ink-300">
+          <svg
+            viewBox="0 0 16 16"
+            width="11"
+            height="11"
+            aria-hidden="true"
+            fill="currentColor"
+            class="text-amber-500"
+          >
+            <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>
+          <span class="font-mono">{starsLabel}</span>
+        </span>
+      </a>
+      <ThemeToggle />
+    </div>
+  </div>
+</header>
+
+<script>
+  // Smooth-scroll for in-page anchor links (Header nav + Hero CTA).
+  // Works on any <a href="#…"> that points to an existing element on
+  // the current page. External links (e.g. /about, /apps?…) are skipped
+  // because they don't start with "#". Modifier-clicks (Cmd/Ctrl/Shift/
+  // middle) let the browser handle the anchor normally so users can
+  // open the same section in a new tab.
+  document.addEventListener("click", (e) => {
+    if (e.defaultPrevented) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (e.button !== 0) return; // non-primary mouse button
+    const link = (e.target as HTMLElement).closest<HTMLAnchorElement>(
+      'a[href^="#"]',
+    );
+    if (!link) return;
+    const id = link.getAttribute("href")!;
+    if (id.length <= 1) return; // bare "#" → ignore
+    const target = document.querySelector(id);
+    if (!target) return; // not on this page; let the browser navigate
+    e.preventDefault();
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
+    // Update the URL hash without an extra jump, so back/forward works.
+    history.replaceState(null, "", id);
+  });
+</script>

package/templates/default/src/components/layout/SectionHeader.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  align?: "left" | "center";
+  level?: 2 | 3;
+}
+
+const { eyebrow, title, description, align = "left", level = 2 } = Astro.props;
+const Heading = `h${level}` as "h2" | "h3";
+---
+
+<header
+  class={`mb-6 flex flex-col gap-2 ${
+    align === "center" ? "items-center text-center" : ""
+  }`}
+>
+  {
+    eyebrow && (
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        {eyebrow}
+      </span>
+    )
+  }
+  <Heading
+    class="text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0"
+  >
+    {title}
+  </Heading>
+  {
+    description && (
+      <p
+        class={`text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 ${
+          align === "center" ? "max-w-2xl" : "max-w-[56ch]"
+        }`}
+      >
+        {description}
+      </p>
+    )
+  }
+</header>