Update header styles and navigation links across multiple pages
Applies consistent header styling and navigation links to VideoPage and FolxStadlPage, including larger logo, updated spacing, and hover effects for navigation items. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic
parent
49fe3c5f89
commit
1ef55beaa5
@ -59,15 +59,15 @@ export default function FolxStadlPage() {
|
||||
<div className="min-h-screen bg-bunny-dark text-white has-fixed-header">
|
||||
{/* Header */}
|
||||
<div className="header-sticky bg-transparent overflow-hidden">
|
||||
<div className="container py-4">
|
||||
<div className="container py-6">
|
||||
<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 className="flex items-center space-x-6 flex-1">
|
||||
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
|
||||
<div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[13px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
<h1 className="text-3xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -76,24 +76,27 @@ export default function FolxStadlPage() {
|
||||
{/* 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">
|
||||
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
Home
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
FOLX STADL
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search videos..."
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
if (e.target.value) setLocation(`/?search=${encodeURIComponent(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"
|
||||
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-48"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
</div>
|
||||
@ -119,8 +122,7 @@ export default function FolxStadlPage() {
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
{/* Mobile navigation links - horizontal */}
|
||||
<nav className="flex space-x-6 mb-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
@ -135,6 +137,13 @@ export default function FolxStadlPage() {
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile search - manjši */}
|
||||
|
||||
@ -238,15 +238,15 @@ export default function VideoPage() {
|
||||
<div className="min-h-screen bunny-dark static-triangles has-fixed-header">
|
||||
{/* Header */}
|
||||
<div className="header-sticky bg-transparent overflow-hidden">
|
||||
<div className="container py-4">
|
||||
<div className="container py-6">
|
||||
<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 className="flex items-center space-x-6 flex-1">
|
||||
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
|
||||
<div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[13px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
<h1 className="text-3xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -255,24 +255,27 @@ export default function VideoPage() {
|
||||
{/* 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">
|
||||
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
Home
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
FOLX STADL
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Videos suchen..."
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
if (e.target.value) window.location.href = `/?search=${encodeURIComponent(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"
|
||||
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-48"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
</div>
|
||||
@ -298,8 +301,7 @@ export default function VideoPage() {
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
{/* Mobile navigation links - horizontal */}
|
||||
<nav className="flex space-x-6 mb-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
@ -314,13 +316,19 @@ export default function VideoPage() {
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile search - manjši */}
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Suchen..."
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user