feat: add more colors to cards

components/dashboard/projects-widget.tsx

@@ -16,75 +16,83 @@ export function ProjectsWidget({
   return (
     <div className="grid gap-4 md:grid-cols-2">
       {projects.map((project) => (
-        <Card key={project.code}>
-          <CardHeader>
-            <CardTitle>
-              <Link href={`/transactions?projectCode=${project.code}`}>
-                <Badge className="text-lg" style={{ backgroundColor: project.color }}>
+        <Link key={project.code} href={`/transactions?projectCode=${project.code}`}>
+          <Card className="bg-gradient-to-tr from-white via-slate-50/40 to-purple-50/30 border-slate-200/60 hover:shadow-xl transition-all duration-500 hover:scale-[1.01] group cursor-pointer">
+            <CardHeader className="group-hover:translate-y-[-2px] transition-transform duration-300">
+              <CardTitle>
+                <Badge
+                  className="text-lg shadow-md hover:shadow-lg transition-all duration-300"
+                  style={{ backgroundColor: project.color }}
+                >
                   {project.name}
                 </Badge>
-              </Link>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-4 justify-between items-center">
-              <div>
-                <div className="text-sm font-medium text-muted-foreground">Income</div>
-                <div className="text-2xl font-bold text-green-500">
-                  {Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).map(([currency, total]) => (
-                    <div
-                      key={currency}
-                      className="flex flex-col gap-2 font-bold text-green-500 text-base first:text-2xl"
-                    >
-                      {formatCurrency(total, currency)}
-                    </div>
-                  ))}
-                  {!Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).length && (
-                    <div className="font-bold text-base first:text-2xl">0.00</div>
-                  )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="group-hover:translate-y-[-1px] transition-transform duration-300">
+              <div className="flex flex-wrap gap-4 justify-between items-center">
+                <div className="bg-gradient-to-br from-green-50/80 to-emerald-50/60 p-3 rounded-xl border border-green-100/50">
+                  <div className="text-sm font-medium text-muted-foreground">Income</div>
+                  <div className="text-2xl font-bold text-green-500">
+                    {Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).map(([currency, total]) => (
+                      <div
+                        key={currency}
+                        className="flex flex-col gap-2 font-bold text-green-500 text-base first:text-2xl"
+                      >
+                        {formatCurrency(total, currency)}
+                      </div>
+                    ))}
+                    {!Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).length && (
+                      <div className="font-bold text-base first:text-2xl">0.00</div>
+                    )}
+                  </div>
+                </div>
+                <div className="bg-gradient-to-br from-red-50/80 to-rose-50/60 p-3 rounded-xl border border-red-100/50">
+                  <div className="text-sm font-medium text-muted-foreground">Expenses</div>
+                  <div className="text-2xl font-bold text-red-500">
+                    {Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).map(
+                      ([currency, total]) => (
+                        <div
+                          key={currency}
+                          className="flex flex-col gap-2 font-bold text-red-500 text-base first:text-2xl"
+                        >
+                          {formatCurrency(total, currency)}
+                        </div>
+                      )
+                    )}
+                    {!Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).length && (
+                      <div className="font-bold text-base first:text-2xl">0.00</div>
+                    )}
+                  </div>
+                </div>
+                <div className="bg-gradient-to-br from-violet-50/80 to-indigo-50/60 p-3 rounded-xl border border-violet-100/50">
+                  <div className="text-sm font-medium text-muted-foreground">Profit</div>
+                  <div className="text-2xl font-bold">
+                    {Object.entries(statsPerProject[project.code]?.profitPerCurrency).map(([currency, total]) => (
+                      <div
+                        key={currency}
+                        className={`flex flex-col gap-2 items-center text-2xl font-bold ${
+                          total >= 0 ? "text-green-500" : "text-red-500"
+                        }`}
+                      >
+                        {formatCurrency(total, currency)}
+                      </div>
+                    ))}
+                    {!Object.entries(statsPerProject[project.code]?.profitPerCurrency).length && (
+                      <div className="text-2xl font-bold">0.00</div>
+                    )}
+                  </div>
                 </div>
               </div>
-              <div>
-                <div className="text-sm font-medium text-muted-foreground">Expenses</div>
-                <div className="text-2xl font-bold text-red-500">
-                  {Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).map(([currency, total]) => (
-                    <div key={currency} className="flex flex-col gap-2 font-bold text-red-500 text-base first:text-2xl">
-                      {formatCurrency(total, currency)}
-                    </div>
-                  ))}
-                  {!Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).length && (
-                    <div className="font-bold text-base first:text-2xl">0.00</div>
-                  )}
-                </div>
-              </div>
-              <div>
-                <div className="text-sm font-medium text-muted-foreground">Profit</div>
-                <div className="text-2xl font-bold">
-                  {Object.entries(statsPerProject[project.code]?.profitPerCurrency).map(([currency, total]) => (
-                    <div
-                      key={currency}
-                      className={`flex flex-col gap-2 items-center text-2xl font-bold ${
-                        total >= 0 ? "text-green-500" : "text-red-500"
-                      }`}
-                    >
-                      {formatCurrency(total, currency)}
-                    </div>
-                  ))}
-                  {!Object.entries(statsPerProject[project.code]?.profitPerCurrency).length && (
-                    <div className="text-2xl font-bold">0.00</div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </Link>
       ))}
       <Link
         href="/settings/projects"
-        className="flex items-center justify-center gap-2 border-dashed border-2 border-gray-300 rounded-md p-4 text-muted-foreground hover:text-primary hover:border-primary"
+        className="flex items-center justify-center gap-2 border-dashed border-2 border-gradient-to-r rounded-lg p-6 text-muted-foreground transition-all duration-300 hover:scale-[1.02] hover:shadow-lg group"
       >
-        <Plus className="h-4 w-4" />
-        Create New Project
+        <Plus className="h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
+        <span className="font-medium">Create New Project</span>
       </Link>
     </div>
   )