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/clients/_components/clients-data-table.tsx

@@ -90,8 +90,8 @@ export function ClientsDataTable({
         const client = row.original;
         return (
           <div className="flex items-center gap-3">
-            <div className="bg-status-info-muted hidden  p-2 sm:flex">
-              <UserPlus className="text-status-info h-4 w-4" />
+            <div className="bg-primary/10 hidden p-2 sm:flex">
+              <UserPlus className="text-primary h-4 w-4" />
             </div>
             <div className="min-w-0">
               <p className="truncate font-medium">{client.name}</p>

src/app/dashboard/clients/page.tsx

@@ -4,10 +4,11 @@ import { PageHeader } from "~/components/layout/page-header";
 import { Button } from "~/components/ui/button";
 import { HydrateClient } from "~/trpc/server";
 import { ClientsTable } from "./_components/clients-table";
+import { Card, CardContent } from "~/components/ui/card";
 
 export default async function ClientsPage() {
   return (
-    <div className="page-enter space-y-8">
+    <div className="page-enter space-y-6">
       <PageHeader
         title="Clients"
         description="Manage your clients and their information."