feat: update StackLandingPage and StacksIndexPage headers for improved layout and navigation

Author: spivx

app/stacks/[stack]/page.tsx

@@ -138,25 +138,33 @@ export default function StackLandingPage({ params }: { params: { stack: string }
   const highlights = details?.highlights ?? []
   const pageTitle = details?.title ?? `${stackEntry.label} instructions file`
   const description = details?.description ?? `Start a ${stackEntry.label} instructions wizard with DevContext.`
-  const targetUrl = `/new?stack=${slug}`
+  const targetUrl = `/new/stack/${slug}`
+  const defaultSummaryUrl = `/new/stack/${slug}/default/summary`
 
   return (
     <main className="mx-auto flex min-h-screen max-w-3xl flex-col gap-10 px-6 py-16 text-foreground">
-      <header className="space-y-4">
-        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Stack presets</p>
-        <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">{pageTitle}</h1>
-        <p className="text-base text-muted-foreground md:text-lg">{description}</p>
-        {stackEntry.docs ? (
-          <p className="text-sm text-muted-foreground">
-            Source docs: {" "}
-            <a href={stackEntry.docs} target="_blank" rel="noreferrer" className="underline-offset-4 hover:underline">
-              {stackEntry.label} documentation
-            </a>
-          </p>
-        ) : null}
-        {details?.docsNote ? (
-          <p className="text-sm text-muted-foreground">{details.docsNote}</p>
-        ) : null}
+      <header className="space-y-6">
+        <div className="flex items-center justify-between">
+          <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
+            DevContext
+          </Link>
+        </div>
+        <div className="space-y-4">
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Stack presets</p>
+          <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">{pageTitle}</h1>
+          <p className="text-base text-muted-foreground md:text-lg">{description}</p>
+          {stackEntry.docs ? (
+            <p className="text-sm text-muted-foreground">
+              Source docs: {" "}
+              <a href={stackEntry.docs} target="_blank" rel="noreferrer" className="underline-offset-4 hover:underline">
+                {stackEntry.label} documentation
+              </a>
+            </p>
+          ) : null}
+          {details?.docsNote ? (
+            <p className="text-sm text-muted-foreground">{details.docsNote}</p>
+          ) : null}
+        </div>
       </header>
 
       {highlights.length > 0 ? (
@@ -171,17 +179,22 @@ export default function StackLandingPage({ params }: { params: { stack: string }
       ) : null}
 
       <div className="flex flex-col gap-4 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-sm">
-        <h2 className="text-xl font-semibold">Ready to build your instructions?</h2>
+        <h2 className="text-xl font-semibold">Choose how to use this preset</h2>
         <p className="text-sm text-muted-foreground">
-          Launch the DevContext wizard with {stackEntry.label} pre-selected. You can review every question, accept defaults, and export a
-          stack-aware instructions file when each section is complete.
+          Continue into the DevContext wizard to fine-tune every answer, or open the recommended summary if you want to use the defaults as-is.
         </p>
-        <div>
+        <div className="flex flex-col gap-2 sm:flex-row">
           <Link
             href={targetUrl}
             className="inline-flex items-center justify-center rounded-lg border border-border/80 bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition hover:translate-y-[1px] hover:bg-primary/90"
           >
-            Start the {stackEntry.label} wizard
+            Customize in the wizard
+          </Link>
+          <Link
+            href={defaultSummaryUrl}
+            className="inline-flex items-center justify-center rounded-lg border border-border/80 bg-background px-5 py-2 text-sm font-semibold text-foreground shadow-sm transition hover:translate-y-[1px] hover:text-primary"
+          >
+            Open default summary
           </Link>
         </div>
       </div>

app/stacks/page.tsx

@@ -30,12 +30,19 @@ export const metadata: Metadata = {
 export default function StacksIndexPage() {
   return (
     <main className="mx-auto flex min-h-screen max-w-4xl flex-col gap-10 px-6 py-16 text-foreground">
-      <header className="space-y-4 text-center">
-        <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">Framework instructions presets</h1>
-        <p className="mx-auto max-w-2xl text-base text-muted-foreground md:text-lg">
-          Jump straight into the DevContext wizard with copy tailored to your stack. Each page outlines what we cover and links directly
-          into the guided flow.
-        </p>
+      <header className="space-y-6">
+        <div className="flex items-center justify-between">
+          <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
+            DevContext
+          </Link>
+        </div>
+        <div className="space-y-4 text-center">
+          <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">Framework instructions presets</h1>
+          <p className="mx-auto max-w-2xl text-base text-muted-foreground md:text-lg">
+            Jump straight into the DevContext wizard with copy tailored to your stack. Each page outlines what we cover and links directly
+            into the guided flow.
+          </p>
+        </div>
       </header>
 
       <section className="grid gap-6 md:grid-cols-2">
@@ -61,7 +68,7 @@ export default function StacksIndexPage() {
                   href={href}
                   className="inline-flex items-center justify-center rounded-lg border border-border/80 bg-background/80 px-4 py-2 text-sm font-semibold transition hover:border-primary/40 hover:text-primary"
                 >
-                  View {answer.label} instructions
+                  Preview {answer.label} preset
                 </Link>
               </div>
             </article>