feat: enhance UI with new background gradients and responsive design adjustments across various components

app/page.tsx

@@ -27,11 +27,11 @@ export default function DashboardPage() {
     }
 
     const filteredAccounts = data.accounts.filter((a) =>
-      selectedAccounts.includes(a.id),
+      selectedAccounts.includes(a.id)
     );
     const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
     const filteredTransactions = data.transactions.filter((t) =>
-      filteredAccountIds.has(t.accountId),
+      filteredAccountIds.has(t.accountId)
     );
 
     return {
@@ -60,26 +60,24 @@ export default function DashboardPage() {
         }
       />
 
-      <Card className="mb-6">
-        <CardContent className="pt-4">
-          <div className="flex flex-wrap gap-4">
-            <AccountFilterCombobox
-              accounts={data.accounts}
-              folders={data.folders}
-              value={selectedAccounts}
-              onChange={setSelectedAccounts}
-              className="w-full md:w-[280px]"
-              filteredTransactions={data.transactions}
-            />
-          </div>
+      <Card className="mb-4 sm:mb-6 border shadow-sm">
+        <CardContent className="px-4 py-4 sm:px-6 sm:py-6">
+          <AccountFilterCombobox
+            accounts={data.accounts}
+            folders={data.folders}
+            value={selectedAccounts}
+            onChange={setSelectedAccounts}
+            className="w-full md:w-[280px]"
+            filteredTransactions={data.transactions}
+          />
         </CardContent>
       </Card>
 
       <OverviewCards data={filteredData} />
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-2">
         <RecentTransactions data={filteredData} />
-        <div className="space-y-6">
+        <div className="space-y-4 sm:space-y-6">
           <AccountsSummary data={filteredData} />
           <CategoryBreakdown data={filteredData} />
         </div>