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/marketing-pages/package.json

@@ -24,9 +24,13 @@
   "dependencies": {
     "@repo/auth": "workspace:*",
     "@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"
   },
@@ -35,6 +39,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/marketing-pages/src/ui/components/page-content.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePageBySlug } from "../hooks/use-page-by-slug";
+import { PageHero } from "./page-hero";
+
+export type PageContentProps = {
+  slug: string;
+};
+
+export function PageContent({ slug }: PageContentProps) {
+  const { data: page } = usePageBySlug(slug);
+
+  if (!page) return null;
+
+  return (
+    <article className="mx-auto max-w-3xl">
+      <PageHero hero={page.hero} />
+      <div className="prose text-foreground">
+        <pre className="whitespace-pre-wrap text-sm">
+          {JSON.stringify(page.layout, null, 2)}
+        </pre>
+      </div>
+    </article>
+  );
+}

packages/marketing-pages/src/ui/components/page-hero.tsx

@@ -0,0 +1,16 @@
+import type { Hero } from "../../entities/models/page";
+
+export type PageHeroProps = {
+  hero: Hero;
+};
+
+export function PageHero({ hero }: PageHeroProps) {
+  return (
+    <header className="mb-8">
+      <h1 className="text-3xl font-bold text-foreground">{hero.heading}</h1>
+      {hero.subheading ? (
+        <p className="mt-2 text-lg text-muted-foreground">{hero.subheading}</p>
+      ) : null}
+    </header>
+  );
+}

packages/marketing-pages/src/ui/hooks/use-page-by-slug.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { Page } from "../../entities/models/page";
+
+export function usePageBySlug(slug: string) {
+  const trpc = useTRPC();
+  return useSuspenseQuery(
+    trpc.marketingPages.pageBySlug.queryOptions({ slug }),
+  ) as { data: Page | null };
+}

packages/marketing-pages/src/ui/hooks/use-site-settings.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { SiteSettings } from "../../entities/models/site-settings";
+
+export function useSiteSettings() {
+  const trpc = useTRPC();
+  return useSuspenseQuery(
+    trpc.marketingPages.siteSettings.queryOptions({}),
+  ) as { data: SiteSettings };
+}

packages/marketing-pages/src/ui/index.ts

@@ -1 +1,5 @@
 export { pageBySlugQuery, siteSettingsQuery } from "./query";
+export { usePageBySlug } from "./hooks/use-page-by-slug";
+export { useSiteSettings } from "./hooks/use-site-settings";
+export { PageHero, type PageHeroProps } from "./components/page-hero";
+export { PageContent, type PageContentProps } from "./components/page-content";