redesign: modern dark dashboard WOW effect - gradients, animations, new layout

src/app/(dashboard)/page.tsx

@@ -1,34 +1,35 @@
-export const dynamic = "force-dynamic";
 import { WeatherWidget } from "@/components/widgets/WeatherWidget";
-import { TasksWidget } from "@/components/widgets/TasksWidget";
 import { CalendarWidget } from "@/components/widgets/CalendarWidget";
+import { TasksWidget } from "@/components/widgets/TasksWidget";
 import { ClaudeUsageWidget } from "@/components/widgets/ClaudeUsageWidget";
 import { ClaudeApiWidget } from "@/components/widgets/ClaudeApiWidget";
+import { ServicesGrid } from "@/components/widgets/ServicesGrid";
 import { DashboardHeader } from "@/components/widgets/DashboardHeader";
 
 export default function DashboardPage() {
   return (
-    <div className="space-y-6 max-w-7xl mx-auto">
+    <div className="space-y-5">
       <DashboardHeader />
 
       {/* Weather - full width */}
       <WeatherWidget />
 
-      {/* Calendar + Tasks */}
+      {/* Calendar + Tasks + Claude */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
         <div className="lg:col-span-2">
           <CalendarWidget />
         </div>
-        <div className="lg:col-span-1">
+        <div className="space-y-5">
           <TasksWidget />
+          <div className="grid grid-cols-2 gap-5 lg:grid-cols-1">
+            <ClaudeUsageWidget />
+            <ClaudeApiWidget />
+          </div>
         </div>
       </div>
 
-      {/* Claude row */}
-      <div className="grid grid-cols-2 gap-5">
-        <ClaudeUsageWidget />
-        <ClaudeApiWidget />
-      </div>
+      {/* Services */}
+      <ServicesGrid />
     </div>
   );
 }