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

Add dynamic background logo elements to enhance page visuals

Browse Source 
Replaced static background logo classes with inline styles for dynamic positioning and sizing, importing the logo asset to all relevant pages (VideoPage, Home, NotFound).

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/ccgD6tv
This commit is contained in:
sebastjanartic
2025-08-28 15:36:44 +00:00
parent 79841d36be
commit 83a93bf190
3 changed files with 273 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home.tsx
+145 -8
View File
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
import { type Video } from "@shared/schema";
import SearchHeader from "@/components/search-header";
import VideoGrid from "@/components/video-grid";
import go4LogoPath from "@assets/go4_1756394900352.png";
interface VideosResponse {
@@ -85,14 +86,150 @@ export default function Home() {
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
{/* Background logo decorations - go4.video logos at different angles */}
<div className="bg-logo-large" style={{top: '10%', right: '5%', transform: 'rotate(-20deg)'}}></div>
<div className="bg-logo-medium" style={{top: '40%', left: '2%', transform: 'rotate(15deg)'}}></div>
<div className="bg-logo-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}></div>
<div className="bg-logo-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}></div>
<div className="bg-logo-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}></div>
<div className="bg-logo-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}></div>
<div className="bg-logo-medium" style={{top: '15%', left: '80%', transform: 'rotate(45deg)'}}></div>
<div className="bg-logo-small" style={{top: '50%', right: '8%', transform: 'rotate(-35deg)'}}></div>
<div
style={{
position: 'absolute',
top: '10%',
right: '5%',
transform: 'rotate(-20deg)',
width: 'clamp(200px, 20vw, 400px)',
height: 'clamp(100px, 10vw, 200px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.15,
filter: 'blur(1px)'
}}
/>
<div
style={{
position: 'absolute',
top: '40%',
left: '2%',
transform: 'rotate(15deg)',
width: 'clamp(150px, 15vw, 300px)',
height: 'clamp(75px, 7.5vw, 150px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.12,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '70%',
right: '15%',
transform: 'rotate(-10deg)',
width: 'clamp(100px, 10vw, 200px)',
height: 'clamp(50px, 5vw, 100px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.08,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '85%',
left: '25%',
transform: 'rotate(25deg)',
width: 'clamp(200px, 20vw, 400px)',
height: 'clamp(100px, 10vw, 200px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.15,
filter: 'blur(1px)'
}}
/>
<div
style={{
position: 'absolute',
top: '25%',
left: '55%',
transform: 'rotate(-30deg)',
width: 'clamp(150px, 15vw, 300px)',
height: 'clamp(75px, 7.5vw, 150px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.12,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '60%',
left: '70%',
transform: 'rotate(12deg)',
width: 'clamp(100px, 10vw, 200px)',
height: 'clamp(50px, 5vw, 100px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.08,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '15%',
left: '80%',
transform: 'rotate(45deg)',
width: 'clamp(150px, 15vw, 300px)',
height: 'clamp(75px, 7.5vw, 150px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.12,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '50%',
right: '8%',
transform: 'rotate(-35deg)',
width: 'clamp(100px, 10vw, 200px)',
height: 'clamp(50px, 5vw, 100px)',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.08,
filter: 'blur(0.5px)'
}}
/>
{/* Large geometric triangles */}
<div className="absolute top-10 right-10 w-0 h-0 border-l-[100px] border-l-transparent border-r-[100px] border-r-transparent border-b-[150px] border-b-blue-400/8 rotate-12 z-0"></div>