diff --git a/frontend/src/components/page-view.tsx b/frontend/src/components/page-view.tsx
new file mode 100644
index 0000000..e48c97b
--- /dev/null
+++ b/frontend/src/components/page-view.tsx
@@ -0,0 +1,13 @@
+type Props = {
+ title: string
+ content: string
+}
+
+export function PageView({ title, content }: Props) {
+ return (
+
+ {title}
+
+
+ )
+}
diff --git a/frontend/src/routes/$slug.tsx b/frontend/src/routes/$slug.tsx
new file mode 100644
index 0000000..5c083b0
--- /dev/null
+++ b/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 && (
+
+ {page.title}
+
+ )}
+
+ >
+ )
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 9446c5b..3bc8928 100644
--- a/frontend/src/routes/index.tsx
+++ b/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: () => (
-
-
Home
-
Routing placeholder — CMS page will render here.
-
- ),
+ loader: async ({ context: { queryClient } }) => {
+ await queryClient.ensureQueryData(pageBySlugQuery('home'))
+ },
+ component: HomePage,
})
+
+function HomePage() {
+ const { data: page } = useSuspenseQuery(pageBySlugQuery('home'))
+ if (!page) {
+ return (
+
+
Welcome
+
No home page content configured in Directus.
+
+ )
+ }
+ return
+}