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,7 +125,21 @@ 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
+            key={conta.id}
+            className="relative group"
+            onMouseEnter={() => setHoveredCard(conta.id)}
+            onMouseLeave={() => setHoveredCard(null)}
+          >
+            {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" />
+            )}
+            
+            <Card className={`
+              relative z-10 transition-all duration-300 ease-in-out
+              ${conta.ativo ? 'hover:shadow-lg hover:scale-105' : 'opacity-60 hover:opacity-80'}
+              ${hoveredCard === conta.id ? 'border-blue-300 shadow-lg' : ''}
+            `}>
               <CardHeader className="pb-3">
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
@@ -188,6 +203,7 @@ const ContasRecorrentesList = () => {
                 </div>
               </CardContent>
             </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>
+  );
+};