add page transition

src/layouts/BaseLayout.astro

@@ -1,4 +1,5 @@
 ---
+import { ClientRouter } from 'astro:transitions';
 import Header from '../components/Header.jsx';
 import Footer from '../components/Footer.astro';
 import CookieConsent from '../components/CookieConsent.astro';
@@ -13,6 +14,7 @@ const description = Astro.props.frontmatter?.description ? Astro.props.frontmatt
     <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml">
     <meta charset="UTF-8" />
     <title>{title}</title>
+    <ClientRouter />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;700&display=swap" rel="stylesheet" />
@@ -38,4 +40,4 @@ const description = Astro.props.frontmatter?.description ? Astro.props.frontmatt
     <Footer />
     <CookieConsent />
   </body>
-</html> 
+</html> 

src/layouts/DocsLayout.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/docs.css';
+import { ClientRouter } from 'astro:transitions';
 import Header from '../components/Header.jsx';
 import Footer from '../components/Footer.astro';
 import CookieConsent from '../components/CookieConsent.astro';
@@ -9,6 +10,7 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 ---
 <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;700&display=swap" rel="stylesheet" />
 <div class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
+  <ClientRouter/>
   <Header client:only="react" url={Astro.url} />
   <div class="page-content flex-1 container mx-auto p-6">
     <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
@@ -86,4 +88,4 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 			}
 		}
 	}
-</style>
+</style>