From 38274ff979509f831fafe761d595de7f236ad11c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:41:54 +0000
Subject: [PATCH] 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
---
 client/src/components/search-header.tsx |  44 ++---
 client/src/index.css                    |  24 +--
 client/src/pages/home.tsx               | 204 ++++++++----------------
 3 files changed, 100 insertions(+), 172 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 909cc09..55c97e2 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -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)'
         }}
       />
       
diff --git a/client/src/index.css b/client/src/index.css
index 1644100..214160c 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -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 {
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 633bb34..3e7d06f 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -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)'
           }}
         />