From 22574ea118280894fec892f15aac1a7eeda8f3ba Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:07:12 +0000
Subject: [PATCH] Improve header structure and styling for better
 responsiveness

Refactors the header component in `home.tsx` to use inline styles and simplify the structure for improved responsiveness, while retaining core navigation and search functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Z1wmn8z
---
 client/src/pages/home.tsx | 61 ++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8d9b322..5109089 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -74,48 +74,31 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
-      {/* Header */}
-      <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            {/* Left side - Logo */}
-            <div className="flex items-center space-x-4">
-              <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
-                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
-                </div>
-                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
-              </Link>
-            </div>
-
-            {/* Right side - Navigation + Search */}
-            <div className="flex items-center gap-4">
-              {/* Desktop navigation */}
-              <div className="hidden md:flex items-center space-x-6">
-                <nav className="flex space-x-6">
-                  <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
-                    Home
-                  </Link>
-                  <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
-                    FOLX STADL
-                  </Link>
-                </nav>
-                
-                <div className="relative">
-                  <Input
-                    type="search"
-                    placeholder="Search videos..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
-                  />
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                </div>
-              </div>
+      {/* Simple Header - MUST scroll with page */}
+      <header style={{position: 'static', display: 'block', width: '100%', padding: '16px 0', background: 'transparent'}}>
+        <div style={{maxWidth: '1200px', margin: '0 auto', padding: '0 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+          {/* Logo */}
+          <Link href="/" style={{display: 'flex', alignItems: 'center', gap: '8px', color: 'white', textDecoration: 'none'}}>
+            <div style={{width: '36px', height: '36px', background: 'linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%)', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.1)'}}>
+              <div style={{width: '0', height: '0', borderLeft: '10px solid white', borderTop: '7px solid transparent', borderBottom: '7px solid transparent', marginLeft: '4px'}}></div>
             </div>
+            <h1 style={{fontSize: '24px', fontWeight: 'bold', color: 'white', margin: '0'}}>go4.video</h1>
+          </Link>
+          
+          {/* Navigation */}
+          <div style={{display: 'flex', alignItems: 'center', gap: '24px'}}>
+            <Link href="/" style={{color: 'white', textDecoration: 'none'}}>Home</Link>
+            <Link href="/folx-stadl" style={{color: 'white', textDecoration: 'none'}}>FOLX STADL</Link>
+            <input 
+              type="search"
+              placeholder="Search videos..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              style={{background: 'white', border: '1px solid #ccc', borderRadius: '8px', padding: '8px 12px', width: '200px', fontSize: '14px'}}
+            />
           </div>
         </div>
-      </div>
+      </header>
 
       <main className="w-full pt-0 pb-8 relative">