diff --git a/app/globals.css b/app/globals.css
index 0b1037c..5557e7d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,9 +10,9 @@
--foreground: oklch(0.1 0.015 280);
/* Cards avec glassmorphism très prononcé */
- --card: oklch(1 0 0 / 0.6);
+ --card: oklch(1 0 0 / 0.5);
--card-foreground: oklch(0.1 0.015 280);
- --card-hover: oklch(1 0 0 / 0.75);
+ --card-hover: oklch(1 0 0 / 0.65);
/* Popover avec backdrop blur très fort */
--popover: oklch(1 0 0 / 0.95);
@@ -82,9 +82,9 @@
--foreground: oklch(0.97 0.005 280);
/* Cards avec effet glassmorphism sombre très prononcé */
- --card: oklch(0.15 0.015 280 / 0.6);
+ --card: oklch(0.15 0.015 280 / 0.5);
--card-foreground: oklch(0.97 0.005 280);
- --card-hover: oklch(0.18 0.015 280 / 0.75);
+ --card-hover: oklch(0.18 0.015 280 / 0.65);
/* Popover avec backdrop blur très fort */
--popover: oklch(0.15 0.015 280 / 0.95);
@@ -459,18 +459,19 @@
z-index: 1;
}
- /* Fintech card styles avec design moderne et élégant */
+ /* Fintech card styles avec effet glassmorphism prononcé */
.fintech-card {
- background: var(--card);
- backdrop-filter: blur(40px) saturate(180%);
- -webkit-backdrop-filter: blur(40px) saturate(180%);
- border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+ background: color-mix(in srgb, var(--card) 70%, transparent);
+ backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
+ -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
+ border: none;
border-radius: calc(var(--radius) + 0.25rem);
box-shadow:
- 0 1px 3px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
- 0 4px 12px -2px color-mix(in srgb, var(--primary) 6%, transparent),
- 0 8px 24px -4px color-mix(in srgb, var(--foreground) 2%, transparent),
- inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
+ 0 2px 8px 0 color-mix(in srgb, var(--foreground) 6%, transparent),
+ 0 8px 24px -4px color-mix(in srgb, var(--primary) 8%, transparent),
+ 0 16px 48px -8px color-mix(in srgb, var(--foreground) 3%, transparent),
+ inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent),
+ inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 2%, transparent);
position: relative;
overflow: hidden;
}
@@ -494,13 +495,47 @@
opacity: 0.1;
}
+ /* Texture plus prononcée pour les cards de statistiques */
+ .stat-card-textured::before {
+ background-image:
+ radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 3%, transparent) 1px, transparent 0),
+ radial-gradient(circle at 11px 11px, color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px, transparent 0);
+ background-size: 16px 16px, 24px 24px;
+ opacity: 0.2;
+ z-index: 1;
+ }
+
+ .dark .stat-card-textured::before {
+ background-image:
+ radial-gradient(circle at 1px 1px, color-mix(in srgb, white 4%, transparent) 1px, transparent 0),
+ radial-gradient(circle at 11px 11px, color-mix(in srgb, white 2%, transparent) 1px, transparent 0);
+ opacity: 0.15;
+ }
+
+ /* Effet glass renforcé pour les cards de contenu */
+ .fintech-card.card-hover {
+ background: color-mix(in srgb, var(--card) 60%, transparent);
+ backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
+ -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
+ }
+
+ .dark .fintech-card.card-hover {
+ background: color-mix(in srgb, var(--card) 55%, transparent);
+ backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
+ -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
+ }
+
.dark .fintech-card {
- border-color: color-mix(in srgb, var(--border) 40%, transparent);
+ background: color-mix(in srgb, var(--card) 65%, transparent);
+ backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
+ -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
+ border: none;
box-shadow:
- 0 1px 3px 0 color-mix(in srgb, var(--foreground) 8%, transparent),
- 0 4px 12px -2px color-mix(in srgb, var(--primary) 8%, transparent),
- 0 8px 24px -4px color-mix(in srgb, black 40%, transparent),
- inset 0 1px 0 0 color-mix(in srgb, white 8%, transparent);
+ 0 2px 8px 0 color-mix(in srgb, var(--foreground) 12%, transparent),
+ 0 8px 24px -4px color-mix(in srgb, var(--primary) 12%, transparent),
+ 0 16px 48px -8px color-mix(in srgb, black 50%, transparent),
+ inset 0 1px 0 0 color-mix(in srgb, white 12%, transparent),
+ inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent);
}
.fintech-card::after {
@@ -509,19 +544,29 @@
top: 0;
left: 0;
right: 0;
- height: 1px;
+ height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
- color-mix(in srgb, white 50%, transparent) 50%,
+ color-mix(in srgb, white 60%, transparent) 20%,
+ color-mix(in srgb, white 80%, transparent) 50%,
+ color-mix(in srgb, white 60%, transparent) 80%,
transparent 100%
);
- opacity: 0.6;
+ opacity: 0.7;
z-index: 2;
}
.dark .fintech-card::after {
- opacity: 0.2;
+ opacity: 0.25;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ color-mix(in srgb, white 30%, transparent) 20%,
+ color-mix(in srgb, white 40%, transparent) 50%,
+ color-mix(in srgb, white 30%, transparent) 80%,
+ transparent 100%
+ );
}
/* Gradient backgrounds for stat cards - design moderne et subtil */
diff --git a/app/page.tsx b/app/page.tsx
index 80aab17..8d4d27f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -60,18 +60,16 @@ export default function DashboardPage() {
}
/>
-