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

Add dynamic background text for branding across multiple pages

Browse Source 
Integrates reusable CSS classes and components to display "go4.video" text at varying sizes, positions, and rotations as background decorations on the home, video, and not-found pages.

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/v4xsjqK
This commit is contained in:
sebastjanartic
2025-08-28 15:31:10 +00:00
parent 5c2e5b0e10
commit e866b9fd67
5 changed files with 84 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home.tsx
+20
View File
@@ -84,6 +84,26 @@ 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)', opacity: 0.4}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)', opacity: 0.6}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)', opacity: 0.5}}>
go4.video
</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>
<div className="absolute top-1/3 left-5 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[110px] border-b-purple-400/8 -rotate-12 z-0"></div>