feat: add feature UI components with useQuery hooks

- navigation: SiteHeader component + useHeader hook
- blog: ArticleCard, ArticleList, ArticleDetail + useArticleList,
  useArticleBySlug hooks
- marketing-pages: PageHero, PageContent + usePageBySlug,
  useSiteSettings hooks
- App pages now thin server wrappers that prefetch + hydrate;
  feature components own their data fetching via useSuspenseQuery

apps/web-next/src/app/about/page.tsx

@@ -1,31 +1,37 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { PageContent } from "@repo/marketing-pages/ui";
 import { bindAll } from "../../server/bind-production";
 
 export default async function AboutPage() {
   await bindAll();
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
+
   const page = await caller.marketingPages.pageBySlug({ slug: "about" });
 
+  queryClient.setQueryData(
+    ["marketingPages", "pageBySlug", { input: { slug: "about" } }],
+    page,
+  );
+
   if (!page) {
     return (
-      <main>
-        <h1>About</h1>
-        <p>This page hasn't been published yet.</p>
+      <main className="mx-auto max-w-3xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground">About</h1>
+        <p className="mt-2 text-muted-foreground">
+          This page hasn&apos;t been published yet.
+        </p>
       </main>
     );
   }
 
   return (
-    <main>
-      <article>
-        <header>
-          <h1>{page.hero.heading}</h1>
-          {page.hero.subheading ? <p>{page.hero.subheading}</p> : null}
-        </header>
-        <pre style={{ whiteSpace: "pre-wrap" }}>
-          {JSON.stringify(page.layout, null, 2)}
-        </pre>
-      </article>
-    </main>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <main className="px-6 py-8">
+        <PageContent slug="about" />
+      </main>
+    </HydrationBoundary>
   );
 }

apps/web-next/src/app/blog/[slug]/page.tsx

@@ -1,5 +1,8 @@
 import { notFound } from "next/navigation";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { ArticleDetail } from "@repo/blog/ui";
 import { bindAll } from "../../../server/bind-production";
 
 type PageProps = {
@@ -10,25 +13,22 @@ export default async function BlogPostPage({ params }: PageProps) {
   await bindAll();
   const { slug } = await params;
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
+
   const article = await caller.blog.articleBySlug({ slug });
 
   if (!article) notFound();
 
+  queryClient.setQueryData(
+    ["blog", "articleBySlug", { input: { slug } }],
+    article,
+  );
+
   return (
-    <main>
-      <article>
-        <header>
-          <h1>{article.title}</h1>
-          {article.createdAt ? (
-            <time dateTime={article.createdAt.toISOString()}>
-              {article.createdAt.toLocaleDateString()}
-            </time>
-          ) : null}
-        </header>
-        <pre style={{ whiteSpace: "pre-wrap" }}>
-          {JSON.stringify(article.content, null, 2)}
-        </pre>
-      </article>
-    </main>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <main className="px-6 py-8">
+        <ArticleDetail slug={slug} />
+      </main>
+    </HydrationBoundary>
   );
 }

apps/web-next/src/app/page.tsx

@@ -1,10 +1,14 @@
-import Link from "next/link";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { SiteHeader } from "@repo/navigation/ui";
+import { ArticleList } from "@repo/blog/ui";
 import { bindAll } from "../server/bind-production";
 
 export default async function Home() {
   await bindAll();
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
 
   const [siteSettings, header, articles] = await Promise.all([
     caller.marketingPages.siteSettings({}),
@@ -12,38 +16,24 @@ export default async function Home() {
     caller.blog.listArticles({ status: "published", limit: 20 }),
   ]);
 
-  return (
-    <main>
-      <header>
-        <h1>{siteSettings.siteName}</h1>
-        {siteSettings.siteDescription ? (
-          <p>{siteSettings.siteDescription}</p>
-        ) : null}
-        <nav>
-          <ul>
-            {header.items.map((item) => (
-              <li key={item.href}>
-                <Link href={item.href}>{item.label}</Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </header>
+  queryClient.setQueryData(["navigation", "header", { input: {} }], header);
+  queryClient.setQueryData(
+    ["blog", "listArticles", { input: { status: "published", limit: 20 } }],
+    articles,
+  );
 
-      <section>
-        <h2>Latest articles</h2>
-        {articles.length === 0 ? (
-          <p>No published articles yet.</p>
-        ) : (
-          <ul>
-            {articles.map((a) => (
-              <li key={a.id}>
-                <Link href={`/blog/${a.slug}`}>{a.title}</Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </main>
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <SiteHeader
+        siteName={siteSettings.siteName}
+        siteDescription={siteSettings.siteDescription}
+      />
+      <main className="mx-auto max-w-5xl px-6 py-8">
+        <h2 className="mb-4 text-2xl font-bold text-foreground">
+          Latest articles
+        </h2>
+        <ArticleList />
+      </main>
+    </HydrationBoundary>
   );
 }