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
parent
489ac2c884
commit
38274ff979
@ -45,13 +45,31 @@ export default function SearchHeader({
|
||||
|
||||
return (
|
||||
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
|
||||
{/* go4.video logoti v headerju */}
|
||||
{/* go4.video logoti v headerju - bolj vidni */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '5px',
|
||||
right: '10%',
|
||||
right: '8%',
|
||||
transform: 'rotate(-15deg)',
|
||||
width: '140px',
|
||||
height: '70px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
opacity: 0.4,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
left: '12%',
|
||||
transform: 'rotate(25deg)',
|
||||
width: '120px',
|
||||
height: '60px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
@ -60,26 +78,8 @@ export default function SearchHeader({
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
opacity: 0.2,
|
||||
filter: 'blur(0.5px)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '10px',
|
||||
left: '15%',
|
||||
transform: 'rotate(25deg)',
|
||||
width: '100px',
|
||||
height: '50px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
opacity: 0.15,
|
||||
filter: 'blur(0.5px)'
|
||||
opacity: 0.35,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
@ -243,33 +243,33 @@ input[data-testid*="search"]::placeholder {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 30px solid rgba(59, 130, 246, 0.03);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 50px solid rgba(59, 130, 246, 0.08);
|
||||
transform: rotate(15deg);
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.triangle-decoration-2 {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 25px solid rgba(147, 51, 234, 0.03);
|
||||
border-left: 25px solid transparent;
|
||||
border-right: 25px solid transparent;
|
||||
border-bottom: 35px solid rgba(147, 51, 234, 0.08);
|
||||
transform: rotate(-25deg);
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.triangle-decoration-3 {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 18px solid transparent;
|
||||
border-right: 18px solid transparent;
|
||||
border-bottom: 28px solid rgba(59, 130, 246, 0.03);
|
||||
border-left: 30px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-bottom: 40px solid rgba(6, 182, 212, 0.08);
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.floating-triangles {
|
||||
|
||||
@ -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)'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user