Improve visibility and appearance of background logos
Refactor the positioning, sizing, opacity, and blur of go4.video logos and triangle decorations across multiple components to enhance visual presence and adhere to geometric design principles. 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/u1XGT5E
This commit is contained in:
sebastjanartic
+66
-138
@@ -85,156 +85,84 @@ 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
|
||||
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)'
|
||||
}}
|
||||
/>
|
||||
{/* Background logo decorations - go4.video logos bolj vidni */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
left: '80%',
|
||||
transform: 'rotate(45deg)',
|
||||
width: 'clamp(150px, 15vw, 300px)',
|
||||
height: 'clamp(75px, 7.5vw, 150px)',
|
||||
right: '85%',
|
||||
transform: 'rotate(-20deg)',
|
||||
width: '180px',
|
||||
height: '90px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0,
|
||||
opacity: 0.12,
|
||||
filter: 'blur(0.5px)'
|
||||
opacity: 0.35,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
right: '8%',
|
||||
transform: 'rotate(-35deg)',
|
||||
width: 'clamp(100px, 10vw, 200px)',
|
||||
height: 'clamp(50px, 5vw, 100px)',
|
||||
left: '85%',
|
||||
transform: 'rotate(15deg)',
|
||||
width: '160px',
|
||||
height: '80px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0,
|
||||
opacity: 0.08,
|
||||
filter: 'blur(0.5px)'
|
||||
opacity: 0.3,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '80%',
|
||||
right: '90%',
|
||||
transform: 'rotate(-10deg)',
|
||||
width: '140px',
|
||||
height: '70px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0,
|
||||
opacity: 0.25,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '25%',
|
||||
left: '88%',
|
||||
transform: 'rotate(35deg)',
|
||||
width: '120px',
|
||||
height: '60px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 0,
|
||||
opacity: 0.2,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Trikotniki premaknjeni stran od vsebine - z zelo nizko prosojnostjo */}
|
||||
<div className="absolute top-10 left-0 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[90px] border-b-blue-400/3 rotate-12" style={{zIndex: -1}}></div>
|
||||
<div className="absolute top-1/2 right-0 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[75px] border-b-purple-400/3 -rotate-12" style={{zIndex: -1}}></div>
|
||||
<div className="absolute bottom-1/4 left-0 w-0 h-0 border-l-[40px] border-l-transparent border-r-[40px] border-r-transparent border-b-[60px] border-b-cyan-400/3 rotate-45" style={{zIndex: -1}}></div>
|
||||
{/* Trikotniki na robovih - ne prekrivajo video kartic */}
|
||||
<div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
|
||||
<div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
|
||||
<div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
|
||||
<VideoGrid
|
||||
videos={allVideos}
|
||||
isLoading={isLoading}
|
||||
@@ -250,41 +178,41 @@ export default function Home() {
|
||||
|
||||
{/* Footer with large triangle design */}
|
||||
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
|
||||
{/* go4.video logoti v footerju */}
|
||||
{/* go4.video logoti v footerju - bolj vidni */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '15%',
|
||||
top: '15px',
|
||||
right: '12%',
|
||||
transform: 'rotate(-20deg)',
|
||||
width: '150px',
|
||||
height: '75px',
|
||||
width: '170px',
|
||||
height: '85px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
opacity: 0.25,
|
||||
filter: 'blur(0.5px)'
|
||||
opacity: 0.45,
|
||||
filter: 'blur(0.2px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '20px',
|
||||
left: '10%',
|
||||
bottom: '15px',
|
||||
left: '8%',
|
||||
transform: 'rotate(30deg)',
|
||||
width: '120px',
|
||||
height: '60px',
|
||||
width: '140px',
|
||||
height: '70px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
opacity: 0.2,
|
||||
filter: 'blur(0.5px)'
|
||||
opacity: 0.4,
|
||||
filter: 'blur(0.2px)'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user