sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve header structure and styling for better responsiveness

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 21:07:12 +00:00
parent dd5452afba
commit 22574ea118
1 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/pages/home.tsx
View File

@ -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">