From 725fcaffcffc93f8fe7e9ffd9970b2c0499df6d8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 10:47:33 +0000
Subject: [PATCH] Improve video card appearance with new fonts and refined
 overlays

Update video card styling to use Poppins and Inter fonts, remove black overlay bar, refine gradient overlay, and adjust loader text and font.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/S0hX96S
---
 client/index.html                    |  6 +++---
 client/src/components/video-card.tsx | 18 ++++++++++--------
 client/src/index.css                 |  2 ++
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/index.html b/client/index.html
index b986c0a..7c3db11 100644
--- a/client/index.html
+++ b/client/index.html
@@ -67,7 +67,7 @@
         align-items: center;
         justify-content: center;
         z-index: 9999;
-        font-family: Arial, sans-serif;
+        font-family: 'Poppins', 'Inter', Arial, sans-serif;
       ">
         <div style="text-align: center; color: white;">
           <div style="
@@ -90,8 +90,8 @@
               margin-left: 4px;
             "></div>
           </div>
-          <h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
-          <p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
+          <h2 style="margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0,0,0,0.5);">go4.video</h2>
+          <p style="margin: 10px 0 0; opacity: 0.9; font-size: 16px; font-weight: 500;">Loading amazing content...</p>
         </div>
       </div>
       <style>
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 82b85dc..3595e17 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -129,7 +129,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
     >
       {/* Video preview container */}
       <div 
-        className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group"
+        className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group hover:shadow-2xl transition-all duration-300"
         onClick={() => onClick?.(video)}
       >
         {/* Static thumbnail - always visible */}
@@ -209,14 +209,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
           </div>
         )}
         
-        {/* Title overlay - only show when not playing preview and hideOverlay is false */}
+        {/* Modern gradient overlay with title */}
         {!showPreview && !hideOverlay && (
-          <div className="absolute bottom-2 left-2 right-2 bg-black/40 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
-            <div className="truncate font-semibold text-base bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">{video.title}</div>
-            <div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">
-              <span>{formatViews(video.views)}</span>
-              <span>•</span>
-              <span>{formatDate(video.createdAt)}</span>
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
+            <div className="w-full">
+              <h3 className="text-white font-extrabold text-xl mb-2 leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
+                {video.title.split(' - ')[1] || video.title}
+              </h3>
+              <p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
+                {video.title.split(' - ')[0] || 'go4.video'}
+              </p>
             </div>
           </div>
         )}
diff --git a/client/src/index.css b/client/src/index.css
index c5d7f1a..a252949 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;