feat: Implement a new dashboard shell with animated background, refactor dashboard data fetching into a dedicated API route, and introduce new UI components.**

src/app/dashboard/settings/page.tsx

@@ -3,21 +3,26 @@ import { HydrateClient } from "~/trpc/server";
 import { PageHeader } from "~/components/layout/page-header";
 import { DataTableSkeleton } from "~/components/data/data-table";
 import { SettingsContent } from "./_components/settings-content";
+import { Card, CardContent } from "~/components/ui/card";
 
 export default async function SettingsPage() {
   return (
-    <div className="page-enter space-y-8">
+    <div className="page-enter space-y-6">
       <PageHeader
         title="Settings"
         description="Manage your account preferences and data"
         variant="gradient"
       />
 
-      <HydrateClient>
-        <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
-          <SettingsContent />
-        </Suspense>
-      </HydrateClient>
+      <Card>
+        <CardContent className="p-6">
+          <HydrateClient>
+            <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
+              <SettingsContent />
+            </Suspense>
+          </HydrateClient>
+        </CardContent>
+      </Card>
     </div>
   );
 }