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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/go4_1756394900352.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

42
client/src/index.css
View File

@ -300,4 +300,46 @@ input[data-testid*="search"]::placeholder {
border-bottom: 45px solid rgba(147, 51, 234, 0.08);
transform: rotate(-15deg);
z-index: 1;
}
/* Background go4.video text decorations */
.floating-triangles {
position: relative;
overflow: hidden;
}
.bg-text-large {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 800;
color: rgba(255, 255, 255, 0.015);
font-size: clamp(120px, 15vw, 220px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
}
.bg-text-medium {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: rgba(255, 255, 255, 0.012);
font-size: clamp(80px, 10vw, 150px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
}
.bg-text-small {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 300;
color: rgba(255, 255, 255, 0.008);
font-size: clamp(50px, 6vw, 100px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
}

15
client/src/pages/VideoPage.tsx
View File

@ -159,8 +159,19 @@ export default function VideoPage() {
</div>
</div>
<div className="max-w-7xl mx-auto p-4 lg:p-6">
<div className="flex flex-col lg:flex-row gap-6">
<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)', opacity: 0.5}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}>
go4.video
</div>
<div className="flex flex-col lg:flex-row gap-6 relative z-10">
{/* Main video section */}
<div className="flex-1">
{/* Video player */}

20
client/src/pages/home.tsx
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>

10
client/src/pages/not-found.tsx
View File

@ -37,8 +37,16 @@ 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)', opacity: 0.7}}>
go4.video
</div>
{/* 404 Content */}
<div className="flex items-center justify-center min-h-[60vh] px-4">
<div className="flex items-center justify-center min-h-[60vh] px-4 relative z-10">
<Card className="w-full max-w-md mx-4 bg-bunny-gray/50 border-white/20">
<CardContent className="pt-6">
<div className="flex flex-col items-center text-center space-y-4">