Add video titles to display on the cards

Add title overlay to the VideoCard component in client/src/components/video-card.tsx, allowing video titles to be displayed at the bottom of each card with gradient background and hover effects.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE

client/src/components/video-card.tsx

@@ -230,6 +230,17 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10">
           {formatDuration(video.duration)}
         </div>
+
+        {/* Title overlay at bottom */}
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
+          <h3 
+            className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
+            onClick={() => onClick?.(video)}
+            data-testid={`text-title-${video.id}`}
+          >
+            {video.title}
+          </h3>
+        </div>
         
       </div>