fix: wire Providers motion context and Template page transitions

app/layout.tsx

@@ -6,6 +6,7 @@ import 'katex/dist/katex.min.css'
 import { Header } from '@/components/layout/Header'
 import { Footer } from '@/components/layout/Footer'
 import { ScrollProgress } from '@/components/ui/ScrollProgress'
+import { Providers } from './providers'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -41,10 +42,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           enableSystem
           disableTransitionOnChange
         >
-            <ScrollProgress />
+            <Providers>
-            <Header />
+                <ScrollProgress />
-            {children}
+                <Header />
-            <Footer />
+                {children}
+                <Footer />
+            </Providers>
         </ThemeProvider>
       </body>
     </html>

app/page.tsx

@@ -1,10 +1,12 @@
 import { getPosts } from '@/lib/posts'
 import { PostList } from '@/components/blog/PostList'
+import Template from './template'
 
 export default async function HomePage() {
   const posts = await getPosts()
 
   return (
+    <Template>
     <main className="max-w-4xl mx-auto px-6 py-16">
       <header className="mb-20 text-center">
         <h1 className="font-sans text-5xl font-extrabold tracking-tight text-ink mb-4">
@@ -21,5 +23,6 @@ export default async function HomePage() {
         <PostList posts={posts} />
       </section>
     </main>
+    </Template>
   )
 }

app/posts/page.tsx

@@ -1,5 +1,6 @@
 import { getPosts } from '@/lib/posts'
 import { PostCard } from '@/components/blog/PostCard'
+import Template from '../template'
 
 export const metadata = { title: 'Posts' }
 
@@ -7,6 +8,7 @@ export default async function PostsPage() {
   const posts = await getPosts()
 
   return (
+    <Template>
     <main className="max-w-4xl mx-auto px-6 py-16">
       <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-0 mb-12 text-ink">
         Posts
@@ -20,5 +22,6 @@ export default async function PostsPage() {
         )}
       </div>
     </main>
+    </Template>
   )
 }