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

@@ -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,
+          opacity: 0.35,
-          filter: 'blur(0.5px)'
+          filter: 'blur(0.3px)'
-        }}
-      />
-      <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)'
         }}
       />
       

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-left: 35px solid transparent;
-  border-right: 20px solid transparent;
+  border-right: 35px solid transparent;
-  border-bottom: 30px solid rgba(59, 130, 246, 0.03);
+  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-left: 25px solid transparent;
-  border-right: 15px solid transparent;
+  border-right: 25px solid transparent;
-  border-bottom: 25px solid rgba(147, 51, 234, 0.03);
+  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-left: 30px solid transparent;
-  border-right: 18px solid transparent;
+  border-right: 30px solid transparent;
-  border-bottom: 28px solid rgba(59, 130, 246, 0.03);
+  border-bottom: 40px solid rgba(6, 182, 212, 0.08);
   transform: rotate(45deg);
-  z-index: -1;
+  z-index: 1;
 }
 
 .floating-triangles {

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 */}
+        {/* Background logo decorations - go4.video logos bolj vidni */}
-        <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)'
-          }}
-        />
         <div 
           style={{
             position: 'absolute',
             top: '15%', 
-            left: '80%', 
+            right: '85%', 
-            transform: 'rotate(45deg)',
+            transform: 'rotate(-20deg)',
-            width: 'clamp(150px, 15vw, 300px)',
+            width: '180px',
-            height: 'clamp(75px, 7.5vw, 150px)',
+            height: '90px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 0,
-            opacity: 0.12,
+            opacity: 0.35,
-            filter: 'blur(0.5px)'
+            filter: 'blur(0.3px)'
           }}
         />
         <div 
           style={{
             position: 'absolute',
             top: '50%', 
-            right: '8%', 
+            left: '85%', 
-            transform: 'rotate(-35deg)',
+            transform: 'rotate(15deg)',
-            width: 'clamp(100px, 10vw, 200px)',
+            width: '160px',
-            height: 'clamp(50px, 5vw, 100px)',
+            height: '80px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 0,
-            opacity: 0.08,
+            opacity: 0.3,
-            filter: 'blur(0.5px)'
+            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 */}
+        {/* Trikotniki na robovih - ne prekrivajo video kartic */}
-        <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-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 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 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 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>
+        <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', 
+            top: '15px', 
-            right: '15%', 
+            right: '12%', 
             transform: 'rotate(-20deg)',
-            width: '150px',
+            width: '170px',
-            height: '75px',
+            height: '85px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 1,
-            opacity: 0.25,
+            opacity: 0.45,
-            filter: 'blur(0.5px)'
+            filter: 'blur(0.2px)'
           }}
         />
         <div 
           style={{
             position: 'absolute',
-            bottom: '20px', 
+            bottom: '15px', 
-            left: '10%', 
+            left: '8%', 
             transform: 'rotate(30deg)',
-            width: '120px',
+            width: '140px',
-            height: '60px',
+            height: '70px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 1,
-            opacity: 0.2,
+            opacity: 0.4,
-            filter: 'blur(0.5px)'
+            filter: 'blur(0.2px)'
           }}
         />