feat(backoffice): redesign UI with enhanced background and glassmorphism effects

- Add vibrant radial gradient backgrounds with multiple color zones
- Implement glassmorphism effects on header and cards
- Add subtle grain texture overlay
- Update card hover effects with smooth transitions
- Improve dark mode background visibility

apps/backoffice/app/components/ui/Card.tsx

@@ -3,25 +3,146 @@ import { ReactNode } from "react";
 interface CardProps {
   children: ReactNode;
   className?: string;
+  hover?: boolean;
 }
 
-export function Card({ children, className = "" }: CardProps) {
+export function Card({ children, className = "", hover = true }: CardProps) {
   return (
-    <div className={`bg-card rounded-xl shadow-soft border border-line p-6 ${className}`}>
+    <div 
+      className={`
+        bg-card text-card-foreground 
+        rounded-lg border border-border/60
+        shadow-sm
+        transition-all duration-200 ease-out
+        ${hover ? "hover:shadow-md hover:-translate-y-0.5" : ""}
+        ${className}
+      `}
+    >
       {children}
     </div>
   );
 }
 
 interface CardHeaderProps {
-  title: string;
+  children: ReactNode;
   className?: string;
 }
 
-export function CardHeader({ title, className = "" }: CardHeaderProps) {
+export function CardHeader({ children, className = "" }: CardHeaderProps) {
   return (
-    <h2 className={`text-lg font-semibold text-foreground mb-4 ${className}`}>
-      {title}
-    </h2>
+    <div className={`flex flex-col space-y-1.5 p-6 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+interface CardTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardTitle({ children, className = "" }: CardTitleProps) {
+  return (
+    <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`}>
+      {children}
+    </h3>
+  );
+}
+
+interface CardDescriptionProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardDescription({ children, className = "" }: CardDescriptionProps) {
+  return (
+    <p className={`text-sm text-muted-foreground ${className}`}>
+      {children}
+    </p>
+  );
+}
+
+interface CardContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardContent({ children, className = "" }: CardContentProps) {
+  return (
+    <div className={`p-6 pt-0 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+interface CardFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function CardFooter({ children, className = "" }: CardFooterProps) {
+  return (
+    <div className={`flex items-center p-6 pt-0 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+// Glass Card variant for special sections
+interface GlassCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function GlassCard({ children, className = "" }: GlassCardProps) {
+  return (
+    <div 
+      className={`
+        glass-card
+        rounded-xl
+        p-6
+        transition-all duration-200 ease-out
+        hover:shadow-elevation-2
+        ${className}
+      `}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Simple card with header shortcut
+interface SimpleCardProps {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+}
+
+export function SimpleCard({ 
+  title, 
+  description, 
+  children, 
+  className = "",
+  footer 
+}: SimpleCardProps) {
+  return (
+    <Card className={className}>
+      {(title || description) && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent>
+        {children}
+      </CardContent>
+      {footer && (
+        <CardFooter>
+          {footer}
+        </CardFooter>
+      )}
+    </Card>
   );
 }