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/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";