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

Update page backgrounds with animated logo elements

Browse Source 
Replaces static text background elements with dynamic, scaled, and rotated logo images across multiple pages (VideoPage, Home, NotFound) using new CSS classes (bg-logo-large, bg-logo-medium, bg-logo-small).

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/3OFqUb2
This commit is contained in:
sebastjanartic
2025-08-28 15:33:56 +00:00
parent 89932a2530
commit 79841d36be
4 changed files with 46 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/VideoPage.tsx
+5 -10
View File
@@ -160,16 +160,11 @@ export default function VideoPage() {
</div>
<div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
{/* Background text decorations */}
<div className="bg-text-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}>
go4.video
</div>
{/* Background logo decorations */}
<div className="bg-logo-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}></div>
<div className="bg-logo-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}></div>
<div className="bg-logo-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}></div>
<div className="bg-logo-medium" style={{top: '5%', left: '75%', transform: 'rotate(40deg)'}}></div>
<div className="flex flex-col lg:flex-row gap-6 relative z-10">
{/* Main video section */}
client/src/pages/home.tsx
+9 -19
View File
@@ -84,25 +84,15 @@ export default function Home() {
/>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
{/* Background text decorations - go4.video in different sizes */}
<div className="bg-text-large" style={{top: '10%', right: '5%', transform: 'rotate(-20deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '40%', left: '2%', transform: 'rotate(15deg)'}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}>
go4.video
</div>
<div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}>
go4.video
</div>
{/* 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>
{/* 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>
client/src/pages/not-found.tsx
+4 -7
View File
@@ -37,13 +37,10 @@ export default function NotFound() {
</div>
</div>
{/* Background text decorations */}
<div className="bg-text-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}>
go4.video
</div>
{/* Background logo decorations */}
<div className="bg-logo-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}></div>
<div className="bg-logo-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}></div>
<div className="bg-logo-small" style={{top: '15%', left: '5%', transform: 'rotate(50deg)'}}></div>
{/* 404 Content */}
<div className="flex items-center justify-center min-h-[60vh] px-4 relative z-10">