Update header and home page to use image elements for background logos
Replaces background image divs with img tags for dynamic logo placement and styling on the header and home page. 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/y1utQrW
This commit is contained in:
sebastjanartic
parent
bf16f236a7
commit
0fe8fa5ae7
@ -45,59 +45,37 @@ export default function SearchHeader({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
|
<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 v ozadju */}
|
{/* go4.video logoti v headerju - img elementi */}
|
||||||
<div
|
<img
|
||||||
style={{
|
src={go4LogoPath}
|
||||||
position: 'absolute',
|
alt=""
|
||||||
top: '2px',
|
|
||||||
right: '15%',
|
|
||||||
transform: 'rotate(-15deg)',
|
|
||||||
width: '1600px',
|
|
||||||
height: '800px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.7,
|
|
||||||
filter: 'blur(0.1px)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '5px',
|
top: '5px',
|
||||||
left: '20%',
|
right: '20%',
|
||||||
transform: 'rotate(25deg)',
|
transform: 'rotate(-15deg)',
|
||||||
width: '1440px',
|
width: '180px',
|
||||||
height: '720px',
|
height: '90px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -2,
|
||||||
opacity: 0.65,
|
opacity: 0.3,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.3px)'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '8px',
|
top: '8px',
|
||||||
right: '45%',
|
left: '25%',
|
||||||
transform: 'rotate(-35deg)',
|
transform: 'rotate(25deg)',
|
||||||
width: '1280px',
|
width: '160px',
|
||||||
height: '640px',
|
height: '80px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -2,
|
||||||
opacity: 0.6,
|
opacity: 0.25,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.3px)'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@ -85,134 +85,102 @@ export default function Home() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
|
||||||
{/* DEBUG: Test slika - naj bo vidna */}
|
{/* Background logo decorations - fiksni veliki go4.video logoti v ozadju */}
|
||||||
|
{/* Veliki logoti z img elementi namesto backgroundImage */}
|
||||||
<img
|
<img
|
||||||
src={go4LogoPath}
|
src={go4LogoPath}
|
||||||
alt="go4 logo test"
|
alt=""
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'fixed',
|
||||||
top: '10px',
|
top: '10%',
|
||||||
left: '10px',
|
left: '5%',
|
||||||
width: '200px',
|
|
||||||
height: '100px',
|
|
||||||
zIndex: 1000,
|
|
||||||
border: '2px solid red'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Background logo decorations - ogromni go4.video logoti v ozadju */}
|
|
||||||
{/* Zgoraj levo */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '5%',
|
|
||||||
left: '3%',
|
|
||||||
transform: 'rotate(-25deg)',
|
transform: 'rotate(-25deg)',
|
||||||
width: '2400px',
|
width: '400px',
|
||||||
height: '1200px',
|
height: '200px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -5,
|
||||||
opacity: 0.6,
|
|
||||||
filter: 'blur(0.1px)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Zgoraj desno */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '8%',
|
|
||||||
right: '2%',
|
|
||||||
transform: 'rotate(30deg)',
|
|
||||||
width: '2240px',
|
|
||||||
height: '1120px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.55,
|
|
||||||
filter: 'blur(0.1px)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Sredina levo */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '40%',
|
|
||||||
left: '1%',
|
|
||||||
transform: 'rotate(18deg)',
|
|
||||||
width: '2080px',
|
|
||||||
height: '1040px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.5,
|
|
||||||
filter: 'blur(0.1px)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Sredina desno */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '45%',
|
|
||||||
right: '1%',
|
|
||||||
transform: 'rotate(-35deg)',
|
|
||||||
width: '1920px',
|
|
||||||
height: '960px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.45,
|
|
||||||
filter: 'blur(0.1px)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Spodaj levo */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '75%',
|
|
||||||
left: '2%',
|
|
||||||
transform: 'rotate(-15deg)',
|
|
||||||
width: '1760px',
|
|
||||||
height: '880px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.4,
|
opacity: 0.4,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.5px)'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/* Spodaj desno */}
|
<img
|
||||||
<div
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'fixed',
|
||||||
top: '80%',
|
top: '15%',
|
||||||
right: '3%',
|
right: '5%',
|
||||||
transform: 'rotate(22deg)',
|
transform: 'rotate(30deg)',
|
||||||
width: '1600px',
|
width: '350px',
|
||||||
height: '800px',
|
height: '175px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -5,
|
||||||
opacity: 0.35,
|
opacity: 0.35,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.5px)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: '50%',
|
||||||
|
left: '2%',
|
||||||
|
transform: 'rotate(18deg)',
|
||||||
|
width: '380px',
|
||||||
|
height: '190px',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: -5,
|
||||||
|
opacity: 0.3,
|
||||||
|
filter: 'blur(0.5px)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: '55%',
|
||||||
|
right: '3%',
|
||||||
|
transform: 'rotate(-35deg)',
|
||||||
|
width: '320px',
|
||||||
|
height: '160px',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: -5,
|
||||||
|
opacity: 0.25,
|
||||||
|
filter: 'blur(0.5px)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '10%',
|
||||||
|
left: '8%',
|
||||||
|
transform: 'rotate(-15deg)',
|
||||||
|
width: '360px',
|
||||||
|
height: '180px',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: -5,
|
||||||
|
opacity: 0.2,
|
||||||
|
filter: 'blur(0.5px)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '15%',
|
||||||
|
right: '6%',
|
||||||
|
transform: 'rotate(22deg)',
|
||||||
|
width: '300px',
|
||||||
|
height: '150px',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: -5,
|
||||||
|
opacity: 0.15,
|
||||||
|
filter: 'blur(0.5px)'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -235,59 +203,37 @@ export default function Home() {
|
|||||||
|
|
||||||
{/* Footer with large triangle design */}
|
{/* Footer with large triangle design */}
|
||||||
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
|
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
|
||||||
{/* go4.video logoti v footerju - ogromni v ozadju */}
|
{/* go4.video logoti v footerju - img elementi */}
|
||||||
<div
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '10px',
|
top: '15px',
|
||||||
right: '8%',
|
right: '10%',
|
||||||
transform: 'rotate(-20deg)',
|
transform: 'rotate(-20deg)',
|
||||||
width: '2000px',
|
width: '200px',
|
||||||
height: '1000px',
|
height: '100px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -2,
|
||||||
opacity: 0.7,
|
opacity: 0.4,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.3px)'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<img
|
||||||
|
src={go4LogoPath}
|
||||||
|
alt=""
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: '10px',
|
bottom: '15px',
|
||||||
left: '5%',
|
left: '8%',
|
||||||
transform: 'rotate(30deg)',
|
transform: 'rotate(30deg)',
|
||||||
width: '1760px',
|
width: '180px',
|
||||||
height: '880px',
|
height: '90px',
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
zIndex: -10,
|
zIndex: -2,
|
||||||
opacity: 0.65,
|
opacity: 0.35,
|
||||||
filter: 'blur(0.1px)'
|
filter: 'blur(0.3px)'
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'rotate(-45deg)',
|
|
||||||
width: '1440px',
|
|
||||||
height: '720px',
|
|
||||||
backgroundImage: `url(${go4LogoPath})`,
|
|
||||||
backgroundSize: 'contain',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: -10,
|
|
||||||
opacity: 0.3,
|
|
||||||
filter: 'blur(0.2px)'
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user