From 79841d36be424f4cd3c2bfae293456f7e239c1d9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:33:56 +0000
Subject: [PATCH] Update page backgrounds with animated logo elements

Replaces static text background elements with dynamic, scaled, and rotated logo images across multiple pages (VideoPage, Home, NotFound) using new CSS classes (bg-logo-large, bg-logo-medium, bg-logo-small).

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/3OFqUb2
---
 client/src/index.css           | 62 +++++++++++++++-------------------
 client/src/pages/VideoPage.tsx | 15 +++-----
 client/src/pages/home.tsx      | 28 +++++----------
 client/src/pages/not-found.tsx | 11 +++---
 4 files changed, 46 insertions(+), 70 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index bde3caa..8dc296e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -302,59 +302,53 @@ input[data-testid*="search"]::placeholder {
   z-index: 1;
 }
 
-/* Background go4.video text decorations */
+/* Background go4.video logo decorations */
 .floating-triangles {
   position: relative;
   overflow: hidden;
 }
 
-.bg-text-large {
+.bg-logo-large {
   position: absolute;
-  font-family: 'Inter', sans-serif;
-  font-weight: 900;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.2));
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  font-size: clamp(120px, 15vw, 220px);
+  width: clamp(200px, 20vw, 400px);
+  height: clamp(100px, 10vw, 200px);
+  background-image: url('@assets/go4_1756394900352.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   pointer-events: none;
   z-index: 0;
   user-select: none;
-  white-space: nowrap;
-  text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
-  filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.3));
+  opacity: 0.15;
+  filter: blur(1px);
 }
 
-.bg-text-medium {
+.bg-logo-medium {
   position: absolute;
-  font-family: 'Inter', sans-serif;
-  font-weight: 700;
-  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(6, 182, 212, 0.18));
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  font-size: clamp(80px, 10vw, 150px);
+  width: clamp(150px, 15vw, 300px);
+  height: clamp(75px, 7.5vw, 150px);
+  background-image: url('@assets/go4_1756394900352.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   pointer-events: none;
   z-index: 0;
   user-select: none;
-  white-space: nowrap;
-  text-shadow: 0 0 25px rgba(147, 51, 234, 0.3);
-  filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.25));
+  opacity: 0.12;
+  filter: blur(0.5px);
 }
 
-.bg-text-small {
+.bg-logo-small {
   position: absolute;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.12));
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  font-size: clamp(50px, 6vw, 100px);
+  width: clamp(100px, 10vw, 200px);
+  height: clamp(50px, 5vw, 100px);
+  background-image: url('@assets/go4_1756394900352.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   pointer-events: none;
   z-index: 0;
   user-select: none;
-  white-space: nowrap;
-  text-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
-  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
+  opacity: 0.08;
+  filter: blur(0.5px);
 }
\ No newline at end of file
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 54a397d..ff4c6ea 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -160,16 +160,11 @@ export default function VideoPage() {
       </div>
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
-        {/* Background text decorations */}
-        <div className="bg-text-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}>
-          go4.video
-        </div>
+        {/* 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 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 035d100..9606bd6 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -84,25 +84,15 @@ export default function Home() {
       />
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
-        {/* Background text decorations - go4.video in different sizes */}
-        <div className="bg-text-large" style={{top: '10%', right: '5%', transform: 'rotate(-20deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-medium" style={{top: '40%', left: '2%', transform: 'rotate(15deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}>
-          go4.video
-        </div>
-        <div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}>
-          go4.video
-        </div>
+        {/* 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>
         
         {/* 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 522bc2c..69940a4 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -37,13 +37,10 @@ export default function NotFound() {
         </div>
       </div>
 
-      {/* Background text decorations */}
-      <div className="bg-text-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}>
-        go4.video
-      </div>
-      <div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}>
-        go4.video
-      </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>
       
       {/* 404 Content */}
       <div className="flex items-center justify-center min-h-[60vh] px-4 relative z-10">