reorganize providers

src/app/page.tsx

@@ -1,9 +1,15 @@
-import { App } from "~/components/App";
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Demo = dynamic(() => import("~/components/Demo"), {
+  ssr: false,
+});
 
 export default function Home() {
   return (
     <main className="min-h-screen flex flex-col p-4">
-      <App />
+      <Demo />
     </main>
   );
 }