@tanstack/create 0.62.0 → 0.62.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @tanstack/create
 
+## 0.62.3
+
+### Patch Changes
+
+- Auto-generated changeset from semantic commits on main.
+
+  - fix(ci): use direct changeset publish args (b6f5ff5)
+
+## 0.62.2
+
+### Patch Changes
+
+- Make the default base starter minimal (Home + About) for React and Solid, and add a new `blog` template option for both frameworks. ([`f33f8d4`](https://github.com/TanStack/cli/commit/f33f8d4954d9ad6771871257a4e1e58feee9b34d))
+
+  Interactive `create` now prompts for a template when one is not provided, and template id resolution prefers the selected framework when ids overlap.
+
+- Add pnpm build approvals for `esbuild` and `lightningcss` in base app templates and preserve `pnpm.onlyBuiltDependencies` when add-ons add their own entries. ([`16fcd67`](https://github.com/TanStack/cli/commit/16fcd674c0f74c1c62cf97b0042060d5a51981ef))
+
+## 0.62.1
+
+### Patch Changes
+
+- Bump `@content-collections/mdx` in the React base template to `^0.2.2` so new projects install cleanly with React 19. ([`b54e202`](https://github.com/TanStack/cli/commit/b54e202ce56f2aa78a416634155bc22f0cb5cc46))
+
 ## 0.62.0
 
 ### Minor Changes

package/dist/frameworks/react/project/base/package.json

@@ -22,10 +22,6 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@content-collections/core": "^0.13.1",
-    "@content-collections/markdown": "^0.1.4",
-    "@content-collections/mdx": "^0.1.2",
-    "@content-collections/vite": "^0.2.8",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/devtools-vite": "^0.3.11",
     "@testing-library/dom": "^10.4.0",
@@ -34,11 +30,12 @@
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
     "jsdom": "^27.0.0",
-    "remark-gfm": "^4.0.1",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5",
-    "zod": "^4.3.5"
+    "vitest": "^3.0.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild", "lightningcss"]
   }
 }

package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -69,13 +69,6 @@ export default function Header() {
           <Link to="/" className="nav-link" activeProps={{ className: 'nav-link is-active' }}>
             Home
           </Link>
-          <Link
-            to="/blog"
-            className="nav-link"
-            activeProps={{ className: 'nav-link is-active' }}
-          >
-            Blog
-          </Link>
           <Link
             to="/about"
             className="nav-link"

package/dist/frameworks/react/project/base/src/routes/about.tsx.ejs

@@ -8,18 +8,13 @@ function About() {
   return (
     <main className="page-wrap px-4 py-12">
       <section className="island-shell rounded-2xl p-6 sm:p-8">
-        <img
-          src="/images/lagoon-about.svg"
-          alt=""
-          className="mb-6 h-56 w-full rounded-2xl object-cover"
-        />
         <p className="island-kicker mb-2">About</p>
         <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
-          Built for shipping fast.
+          A small starter with room to grow.
         </h1>
         <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
-          TanStack Start gives you type-safe routing, server functions, and modern SSR
-          defaults so you can focus on product work instead of framework glue.
+          TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
+          Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
         </p>
       </section>
     </main>

package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs

@@ -10,18 +10,18 @@ function App() {
         <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
         <p className="island-kicker mb-3">TanStack Start Base Template</p>
         <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
-          Island hours, but for product teams.
+          Start simple, ship quickly.
         </h1>
         <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
-          A tropical, breathable app starter with full-document SSR, server functions,
-          streaming, and type-safe routing. Calm on the eyes. Fast in production.
+          This base starter intentionally keeps things light: two routes, clean structure,
+          and the essentials you need to build from scratch.
         </p>
         <div className="flex flex-wrap gap-3">
           <a
-            href="/blog"
+            href="/about"
             className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
           >
-            Explore Posts
+            About This Starter
           </a>
           <a
             href="https://tanstack.com/router"
@@ -39,7 +39,7 @@ function App() {
             ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
             ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
             ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
-            ['Tailwind Native', 'Design quickly with utility-first styling and custom tokens.'],
+            ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
           ].map(([title, desc], index) => (
             <article
               key={title}
@@ -56,7 +56,7 @@ function App() {
         <p className="island-kicker mb-2">Quick Start</p>
         <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
           <li>
-            Edit <code>src/routes/index.tsx</code> to customize the hero and product narrative.
+            Edit <code>src/routes/index.tsx</code> to customize the home page.
           </li>
           <li>
             Update <code>src/components/Header.tsx</code> and <code>src/components/Footer.tsx</code>{' '}

package/dist/frameworks/react/project/base/src/styles.css.ejs

@@ -154,24 +154,6 @@ pre code {
   color: inherit;
 }
 
-.prose pre {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #1d2e45;
-  color: #e8efff;
-  overflow-x: auto;
-}
-
-.prose {
-  overflow-wrap: anywhere;
-}
-
-.prose table {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-}
-
 .page-wrap {
   width: min(1080px, calc(100% - 2rem));
   margin-inline: auto;

package/dist/frameworks/react/project/base/tsconfig.json.ejs

@@ -8,7 +8,6 @@
     "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"],
-      "content-collections": ["./.content-collections/generated"],
       "@/*": ["./src/*"]
     },
     "lib": ["ES2022", "DOM", "DOM.Iterable"],

package/dist/frameworks/react/project/base/vite.config.ts.ejs

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
-import contentCollections from '@content-collections/vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 <% if (addOnEnabled.paraglide) { -%>
 import { paraglideVitePlugin } from "@inlang/paraglide-js"
@@ -21,7 +20,6 @@ const config = defineConfig({
     outdir: './src/paraglide',
     strategy: ['url', "baseLocale"],
   }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
-    contentCollections(),
     tsconfigPaths({ projects: ['./tsconfig.json'] }),
     tailwindcss(),
     <% if (routerOnly) { %>tanstackRouter({ target: 'react', autoCodeSplitting: true }),<% } else { %>tanstackStart(),<% } %>

package/dist/frameworks/solid/project/base/package.json

@@ -14,15 +14,16 @@
     "@tanstack/solid-router-devtools": "^1.133.20",
     "@tanstack/solid-router-ssr-query": "^1.132.25",
     "@tanstack/solid-start": "^1.133.20",
-    "lucide-solid": "^0.544.0",
     "solid-js": "^1.9.9",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.3.11",
-    "vite-plugin-lucide-preprocess": "^1.4.6",
     "vite-plugin-solid": "^2.11.10",
     "typescript": "^5.7.2",
     "vite": "^7.1.7"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild", "lightningcss"]
   }
 }

package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs

@@ -1,155 +1,68 @@
-<% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/solid-router'
+import { Link } from '@tanstack/solid-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><%
-const icons = new Set([
-  "Menu",
-  "X",
-  "Home",
-  "Globe",
-])
+import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
+<% } %>
 
-for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-    icons.add( route.icon || "Globe");
-    if (route.children?.length) {
-      icons.add("ChevronDown")
-      icons.add("ChevronRight")
+<%
+const demoRoutes = [];
+for (const addOn of addOns) {
+  for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
+    demoRoutes.push({ url: route.url, name: route.name });
+    for (const child of route.children || []) {
+      if (child?.url && child?.name) {
+        demoRoutes.push({ url: child.url, name: child.name });
+      }
     }
   }
 }
+const userHeaders = integrations.filter((i) => i.type === 'header-user');
 %>
-import { createSignal } from 'solid-js';
-import {
-  <%= Array.from(icons).sort().join(", ") %>
-} from "lucide-solid";
 
 export default function Header() {
-<%
-const hasNestedRouteGroups = addOns.some(a => a.routes?.some(r => r.children?.length));
-const userHeaders = integrations.filter(i => i.type === 'header-user');
-%>
-  const [isOpen, setIsOpen] = createSignal(false);
-  <% if (hasNestedRouteGroups) { %>
-  const [groupedExpanded, setGroupedExpanded] = createSignal<Record<string, boolean>>({});
-  <% } %>
-
   return (
-    <>
-      <header class="p-4 flex items-center bg-gray-800 text-white shadow-lg">
-        <button
-          onClick={() => setIsOpen(true)}
-          class="p-2 hover:bg-gray-700 rounded-lg transition-colors"
-          aria-label="Open menu"
-        >
-          <Menu size={24} />
-        </button>
-        <h1 class="ml-4 text-xl font-semibold">
-          <Link to="/">
-            <img
-              src="/logo192.png"
-              alt="TanStack Logo"
-              class="h-10"
-            />
+    <header class="site-header px-4">
+      <nav class="page-wrap nav-shell">
+        <h2 class="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
+          <Link to="/" class="brand-pill">
+            <span class="brand-dot" />
+            TanStack Start
           </Link>
-        </h1>
-      </header>
+        </h2>
 
-      <aside
-        class={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
-          isOpen() ? "translate-x-0" : "-translate-x-full"
-        }`}
-      >
-        <div class="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 class="text-xl font-bold">Navigation</h2>
-          <button
-            onClick={() => setIsOpen(false)}
-            class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-            aria-label="Close menu"
-          >
-            <X size={24} />
-          </button>
+        <div class="ml-auto flex items-center gap-2">
+          <% for (const integration of userHeaders) { %><<%= integration.jsName %> />
+          <% } %>
         </div>
 
-        <nav class="flex-1 p-4 overflow-y-auto">
-          <Link
-            to="/"
-            onClick={() => setIsOpen(false)}
-            class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-            activeProps={{
-              class:
-                "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-            }}
-          >
-            <Home size={20} />
-            <span class="font-medium">Home</span>
+        <div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
+          <Link to="/" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
+            Home
           </Link>
-
-          {/* Demo Links Start */}
-          <% for(const addOn of addOns) {
-            for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-              if (route.children) { %>
-                <div class="flex flex-row justify-between">
-                  <Link to="<%= route.url %>"
-                    onClick={() => setIsOpen(false)}
-                    class="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                    activeProps={{
-                      class:
-                        "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                    }}
-                  >
-                    <<%= route.icon || "Globe" %> size={20} />
-                    <span class="font-medium"><%= route.name %></span>  
-                  </Link>
-                  <button
-                    class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-                    onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
-                    {groupedExpanded().<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
-                  </button>
-                </div>
-                {groupedExpanded().<%= route.jsName %> && (
-                  <div class="flex flex-col ml-4">
-                    <% for(const child of route.children) { %>
-                      <Link
-                        to="<%= child.url %>"
-                        onClick={() => setIsOpen(false)}
-                        class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                        activeProps={{
-                          class:
-                            "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                        }}
-                      >
-                        <<%= child.icon || "Globe" %> size={20} />
-                        <span class="font-medium"><%= child.name %></span>
-                      </Link>
-                    <% } %>
-                </div>
-                )}
-            <% } else { %>
-              <Link
-                to="<%= route.url %>"
-                onClick={() => setIsOpen(false)}
-                class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                activeProps={{
-                  class:
-                    "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                }}
+          <Link to="/about" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
+            About
+          </Link>
+          <a
+            href="https://tanstack.com/start/latest/docs/framework/solid/overview"
+            target="_blank"
+            rel="noreferrer"
+            class="nav-link"
+          >
+            Docs
+          </a>
+          <% if (demoRoutes.length > 0) { %><details class="relative w-full sm:w-auto">
+            <summary class="nav-link list-none cursor-pointer">Demos</summary>
+            <div class="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
+              <% for (const route of demoRoutes) { %><a
+                href="<%= route.url %>"
+                class="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
               >
-                <<%= route.icon || "Globe" %> size={20} />
-                <span class="font-medium"><%= route.name %></span>
-              </Link>
-          <% } } } %>
-          {/* Demo Links End */}
-        </nav>
-
-        <% if (userHeaders.length > 0) { %>
-        <div class="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
-          <% for(const integration of userHeaders) { %>
-            <<%= integration.jsName %> />
-          <% } %>
+                <%= route.name %>
+              </a>
+              <% } %>
+            </div>
+          </details><% } %>
         </div>
-        <% } %>
-      </aside>
-    </>
-  );
+      </nav>
+    </header>
+  )
 }

package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs

@@ -27,8 +27,7 @@ import "@fontsource/inter/400.css"
 import { HydrationScript } from 'solid-js/web'
 import { Suspense } from 'solid-js'
 
-<% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
-<% } %>
+import Header from '../components/Header'
 <% for(const addOn of addOns) {
   for(const init of addOn.main?.initialize || []) { %>
   <%- init %>
@@ -52,9 +51,7 @@ function RootComponent() {
         <body>
           <HeadContent />
           <Suspense>
-            <% if (addOns.length || integrations.length || routes.length) { %>
-              <Header />
-            <% } %>
+            <Header />
             <Outlet />
             <TanStackRouterDevtools />
             <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>

package/dist/frameworks/solid/project/base/src/routes/about.tsx.ejs

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+
+function About() {
+  return (
+    <main class="page-wrap px-4 py-12">
+      <section class="island-shell rounded-2xl p-6 sm:p-8">
+        <p class="island-kicker mb-2">About</p>
+        <h1 class="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          A small starter with room to grow.
+        </h1>
+        <p class="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+          TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
+          Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
+        </p>
+      </section>
+    </main>
+  )
+}

package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs

@@ -1,103 +1,68 @@
-import { createFileRoute } from "@tanstack/solid-router";
-import { For } from "solid-js"
-import {
-  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
-} from "lucide-solid";
+import { createFileRoute } from '@tanstack/solid-router'
 
-export const Route = createFileRoute("/")({ component: App });
+export const Route = createFileRoute('/')({ component: App })
 
 function App() {
-  const features = [
-    {
-      icon: <Zap class="w-12 h-12 text-cyan-400" />,
-      title: "Powerful Server Functions",
-      description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
-    },
-    {
-      icon: <Server class="w-12 h-12 text-cyan-400" />,
-      title: "Flexible Server Side Rendering",
-      description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
-    },
-    {
-      icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
-      title: "API Routes",
-      description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
-    },
-    {
-      icon: <Shield class="w-12 h-12 text-cyan-400" />,
-      title: "Strongly Typed Everything",
-      description: "End-to-end type safety from server to client. Catch errors before they reach production.",
-    },
-    {
-      icon: <Waves class="w-12 h-12 text-cyan-400" />,
-      title: "Full Streaming Support",
-      description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
-    },
-    {
-      icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
-      title: "Next Generation Ready",
-      description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
-    },
-  ];
-
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
-      <section class="relative py-20 px-6 text-center overflow-hidden">
-        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
-        <div class="relative max-w-5xl mx-auto">
-          <div class="flex items-center justify-center gap-6 mb-6">
-            <img
-              src="/logo192.png"
-              alt="TanStack Logo"
-              class="w-24 h-24 md:w-32 md:h-32"
-            />
-            <h1 class="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
-              <span class="text-gray-300">TANSTACK</span>{" "}
-              <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-                START
-              </span>
-            </h1>
-          </div>
-          <p class="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
-            The framework for next generation AI applications
-          </p>
-          <p class="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
-            Full-stack framework powered by TanStack Router for React and Solid.
-            Build modern applications with server functions, streaming, and type
-            safety.
-          </p>
-          <div class="flex flex-col items-center gap-4">
-            <a
-              href="https://tanstack.com/start"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
-            >
-              Documentation
-            </a>
-            <p class="text-gray-400 text-sm mt-2">
-              Begin your TanStack Start journey by editing{" "}
-              <code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
-                /src/routes/index.tsx
-              </code>
-            </p>
-          </div>
+    <main class="page-wrap px-4 pb-8 pt-14">
+      <section class="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
+        <div class="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
+        <div class="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
+        <p class="island-kicker mb-3">TanStack Start Base Template</p>
+        <h1 class="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+          Start simple, ship quickly.
+        </h1>
+        <p class="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+          This base starter intentionally keeps things light: two routes, clean structure,
+          and the essentials you need to build from scratch.
+        </p>
+        <div class="flex flex-wrap gap-3">
+          <a
+            href="/about"
+            class="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
+          >
+            About This Starter
+          </a>
+          <a
+            href="https://tanstack.com/router"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
+          >
+            Router Guide
+          </a>
         </div>
       </section>
 
-      <section class="py-16 px-6 max-w-7xl mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <For each={features}>
-            {(feature) => (
-              <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10">
-                <div class="mb-4">{feature.icon}</div>
-                <h3 class="text-xl font-semibold text-white mb-3">{feature.title}</h3>
-                <p class="text-gray-400 leading-relaxed">{feature.description}</p>
-              </div>
-            )}
-          </For>
-        </div>
+      <section class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {[
+          ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
+          ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
+          ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
+          ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
+        ].map(([title, desc], index) => (
+          <article
+            class="island-shell feature-card rise-in rounded-2xl p-5"
+            style={{ 'animation-delay': `${index * 90 + 80}ms` }}
+          >
+            <h2 class="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
+            <p class="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+          </article>
+        ))}
+      </section>
+
+      <section class="island-shell mt-8 rounded-2xl p-6">
+        <p class="island-kicker mb-2">Quick Start</p>
+        <ul class="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
+          <li>Edit <code>src/routes/index.tsx</code> to customize the home page.</li>
+          <li>
+            Update <code>src/components/Header.tsx</code> for navigation and product links.
+          </li>
+          <li>
+            Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
+          </li>
+        </ul>
       </section>
-    </div>
-  );
+    </main>
+  )
 }