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

packages/navigation/package.json

@@ -19,9 +19,13 @@
   },
   "dependencies": {
     "@repo/core-shared": "workspace:*",
+    "@repo/core-trpc": "workspace:^",
+    "@tanstack/react-query": "^5.66.0",
+    "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.0.0",
     "inversify": "^6.2.0",
     "payload": "^3.14.0",
+    "react": "^19.0.0",
     "reflect-metadata": "^0.2.2",
     "zod": "^3.24.0"
   },
@@ -30,6 +34,7 @@
     "@repo/core-testing": "workspace:*",
     "@repo/core-typescript": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "vitest": "^3.1.0"
   }

packages/navigation/src/ui/components/site-header.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useHeader } from "../hooks/use-header";
+
+export type SiteHeaderProps = {
+  siteName: string;
+  siteDescription?: string;
+};
+
+export function SiteHeader({ siteName, siteDescription }: SiteHeaderProps) {
+  const { data: header } = useHeader();
+
+  return (
+    <header className="border-b border-border bg-background px-6 py-4">
+      <div className="mx-auto flex max-w-5xl items-center justify-between">
+        <div>
+          <a href="/">
+            <span className="text-lg font-semibold text-foreground">
+              {siteName}
+            </span>
+          </a>
+          {siteDescription ? (
+            <p className="text-sm text-muted-foreground">{siteDescription}</p>
+          ) : null}
+        </div>
+        <nav>
+          <ul className="flex gap-4">
+            {header.items.map((item) => (
+              <li key={item.href}>
+                <a
+                  href={item.href}
+                  {...(item.external
+                    ? { target: "_blank", rel: "noopener noreferrer" }
+                    : {})}
+                  className="text-sm font-medium text-foreground hover:text-primary"
+                >
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

packages/navigation/src/ui/hooks/use-header.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useHeader() {
+  const trpc = useTRPC();
+  return useSuspenseQuery(trpc.navigation.header.queryOptions({})) as {
+    data: {
+      items: { label: string; href: string; external: boolean }[];
+      logoId?: string;
+    };
+  };
+}

packages/navigation/src/ui/index.ts

@@ -1 +1,3 @@
 export { headerQuery } from "./query";
+export { useHeader } from "./hooks/use-header";
+export { SiteHeader, type SiteHeaderProps } from "./components/site-header";