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

@@ -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 
-        <div className="bg-logo-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}></div>
+          style={{
-        <div className="bg-logo-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}></div>
+            position: 'absolute',
-        <div className="bg-logo-medium" style={{top: '5%', left: '75%', transform: 'rotate(40deg)'}}></div>
+            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 */}

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 
-        <div className="bg-logo-medium" style={{top: '40%', left: '2%', transform: 'rotate(15deg)'}}></div>
+          style={{
-        <div className="bg-logo-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}></div>
+            position: 'absolute',
-        <div className="bg-logo-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}></div>
+            top: '10%', 
-        <div className="bg-logo-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}></div>
+            right: '5%', 
-        <div className="bg-logo-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}></div>
+            transform: 'rotate(-20deg)',
-        <div className="bg-logo-medium" style={{top: '15%', left: '80%', transform: 'rotate(45deg)'}}></div>
+            width: 'clamp(200px, 20vw, 400px)',
-        <div className="bg-logo-small" style={{top: '50%', right: '8%', transform: 'rotate(-35deg)'}}></div>
+            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>

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 
-      <div className="bg-logo-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}></div>
+        style={{
-      <div className="bg-logo-small" style={{top: '15%', left: '5%', transform: 'rotate(50deg)'}}></div>
+          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">