From 83a93bf190124ea41785f98ee9621f35da70add2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:36:44 +0000
Subject: [PATCH] Add dynamic background logo elements to enhance page visuals

Replaced static background logo classes with inline styles for dynamic positioning and sizing, importing the logo asset to all relevant pages (VideoPage, Home, NotFound).

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/ccgD6tv
---
 client/src/pages/VideoPage.tsx |  77 ++++++++++++++++-
 client/src/pages/home.tsx      | 153 +++++++++++++++++++++++++++++++--
 client/src/pages/not-found.tsx |  58 ++++++++++++-
 3 files changed, 273 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index ff4c6ea..24a4f34 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useRoute } from "wouter";
 import { type Video } from "@shared/schema";
+import go4LogoPath from "@assets/go4_1756394900352.png";
 // Helper functions
 const formatViews = (views: number): string => {
   if (views >= 1000000) return `${(views / 1000000).toFixed(1)}M`;
@@ -161,10 +162,78 @@ export default function VideoPage() {
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
         {/* Background logo decorations */}
-        <div className="bg-logo-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}></div>
-        <div className="bg-logo-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}></div>
-        <div className="bg-logo-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}></div>
-        <div className="bg-logo-medium" style={{top: '5%', left: '75%', transform: 'rotate(40deg)'}}></div>
+        <div 
+          style={{
+            position: 'absolute',
+            top: '20%', 
+            right: '8%', 
+            transform: 'rotate(-15deg)',
+            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: '60%', 
+            left: '5%', 
+            transform: 'rotate(20deg)',
+            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: '80%', 
+            right: '30%', 
+            transform: 'rotate(-25deg)',
+            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: '5%', 
+            left: '75%', 
+            transform: 'rotate(40deg)',
+            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 className="flex flex-col lg:flex-row gap-6 relative z-10">
           {/* Main video section */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 9606bd6..86d6ff1 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import SearchHeader from "@/components/search-header";
 import VideoGrid from "@/components/video-grid";
+import go4LogoPath from "@assets/go4_1756394900352.png";
 
 
 interface VideosResponse {
@@ -85,14 +86,150 @@ 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 className="bg-logo-large" style={{top: '10%', right: '5%', transform: 'rotate(-20deg)'}}></div>
-        <div className="bg-logo-medium" style={{top: '40%', left: '2%', transform: 'rotate(15deg)'}}></div>
-        <div className="bg-logo-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}></div>
-        <div className="bg-logo-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}></div>
-        <div className="bg-logo-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}></div>
-        <div className="bg-logo-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}></div>
-        <div className="bg-logo-medium" style={{top: '15%', left: '80%', transform: 'rotate(45deg)'}}></div>
-        <div className="bg-logo-small" style={{top: '50%', right: '8%', transform: 'rotate(-35deg)'}}></div>
+        <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%', 
+            transform: 'rotate(45deg)',
+            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: '50%', 
+            right: '8%', 
+            transform: 'rotate(-35deg)',
+            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)'
+          }}
+        />
         
         {/* Large geometric triangles */}
         <div className="absolute top-10 right-10 w-0 h-0 border-l-[100px] border-l-transparent border-r-[100px] border-r-transparent border-b-[150px] border-b-blue-400/8 rotate-12 z-0"></div>
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 69940a4..4ba1db5 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -1,6 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import go4LogoPath from "@assets/go4_1756394900352.png";
 
 export default function NotFound() {
   return (
@@ -38,9 +39,60 @@ export default function NotFound() {
       </div>
 
       {/* Background logo decorations */}
-      <div className="bg-logo-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}></div>
-      <div className="bg-logo-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}></div>
-      <div className="bg-logo-small" style={{top: '15%', left: '5%', transform: 'rotate(50deg)'}}></div>
+      <div 
+        style={{
+          position: 'absolute',
+          top: '30%', 
+          right: '10%', 
+          transform: 'rotate(-18deg)',
+          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: '70%', 
+          left: '8%', 
+          transform: 'rotate(22deg)',
+          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: '15%', 
+          left: '5%', 
+          transform: 'rotate(50deg)',
+          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)'
+        }}
+      />
       
       {/* 404 Content */}
       <div className="flex items-center justify-center min-h-[60vh] px-4 relative z-10">