From 1ef55beaa56b7222759538bc653f1475e278e8ff Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:51:07 +0000
Subject: [PATCH] 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
---
 client/src/pages/FolxStadlPage.tsx | 41 +++++++++++++++++-----------
 client/src/pages/VideoPage.tsx     | 44 ++++++++++++++++++------------
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index fcbe289..8bb162a 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -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 */}
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index b80e83b..0b68dad 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -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"