From 0998b6daf6fb5cb23baa8e80eb21fc65c3ad7ef0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:43:22 +0000
Subject: [PATCH] Increase size and reposition background logos with varied
 rotations

Adjusts dimensions, positions, and rotation angles of background logos for improved visibility and aesthetic placement across different screen areas.

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/W476LqQ
---
 client/src/components/search-header.tsx |  44 +++--
 client/src/pages/home.tsx               | 206 +++++++++++++++---------
 2 files changed, 164 insertions(+), 86 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 55c97e2..fbfb6c1 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -45,41 +45,59 @@ 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 - bolj vidni */}
+      {/* go4.video logoti v headerju - veliki in vidni */}
       <div 
         style={{
           position: 'absolute',
-          top: '5px', 
-          right: '8%', 
+          top: '2px', 
+          right: '15%', 
           transform: 'rotate(-15deg)',
-          width: '140px',
-          height: '70px',
+          width: '200px',
+          height: '100px',
           backgroundImage: `url(${go4LogoPath})`,
           backgroundSize: 'contain',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'center',
           pointerEvents: 'none',
           zIndex: 1,
-          opacity: 0.4,
-          filter: 'blur(0.3px)'
+          opacity: 0.7,
+          filter: 'blur(0.1px)'
+        }}
+      />
+      <div 
+        style={{
+          position: 'absolute',
+          top: '5px', 
+          left: '20%', 
+          transform: 'rotate(25deg)',
+          width: '180px',
+          height: '90px',
+          backgroundImage: `url(${go4LogoPath})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          pointerEvents: 'none',
+          zIndex: 1,
+          opacity: 0.65,
+          filter: 'blur(0.1px)'
         }}
       />
       <div 
         style={{
           position: 'absolute',
           top: '8px', 
-          left: '12%', 
-          transform: 'rotate(25deg)',
-          width: '120px',
-          height: '60px',
+          right: '45%', 
+          transform: 'rotate(-35deg)',
+          width: '160px',
+          height: '80px',
           backgroundImage: `url(${go4LogoPath})`,
           backgroundSize: 'contain',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'center',
           pointerEvents: 'none',
           zIndex: 1,
-          opacity: 0.35,
-          filter: 'blur(0.3px)'
+          opacity: 0.6,
+          filter: 'blur(0.1px)'
         }}
       />
       
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 3e7d06f..0a7f934 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -85,15 +85,111 @@ 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 bolj vidni */}
+        {/* Background logo decorations - veliki go4.video logoti po različnih kotih */}
+        {/* Zgoraj levo */}
         <div 
           style={{
             position: 'absolute',
-            top: '15%', 
-            right: '85%', 
-            transform: 'rotate(-20deg)',
-            width: '180px',
-            height: '90px',
+            top: '5%', 
+            left: '3%', 
+            transform: 'rotate(-25deg)',
+            width: '300px',
+            height: '150px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.6,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        {/* Zgoraj desno */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '8%', 
+            right: '2%', 
+            transform: 'rotate(30deg)',
+            width: '280px',
+            height: '140px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.55,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        {/* Sredina levo */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '40%', 
+            left: '1%', 
+            transform: 'rotate(18deg)',
+            width: '260px',
+            height: '130px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.5,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        {/* Sredina desno */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '45%', 
+            right: '1%', 
+            transform: 'rotate(-35deg)',
+            width: '240px',
+            height: '120px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.45,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        {/* Spodaj levo */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '75%', 
+            left: '2%', 
+            transform: 'rotate(-15deg)',
+            width: '220px',
+            height: '110px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.4,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        {/* Spodaj desno */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '80%', 
+            right: '3%', 
+            transform: 'rotate(22deg)',
+            width: '200px',
+            height: '100px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
@@ -101,61 +197,7 @@ export default function Home() {
             pointerEvents: 'none',
             zIndex: 0,
             opacity: 0.35,
-            filter: 'blur(0.3px)'
-          }}
-        />
-        <div 
-          style={{
-            position: 'absolute',
-            top: '50%', 
-            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.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)'
+            filter: 'blur(0.1px)'
           }}
         />
         
@@ -178,40 +220,58 @@ 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 - bolj vidni */}
+        {/* go4.video logoti v footerju - veliki in vidni */}
         <div 
           style={{
             position: 'absolute',
-            top: '15px', 
-            right: '12%', 
+            top: '10px', 
+            right: '8%', 
             transform: 'rotate(-20deg)',
-            width: '170px',
-            height: '85px',
+            width: '250px',
+            height: '125px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 1,
-            opacity: 0.45,
-            filter: 'blur(0.2px)'
+            opacity: 0.7,
+            filter: 'blur(0.1px)'
           }}
         />
         <div 
           style={{
             position: 'absolute',
-            bottom: '15px', 
-            left: '8%', 
+            bottom: '10px', 
+            left: '5%', 
             transform: 'rotate(30deg)',
-            width: '140px',
-            height: '70px',
+            width: '220px',
+            height: '110px',
             backgroundImage: `url(${go4LogoPath})`,
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             pointerEvents: 'none',
             zIndex: 1,
-            opacity: 0.4,
+            opacity: 0.65,
+            filter: 'blur(0.1px)'
+          }}
+        />
+        <div 
+          style={{
+            position: 'absolute',
+            top: '50%', 
+            left: '50%', 
+            transform: 'rotate(-45deg)',
+            width: '180px',
+            height: '90px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.3,
             filter: 'blur(0.2px)'
           }}
         />