sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve footer design with dynamic background elements

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-02 15:28:08 +00:00
parent ba4d45db96
commit fc47ca4cd6
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756826816939.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

9
client/src/components/video-card.tsx
View File

@ -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);
}

11
client/src/pages/home.tsx
View File

@ -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">