Add home and CMS page routes

frontend/src/components/page-view.tsx

@@ -0,0 +1,13 @@
+type Props = {
+  title: string
+  content: string
+}
+
+export function PageView({ title, content }: Props) {
+  return (
+    <article className="page">
+      <h1 className="text-3xl font-bold mb-4">{title}</h1>
+      <div className="prose-cms" dangerouslySetInnerHTML={{ __html: content }} />
+    </article>
+  )
+}

frontend/src/routes/$slug.tsx

@@ -0,0 +1,30 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { Helmet } from 'react-helmet-async'
+import { pageBySlugQuery } from '@/lib/queries'
+import { PageView } from '@/components/page-view'
+
+export const Route = createFileRoute('/$slug')({
+  loader: async ({ context: { queryClient }, params: { slug } }) => {
+    const page = await queryClient.ensureQueryData(pageBySlugQuery(slug))
+    if (!page) throw notFound()
+  },
+  component: CmsPage,
+})
+
+function CmsPage() {
+  const { slug } = Route.useParams()
+  const { data: page } = useSuspenseQuery(pageBySlugQuery(slug))
+  if (!page) return null
+
+  return (
+    <>
+      {page.title && (
+        <Helmet>
+          <title>{page.title}</title>
+        </Helmet>
+      )}
+      <PageView title={page.title} content={page.content} />
+    </>
+  )
+}

frontend/src/routes/index.tsx

@@ -1,10 +1,24 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { pageBySlugQuery } from '@/lib/queries'
+import { PageView } from '@/components/page-view'
 
 export const Route = createFileRoute('/')({
-  component: () => (
+  loader: async ({ context: { queryClient } }) => {
-    <div className="p-8">
+    await queryClient.ensureQueryData(pageBySlugQuery('home'))
-      <h1 className="text-3xl font-bold">Home</h1>
+  },
-      <p className="text-muted-foreground">Routing placeholder — CMS page will render here.</p>
+  component: HomePage,
-    </div>
-  ),
 })
+
+function HomePage() {
+  const { data: page } = useSuspenseQuery(pageBySlugQuery('home'))
+  if (!page) {
+    return (
+      <div className="py-10">
+        <h1 className="text-3xl font-bold">Welcome</h1>
+        <p className="text-muted-foreground mt-2">No home page content configured in Directus.</p>
+      </div>
+    )
+  }
+  return <PageView title={page.title} content={page.content} />
+}