sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update header and home page to use image elements for background logos

Browse Source 
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 2025-08-28 15:47:30 +00:00
parent bf16f236a7
commit 0fe8fa5ae7
2 changed files with 127 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
client/src/components/search-header.tsx
View File

@ -45,59 +45,37 @@ 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 v ozadju */}
<div
style={{
position: 'absolute',
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
{/* go4.video logoti v headerju - img elementi */}
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '5px',
left: '20%',
transform: 'rotate(25deg)',
width: '1440px',
height: '720px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
right: '20%',
transform: 'rotate(-15deg)',
width: '180px',
height: '90px',
pointerEvents: 'none',
zIndex: -10,
opacity: 0.65,
filter: 'blur(0.1px)'
zIndex: -2,
opacity: 0.3,
filter: 'blur(0.3px)'
}}
/>
<div
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '8px',
right: '45%',
transform: 'rotate(-35deg)',
width: '1280px',
height: '640px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
left: '25%',
transform: 'rotate(25deg)',
width: '160px',
height: '80px',
pointerEvents: 'none',
zIndex: -10,
opacity: 0.6,
filter: 'blur(0.1px)'
zIndex: -2,
opacity: 0.25,
filter: 'blur(0.3px)'
}}
/>

266
client/src/pages/home.tsx
View File

@ -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">
{/* DEBUG: Test slika - naj bo vidna */}
{/* Background logo decorations - fiksni veliki go4.video logoti v ozadju */}
{/* Veliki logoti z img elementi namesto backgroundImage */}
<img
src={go4LogoPath}
alt="go4 logo test"
alt=""
style={{
position: 'absolute',
top: '10px',
left: '10px',
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%',
position: 'fixed',
top: '10%',
left: '5%',
transform: 'rotate(-25deg)',
width: '2400px',
height: '1200px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
width: '400px',
height: '200px',
pointerEvents: 'none',
zIndex: -10,
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,
zIndex: -5,
opacity: 0.4,
filter: 'blur(0.1px)'
filter: 'blur(0.5px)'
}}
/>
{/* Spodaj desno */}
<div
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '80%',
right: '3%',
transform: 'rotate(22deg)',
width: '1600px',
height: '800px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
position: 'fixed',
top: '15%',
right: '5%',
transform: 'rotate(30deg)',
width: '350px',
height: '175px',
pointerEvents: 'none',
zIndex: -10,
zIndex: -5,
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 className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* go4.video logoti v footerju - ogromni v ozadju */}
<div
{/* go4.video logoti v footerju - img elementi */}
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '10px',
right: '8%',
top: '15px',
right: '10%',
transform: 'rotate(-20deg)',
width: '2000px',
height: '1000px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
width: '200px',
height: '100px',
pointerEvents: 'none',
zIndex: -10,
opacity: 0.7,
filter: 'blur(0.1px)'
zIndex: -2,
opacity: 0.4,
filter: 'blur(0.3px)'
}}
/>
<div
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
bottom: '10px',
left: '5%',
bottom: '15px',
left: '8%',
transform: 'rotate(30deg)',
width: '1760px',
height: '880px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
width: '180px',
height: '90px',
pointerEvents: 'none',
zIndex: -10,
opacity: 0.65,
filter: 'blur(0.1px)'
}}
/>
<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)'
zIndex: -2,
opacity: 0.35,
filter: 'blur(0.3px)'
}}
/>