Adjust background logo transparency and positioning for better visual appeal
Update client-side components to use transparent background logos with adjusted sizing, positioning, and opacity to enhance the geometric design language and adaptive content presentation. 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/QR3yqRB
This commit is contained in:
sebastjanartic
parent
262103721a
commit
ec397a188c
@ -45,21 +45,21 @@ 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 - ogromni 10x */}
|
||||
{/* go4.video logoti v headerju - transparentni */}
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '5px',
|
||||
right: '20%',
|
||||
right: '15%',
|
||||
transform: 'rotate(-15deg)',
|
||||
width: '1800px',
|
||||
height: '900px',
|
||||
width: '300px',
|
||||
height: '150px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.3,
|
||||
filter: 'blur(0.3px)'
|
||||
zIndex: -1,
|
||||
opacity: 0.2,
|
||||
filter: 'contrast(1.5) brightness(1.3)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
@ -68,14 +68,14 @@ export default function SearchHeader({
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
left: '25%',
|
||||
left: '20%',
|
||||
transform: 'rotate(25deg)',
|
||||
width: '1600px',
|
||||
height: '800px',
|
||||
width: '250px',
|
||||
height: '125px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.25,
|
||||
filter: 'blur(0.3px)'
|
||||
zIndex: -1,
|
||||
opacity: 0.15,
|
||||
filter: 'contrast(1.5) brightness(1.3)'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
@ -86,60 +86,135 @@ 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 - fiksni veliki go4.video logoti v ozadju */}
|
||||
{/* SUPER PREPROSTI LOGOTI - samo test ali se sploh prikaže */}
|
||||
<div
|
||||
{/* VELIKI go4.video logoti v ozadju - s transparenco */}
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '20px',
|
||||
left: '20px',
|
||||
top: '5%',
|
||||
left: '2%',
|
||||
transform: 'rotate(-25deg)',
|
||||
width: '800px',
|
||||
height: '400px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'red',
|
||||
border: '5px solid yellow',
|
||||
zIndex: 9999,
|
||||
opacity: 1
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.3,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '10%',
|
||||
right: '5%',
|
||||
transform: 'rotate(30deg)',
|
||||
width: '700px',
|
||||
height: '350px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.25,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '40%',
|
||||
left: '8%',
|
||||
transform: 'rotate(18deg)',
|
||||
width: '900px',
|
||||
height: '450px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.2,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '45%',
|
||||
right: '3%',
|
||||
transform: 'rotate(-35deg)',
|
||||
width: '750px',
|
||||
height: '375px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.18,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '8%',
|
||||
left: '12%',
|
||||
transform: 'rotate(-15deg)',
|
||||
width: '850px',
|
||||
height: '425px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.15,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '12%',
|
||||
right: '8%',
|
||||
transform: 'rotate(22deg)',
|
||||
width: '650px',
|
||||
height: '325px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -1,
|
||||
opacity: 0.12,
|
||||
filter: 'contrast(1.5) brightness(1.2)'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
{/* Dodatni veliki logoti na sredini */}
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
top: '30%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(-30deg)',
|
||||
transform: 'translate(-50%, -50%) rotate(-45deg)',
|
||||
width: '1200px',
|
||||
height: '600px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'rgba(255, 165, 0, 0.5)',
|
||||
border: '3px solid orange',
|
||||
zIndex: 100,
|
||||
opacity: 0.8
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.08,
|
||||
filter: 'contrast(2) brightness(1.5)'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '20px',
|
||||
right: '20px',
|
||||
transform: 'rotate(45deg)',
|
||||
width: '600px',
|
||||
height: '300px',
|
||||
backgroundImage: `url(${go4LogoPath})`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'rgba(255, 100, 0, 0.3)',
|
||||
border: '2px solid red',
|
||||
zIndex: 50,
|
||||
opacity: 0.6
|
||||
top: '70%',
|
||||
left: '30%',
|
||||
transform: 'rotate(60deg)',
|
||||
width: '1000px',
|
||||
height: '500px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.06,
|
||||
filter: 'contrast(2) brightness(1.5)'
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -162,21 +237,21 @@ 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 - ogromni 10x */}
|
||||
{/* go4.video logoti v footerju - transparentni */}
|
||||
<img
|
||||
src={go4LogoPath}
|
||||
alt=""
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '15px',
|
||||
right: '10%',
|
||||
right: '8%',
|
||||
transform: 'rotate(-20deg)',
|
||||
width: '2000px',
|
||||
height: '1000px',
|
||||
width: '350px',
|
||||
height: '175px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.4,
|
||||
filter: 'blur(0.3px)'
|
||||
zIndex: -1,
|
||||
opacity: 0.25,
|
||||
filter: 'contrast(1.5) brightness(1.3)'
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
@ -185,14 +260,14 @@ export default function Home() {
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '15px',
|
||||
left: '8%',
|
||||
left: '10%',
|
||||
transform: 'rotate(30deg)',
|
||||
width: '1800px',
|
||||
height: '900px',
|
||||
width: '300px',
|
||||
height: '150px',
|
||||
pointerEvents: 'none',
|
||||
zIndex: -2,
|
||||
opacity: 0.35,
|
||||
filter: 'blur(0.3px)'
|
||||
zIndex: -1,
|
||||
opacity: 0.2,
|
||||
filter: 'contrast(1.5) brightness(1.3)'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user