From ec397a188cd104954f706f2857cb00c45aae6ccf Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:53:53 +0000
Subject: [PATCH] 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
---
 client/src/components/search-header.tsx |  26 ++--
 client/src/pages/home.tsx               | 177 +++++++++++++++++-------
 2 files changed, 139 insertions(+), 64 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 8ef9773..43894c4 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -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)'
         }}
       />
       
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 66fe1f1..f913ed0 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -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)'
           }}
         />