.

packages/web/src/routes/demo/start.ssr.spa-mode.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react"
+import { createFileRoute } from "@tanstack/react-router"
+import { getPunkSongs } from "@/data/demo.punk-songs"
+
+export const Route = createFileRoute("/demo/start/ssr/spa-mode")({
+  ssr: false,
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [punkSongs, setPunkSongs] = useState<
+    Awaited<ReturnType<typeof getPunkSongs>>
+  >([])
+
+  useEffect(() => {
+    getPunkSongs().then(setPunkSongs)
+  }, [])
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-3xl font-bold mb-6 text-green-400">
+          SPA Mode - Punk Songs
+        </h1>
+        <ul className="space-y-3">
+          {punkSongs.map((song) => (
+            <li
+              key={song.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white font-medium">
+                {song.name}
+              </span>
+              <span className="text-white/60"> - {song.artist}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}