feat: add homepage and details icon links to module cards

- Convert `<button>` to `<div role="button">` with an `onKeyDown` handler (Space/Enter) so nested `<a>` and `<Link>` elements can be interactive without violating the no-interactive-in-button HTML rule
- Add an `IconHome` anchor next to the module label that opens `m.homepage` in a new tab when present; `e.stopPropagation()` prevents the click from toggling the card
- Add an `IconInfoCircle` TanStack Router `<Link>` that navigates to `/registry/$category/$id` for the full module details page; same stopPropagation guard applied

apps/web/content/docs/getting-started.mdx

@@ -25,7 +25,7 @@ npm create stanza@latest -- my-app
 bun create stanza@latest my-app
 ```
 
-To run it without the wizard — in CI, for example — see [Non-interactive setup](#non-interactive-setup) below.
+To run it without the wizard — in CI, for example — see [Non-interactive setup](/docs/getting-started#non-interactive-setup) below.
 
 ## What you get
 

apps/web/src/components/builder/module-cards.tsx

@@ -7,7 +7,8 @@ import {
   PEER_CATEGORIES,
   resolveAdapter,
 } from "@stanza/registry";
-import { IconCheck } from "@tabler/icons-react";
+import { IconCheck, IconHome, IconInfoCircle } from "@tabler/icons-react";
+import { Link } from "@tanstack/react-router";
 import { memo, useCallback, useMemo } from "react";
 
 import { ModuleLogo } from "@/components/module-logo";
@@ -150,12 +151,28 @@ const ModuleCard = memo(function ModuleCard({
     onToggle(category, m.id);
   }, [disabled, onToggle, category, m.id]);
 
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      // Only handle keys aimed at the card itself, not bubbled from the
+      // nested website link.
+      if (e.target !== e.currentTarget) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onToggle(category, m.id);
+      }
+    },
+    [disabled, onToggle, category, m.id],
+  );
+
   const card = (
-    <button
-      type="button"
-      disabled={disabled}
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
       aria-pressed={selected}
+      aria-disabled={disabled || undefined}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       className={cn(
         "relative flex h-full w-full flex-col gap-3 rounded-none border border-border bg-card px-2.5 py-4 text-left text-card-foreground shadow-sm transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -168,13 +185,54 @@ const ModuleCard = memo(function ModuleCard({
         <ModuleLogo logo={m.logo} label={m.label} />
         <div className="min-w-0 flex-1">
           <div className="flex items-start justify-between gap-2">
-            <h3 className="text-sm leading-tight font-medium">{m.label}</h3>
+            <div className="flex min-w-0 items-center gap-2">
+              <h3 className="truncate text-sm leading-tight font-medium">{m.label}</h3>
+              <span className="flex shrink-0 items-center gap-1.5">
+                {m.homepage && (
+                  <Tooltip>
+                    <TooltipTrigger
+                      nativeButton={false}
+                      render={
+                        <a
+                          href={m.homepage}
+                          target="_blank"
+                          rel="noreferrer"
+                          aria-label={`${m.label} website`}
+                          onClick={(e) => e.stopPropagation()}
+                          className="inline-flex shrink-0 translate-y-[-2px] items-center justify-center text-foreground/60 transition-colors hover:text-foreground"
+                        />
+                      }
+                    >
+                      <IconHome className="size-3.5" aria-hidden />
+                    </TooltipTrigger>
+                    <TooltipContent sideOffset={8}>Open website</TooltipContent>
+                  </Tooltip>
+                )}
+                <Tooltip>
+                  <TooltipTrigger
+                    nativeButton={false}
+                    render={
+                      <Link
+                        to="/registry/$category/$id"
+                        params={{ category: m.category, id: m.id }}
+                        aria-label={`${m.label} details`}
+                        onClick={(e) => e.stopPropagation()}
+                        className="inline-flex shrink-0 translate-y-[-2px] items-center justify-center text-foreground/60 transition-colors hover:text-foreground"
+                      />
+                    }
+                  >
+                    <IconInfoCircle className="size-3.5" aria-hidden />
+                  </TooltipTrigger>
+                  <TooltipContent sideOffset={8}>View details</TooltipContent>
+                </Tooltip>
+              </span>
+            </div>
             {selected && <IconCheck className="size-4 shrink-0 text-foreground" aria-hidden />}
           </div>
           <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{m.description}</p>
         </div>
       </div>
-    </button>
+    </div>
   );
 
   if (!disabled || !reason) return card;

apps/web/src/components/package-manager-select.tsx

@@ -14,8 +14,7 @@ import { isPackageManager, PACKAGE_MANAGERS, type PackageManager } from "@/lib/p
 function NpmLogo(props: ComponentProps<"svg">) {
   return (
     <svg viewBox="0 0 32 32" aria-hidden {...props}>
-      <path fill="#c12127" d="M2 2h28v28H2" />
-      <path fill="#fff" d="M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25" />
+      <path fill="#e53935" d="M4 4v24h24V4Zm20 20h-4V12h-4v12H8V8h16Z" />
     </svg>
   );
 }
@@ -23,7 +22,11 @@ function NpmLogo(props: ComponentProps<"svg">) {
 function PnpmLogo(props: ComponentProps<"svg">) {
   return (
     <svg viewBox="0 0 32 32" aria-hidden {...props}>
-      <path fill="#e0e0e0" d="M2 22h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zM12 12h8v8h-8z" />
+      <path
+        fill="#757575"
+        d="M2 22h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zM12 12h8v8h-8z"
+        className="dark:fill-[#e0e0e0]!"
+      />
       <path fill="#ffb300" d="M2 2h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zm0 10h8v8h-8z" />
     </svg>
   );

apps/web/src/routes/stats.tsx

@@ -59,7 +59,7 @@ function StatsPage() {
 
   return (
     <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
-      <header className="mb-10 max-w-2xl">
+      <header className="mb-8 max-w-2xl">
         <h1 className="text-3xl font-semibold tracking-tight">Stats</h1>
         <p className="mt-2 text-pretty text-muted-foreground">
           What modules people actually pick, aggregated from anonymous CLI telemetry —{" "}
@@ -73,7 +73,7 @@ function StatsPage() {
         </p>
       </header>
 
-      <section className="mb-8 grid gap-4 sm:grid-cols-2">
+      <section className="mb-4 grid gap-4 sm:grid-cols-2">
         <Card>
           <CardHeader>
             <CardTitle className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
@@ -122,7 +122,7 @@ function StatsPage() {
         </Card>
       </section>
 
-      <section className="mb-12">
+      <section className="mb-8">
         <h2 className="mb-4 text-lg font-semibold tracking-tight">Popular modules by category</h2>
         <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
           {KNOWN_CATEGORIES.map((category) => {
@@ -203,7 +203,7 @@ function StatsPage() {
             </CardContent>
           </Card>
         </div>
-        <p className="mt-4 text-xs leading-7 text-muted-foreground">
+        <p className="mt-4 text-xs leading-5 text-muted-foreground">
           <strong className="font-medium text-foreground">Opt out</strong> per-invocation with{" "}
           <code>--no-telemetry</code>, persistently with <code>STANZA_TELEMETRY=0</code> or{" "}
           <code>DO_NOT_TRACK=1</code>. More in the{" "}