From c74f274fba4c416f11755ecb1b43dbc8ec65b4c0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 12:09:51 +0000
Subject: [PATCH 1/3] Convert Next.js application to use App Router

- Created app directory with new root layout combining _app and _document
- Converted all pages from pages/ to app/ directory structure
- Updated routing from next/router to next/navigation hooks
- Marked client components with 'use client' directive
- Split gateway.ts to handle client/server concerns separately
- Converted getStaticProps/getStaticPaths to Server Components and generateStaticParams
- Updated all dynamic routes to new [param] folder structure
- Fixed type issues with Post and Author types
- Updated authentication and navigation components for App Router

All routes successfully converted:
- Home page (/)
- Blog pages (/posts, /posts/[slug])
- Auth pages (/signin, /signup, /signup-confirm)
- Protected pages (/admin, /profile)
- Feature pages (/todomvc, /bookings-auto, /bookings-custom, /shadcn-ui, /features)
- Error pages (/forbidden)

Note: Static export has a runtime issue during build that needs investigation
---
 .../{pages/admin.tsx => app/admin/page.tsx}   |   2 +
 .../bookings-auto/page.tsx}                   |   9 +-
 .../bookings-custom/page.tsx}                 |  11 +-
 .../features.mdx => app/features/page.mdx}    |   0
 .../forbidden.tsx => app/forbidden/page.tsx}  |   7 +-
 MyApp.Client/app/layout.tsx                   |  42 +++
 MyApp.Client/app/page.tsx                     |  71 ++++
 MyApp.Client/app/posts/[slug]/page.tsx        |  73 ++++
 MyApp.Client/app/posts/page.tsx               |  38 +++
 .../profile.tsx => app/profile/page.tsx}      |   4 +-
 MyApp.Client/app/providers.tsx                |  23 ++
 MyApp.Client/app/shadcn-ui/page.tsx           | 233 +++++++++++++
 .../{pages/signin.tsx => app/signin/page.tsx} |  12 +-
 .../signup-confirm/page.tsx}                  |  10 +-
 .../{pages/signup.tsx => app/signup/page.tsx} |  14 +-
 .../todomvc.tsx => app/todomvc/page.tsx}      |  10 +-
 MyApp.Client/components/builtin-uis.tsx       |   2 +
 MyApp.Client/components/getting-started.tsx   |   2 +
 MyApp.Client/components/intro.tsx             |   4 +-
 MyApp.Client/components/nav.tsx               |  13 +-
 MyApp.Client/components/shell-command.tsx     |   2 +
 MyApp.Client/lib/auth.tsx                     |  10 +-
 MyApp.Client/lib/gateway.client.ts            |  23 ++
 MyApp.Client/lib/gateway.ts                   |  36 +-
 MyApp.Client/next-env.d.ts                    |   2 +-
 MyApp.Client/next.config.mjs                  |   2 -
 MyApp.Client/npm-shrinkwrap.json              |  33 +-
 MyApp.Client/pages/_app.tsx                   |  24 --
 MyApp.Client/pages/_document.tsx              |  32 --
 MyApp.Client/pages/index.tsx                  |  85 -----
 MyApp.Client/pages/posts.tsx                  |  41 ---
 MyApp.Client/pages/posts/[slug].tsx           |  98 ------
 MyApp.Client/pages/shadcn-ui.tsx              | 317 ------------------
 MyApp.Client/tsconfig.json                    |  15 +-
 34 files changed, 611 insertions(+), 689 deletions(-)
 rename MyApp.Client/{pages/admin.tsx => app/admin/page.tsx} (98%)
 rename MyApp.Client/{pages/bookings-auto.tsx => app/bookings-auto/page.tsx} (88%)
 rename MyApp.Client/{pages/bookings-custom.tsx => app/bookings-custom/page.tsx} (96%)
 rename MyApp.Client/{pages/features.mdx => app/features/page.mdx} (100%)
 rename MyApp.Client/{pages/forbidden.tsx => app/forbidden/page.tsx} (86%)
 create mode 100644 MyApp.Client/app/layout.tsx
 create mode 100644 MyApp.Client/app/page.tsx
 create mode 100644 MyApp.Client/app/posts/[slug]/page.tsx
 create mode 100644 MyApp.Client/app/posts/page.tsx
 rename MyApp.Client/{pages/profile.tsx => app/profile/page.tsx} (95%)
 create mode 100644 MyApp.Client/app/providers.tsx
 create mode 100644 MyApp.Client/app/shadcn-ui/page.tsx
 rename MyApp.Client/{pages/signin.tsx => app/signin/page.tsx} (92%)
 rename MyApp.Client/{pages/signup-confirm.tsx => app/signup-confirm/page.tsx} (73%)
 rename MyApp.Client/{pages/signup.tsx => app/signup/page.tsx} (92%)
 rename MyApp.Client/{pages/todomvc.tsx => app/todomvc/page.tsx} (98%)
 create mode 100644 MyApp.Client/lib/gateway.client.ts
 delete mode 100644 MyApp.Client/pages/_app.tsx
 delete mode 100644 MyApp.Client/pages/_document.tsx
 delete mode 100644 MyApp.Client/pages/index.tsx
 delete mode 100644 MyApp.Client/pages/posts.tsx
 delete mode 100644 MyApp.Client/pages/posts/[slug].tsx
 delete mode 100644 MyApp.Client/pages/shadcn-ui.tsx

diff --git a/MyApp.Client/pages/admin.tsx b/MyApp.Client/app/admin/page.tsx
similarity index 98%
rename from MyApp.Client/pages/admin.tsx
rename to MyApp.Client/app/admin/page.tsx
index d5cd8ed..da6be96 100644
--- a/MyApp.Client/pages/admin.tsx
+++ b/MyApp.Client/app/admin/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { SecondaryButton } from "@servicestack/react"
 import Page from "@/components/layout-page"
 import { ValidateAuth, appAuth } from "@/lib/auth"
diff --git a/MyApp.Client/pages/bookings-auto.tsx b/MyApp.Client/app/bookings-auto/page.tsx
similarity index 88%
rename from MyApp.Client/pages/bookings-auto.tsx
rename to MyApp.Client/app/bookings-auto/page.tsx
index 01ba69c..18854d5 100644
--- a/MyApp.Client/pages/bookings-auto.tsx
+++ b/MyApp.Client/app/bookings-auto/page.tsx
@@ -1,12 +1,12 @@
+'use client'
+
 import Link from "next/link"
 import { AutoQueryGrid } from "@servicestack/react"
 import Page from "@/components/layout-page"
 import { ValidateAuth } from "@/lib/auth"
 import SrcPage from "@/components/src-page"
 
