From fc47ca4cd6f8bf68c481efc397f595e9cdac8e10 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 15:28:08 +0000
Subject: [PATCH] Improve footer design with dynamic background elements

Update the footer component in the home page to include animated background logos for a more engaging user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/d05DGZF
---
 attached_assets/image_1756826816939.png | Bin 0 -> 1460 bytes
 client/src/components/video-card.tsx    |   9 +++++++++
 client/src/pages/home.tsx               |  11 +++++++++--
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 attached_assets/image_1756826816939.png

diff --git a/attached_assets/image_1756826816939.png b/attached_assets/image_1756826816939.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb8f962875ba24e5d6df87c58f27bdda86f3b8fd
GIT binary patch
literal 1460
zcmV;l1xxygP)<h;3K|Lk000e1NJLTq001Qb001Wl1^@s6h*p6J00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1xZOnK~z{rrI^o8
z9Ay~CzwbK>7TRU06q>TIAS52tt%}yP2Aebn3?4kxU`*4bJ+;wjyqS3OZ_p-9wPzC&
ztp|yR9vTU0O-s{@{7Mt8K$i+^TS{PAgqg>~`(xgD=bhaJ-(>R4_nFyu-uFA7_t}|Y
zJ-Gn_2mnJ(kuiXjR%u)RzsSKLE>vS=FtrGAEyic+-9!$knaYt?iL^%@>B`ntWW8Mj
z+I&~6Z|%VTqy1>?$zxwzH|iUk!NK4K01pV90OkW8NgV*p53sYoip`b3u{J-6<@-0W
zxmu9@G7v~O0{~iwS7u2})wOk^dGHLHUOxryi;MF>ZAyzlRLo1gG&_brCq}TbT5w%1
z5?N2zfO1Z^^ob!H`tWn@2nzsC;zB}`&U<8P654W34Hi2Arp7O0ZsxjcEIN7zn|r?o
zsZ|AJ20up22N%J?!VY6j7<t>73XXXMw09l@`8y~sP1|1R#s&4_j;7xpLd(#3(ShvD
zBc?mlQRY2)o+llPYysc}EOs6zAm4Wuy)O;|k}(yTjGPDn5mK!kXgU2ESU})Di5L)=
zZ)ylF^GxQM%!k_8?7Y-(9J`37bQT1GG>JVBD6CTl-#Y`3aXA|?yNE-ToTD0@qtLk&
zIP&>n;ghOU$|(S-YwbY#wNt_g?GU04Nmlf6?Ob?XcubrhJy*JJ=$_7#Xi8^+NSz|V
z)PbY@PAAkR@+K<@P6SN5Y%(PJl<r6JKzH_pW+}o{;|uxdY%B)i3^{aC-qOk`m2Yo(
z3FKmG-{Eetgq1ULrd+O`7(+6D?%leo&e;x!{E1^NO}PZ78ZzK9hAbXThNONc@8PSn
z_2_EjZiZrgiQ8wg)tJh-nerI7oKUl=%n$(N4s(2Y?m6_onyQH*#i!CKgQbuuSPnTE
za@QfVeKb^u;rHuf=V`}eKB~na6-$~ahP~GzyB+UK;fo6m$Q=>&&gq=Gmf;+nPVKP{
zxmvcJ<I_(X@Yb8D7(-k+B=af<r&A^~6&SMXP^HEUCzM0nybEezBvzhwifN~8h8)_F
zceTYrfbYI3;ok56Iv5IhHS-as$Yjb<hpIVex4U<?@%^_YEIkbL@8he_U`s~0nX(wN
z-AVW_GutmeZ(;POt>_B2>XYV5I>hDbgOe#=JTcl%Bs~wQ)dYFFu3ReN-tFzsnb^vW
zGNjnz1h61*Gqtn+v?hjZJu$J3E0;=mwBT2)Ln^Nv5?VM{DnD~GwYfYObHwSK@t@@d
z!05HDh;!N*s}8BW+DzvjZ!7>Vrq&kz&`u}@Tnr_#5_6&oLt!46U!8I@wS51Uvkut|
z>6s@w;jTj_LtGt``!i4O7)-H{snXK|{+azP#*9lVr&L}$SD_A>3~}YEPncXD$I7O7
zNfk~}$P^gx*Te{zA4D0d;dv<TT)Ym&ofBw`6|PB=987_L_0<BV#xGmUh#4j^Waq0h
zq>cfj53XXRyeLU>Fr}XS=4P&AcH)Pc8A^5{i6I6rV7Rd`g1aj>G($F1@(o!G3<MOH
zrcmB^g7zbQ;)2pC5yb#vS{7g7M3`4vMFasxA6&()rC&uEPiTo>T{7t`Uda!mH+M30
zA&{@*{%${b0Fx^>G4}9B6w8l5)>jrgIzMojEtAfoJ9`}MhhE0>2Xfe7moXrZI-zb8
zd>`elH5Aw9G5>5D(~obXSYEWdb~YxQ8YFw<w%%2&>GNawLB;+#7{Cd}yS$9Hw%^NQ
z+KgmsQFol0OdXAp)mJqF!a-Zh$o8lsQB`zE=W2^$FRnvJcB><i2>$`dJ}IFTUVAbC
O0000<MNUMnLSTZ{_L>3!

literal 0
HcmV?d00001

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index e1922b5..9994e30 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -54,11 +54,20 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   
   // Enable video preview on hover for desktop devices
   useEffect(() => {
+    console.log(`VideoCard hover state changed for ${video.id}:`, {
+      isHovered,
+      windowWidth: window.innerWidth,
+      hasVideoUrl: !!video.videoUrl,
+      videoUrl: video.videoUrl
+    });
+    
     if (isHovered) {
       // Enable preview for desktop devices after delay
       if (window.innerWidth >= 768) {
         const delay = 800;
+        console.log(`Setting preview timeout for video ${video.id}`);
         hoverTimeoutRef.current = setTimeout(() => {
+          console.log(`Activating preview for video ${video.id}`);
           setShowPreview(true);
         }, delay);
       }
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 257609a..be2c6e4 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -202,8 +202,15 @@ export default function Home() {
       </main>
 
       {/* Footer */}
-      <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
-        <div className="container">
+      <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12 relative overflow-hidden">
+        {/* Background go4.video logos */}
+        <div className="bg-logo-large" style={{ top: '20%', left: '5%', transform: 'rotate(-15deg)' }}></div>
+        <div className="bg-logo-medium" style={{ top: '60%', right: '10%', transform: 'rotate(25deg)' }}></div>
+        <div className="bg-logo-small" style={{ bottom: '20%', left: '15%', transform: 'rotate(-45deg)' }}></div>
+        <div className="bg-logo-medium" style={{ top: '10%', right: '25%', transform: 'rotate(60deg)' }}></div>
+        <div className="bg-logo-small" style={{ bottom: '40%', right: '30%', transform: 'rotate(-20deg)' }}></div>
+        
+        <div className="container relative z-10">
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
             {/* Company Info */}
             <div className="col-span-1">