From 1a9b51610b546a997cf1568610e4fa89a7ff3fe8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 14:55:36 +0000
Subject: [PATCH] Improve the visual appearance of the video play button

Update the play button overlay styling in the VideoCard component to use a white gradient with a blur effect.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/SjgFrtk
---
 client/src/components/video-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index b59537d..e651286 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -83,7 +83,7 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
         
         {/* Play button overlay */}
         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
-          <div className="gradient-primary rounded-full w-16 h-16 flex items-center justify-center group-hover:scale-110 transition-all duration-300 shadow-lg">
+          <div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
           </div>
         </div>