-function Index() {
-
-
+function BookingsAuto() {
     return (<Page title="Bookings CRUD (Auto Columns)">
 
         <div className="mb-4 flex justify-end">
@@ -26,5 +26,4 @@ function Index() {
     </Page>)
 }
 
-export default ValidateAuth(Index, {role: 'Employee'})
-
+export default ValidateAuth(BookingsAuto, {role: 'Employee'})
diff --git a/MyApp.Client/pages/bookings-custom.tsx b/MyApp.Client/app/bookings-custom/page.tsx
similarity index 96%
rename from MyApp.Client/pages/bookings-custom.tsx
rename to MyApp.Client/app/bookings-custom/page.tsx
index 128df9b..cc724ec 100644
--- a/MyApp.Client/pages/bookings-custom.tsx
+++ b/MyApp.Client/app/bookings-custom/page.tsx
@@ -1,11 +1,13 @@
-import { useState, useEffect } from "react"
+'use client'
+
+import { useState } from "react"
 import Link from "next/link"
 import { useFormatters, AutoQueryGrid, TextLink, PreviewFormat, AutoEditForm, Icon } from "@servicestack/react"
 import Page from "@/components/layout-page"
 import { ValidateAuth } from "@/lib/auth"
 import SrcPage from "@/components/src-page"
 
-function Index() {
+function BookingsCustom() {
     const { currency } = useFormatters()
     const [coupon, setCoupon] = useState<any>(null)
 
@@ -76,7 +78,7 @@ function Index() {
                     onSave={() => setCoupon(null)}
                 />
             )}
-            
+
             <div className="mt-4 text-center text-gray-400 flex justify-center -ml-6">
                 <SrcPage path="bookings-custom.tsx" />
             </div>
@@ -85,5 +87,4 @@ function Index() {
     </Page>)
 }
 
-export default ValidateAuth(Index, {role: 'Employee'})
-
+export default ValidateAuth(BookingsCustom, {role: 'Employee'})
diff --git a/MyApp.Client/pages/features.mdx b/MyApp.Client/app/features/page.mdx
similarity index 100%
rename from MyApp.Client/pages/features.mdx
rename to MyApp.Client/app/features/page.mdx
diff --git a/MyApp.Client/pages/forbidden.tsx b/MyApp.Client/app/forbidden/page.tsx
similarity index 86%
rename from MyApp.Client/pages/forbidden.tsx
rename to MyApp.Client/app/forbidden/page.tsx
index 16c6a8a..ebb16d6 100644
--- a/MyApp.Client/pages/forbidden.tsx
+++ b/MyApp.Client/app/forbidden/page.tsx
@@ -1,5 +1,5 @@
-export default () => {
-    return (<>
+export default function Forbidden() {
+    return (
         <div className="text-black bg-white h-screen text-center flex flex-col items-center justify-center">
             <div>
                 <h1 className="inline-block border-gray-300 border-r m-0 mr-5 py-2 pr-4 text-2xl font-medium align-top">403</h1>
@@ -7,7 +7,6 @@ export default () => {
                     <h2 className="text-sm leading-10 font-normal m-0 p-0">You do not have access to this page.</h2>
                 </div>
             </div>
-        </div>            
-      </>
+        </div>
     )
 }
diff --git a/MyApp.Client/app/layout.tsx b/MyApp.Client/app/layout.tsx
new file mode 100644
index 0000000..984b5e8
--- /dev/null
+++ b/MyApp.Client/app/layout.tsx
@@ -0,0 +1,42 @@
+import "../styles/index.css"
+import "../styles/main.css"
+import "../styles/prism-dark-blue.css"
+import type { Metadata } from 'next'
+import Providers from './providers'
+
+export const metadata: Metadata = {
+  title: 'Next.js Example',
+  description: 'Next.js App Router Example',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="h-full">
+      <head />
+      <body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                function getTheme() {
+                  const theme = localStorage.getItem('color-scheme');
+                  if (theme) return theme;
+                  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                const theme = getTheme();
+                if (theme === 'dark') {
+                  document.documentElement.classList.add('dark');
+                }
+              })();
+            `,
+          }}
+        />
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/MyApp.Client/app/page.tsx b/MyApp.Client/app/page.tsx
new file mode 100644
index 0000000..1b3977b
--- /dev/null
+++ b/MyApp.Client/app/page.tsx
@@ -0,0 +1,71 @@
+import Container from "@/components/container"
+import MoreStories from "@/components/more-stories"
+import HeroPost from "@/components/hero-post"
+import Intro from "@/components/intro"
+import Layout from "@/components/layout"
+import { getAllPosts } from "@/lib/api"
+import { CMS_NAME } from "@/lib/constants"
+import Post from "@/types/post"
+import GettingStarted from "@/components/getting-started"
+import BuiltInUis from "@/components/builtin-uis"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: `Next.js Example with ${CMS_NAME}`,
+}
+
+export default function Index() {
+  const allPosts = getAllPosts([
+    'title',
+    'date',
+    'slug',
+    'author',
+    'coverImage',
+    'excerpt',
+  ]) as unknown as Post[]
+
+  const heroPost = allPosts[0]
+  const morePosts = allPosts.slice(1)
+
+  return (
+    <Layout>
+      <Container>
+        <Intro />
+          <div className="mb-32 flex justify-center">
+              <GettingStarted template="nextjs" />
+          </div>
+
+
+          <div className="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
+              <div className="text-center">
+                  <svg className="text-link-dark w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.58 17.25l.92-3.89l-3-2.58l3.95-.37L12 6.8l1.55 3.65l3.95.33l-3 2.58l.92 3.89L12 15.19zM12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8"/></svg>
+                  <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+                      Built-in UIs
+                  </h1>
+              </div>
+          </div>
+
+          <div className="mb-40">
+              <p className="mt-4 mb-10 text-xl text-gray-600 dark:text-gray-400">
+                  Manage your ServiceStack App and explore, discover, query and call APIs instantly with
+                  built-in Auto UIs dynamically generated from the rich metadata of your App's typed C# APIs &amp; DTOs
+              </p>
+
+              <BuiltInUis />
+          </div>
+
+        {heroPost && (
+          <HeroPost
+            title={heroPost.title}
+            coverImage={heroPost.coverImage}
+            date={heroPost.date}
+            author={heroPost.author}
+            slug={heroPost.slug}
+            excerpt={heroPost.excerpt}
+          />
+        )}
+        {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+      </Container>
+    </Layout>
+  )
+}
diff --git a/MyApp.Client/app/posts/[slug]/page.tsx b/MyApp.Client/app/posts/[slug]/page.tsx
new file mode 100644
index 0000000..8b294bd
--- /dev/null
+++ b/MyApp.Client/app/posts/[slug]/page.tsx
@@ -0,0 +1,73 @@
+import { notFound } from "next/navigation"
+import Container from "@/components/container"
+import PostBody from "@/components/post-body"
+import Header from "@/components/header"
+import PostHeader from "@/components/post-header"
+import Layout from "@/components/layout"
+import { getPostBySlug, getAllPosts } from "@/lib/api"
+import PostTitle from "@/components/post-title"
+import { CMS_NAME } from "@/lib/constants"
+import markdownToHtml from "@/lib/markdownToHtml"
+import type { Metadata } from 'next'
+import PostType from "@/types/post"
+
+type Props = {
+  params: {
+    slug: string
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const post = getPostBySlug(params.slug, ['title', 'ogImage']) as unknown as PostType
+  const title = `${post.title} | Next.js Example with ${CMS_NAME}`
+
+  return {
+    title,
+    openGraph: {
+      images: [post.ogImage.url],
+    },
+  }
+}
+
+export async function generateStaticParams() {
+  const posts = getAllPosts(['slug'])
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+
+export default async function Post({ params }: Props) {
+  const post = getPostBySlug(params.slug, [
+    'title',
+    'date',
+    'slug',
+    'author',
+    'content',
+    'ogImage',
+    'coverImage',
+  ]) as unknown as PostType
+
+  if (!post?.slug) {
+    notFound()
+  }
+
+  const content = await markdownToHtml(post.content || '')
+
+  return (
+    <Layout>
+      <Container>
+        <Header />
+        <article className="prose lg:prose-xl max-w-none mb-32">
+          <PostHeader
+            title={post.title}
+            coverImage={post.coverImage}
+            date={post.date}
+            author={post.author}
+          />
+          <PostBody content={content} />
+        </article>
+      </Container>
+    </Layout>
+  )
+}
diff --git a/MyApp.Client/app/posts/page.tsx b/MyApp.Client/app/posts/page.tsx
new file mode 100644
index 0000000..30a4b9f
--- /dev/null
+++ b/MyApp.Client/app/posts/page.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import Layout from "@/components/layout"
+import { getAllPosts } from "@/lib/api"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Markdown Posts',
+}
+
+export default function Posts() {
+  const allPosts = getAllPosts([
+    'title',
+    'slug',
+    'excerpt',
+  ])
+
+  return (
+    <Layout>
+      <main>
+        <div className="max-w-7xl mx-auto px-5">
+          <h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">Markdown Posts</h1>
+          <h3 className="text-lg mb-8">
+            List of Markdown Posts in <span
+              className="bg-blue-50 text-blue-500 dark:bg-blue-900 dark:text-blue-200 py-1 px-2 rounded">/pages</span>
+          </h3>
+          {allPosts.map((post) => (
+            <div className="mb-8" key={post.slug}>
+              <a className="text-2xl hover:text-green-600" href={`/posts/${post.slug}`}>{post.title}</a>
+              {!post.excerpt ? null : <p className="text-gray-500">
+                {post.excerpt}
+              </p>}
+            </div>
+          ))}
+        </div>
+      </main>
+    </Layout>
+  )
+}
diff --git a/MyApp.Client/pages/profile.tsx b/MyApp.Client/app/profile/page.tsx
similarity index 95%
rename from MyApp.Client/pages/profile.tsx
rename to MyApp.Client/app/profile/page.tsx
index 34ac75a..feeeff6 100644
--- a/MyApp.Client/pages/profile.tsx
+++ b/MyApp.Client/app/profile/page.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import React from "react"
-import Page from "../components/layout-page"
+import Page from "@/components/layout-page"
 import {SecondaryButton} from "@servicestack/react"
 import {appAuth, ValidateAuth} from "@/lib/auth"
 
diff --git a/MyApp.Client/app/providers.tsx b/MyApp.Client/app/providers.tsx
new file mode 100644
index 0000000..9520798
--- /dev/null
+++ b/MyApp.Client/app/providers.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useEffect } from "react"
+import Link from 'next/link'
+import { setLinkComponent, ClientContext } from '@servicestack/react'
+import { client, init } from "@/lib/gateway"
+
+// Adapter component to convert react-router 'to' prop to Next.js 'href' prop
+const NextLink = ({ to, ...props }: any) => <Link href={to || props.href} {...props} />
+
+setLinkComponent(NextLink)
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    (async () => init())()
+  }, [])
+
+  return (
+    <ClientContext.Provider value={client}>
+      {children}
+    </ClientContext.Provider>
+  )
+}
diff --git a/MyApp.Client/app/shadcn-ui/page.tsx b/MyApp.Client/app/shadcn-ui/page.tsx
new file mode 100644
index 0000000..ac3e99a
--- /dev/null
+++ b/MyApp.Client/app/shadcn-ui/page.tsx
@@ -0,0 +1,233 @@
+import Layout from "@/components/layout"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Terminal, Rocket, Package, ExternalLink, Info, Download, Code2 } from "lucide-react"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'shadcn/ui Components',
+}
+
+export default function ShadcnUiDemo() {
+    return (
+        <Layout>
+            <main className="max-w-7xl mx-auto px-5 py-8">
+                <div className="max-w-4xl">
+                <div className="mb-12">
+                    <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">
+                        shadcn/ui Components
+                    </h1>
+                    <p className="text-lg text-gray-600 dark:text-gray-400 mb-4">
+                        A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS.
+                    </p>
+                    <div className="flex gap-2 flex-wrap">
+                        <Badge>React</Badge>
+                        <Badge variant="secondary">TypeScript</Badge>
+                        <Badge variant="outline">Tailwind CSS</Badge>
+                    </div>
+                </div>
+
+                {/* Alert Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Alerts</h2>
+                    <div className="space-y-4">
+                        <Alert className="bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700">
+                            <Terminal className="h-4 w-4 text-slate-700 dark:text-slate-300" />
+                            <AlertTitle className="text-slate-900 dark:text-slate-100">Heads up!</AlertTitle>
+                            <AlertDescription className="text-slate-700 dark:text-slate-300">
+                                You can add components and dependencies to your app using the CLI.
+                            </AlertDescription>
+                        </Alert>
+                        <Alert variant="destructive">
+                            <Terminal className="h-4 w-4" />
+                            <AlertTitle>Error</AlertTitle>
+                            <AlertDescription>
+                                Your session has expired. Please log in again.
+                            </AlertDescription>
+                        </Alert>
+                    </div>
+                </section>
+
+                {/* Button Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Buttons</h2>
+                    <div className="flex flex-wrap gap-4">
+                        <Button>Default</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="destructive">Destructive</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="link">Link</Button>
+                    </div>
+                    <div className="flex flex-wrap gap-4 mt-4">
+                        <Button size="sm">Small</Button>
+                        <Button size="default">Default</Button>
+                        <Button size="lg">Large</Button>
+                        <Button size="icon">
+                            <Download className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </section>
+
+                {/* Card Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Cards</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Getting Started</CardTitle>
+                                <CardDescription>Start building your next project with shadcn/ui</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <p className="text-sm text-gray-600 dark:text-gray-400">
+                                    Install components with a simple CLI command and customize them to match your design system.
+                                </p>
+                            </CardContent>
+                            <CardFooter>
+                                <Button className="w-full">
+                                    <Rocket className="mr-2 h-4 w-4" />
+                                    Get Started
+                                </Button>
+                            </CardFooter>
+                        </Card>
+
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Components</CardTitle>
+                                <CardDescription>50+ components and growing</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <p className="text-sm text-gray-600 dark:text-gray-400">
+                                    Access a wide range of professionally designed components that are fully customizable and accessible.
+                                </p>
+                            </CardContent>
+                            <CardFooter>
+                                <Button variant="outline" className="w-full">
+                                    <Package className="mr-2 h-4 w-4" />
+                                    View All
+                                </Button>
+                            </CardFooter>
+                        </Card>
+                    </div>
+                </section>
+
+                {/* Tabs Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Tabs</h2>
+                    <Tabs defaultValue="overview" className="w-full">
+                        <TabsList className="grid w-full grid-cols-3">
+                            <TabsTrigger value="overview">Overview</TabsTrigger>
+                            <TabsTrigger value="features">Features</TabsTrigger>
+                            <TabsTrigger value="documentation">Documentation</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="overview" className="space-y-4">
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Overview</CardTitle>
+                                    <CardDescription>A quick overview of shadcn/ui</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-gray-600 dark:text-gray-400">
+                                        shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS.
+                                        It's not a component library. It's a collection of components that you can copy and paste into your apps.
+                                    </p>
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+                        <TabsContent value="features" className="space-y-4">
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Features</CardTitle>
+                                    <CardDescription>Key features of shadcn/ui</CardDescription>
+                                </CardHeader>
+                                <CardContent className="space-y-2">
+                                    <div className="flex items-center gap-2">
+                                        <Info className="h-4 w-4 text-blue-500" />
+                                        <span className="text-gray-700 dark:text-gray-300">Fully accessible components</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <Info className="h-4 w-4 text-blue-500" />
+                                        <span className="text-gray-700 dark:text-gray-300">Customizable with Tailwind CSS</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <Info className="h-4 w-4 text-blue-500" />
+                                        <span className="text-gray-700 dark:text-gray-300">Copy and paste components</span>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+                        <TabsContent value="documentation" className="space-y-4">
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Documentation</CardTitle>
+                                    <CardDescription>Learn more about shadcn/ui</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-gray-600 dark:text-gray-400 mb-4">
+                                        Visit the official documentation to learn how to install and use these components in your project.
+                                    </p>
+                                    <Button variant="outline">
+                                        <ExternalLink className="mr-2 h-4 w-4" />
+                                        View Documentation
+                                    </Button>
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+                    </Tabs>
+                </section>
+
+                {/* Accordion Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Accordion</h2>
+                    <Accordion type="single" collapsible className="w-full">
+                        <AccordionItem value="item-1">
+                            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+                            <AccordionContent>
+                                Yes. It adheres to the WAI-ARIA design pattern and uses Radix UI primitives.
+                            </AccordionContent>
+                        </AccordionItem>
+                        <AccordionItem value="item-2">
+                            <AccordionTrigger>Is it styled?</AccordionTrigger>
+                            <AccordionContent>
+                                Yes. It comes with default styles that you can customize with Tailwind CSS.
+                            </AccordionContent>
+                        </AccordionItem>
+                        <AccordionItem value="item-3">
+                            <AccordionTrigger>Is it animated?</AccordionTrigger>
+                            <AccordionContent>
+                                Yes. It's animated by default with smooth transitions using Tailwind CSS.
+                            </AccordionContent>
+                        </AccordionItem>
+                    </Accordion>
+                </section>
+
+                {/* Badge Demo */}
+                <section className="mb-12">
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Badges</h2>
+                    <div className="flex flex-wrap gap-2">
+                        <Badge>Default</Badge>
+                        <Badge variant="secondary">Secondary</Badge>
+                        <Badge variant="destructive">Destructive</Badge>
+                        <Badge variant="outline">Outline</Badge>
+                    </div>
+                </section>
+
+                <section className="mb-12">
+                    <Alert className="bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700">
+                        <Code2 className="h-4 w-4 text-blue-700 dark:text-blue-300" />
+                        <AlertTitle className="text-blue-900 dark:text-blue-100">Code Example</AlertTitle>
+                        <AlertDescription className="text-blue-700 dark:text-blue-300">
+                            All these components are available in your project. You can customize them by editing the component files
+                            in the components/ui directory.
+                        </AlertDescription>
+                    </Alert>
+                </section>
+                </div>
+            </main>
+        </Layout>
+    )
+}
diff --git a/MyApp.Client/pages/signin.tsx b/MyApp.Client/app/signin/page.tsx
similarity index 92%
rename from MyApp.Client/pages/signin.tsx
rename to MyApp.Client/app/signin/page.tsx
index 70bd8d9..3ea618b 100644
--- a/MyApp.Client/pages/signin.tsx
+++ b/MyApp.Client/app/signin/page.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import {serializeToObject} from "@servicestack/client"
 import {SyntheticEvent, useEffect, useState} from "react"
-import Router, {useRouter} from "next/router"
+import {useRouter, useSearchParams} from "next/navigation"
 import Link from "next/link"
 
 import Page from "@/components/layout-page"
@@ -9,7 +11,7 @@ import {Authenticate} from "@/lib/dtos"
 import {appAuth, Redirecting} from "@/lib/auth"
 import {getRedirect} from "@/lib/gateway"
 
-export default () => {
+export default function SignIn() {
 
     const client = useClient()
     const [username, setUsername] = useState<string | number>()
@@ -20,10 +22,14 @@ export default () => {
         setPassword('p@55wOrd')
     }
     const router = useRouter()
+    const searchParams = useSearchParams()
 
     const {user, revalidate} = appAuth()
     useEffect(() => {
-        if (user) Router.replace(getRedirect(router.query) || "/")
+        if (user) {
+            const redirect = getRedirect(Object.fromEntries(searchParams.entries())) || "/"
+            router.replace(redirect)
+        }
     }, [user]);
     if (user) return <Redirecting/>
 
diff --git a/MyApp.Client/pages/signup-confirm.tsx b/MyApp.Client/app/signup-confirm/page.tsx
similarity index 73%
rename from MyApp.Client/pages/signup-confirm.tsx
rename to MyApp.Client/app/signup-confirm/page.tsx
index 1efc69e..5f33b2e 100644
--- a/MyApp.Client/pages/signup-confirm.tsx
+++ b/MyApp.Client/app/signup-confirm/page.tsx
@@ -1,9 +1,11 @@
+'use client'
+
 import Page from "@/components/layout-page"
-import { useRouter } from "next/router"
+import { useSearchParams } from "next/navigation"
 
-export default () => {
-    const router = useRouter()
-    const confirmLink = router.query.confirmLink as string | undefined
+export default function SignUpConfirm() {
+    const searchParams = useSearchParams()
+    const confirmLink = searchParams.get('confirmLink')
 
     return (<Page title="Signup confirmation">
         <div className="mt-8 mb-20">
diff --git a/MyApp.Client/pages/signup.tsx b/MyApp.Client/app/signup/page.tsx
similarity index 92%
rename from MyApp.Client/pages/signup.tsx
rename to MyApp.Client/app/signup/page.tsx
index b2d7f19..c53b010 100644
--- a/MyApp.Client/pages/signup.tsx
+++ b/MyApp.Client/app/signup/page.tsx
@@ -1,13 +1,15 @@
+'use client'
+
 import { SyntheticEvent, useEffect, useState } from "react"
 import { useClient, FormLoading, ErrorSummary, TextInput, PrimaryButton, SecondaryButton, ApiStateContext } from "@servicestack/react"
 import { serializeToObject, leftPart, rightPart, toPascalCase } from "@servicestack/client"
-import Router, { useRouter } from "next/router"
+import {useRouter, useSearchParams} from "next/navigation"
 import Page from "@/components/layout-page"
 import { getRedirect } from "@/lib/gateway"
 import { Register, RegisterResponse } from "@/lib/dtos"
 import { appAuth, Redirecting } from "@/lib/auth"
 
-export default () => {
+export default function SignUp() {
 
     const client = useClient()
     const [displayName, setDisplayName] = useState<string>()
@@ -15,6 +17,7 @@ export default () => {
     const [password, setPassword] = useState<string>()
     const [confirmPassword, setConfirmPassword] = useState<string>()
     const router = useRouter()
+    const searchParams = useSearchParams()
     const { user, revalidate } = appAuth()
 
     const setUser = (email: string) => {
@@ -27,7 +30,10 @@ export default () => {
     }
 
     useEffect(() => {
-        if (user) Router.replace(getRedirect(router.query) || "/")
+        if (user) {
+            const redirect = getRedirect(Object.fromEntries(searchParams.entries())) || "/"
+            router.replace(redirect)
+        }
     }, [user])
     if (user) return <Redirecting/>
 
@@ -47,7 +53,7 @@ export default () => {
             if (redirectUrl) {
                 location.href = redirectUrl
             } else {
-                Router.push("/signin")
+                router.push("/signin")
             }
         }
     }
diff --git a/MyApp.Client/pages/todomvc.tsx b/MyApp.Client/app/todomvc/page.tsx
similarity index 98%
rename from MyApp.Client/pages/todomvc.tsx
rename to MyApp.Client/app/todomvc/page.tsx
index 9f83873..827629a 100644
--- a/MyApp.Client/pages/todomvc.tsx
+++ b/MyApp.Client/app/todomvc/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, type ReactNode, KeyboardEvent, MouseEvent, useEffect } from "react"
 import { classNames, ResponseStatus } from "@servicestack/client"
 import { TextInput } from "@servicestack/react"
@@ -7,7 +9,7 @@ import { CreateTodo, DeleteTodo, DeleteTodos, QueryTodos, Todo, UpdateTodo } fro
 
 export type Filter = "all" | "finished" | "unfinished"
 
-const TodosMvc = () => {
+export default function TodosMvc() {
 
     const [newTodo, setNewTodo] = useState('')
 
@@ -139,8 +141,8 @@ type FilterTabProps = {
 }
 
 function FilterTab({active, className, onClick, children}: FilterTabProps) {
-    return (<span className={classNames(`cursor-pointer border-gray-200 text-sm font-medium px-4 py-2 hover:bg-gray-100 
-      focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 
+    return (<span className={classNames(`cursor-pointer border-gray-200 text-sm font-medium px-4 py-2 hover:bg-gray-100
+      focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600
       dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white`,
         active ? 'text-blue-700 dark:bg-blue-600' : 'text-gray-900 hover:text-blue-700 dark:bg-gray-700', className)}
                   onClick={e => {
@@ -148,5 +150,3 @@ function FilterTab({active, className, onClick, children}: FilterTabProps) {
                       onClick(e)
                   }}>{children}</span>)
 }
-
-export default TodosMvc
\ No newline at end of file
diff --git a/MyApp.Client/components/builtin-uis.tsx b/MyApp.Client/components/builtin-uis.tsx
index 5a3dcba..1f226f0 100644
--- a/MyApp.Client/components/builtin-uis.tsx
+++ b/MyApp.Client/components/builtin-uis.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useEffect, useCallback } from 'react'
 import { BaseUrl } from "@/lib/gateway"
 
diff --git a/MyApp.Client/components/getting-started.tsx b/MyApp.Client/components/getting-started.tsx
index 83016d8..4b8bee5 100644
--- a/MyApp.Client/components/getting-started.tsx
+++ b/MyApp.Client/components/getting-started.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { ChangeEvent, useMemo, useState } from "react"
 import ShellCommand from "./shell-command"
 
diff --git a/MyApp.Client/components/intro.tsx b/MyApp.Client/components/intro.tsx
index 818fdba..0789c1f 100644
--- a/MyApp.Client/components/intro.tsx
+++ b/MyApp.Client/components/intro.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import { useState } from "react"
 import { TextInput } from "@servicestack/react"
-import { swrClient } from "@/lib/gateway"
+import { swrClient } from "@/lib/gateway.client"
 import { Hello } from "@/lib/dtos"
 import { CMS_NAME } from "@/lib/constants"
 
diff --git a/MyApp.Client/components/nav.tsx b/MyApp.Client/components/nav.tsx
index 0aa2305..a8b7cb3 100644
--- a/MyApp.Client/components/nav.tsx
+++ b/MyApp.Client/components/nav.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import Link from "next/link"
-import { useRouter } from "next/router"
+import { usePathname } from "next/navigation"
 import { useAuth, PrimaryButton, SecondaryButton, DarkModeToggle } from "@servicestack/react"
 import { appAuth } from "@/lib/auth"
 
@@ -12,7 +14,8 @@ type NavItem = {
     onClick?:() => void
 }
 
-export default function () {
+export default function Nav() {
+    const pathname = usePathname()
 
     const items:NavItem[] = [
         { href: '/shadcn-ui', name: 'shadcn/ui'},
@@ -25,11 +28,9 @@ export default function () {
     const { user, hasRole, signOut } = appAuth()
     const navClass = (path:string) => [
         "p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400",
-        router.asPath === path || router.asPath.startsWith(path + '/') ? "text-link-dark dark:text-link-dark" : "",
+        pathname === path || pathname.startsWith(path + '/') ? "text-link-dark dark:text-link-dark" : "",
     ].join(" ")
 
-    const router = useRouter()
-
     return (<header className="border-b border-gray-200 dark:border-gray-700 pr-3 bg-white dark:bg-gray-800">
         <div className="flex flex-wrap items-center">
             <div className="flex-shrink flex-grow-0">
@@ -41,7 +42,7 @@ export default function () {
                 <nav className="relative flex flex-grow">
                     <ul className="flex flex-wrap items-center justify-end w-full m-0">
                     {items.map(x => {
-                        const isActive = router.asPath === x.href || router.asPath.startsWith(x.href + '/')
+                        const isActive = pathname === x.href || pathname.startsWith(x.href + '/')
                         return (<li key={x.name} className="relative flex flex-wrap just-fu-start m-0">{x.type === 'Button'
                             ? <SecondaryButton className="m-2" href={x.href} onClick={x.onClick}>{x.name}</SecondaryButton>
                             : x.type == 'PrimaryButton'
diff --git a/MyApp.Client/components/shell-command.tsx b/MyApp.Client/components/shell-command.tsx
index 12d2433..0bdf675 100644
--- a/MyApp.Client/components/shell-command.tsx
+++ b/MyApp.Client/components/shell-command.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { FC, MouseEvent, useState, ReactNode, useRef } from "react"
 import { Terminal, Copy, Check } from "lucide-react"
 import { cn } from "../lib/utils"
diff --git a/MyApp.Client/lib/auth.tsx b/MyApp.Client/lib/auth.tsx
index 21b660f..6ca6c32 100644
--- a/MyApp.Client/lib/auth.tsx
+++ b/MyApp.Client/lib/auth.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import React, { useEffect } from "react"
-import Router, { useRouter } from "next/router"
+import { useRouter, usePathname } from "next/navigation"
 import { useAuth, Loading } from "@servicestack/react"
 import { client, Routes } from "./gateway"
 import { Authenticate } from "@/lib/dtos"
@@ -17,6 +19,7 @@ export function ValidateAuth<TOriginalProps extends {}>(Component:React.FC<TOrig
     let { role, permission, redirectTo } = validateProps ?? {}
     const compWithProps: React.FC<TOriginalProps> = (props) => {
         const router = useRouter()
+        const pathname = usePathname()
         const authProps = useAuth()
         const { user, isAuthenticated, hasRole } = authProps
         useEffect(() => {
@@ -26,7 +29,7 @@ export function ValidateAuth<TOriginalProps extends {}>(Component:React.FC<TOrig
             }
         }, [user])
 
-        redirectTo ??= router.pathname
+        redirectTo ??= pathname
 
         const shouldRedirect = () => !isAuthenticated
             ? Routes.signin(redirectTo)
@@ -47,6 +50,7 @@ export function ValidateAuth<TOriginalProps extends {}>(Component:React.FC<TOrig
 }
 
 export function appAuth() {
+    const router = useRouter()
     const authState = useAuth()
     async function revalidate() {
         try {
@@ -60,7 +64,7 @@ export function appAuth() {
         await client.post(new Authenticate({ provider: 'logout' }))
         authState.signOut()
         if (redirectTo) {
-            Router.push(redirectTo)
+            router.push(redirectTo)
         }
     }
     return { ...authState, revalidate, signOut }
diff --git a/MyApp.Client/lib/gateway.client.ts b/MyApp.Client/lib/gateway.client.ts
new file mode 100644
index 0000000..09ff2c0
--- /dev/null
+++ b/MyApp.Client/lib/gateway.client.ts
@@ -0,0 +1,23 @@
+'use client'
+
+import { appendQueryString, nameOf, IReturn } from "@servicestack/client"
+import useSWR from "swr"
+import { client } from "./gateway"
+
+// Typed Stale While Revalidate client
+class SwrClient {
+    client: any
+
+    constructor(client: any) {
+        this.client = client
+    }
+
+    get<T>(fn: () => IReturn<T> | string) {
+        return useSWR(() => {
+            let request = fn()
+            return appendQueryString(`SwrClient:${nameOf(request)}`, request)
+        }, _ => this.client.get(fn()))
+    }
+}
+
+export const swrClient = new SwrClient(client)
diff --git a/MyApp.Client/lib/gateway.ts b/MyApp.Client/lib/gateway.ts
index ef9fed8..80e8266 100644
--- a/MyApp.Client/lib/gateway.ts
+++ b/MyApp.Client/lib/gateway.ts
@@ -1,6 +1,4 @@
-import { useMetadata, authContext } from "@servicestack/react"
-import { appendQueryString, nameOf, IReturn, JsonServiceClient, combinePaths } from "@servicestack/client"
-import useSWR from "swr"
+import { JsonServiceClient, combinePaths } from "@servicestack/client"
 import { Authenticate } from "@/lib/dtos"
 
 export const Routes = {
@@ -8,18 +6,26 @@ export const Routes = {
     forbidden: () => '/forbidden',
 }
 
-export const BaseUrl = process.env.apiBaseUrl || ''
+export const BaseUrl = typeof window === 'undefined'
+    ? (process.env.apiBaseUrl || '')
+    : (process.env.apiBaseUrl || '')
 
 export function apiUrl(path: string) {
-    return combinePaths(process.env.apiBaseUrl || '', path)
+    const base = typeof window === 'undefined' ? process.env.apiBaseUrl : process.env.apiBaseUrl
+    return combinePaths(base || '', path)
 }
 
 export const client = new JsonServiceClient()
-export const metadata = useMetadata(client)
 
 // Load Metadata & Auth State on Startup
+// This needs to be called on client side only
 export async function init() {
+    if (typeof window === 'undefined') return
+
+    const { useMetadata, authContext } = await import("@servicestack/react")
+    const metadata = useMetadata(client)
     const authCtx = authContext()
+
     return await Promise.all([
         metadata.loadMetadata(),
         client.post(new Authenticate())
@@ -39,21 +45,3 @@ export function getRedirect(searchParams: URLSearchParams | Record<string, strin
         ? redirect[0]
         : redirect
 }
-
-// Typed Stale While Revalidate client
-class SwrClient {
-    client: JsonServiceClient
-
-    constructor(client: JsonServiceClient) {
-        this.client = client
-    }
-
-    get<T>(fn: () => IReturn<T> | string) {
-        return useSWR(() => {
-            let request = fn()
-            return appendQueryString(`SwrClient:${nameOf(request)}`, request)
-        }, _ => this.client.get(fn()))
-    }
-}
-
-export const swrClient = new SwrClient(client)
diff --git a/MyApp.Client/next-env.d.ts b/MyApp.Client/next-env.d.ts
index 1970904..9edff1c 100644
--- a/MyApp.Client/next-env.d.ts
+++ b/MyApp.Client/next-env.d.ts
@@ -3,4 +3,4 @@
 import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/MyApp.Client/next.config.mjs b/MyApp.Client/next.config.mjs
index 82b4abd..f786ab6 100644
--- a/MyApp.Client/next.config.mjs
+++ b/MyApp.Client/next.config.mjs
@@ -20,8 +20,6 @@ console.log('next.config.mjs', process.env.NODE_ENV, buildLocal, API_URL, proces
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
-    pageExtensions: ['tsx','mdx','md'],
-
     // Enable static export (replaces next export command)
     output: isProd ? 'export' : undefined,
 
diff --git a/MyApp.Client/npm-shrinkwrap.json b/MyApp.Client/npm-shrinkwrap.json
index 1b2843b..8f4318c 100644
--- a/MyApp.Client/npm-shrinkwrap.json
+++ b/MyApp.Client/npm-shrinkwrap.json
@@ -157,7 +157,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -507,7 +506,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -551,7 +549,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1536,7 +1533,6 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.1.tgz",
       "integrity": "sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@mdx-js/mdx": "^3.0.0",
         "source-map": "^0.7.0"
@@ -1596,7 +1592,6 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
       "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0"
       },
@@ -2857,7 +2852,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3005,7 +3001,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
       "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3016,7 +3011,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3170,7 +3164,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3203,6 +3196,7 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -3213,6 +3207,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -3235,6 +3230,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -3358,7 +3354,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -3686,7 +3681,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.251",
@@ -4602,7 +4598,6 @@
       "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.23",
         "@asamuzakjp/dom-selector": "^6.7.4",
@@ -4983,6 +4978,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -6273,7 +6269,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6310,6 +6305,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -6353,7 +6349,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6363,7 +6358,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6376,7 +6370,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -6984,8 +6979,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
       "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -7056,7 +7050,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7398,7 +7391,6 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -7492,7 +7484,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/MyApp.Client/pages/_app.tsx b/MyApp.Client/pages/_app.tsx
deleted file mode 100644
index e9cf55e..0000000
--- a/MyApp.Client/pages/_app.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { AppProps } from "next/app"
-import "../styles/index.css"
-import "../styles/main.css"
-import "../styles/prism-dark-blue.css"
-
-import Link from 'next/link'
-import { setLinkComponent, Loading, ClientContext } from '@servicestack/react'
-import { client, init } from "@/lib/gateway"
-import { useEffect } from "react";
-
-// Adapter component to convert react-router 'to' prop to Next.js 'href' prop
-const NextLink = ({ to, ...props }: any) => <Link href={to || props.href} {...props} />
-
-setLinkComponent(NextLink)
-
-export default function MyApp({ Component, pageProps }: AppProps) {
-  useEffect(() => {
-    (async () => init())()
-  }, [])
-  return (
-      <ClientContext.Provider value={client}>
-        <Component {...pageProps} />
-      </ClientContext.Provider>)
-}
diff --git a/MyApp.Client/pages/_document.tsx b/MyApp.Client/pages/_document.tsx
deleted file mode 100644
index 5f70562..0000000
--- a/MyApp.Client/pages/_document.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document"
-
-export default class MyDocument extends Document {
-  render() {
-    return (
-      <Html lang="en" className="h-full">
-        <Head />
-        <body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                (function() {
-                  function getTheme() {
-                    const theme = localStorage.getItem('color-scheme');
-                    if (theme) return theme;
-                    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-                  }
-                  const theme = getTheme();
-                  if (theme === 'dark') {
-                    document.documentElement.classList.add('dark');
-                  }
-                })();
-              `,
-            }}
-          />
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
diff --git a/MyApp.Client/pages/index.tsx b/MyApp.Client/pages/index.tsx
deleted file mode 100644
index a503795..0000000
--- a/MyApp.Client/pages/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import Container from "@/components/container"
-import MoreStories from "@/components/more-stories"
-import HeroPost from "@/components/hero-post"
-import Intro from "@/components/intro"
-import Layout from "@/components/layout"
-import { getAllPosts } from "@/lib/api"
-import Head from "next/head"
-import { CMS_NAME } from "@/lib/constants"
-import Post from "@/types/post"
-import GettingStarted from "@/components/getting-started"
-import BuiltInUis from "@/components/builtin-uis"
-
-type Props = {
-  allPosts: Post[]
-}
-
-const Index = ({ allPosts }: Props) => {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
-  const title = `Next.js Example with ${CMS_NAME}`
-
-  return (
-    <>
-      <Layout>
-        <Head>
-          <title>{title}</title>
-        </Head>
-        <Container>
-          <Intro />
-            <div className="mb-32 flex justify-center">
-                <GettingStarted template="nextjs" />
-            </div>
-
-
-            <div className="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
-                <div className="text-center">
-                    <svg className="text-link-dark w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.58 17.25l.92-3.89l-3-2.58l3.95-.37L12 6.8l1.55 3.65l3.95.33l-3 2.58l.92 3.89L12 15.19zM12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8"/></svg>
-                    <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
-                        Built-in UIs
-                    </h1>
-                </div>
-            </div>
-
-            <div className="mb-40">
-                <p className="mt-4 mb-10 text-xl text-gray-600 dark:text-gray-400">
-                    Manage your ServiceStack App and explore, discover, query and call APIs instantly with
-                    built-in Auto UIs dynamically generated from the rich metadata of your App's typed C# APIs &amp; DTOs
-                </p>
-
-                <BuiltInUis />
-            </div>
-            
-          {heroPost && (
-            <HeroPost
-              title={heroPost.title}
-              coverImage={heroPost.coverImage}
-              date={heroPost.date}
-              author={heroPost.author}
-              slug={heroPost.slug}
-              excerpt={heroPost.excerpt}
-            />
-          )}
-          {morePosts.length > 0 && <MoreStories posts={morePosts} />}
-        </Container>
-      </Layout>
-    </>
-  )
-}
-
-export default Index
-
-export const getStaticProps = async () => {
-  const allPosts = getAllPosts([
-    'title',
-    'date',
-    'slug',
-    'author',
-    'coverImage',
-    'excerpt',
-  ])
-
-  return {
-    props: { allPosts },
-  }
-}
diff --git a/MyApp.Client/pages/posts.tsx b/MyApp.Client/pages/posts.tsx
deleted file mode 100644
index 6070e25..0000000
--- a/MyApp.Client/pages/posts.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-import { getAllPosts } from "../lib/api"
-import Post from "../types/post"
-
-type Props = {
-    allPosts: Post[]
-}
-const Posts = ({ allPosts }: Props) => {
-    return (<Layout>
-        <main>
-            <div className="max-w-7xl mx-auto px-5">
-                <h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">Markdown Posts</h1>
-                <h3 className="text-lg mb-8">
-                    List of Markdown Posts in <span
-                    className="bg-blue-50 text-blue-500 dark:bg-blue-900 dark:text-blue-200 py-1 px-2 rounded">/pages</span>
-                </h3>
-                {allPosts.map((post) => (
-                    <div className="mb-8" key={post.slug}>
-                        <a className="text-2xl hover:text-green-600" href={`/posts/${post.slug}`}>{post.title}</a>
-                        {!post.excerpt ? null : <p className="text-gray-500">
-                            {post.excerpt}
-                        </p>}
-                    </div>
-                ))}
-            </div>
-        </main>
-    </Layout>)
-}
-export default Posts
-
-export const getStaticProps = async () => {
-    const allPosts = getAllPosts([
-        'title',
-        'slug',
-        'excerpt',
-    ])
-    return {
-        props: { allPosts },
-    }
-}
diff --git a/MyApp.Client/pages/posts/[slug].tsx b/MyApp.Client/pages/posts/[slug].tsx
deleted file mode 100644
index f7e62bc..0000000
--- a/MyApp.Client/pages/posts/[slug].tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useRouter } from "next/router"
-import ErrorPage from "next/error"
-import Container from "../../components/container"
-import PostBody from "../../components/post-body"
-import Header from "../../components/header"
-import PostHeader from "../../components/post-header"
-import Layout from "../../components/layout"
-import { getPostBySlug, getAllPosts } from "../../lib/api"
-import PostTitle from "../../components/post-title"
-import Head from "next/head"
-import { CMS_NAME } from "../../lib/constants"
-import markdownToHtml from "../../lib/markdownToHtml"
-import PostType from "../../types/post"
-
-type Props = {
-  post: PostType
-  morePosts: PostType[]
-  preview?: boolean
-}
-
-const Post = ({ post, morePosts, preview }: Props) => {
-  const router = useRouter()
-  if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
-  }
-  const title = `${post.title} | Next.js Example with ${CMS_NAME}`
-  return (
-    <Layout preview={preview}>
-      <Container>
-        <Header />
-        {router.isFallback ? (
-          <PostTitle>Loading…</PostTitle>
-        ) : (
-          <>
-            <article className="prose lg:prose-xl max-w-none mb-32">
-              <Head>
-                <title>{title}</title>
-                <meta property="og:image" content={post.ogImage.url} />
-              </Head>
-              <PostHeader
-                title={post.title}
-                coverImage={post.coverImage}
-                date={post.date}
-                author={post.author}
-              />
-              <PostBody content={post.content} />
-            </article>
-          </>
-        )}
-      </Container>
-    </Layout>
-  )
-}
-
-export default Post
-
-type Params = {
-  params: {
-    slug: string
-  }
-}
-
-export async function getStaticProps({ params }: Params) {
-  const post = getPostBySlug(params.slug, [
-    'title',
-    'date',
-    'slug',
-    'author',
-    'content',
-    'ogImage',
-    'coverImage',
-  ])
-  const content = await markdownToHtml(post.content || '')
-
-  return {
-    props: {
-      post: {
-        ...post,
-        content,
-      },
-    },
-  }
-}
-
-export async function getStaticPaths() {
-  const posts = getAllPosts(['slug'])
-
-  return {
-    paths: posts.map((post) => {
-      return {
-        params: {
-          slug: post.slug,
-        },
-      }
-    }),
-    fallback: false,
-  }
-}
diff --git a/MyApp.Client/pages/shadcn-ui.tsx b/MyApp.Client/pages/shadcn-ui.tsx
deleted file mode 100644
index 8c2d7b2..0000000
--- a/MyApp.Client/pages/shadcn-ui.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import Layout from "../components/layout"
-import { Button } from "../components/ui/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card"
-import { Badge } from "../components/ui/badge"
-import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion"
-import { Terminal, Rocket, Package, ExternalLink, Info, Download, Code2 } from "lucide-react"
-
-const ShadcnUiDemo = () => {
-    return (
-        <Layout>
-            <main className="max-w-7xl mx-auto px-5 py-8">
-                <div className="max-w-4xl">
-                <div className="mb-12">
-                    <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">
-                        shadcn/ui Components
-                    </h1>
-                    <p className="text-lg text-gray-600 dark:text-gray-400 mb-4">
-                        A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS.
-                    </p>
-                    <div className="flex gap-2 flex-wrap">
-                        <Badge>React</Badge>
-                        <Badge variant="secondary">TypeScript</Badge>
-                        <Badge variant="outline">Tailwind CSS</Badge>
-                    </div>
-                </div>
-
-                {/* Alert Demo */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Alerts</h2>
-                    <div className="space-y-4">
-                        <Alert className="bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700">
-                            <Terminal className="h-4 w-4 text-slate-700 dark:text-slate-300" />
-                            <AlertTitle className="text-slate-900 dark:text-slate-100">Heads up!</AlertTitle>
-                            <AlertDescription className="text-slate-700 dark:text-slate-300">
-                                You can add components and dependencies to your app using the CLI.
-                            </AlertDescription>
-                        </Alert>
-                        <Alert variant="destructive">
-                            <Terminal className="h-4 w-4" />
-                            <AlertTitle>Error</AlertTitle>
-                            <AlertDescription>
-                                Your session has expired. Please log in again.
-                            </AlertDescription>
-                        </Alert>
-                    </div>
-                </section>
-
-                {/* Button Demo */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Buttons</h2>
-                    <div className="flex flex-wrap items-center gap-4">
-                        <Button>Default</Button>
-                        <Button variant="secondary">Secondary</Button>
-                        <Button variant="destructive">Destructive</Button>
-                        <Button variant="outline">Outline</Button>
-                        <Button variant="ghost">Ghost</Button>
-                        <Button variant="link">Link</Button>
-                        <Button size="sm">Small</Button>
-                        <Button size="lg">Large</Button>
-                        <Button size="icon">
-                            <Rocket className="h-4 w-4" />
-                        </Button>
-                    </div>
-                </section>
-
-                {/* Card Demo */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Cards</h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
-                            <CardHeader>
-                                <CardTitle className="text-slate-900 dark:text-slate-100">Card Title</CardTitle>
-                                <CardDescription className="text-slate-600 dark:text-slate-400">Card Description</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="text-slate-700 dark:text-slate-300">This is a simple card component with header, content, and footer sections.</p>
-                            </CardContent>
-                            <CardFooter>
-                                <Button variant="outline" className="w-full">Action</Button>
-                            </CardFooter>
-                        </Card>
-                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
-                            <CardHeader>
-                                <CardTitle className="text-slate-900 dark:text-slate-100">Features</CardTitle>
-                                <CardDescription className="text-slate-600 dark:text-slate-400">What you get</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <ul className="space-y-2">
-                                    <li className="flex items-center gap-2">
-                                        <Badge variant="secondary">✓</Badge>
-                                        <span className="text-slate-700 dark:text-slate-300">Accessible</span>
-                                    </li>
-                                    <li className="flex items-center gap-2">
-                                        <Badge variant="secondary">✓</Badge>
-                                        <span className="text-slate-700 dark:text-slate-300">Customizable</span>
-                                    </li>
-                                    <li className="flex items-center gap-2">
-                                        <Badge variant="secondary">✓</Badge>
-                                        <span className="text-slate-700 dark:text-slate-300">Open Source</span>
-                                    </li>
-                                </ul>
-                            </CardContent>
-                        </Card>
-                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
-                            <CardHeader>
-                                <CardTitle className="text-slate-900 dark:text-slate-100">Stats</CardTitle>
-                                <CardDescription className="text-slate-600 dark:text-slate-400">Your metrics</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <div className="space-y-2">
-                                    <div className="flex justify-between">
-                                        <span className="text-sm text-slate-600 dark:text-slate-400">Components</span>
-                                        <span className="font-semibold text-slate-900 dark:text-slate-100">50+</span>
-                                    </div>
-                                    <div className="flex justify-between">
-                                        <span className="text-sm text-slate-600 dark:text-slate-400">Downloads</span>
-                                        <span className="font-semibold text-slate-900 dark:text-slate-100">1M+</span>
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </section>
-
-                {/* Tabs Demo */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Tabs</h2>
-                    <div className="bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800 p-8 rounded-xl border border-slate-200 dark:border-slate-700">
-                        <Tabs defaultValue="overview" className="w-full">
-                            <TabsList className="grid w-full grid-cols-3 lg:w-[600px] bg-white dark:bg-slate-800">
-                                <TabsTrigger value="overview" className="flex items-center gap-2">
-                                    <Info className="h-4 w-4" />
-                                    <span>Overview</span>
-                                </TabsTrigger>
-                                <TabsTrigger value="installation" className="flex items-center gap-2">
-                                    <Download className="h-4 w-4" />
-                                    <span>Installation</span>
-                                </TabsTrigger>
-                                <TabsTrigger value="usage" className="flex items-center gap-2">
-                                    <Code2 className="h-4 w-4" />
-                                    <span>Usage</span>
-                                </TabsTrigger>
-                            </TabsList>
-                            <TabsContent value="overview" className="mt-6">
-                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
-                                    <CardHeader>
-                                        <CardTitle className="text-slate-900 dark:text-slate-100">What is shadcn/ui?</CardTitle>
-                                        <CardDescription className="text-slate-600 dark:text-slate-400">
-                                            A modern component library for React applications
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent className="space-y-4">
-                                        <p className="text-slate-700 dark:text-slate-300">
-                                            shadcn/ui is a collection of re-usable components that you can copy and paste into your apps.
-                                            It's built with Radix UI and Tailwind CSS, providing accessible and customizable components.
-                                        </p>
-                                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4">
-                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 border border-blue-200 dark:border-blue-800 rounded-lg">
-                                                <Badge className="mb-2 bg-blue-600 hover:bg-blue-700">Accessible</Badge>
-                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Built with Radix UI primitives</p>
-                                            </div>
-                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950 dark:to-pink-950 border border-purple-200 dark:border-purple-800 rounded-lg">
-                                                <Badge className="mb-2 bg-purple-600 hover:bg-purple-700">Customizable</Badge>
-                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Fully styled with Tailwind CSS</p>
-                                            </div>
-                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 rounded-lg">
-                                                <Badge className="mb-2 bg-green-600 hover:bg-green-700">Open Source</Badge>
-                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Free to use and modify</p>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            </TabsContent>
-                            <TabsContent value="installation" className="mt-6">
-                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
-                                    <CardHeader>
-                                        <CardTitle className="text-slate-900 dark:text-slate-100">Installation Guide</CardTitle>
-                                        <CardDescription className="text-slate-600 dark:text-slate-400">
-                                            Components are already set up in this project
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent className="space-y-4">
-                                        <Alert className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
-                                            <Terminal className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-                                            <AlertTitle className="text-blue-900 dark:text-blue-100">Already Installed!</AlertTitle>
-                                            <AlertDescription className="text-blue-900 dark:text-blue-200">
-                                                All components shown here are already installed in the <code className="bg-blue-100 dark:bg-blue-900 px-1 py-0.5 rounded text-blue-950 dark:text-blue-100">components/ui</code> directory.
-                                            </AlertDescription>
-                                        </Alert>
-                                        <div className="space-y-3">
-                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Available Components:</h4>
-                                            <div className="flex flex-wrap gap-2">
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Button</Badge>
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Card</Badge>
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Alert</Badge>
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Tabs</Badge>
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Accordion</Badge>
-                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Badge</Badge>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            </TabsContent>
-                            <TabsContent value="usage" className="mt-6">
-                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
-                                    <CardHeader>
-                                        <CardTitle className="text-slate-900 dark:text-slate-100">How to Use</CardTitle>
-                                        <CardDescription className="text-slate-600 dark:text-slate-400">
-                                            Import and use components in your pages
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent className="space-y-4">
-                                        <div className="space-y-3">
-                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Basic Example:</h4>
-                                            <div className="bg-slate-100 dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-700">
-                                                <code className="text-sm text-slate-900 dark:text-slate-200 font-mono">
-                                                    <div>import &#123; Button &#125; from "../components/ui/button"</div>
-                                                    <div className="mt-2">export default function Page() &#123;</div>
-                                                    <div className="ml-4">return &lt;Button&gt;Click me&lt;/Button&gt;</div>
-                                                    <div>&#125;</div>
-                                                </code>
-                                            </div>
-                                        </div>
-                                        <div className="space-y-3 pt-4">
-                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Try it out:</h4>
-                                            <div className="flex gap-2 flex-wrap">
-                                                <Button>Primary Button</Button>
-                                                <Button variant="outline">Outline Button</Button>
-                                                <Button variant="secondary">Secondary Button</Button>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            </TabsContent>
-                        </Tabs>
-                    </div>
-                </section>
-
-                {/* Accordion Demo */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Accordion</h2>
-                    <Accordion type="single" collapsible className="w-full">
-                        <AccordionItem value="item-1">
-                            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-                            <AccordionContent>
-                                Yes. It adheres to the WAI-ARIA design pattern and is built with Radix UI primitives.
-                            </AccordionContent>
-                        </AccordionItem>
-                        <AccordionItem value="item-2">
-                            <AccordionTrigger>Is it styled?</AccordionTrigger>
-                            <AccordionContent>
-                                Yes. It comes with default styles that you can customize with Tailwind CSS.
-                            </AccordionContent>
-                        </AccordionItem>
-                        <AccordionItem value="item-3">
-                            <AccordionTrigger>Is it animated?</AccordionTrigger>
-                            <AccordionContent>
-                                Yes. It's animated by default with smooth transitions using Tailwind CSS animations.
-                            </AccordionContent>
-                        </AccordionItem>
-                    </Accordion>
-                </section>
-
-                {/* Getting More Components */}
-                <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
-                        Get More Components
-                    </h2>
-                    <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
-                        <CardHeader>
-                            <CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
-                                <Package className="h-5 w-5" />
-                                Explore the Full Component Library
-                            </CardTitle>
-                            <CardDescription className="text-slate-600 dark:text-slate-400">
-                                This demo includes just a few popular components. shadcn/ui offers 50+ components.
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
-                                <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">How to Add More Components:</h3>
-                                <ol className="list-decimal list-inside space-y-2 text-sm text-slate-700 dark:text-slate-300">
-                                    <li>Visit the official shadcn/ui documentation</li>
-                                    <li>Browse the components you need</li>
-                                    <li>Copy the component code from the docs</li>
-                                    <li>Paste it into your <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded text-slate-900 dark:text-slate-100">components/ui</code> directory</li>
-                                    <li>Install any required dependencies (if prompted)</li>
-                                </ol>
-                            </div>
-                        </CardContent>
-                        <CardFooter className="flex gap-4">
-                            <Button asChild>
-                                <a href="https://ui.shadcn.com/docs/components" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
-                                    Browse Components
-                                    <ExternalLink className="h-4 w-4" />
-                                </a>
-                            </Button>
-                            <Button variant="outline" asChild>
-                                <a href="https://ui.shadcn.com" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
-                                    Documentation
-                                    <ExternalLink className="h-4 w-4" />
-                                </a>
-                            </Button>
-                        </CardFooter>
-                    </Card>
-                </section>
-
-                </div>
-            </main>
-        </Layout>
-    )
-}
-
-export default ShadcnUiDemo
-
diff --git a/MyApp.Client/tsconfig.json b/MyApp.Client/tsconfig.json
index 3d63fe6..7215892 100644
--- a/MyApp.Client/tsconfig.json
+++ b/MyApp.Client/tsconfig.json
@@ -20,8 +20,15 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "exclude": [
     "node_modules",
@@ -30,6 +37,8 @@
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ]
 }

From 540bc3e1730152d3cfd8ea0f1ab073c69e3384b4 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Fri, 14 Nov 2025 21:02:37 +0800
Subject: [PATCH 2/3] fix routes

---
 MyApp.Client/app/features/page.mdx     |  2 +-
 MyApp.Client/app/posts/[slug]/page.tsx | 10 ++++++----
 MyApp.Client/next-env.d.ts             |  2 +-
 MyApp.Client/next.config.mjs           |  3 +++
 MyApp.Client/tsconfig.json             |  4 +++-
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/MyApp.Client/app/features/page.mdx b/MyApp.Client/app/features/page.mdx
index 0cdf101..7837dec 100644
--- a/MyApp.Client/app/features/page.mdx
+++ b/MyApp.Client/app/features/page.mdx
@@ -1,4 +1,4 @@
-import Layout from "../components/layout-article"
+import Layout from "@/components/layout-article"
 
 export const meta = {
   title: 'Template Features'
diff --git a/MyApp.Client/app/posts/[slug]/page.tsx b/MyApp.Client/app/posts/[slug]/page.tsx
index 8b294bd..640cbc6 100644
--- a/MyApp.Client/app/posts/[slug]/page.tsx
+++ b/MyApp.Client/app/posts/[slug]/page.tsx
@@ -12,13 +12,14 @@ import type { Metadata } from 'next'
 import PostType from "@/types/post"
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const post = getPostBySlug(params.slug, ['title', 'ogImage']) as unknown as PostType
+  const { slug } = await params
+  const post = getPostBySlug(slug, ['title', 'ogImage']) as unknown as PostType
   const title = `${post.title} | Next.js Example with ${CMS_NAME}`
 
   return {
@@ -38,7 +39,8 @@ export async function generateStaticParams() {
 }
 
 export default async function Post({ params }: Props) {
-  const post = getPostBySlug(params.slug, [
+  const { slug } = await params
+  const post = getPostBySlug(slug, [
     'title',
     'date',
     'slug',
diff --git a/MyApp.Client/next-env.d.ts b/MyApp.Client/next-env.d.ts
index 9edff1c..b87975d 100644
--- a/MyApp.Client/next-env.d.ts
+++ b/MyApp.Client/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./dist/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/MyApp.Client/next.config.mjs b/MyApp.Client/next.config.mjs
index f786ab6..53ddb93 100644
--- a/MyApp.Client/next.config.mjs
+++ b/MyApp.Client/next.config.mjs
@@ -20,6 +20,9 @@ console.log('next.config.mjs', process.env.NODE_ENV, buildLocal, API_URL, proces
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
+    // Configure pageExtensions to include MDX files
+    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+
     // Enable static export (replaces next export command)
     output: isProd ? 'export' : undefined,
 
diff --git a/MyApp.Client/tsconfig.json b/MyApp.Client/tsconfig.json
index 7215892..e148955 100644
--- a/MyApp.Client/tsconfig.json
+++ b/MyApp.Client/tsconfig.json
@@ -39,6 +39,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/dev/types/**/*.ts",
+    "dist/types/**/*.ts",
+    "dist/dev/types/**/*.ts"
   ]
 }

From 23d69af8016fccf5549cc29cd02fff2ecde08d87 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Fri, 14 Nov 2025 21:09:32 +0800
Subject: [PATCH 3/3] Update page.tsx

---
 MyApp.Client/app/shadcn-ui/page.tsx | 313 ++++++++++++++++++----------
 1 file changed, 198 insertions(+), 115 deletions(-)

diff --git a/MyApp.Client/app/shadcn-ui/page.tsx b/MyApp.Client/app/shadcn-ui/page.tsx
index ac3e99a..5b61df8 100644
--- a/MyApp.Client/app/shadcn-ui/page.tsx
+++ b/MyApp.Client/app/shadcn-ui/page.tsx
@@ -6,13 +6,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 import { Terminal, Rocket, Package, ExternalLink, Info, Download, Code2 } from "lucide-react"
-import type { Metadata } from 'next'
 
-export const metadata: Metadata = {
-  title: 'shadcn/ui Components',
-}
-
-export default function ShadcnUiDemo() {
+const ShadcnUiDemo = () => {
     return (
         <Layout>
             <main className="max-w-7xl mx-auto px-5 py-8">
@@ -55,20 +50,17 @@ export default function ShadcnUiDemo() {
                 {/* Button Demo */}
                 <section className="mb-12">
                     <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Buttons</h2>
-                    <div className="flex flex-wrap gap-4">
+                    <div className="flex flex-wrap items-center gap-4">
                         <Button>Default</Button>
                         <Button variant="secondary">Secondary</Button>
                         <Button variant="destructive">Destructive</Button>
                         <Button variant="outline">Outline</Button>
                         <Button variant="ghost">Ghost</Button>
                         <Button variant="link">Link</Button>
-                    </div>
-                    <div className="flex flex-wrap gap-4 mt-4">
                         <Button size="sm">Small</Button>
-                        <Button size="default">Default</Button>
                         <Button size="lg">Large</Button>
                         <Button size="icon">
-                            <Download className="h-4 w-4" />
+                            <Rocket className="h-4 w-4" />
                         </Button>
                     </div>
                 </section>
@@ -76,41 +68,58 @@ export default function ShadcnUiDemo() {
                 {/* Card Demo */}
                 <section className="mb-12">
                     <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Cards</h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <Card>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
                             <CardHeader>
-                                <CardTitle>Getting Started</CardTitle>
-                                <CardDescription>Start building your next project with shadcn/ui</CardDescription>
+                                <CardTitle className="text-slate-900 dark:text-slate-100">Card Title</CardTitle>
+                                <CardDescription className="text-slate-600 dark:text-slate-400">Card Description</CardDescription>
                             </CardHeader>
                             <CardContent>
-                                <p className="text-sm text-gray-600 dark:text-gray-400">
-                                    Install components with a simple CLI command and customize them to match your design system.
-                                </p>
+                                <p className="text-slate-700 dark:text-slate-300">This is a simple card component with header, content, and footer sections.</p>
                             </CardContent>
                             <CardFooter>
-                                <Button className="w-full">
-                                    <Rocket className="mr-2 h-4 w-4" />
-                                    Get Started
-                                </Button>
+                                <Button variant="outline" className="w-full">Action</Button>
                             </CardFooter>
                         </Card>
-
-                        <Card>
+                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
                             <CardHeader>
-                                <CardTitle>Components</CardTitle>
-                                <CardDescription>50+ components and growing</CardDescription>
+                                <CardTitle className="text-slate-900 dark:text-slate-100">Features</CardTitle>
+                                <CardDescription className="text-slate-600 dark:text-slate-400">What you get</CardDescription>
                             </CardHeader>
                             <CardContent>
-                                <p className="text-sm text-gray-600 dark:text-gray-400">
-                                    Access a wide range of professionally designed components that are fully customizable and accessible.
-                                </p>
+                                <ul className="space-y-2">
+                                    <li className="flex items-center gap-2">
+                                        <Badge variant="secondary">✓</Badge>
+                                        <span className="text-slate-700 dark:text-slate-300">Accessible</span>
+                                    </li>
+                                    <li className="flex items-center gap-2">
+                                        <Badge variant="secondary">✓</Badge>
+                                        <span className="text-slate-700 dark:text-slate-300">Customizable</span>
+                                    </li>
+                                    <li className="flex items-center gap-2">
+                                        <Badge variant="secondary">✓</Badge>
+                                        <span className="text-slate-700 dark:text-slate-300">Open Source</span>
+                                    </li>
+                                </ul>
+                            </CardContent>
+                        </Card>
+                        <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
+                            <CardHeader>
+                                <CardTitle className="text-slate-900 dark:text-slate-100">Stats</CardTitle>
+                                <CardDescription className="text-slate-600 dark:text-slate-400">Your metrics</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-2">
+                                    <div className="flex justify-between">
+                                        <span className="text-sm text-slate-600 dark:text-slate-400">Components</span>
+                                        <span className="font-semibold text-slate-900 dark:text-slate-100">50+</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span className="text-sm text-slate-600 dark:text-slate-400">Downloads</span>
+                                        <span className="font-semibold text-slate-900 dark:text-slate-100">1M+</span>
+                                    </div>
+                                </div>
                             </CardContent>
-                            <CardFooter>
-                                <Button variant="outline" className="w-full">
-                                    <Package className="mr-2 h-4 w-4" />
-                                    View All
-                                </Button>
-                            </CardFooter>
                         </Card>
                     </div>
                 </section>
@@ -118,66 +127,115 @@ export default function ShadcnUiDemo() {
                 {/* Tabs Demo */}
                 <section className="mb-12">
                     <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Tabs</h2>
-                    <Tabs defaultValue="overview" className="w-full">
-                        <TabsList className="grid w-full grid-cols-3">
-                            <TabsTrigger value="overview">Overview</TabsTrigger>
-                            <TabsTrigger value="features">Features</TabsTrigger>
-                            <TabsTrigger value="documentation">Documentation</TabsTrigger>
-                        </TabsList>
-                        <TabsContent value="overview" className="space-y-4">
-                            <Card>
-                                <CardHeader>
-                                    <CardTitle>Overview</CardTitle>
-                                    <CardDescription>A quick overview of shadcn/ui</CardDescription>
-                                </CardHeader>
-                                <CardContent>
-                                    <p className="text-gray-600 dark:text-gray-400">
-                                        shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS.
-                                        It's not a component library. It's a collection of components that you can copy and paste into your apps.
-                                    </p>
-                                </CardContent>
-                            </Card>
-                        </TabsContent>
-                        <TabsContent value="features" className="space-y-4">
-                            <Card>
-                                <CardHeader>
-                                    <CardTitle>Features</CardTitle>
-                                    <CardDescription>Key features of shadcn/ui</CardDescription>
-                                </CardHeader>
-                                <CardContent className="space-y-2">
-                                    <div className="flex items-center gap-2">
-                                        <Info className="h-4 w-4 text-blue-500" />
-                                        <span className="text-gray-700 dark:text-gray-300">Fully accessible components</span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <Info className="h-4 w-4 text-blue-500" />
-                                        <span className="text-gray-700 dark:text-gray-300">Customizable with Tailwind CSS</span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <Info className="h-4 w-4 text-blue-500" />
-                                        <span className="text-gray-700 dark:text-gray-300">Copy and paste components</span>
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        </TabsContent>
-                        <TabsContent value="documentation" className="space-y-4">
-                            <Card>
-                                <CardHeader>
-                                    <CardTitle>Documentation</CardTitle>
-                                    <CardDescription>Learn more about shadcn/ui</CardDescription>
-                                </CardHeader>
-                                <CardContent>
-                                    <p className="text-gray-600 dark:text-gray-400 mb-4">
-                                        Visit the official documentation to learn how to install and use these components in your project.
-                                    </p>
-                                    <Button variant="outline">
-                                        <ExternalLink className="mr-2 h-4 w-4" />
-                                        View Documentation
-                                    </Button>
-                                </CardContent>
-                            </Card>
-                        </TabsContent>
-                    </Tabs>
+                    <div className="bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800 p-8 rounded-xl border border-slate-200 dark:border-slate-700">
+                        <Tabs defaultValue="overview" className="w-full">
+                            <TabsList className="grid w-full grid-cols-3 lg:w-[600px] bg-white dark:bg-slate-800">
+                                <TabsTrigger value="overview" className="flex items-center gap-2">
+                                    <Info className="h-4 w-4" />
+                                    <span>Overview</span>
+                                </TabsTrigger>
+                                <TabsTrigger value="installation" className="flex items-center gap-2">
+                                    <Download className="h-4 w-4" />
+                                    <span>Installation</span>
+                                </TabsTrigger>
+                                <TabsTrigger value="usage" className="flex items-center gap-2">
+                                    <Code2 className="h-4 w-4" />
+                                    <span>Usage</span>
+                                </TabsTrigger>
+                            </TabsList>
+                            <TabsContent value="overview" className="mt-6">
+                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
+                                    <CardHeader>
+                                        <CardTitle className="text-slate-900 dark:text-slate-100">What is shadcn/ui?</CardTitle>
+                                        <CardDescription className="text-slate-600 dark:text-slate-400">
+                                            A modern component library for React applications
+                                        </CardDescription>
+                                    </CardHeader>
+                                    <CardContent className="space-y-4">
+                                        <p className="text-slate-700 dark:text-slate-300">
+                                            shadcn/ui is a collection of re-usable components that you can copy and paste into your apps.
+                                            It's built with Radix UI and Tailwind CSS, providing accessible and customizable components.
+                                        </p>
+                                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4">
+                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 border border-blue-200 dark:border-blue-800 rounded-lg">
+                                                <Badge className="mb-2 bg-blue-600 hover:bg-blue-700">Accessible</Badge>
+                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Built with Radix UI primitives</p>
+                                            </div>
+                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950 dark:to-pink-950 border border-purple-200 dark:border-purple-800 rounded-lg">
+                                                <Badge className="mb-2 bg-purple-600 hover:bg-purple-700">Customizable</Badge>
+                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Fully styled with Tailwind CSS</p>
+                                            </div>
+                                            <div className="flex flex-col items-center text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 rounded-lg">
+                                                <Badge className="mb-2 bg-green-600 hover:bg-green-700">Open Source</Badge>
+                                                <p className="text-sm text-slate-800 dark:text-slate-300 font-medium">Free to use and modify</p>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                            <TabsContent value="installation" className="mt-6">
+                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
+                                    <CardHeader>
+                                        <CardTitle className="text-slate-900 dark:text-slate-100">Installation Guide</CardTitle>
+                                        <CardDescription className="text-slate-600 dark:text-slate-400">
+                                            Components are already set up in this project
+                                        </CardDescription>
+                                    </CardHeader>
+                                    <CardContent className="space-y-4">
+                                        <Alert className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+                                            <Terminal className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                                            <AlertTitle className="text-blue-900 dark:text-blue-100">Already Installed!</AlertTitle>
+                                            <AlertDescription className="text-blue-900 dark:text-blue-200">
+                                                All components shown here are already installed in the <code className="bg-blue-100 dark:bg-blue-900 px-1 py-0.5 rounded text-blue-950 dark:text-blue-100">components/ui</code> directory.
+                                            </AlertDescription>
+                                        </Alert>
+                                        <div className="space-y-3">
+                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Available Components:</h4>
+                                            <div className="flex flex-wrap gap-2">
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Button</Badge>
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Card</Badge>
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Alert</Badge>
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Tabs</Badge>
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Accordion</Badge>
+                                                <Badge variant="secondary" className="bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100">Badge</Badge>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                            <TabsContent value="usage" className="mt-6">
+                                <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 shadow-lg border-slate-200 dark:border-slate-700">
+                                    <CardHeader>
+                                        <CardTitle className="text-slate-900 dark:text-slate-100">How to Use</CardTitle>
+                                        <CardDescription className="text-slate-600 dark:text-slate-400">
+                                            Import and use components in your pages
+                                        </CardDescription>
+                                    </CardHeader>
+                                    <CardContent className="space-y-4">
+                                        <div className="space-y-3">
+                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Basic Example:</h4>
+                                            <div className="bg-slate-100 dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-700">
+                                                <code className="text-sm text-slate-900 dark:text-slate-200 font-mono">
+                                                    <div>import &#123; Button &#125; from "@/components/ui/button"</div>
+                                                    <div className="mt-2">export default function Page() &#123;</div>
+                                                    <div className="ml-4">return &lt;Button&gt;Click me&lt;/Button&gt;</div>
+                                                    <div>&#125;</div>
+                                                </code>
+                                            </div>
+                                        </div>
+                                        <div className="space-y-3 pt-4">
+                                            <h4 className="font-semibold text-sm text-slate-900 dark:text-slate-100">Try it out:</h4>
+                                            <div className="flex gap-2 flex-wrap">
+                                                <Button>Primary Button</Button>
+                                                <Button variant="outline">Outline Button</Button>
+                                                <Button variant="secondary">Secondary Button</Button>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                        </Tabs>
+                    </div>
                 </section>
 
                 {/* Accordion Demo */}
@@ -187,7 +245,7 @@ export default function ShadcnUiDemo() {
                         <AccordionItem value="item-1">
                             <AccordionTrigger>Is it accessible?</AccordionTrigger>
                             <AccordionContent>
-                                Yes. It adheres to the WAI-ARIA design pattern and uses Radix UI primitives.
+                                Yes. It adheres to the WAI-ARIA design pattern and is built with Radix UI primitives.
                             </AccordionContent>
                         </AccordionItem>
                         <AccordionItem value="item-2">
@@ -199,35 +257,60 @@ export default function ShadcnUiDemo() {
                         <AccordionItem value="item-3">
                             <AccordionTrigger>Is it animated?</AccordionTrigger>
                             <AccordionContent>
-                                Yes. It's animated by default with smooth transitions using Tailwind CSS.
+                                Yes. It's animated by default with smooth transitions using Tailwind CSS animations.
                             </AccordionContent>
                         </AccordionItem>
                     </Accordion>
                 </section>
 
-                {/* Badge Demo */}
+                {/* Getting More Components */}
                 <section className="mb-12">
-                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Badges</h2>
-                    <div className="flex flex-wrap gap-2">
-                        <Badge>Default</Badge>
-                        <Badge variant="secondary">Secondary</Badge>
-                        <Badge variant="destructive">Destructive</Badge>
-                        <Badge variant="outline">Outline</Badge>
-                    </div>
+                    <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
+                        Get More Components
+                    </h2>
+                    <Card className="bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200 dark:border-slate-700">
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
+                                <Package className="h-5 w-5" />
+                                Explore the Full Component Library
+                            </CardTitle>
+                            <CardDescription className="text-slate-600 dark:text-slate-400">
+                                This demo includes just a few popular components. shadcn/ui offers 50+ components.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
+                                <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">How to Add More Components:</h3>
+                                <ol className="list-decimal list-inside space-y-2 text-sm text-slate-700 dark:text-slate-300">
+                                    <li>Visit the official shadcn/ui documentation</li>
+                                    <li>Browse the components you need</li>
+                                    <li>Copy the component code from the docs</li>
+                                    <li>Paste it into your <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded text-slate-900 dark:text-slate-100">components/ui</code> directory</li>
+                                    <li>Install any required dependencies (if prompted)</li>
+                                </ol>
+                            </div>
+                        </CardContent>
+                        <CardFooter className="flex gap-4">
+                            <Button asChild>
+                                <a href="https://ui.shadcn.com/docs/components" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+                                    Browse Components
+                                    <ExternalLink className="h-4 w-4" />
+                                </a>
+                            </Button>
+                            <Button variant="outline" asChild>
+                                <a href="https://ui.shadcn.com" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+                                    Documentation
+                                    <ExternalLink className="h-4 w-4" />
+                                </a>
+                            </Button>
+                        </CardFooter>
+                    </Card>
                 </section>
 
-                <section className="mb-12">
-                    <Alert className="bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700">
-                        <Code2 className="h-4 w-4 text-blue-700 dark:text-blue-300" />
-                        <AlertTitle className="text-blue-900 dark:text-blue-100">Code Example</AlertTitle>
-                        <AlertDescription className="text-blue-700 dark:text-blue-300">
-                            All these components are available in your project. You can customize them by editing the component files
-                            in the components/ui directory.
-                        </AlertDescription>
-                    </Alert>
-                </section>
                 </div>
             </main>
         </Layout>
     )
 }
+
+export default ShadcnUiDemo