Fix: Implement card hover effect and image display

- Implemented card hover effect using the provided component.
- Addressed image display issues on the landing page.

src/components/avisos/ContasRecorrentesList.tsx

@@ -27,6 +27,7 @@ const ContasRecorrentesList = () => {
   const { user } = useAuthStore();
   const queryClient = useQueryClient();
   const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [hoveredCard, setHoveredCard] = useState<string | null>(null);
 
   const { data: contas, isLoading } = useQuery({
     queryKey: ['contas-recorrentes', user?.id],
@@ -124,70 +125,85 @@ const ContasRecorrentesList = () => {
       
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {contas.map((conta) => (
-          <Card key={conta.id} className={`${conta.ativo ? '' : 'opacity-60'}`}>
+          <div
-            <CardHeader className="pb-3">
+            key={conta.id}
-              <div className="flex items-start justify-between">
+            className="relative group"
-                <div className="flex-1">
+            onMouseEnter={() => setHoveredCard(conta.id)}
-                  <CardTitle className="text-lg">{conta.nome_conta}</CardTitle>
+            onMouseLeave={() => setHoveredCard(null)}
-                  {conta.descricao && (
+          >
-                    <CardDescription className="mt-1">{conta.descricao}</CardDescription>
+            {hoveredCard === conta.id && (
-                  )}
+              <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-lg blur-xl transition-all duration-300 ease-in-out" />
-                </div>
+            )}
-                <Badge variant={conta.ativo ? 'default' : 'secondary'}>
-                  {conta.ativo ? 'Ativo' : 'Inativo'}
-                </Badge>
-              </div>
-            </CardHeader>
             
-            <CardContent className="space-y-3">
+            <Card className={`
-              <div className="space-y-2">
+              relative z-10 transition-all duration-300 ease-in-out
-                <div className="flex items-center gap-2 text-sm">
+              ${conta.ativo ? 'hover:shadow-lg hover:scale-105' : 'opacity-60 hover:opacity-80'}
-                  <DollarSign className="h-4 w-4 text-green-600" />
+              ${hoveredCard === conta.id ? 'border-blue-300 shadow-lg' : ''}
-                  <span className="font-medium">Valor:</span>
+            `}>
-                  <span>{formatCurrency(conta.valor)}</span>
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <CardTitle className="text-lg">{conta.nome_conta}</CardTitle>
+                    {conta.descricao && (
+                      <CardDescription className="mt-1">{conta.descricao}</CardDescription>
+                    )}
+                  </div>
+                  <Badge variant={conta.ativo ? 'default' : 'secondary'}>
+                    {conta.ativo ? 'Ativo' : 'Inativo'}
+                  </Badge>
                 </div>
-                
+              </CardHeader>
-                <div className="flex items-center gap-2 text-sm">
+              
-                  <Calendar className="h-4 w-4 text-blue-600" />
+              <CardContent className="space-y-3">
-                  <span className="font-medium">Vencimento:</span>
+                <div className="space-y-2">
-                  <span>Todo dia {conta.dia_vencimento}</span>
+                  <div className="flex items-center gap-2 text-sm">
+                    <DollarSign className="h-4 w-4 text-green-600" />
+                    <span className="font-medium">Valor:</span>
+                    <span>{formatCurrency(conta.valor)}</span>
+                  </div>
+                  
+                  <div className="flex items-center gap-2 text-sm">
+                    <Calendar className="h-4 w-4 text-blue-600" />
+                    <span className="font-medium">Vencimento:</span>
+                    <span>Todo dia {conta.dia_vencimento}</span>
+                  </div>
+                  
+                  <div className="flex items-center gap-2 text-sm">
+                    <Clock className="h-4 w-4 text-purple-600" />
+                    <span className="font-medium">Horário:</span>
+                    <span>{conta.hora_aviso}</span>
+                  </div>
+                  
+                  <div className="flex items-center gap-2 text-sm">
+                    <Bell className="h-4 w-4 text-orange-600" />
+                    <span className="font-medium">Antecedência:</span>
+                    <span>{conta.dias_antecedencia} dia(s)</span>
+                  </div>
                 </div>
-                
-                <div className="flex items-center gap-2 text-sm">
-                  <Clock className="h-4 w-4 text-purple-600" />
-                  <span className="font-medium">Horário:</span>
-                  <span>{conta.hora_aviso}</span>
-                </div>
-                
-                <div className="flex items-center gap-2 text-sm">
-                  <Bell className="h-4 w-4 text-orange-600" />
-                  <span className="font-medium">Antecedência:</span>
-                  <span>{conta.dias_antecedencia} dia(s)</span>
-                </div>
-              </div>
 
-              <div className="flex gap-2 pt-2 border-t">
+                <div className="flex gap-2 pt-2 border-t">
-                <Button
+                  <Button
-                  variant="outline"
+                    variant="outline"
-                  size="sm"
+                    size="sm"
-                  onClick={() => toggleAtivo(conta.id, conta.ativo)}
+                    onClick={() => toggleAtivo(conta.id, conta.ativo)}
-                  className="flex-1"
+                    className="flex-1"
-                >
+                  >
-                  {conta.ativo ? 'Desativar' : 'Ativar'}
+                    {conta.ativo ? 'Desativar' : 'Ativar'}
-                </Button>
+                  </Button>
-                
+                  
-                <Button
+                  <Button
-                  variant="outline"
+                    variant="outline"
-                  size="sm"
+                    size="sm"
-                  onClick={() => handleDelete(conta.id)}
+                    onClick={() => handleDelete(conta.id)}
-                  disabled={deletingId === conta.id}
+                    disabled={deletingId === conta.id}
-                  className="text-red-600 hover:text-red-700"
+                    className="text-red-600 hover:text-red-700"
-                >
+                  >
-                  <Trash2 className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
-                </Button>
+                  </Button>
-              </div>
+                </div>
-            </CardContent>
+              </CardContent>
-          </Card>
+            </Card>
+          </div>
         ))}
       </div>
     </div>

src/components/ui/card-hover-effect.tsx

@@ -0,0 +1,113 @@
+
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+
+export const HoverEffect = ({
+  items,
+  className,
+}: {
+  items: {
+    title: string;
+    description: string;
+    onClick?: () => void;
+  }[];
+  className?: string;
+}) => {
+  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+        className
+      )}
+    >
+      {items.map((item, idx) => (
+        <div
+          key={idx}
+          className="relative group block p-2 h-full w-full cursor-pointer"
+          onMouseEnter={() => setHoveredIndex(idx)}
+          onMouseLeave={() => setHoveredIndex(null)}
+          onClick={item.onClick}
+        >
+          <AnimatePresence>
+            {hoveredIndex === idx && (
+              <motion.span
+                className="absolute inset-0 h-full w-full bg-slate-800/[0.8] block rounded-3xl"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.15 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <HoverCard>
+            <HoverCardTitle>{item.title}</HoverCardTitle>
+            <HoverCardDescription>{item.description}</HoverCardDescription>
+          </HoverCard>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const HoverCard = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl h-full w-full p-4 overflow-hidden bg-white border border-gray-200 group-hover:border-slate-700 relative z-20 shadow-sm hover:shadow-md transition-shadow",
+        className
+      )}
+    >
+      <div className="relative z-50">
+        <div className="p-4">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export const HoverCardTitle = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <h4 className={cn("text-gray-900 font-bold tracking-wide mt-4", className)}>
+      {children}
+    </h4>
+  );
+};
+
+export const HoverCardDescription = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <p
+      className={cn(
+        "mt-8 text-gray-600 tracking-wide leading-relaxed text-sm",
+        className
+      )}
+    >
+      {children}
+    </p>
+  );
+};