Update page backgrounds with animated logo elements
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
parent
89932a2530
commit
79841d36be
@ -302,59 +302,53 @@ input[data-testid*="search"]::placeholder {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background go4.video text decorations */
|
||||
/* Background go4.video logo decorations */
|
||||
.floating-triangles {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-text-large {
|
||||
.bg-logo-large {
|
||||
position: absolute;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.2));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: clamp(120px, 15vw, 220px);
|
||||
width: clamp(200px, 20vw, 400px);
|
||||
height: clamp(100px, 10vw, 200px);
|
||||
background-image: url('@assets/go4_1756394900352.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
|
||||
filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.3));
|
||||
opacity: 0.15;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.bg-text-medium {
|
||||
.bg-logo-medium {
|
||||
position: absolute;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(6, 182, 212, 0.18));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: clamp(80px, 10vw, 150px);
|
||||
width: clamp(150px, 15vw, 300px);
|
||||
height: clamp(75px, 7.5vw, 150px);
|
||||
background-image: url('@assets/go4_1756394900352.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 25px rgba(147, 51, 234, 0.3);
|
||||
filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.25));
|
||||
opacity: 0.12;
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
|
||||
.bg-text-small {
|
||||
.bg-logo-small {
|
||||
position: absolute;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.12));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: clamp(50px, 6vw, 100px);
|
||||
width: clamp(100px, 10vw, 200px);
|
||||
height: clamp(50px, 5vw, 100px);
|
||||
background-image: url('@assets/go4_1756394900352.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
|
||||
filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
|
||||
opacity: 0.08;
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
@ -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 */}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user