added neumorphism button card sidebar and created styles folder

src/components/ui/Card.tsx

@@ -1,11 +1,34 @@
 import React from 'react';
 import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
-export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+
+// IMPORTANT — contraste texte :
+// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
+// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
+// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
+// Ex: className="text-slate-600 dark:text-slate-400"
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
+  // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
+  variant?: 'raised' | 'flat';
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'raised', ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden", className)}
+      className={cn(
+        // Style de base
+        "rounded-3xl border-none transition-[background-color,box-shadow] duration-300 ease-in-out flex flex-col overflow-hidden",
+        "bg-[#e8e8e8] dark:bg-[#1e293b]",
+        // Relief neumorphique (par défaut)
+        variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
+        // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
+        variant === 'flat' && "border border-black/5 dark:border-white/10",
+        className
+      )}
       {...props}
     />
   )
@@ -16,7 +39,11 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("px-6 py-5 border-b border-slate-100 flex flex-col space-y-1.5", className)}
+      className={cn(
+        // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
+        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5",
+        className
+      )}
       {...props}
     />
   )
@@ -25,7 +52,11 @@ CardHeader.displayName = "CardHeader";
 
 export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 flex-1", className)} {...props} />
+    <div
+      ref={ref}
+      className={cn("p-6 flex-1", className)}
+      {...props}
+    />
   )
 );
 CardContent.displayName = "CardContent";