From d1b2c3ee9040e09ad47bc921a88d28f27829cd06 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 20:06:33 +0000
Subject: [PATCH] Improve navigation by using a dedicated routing library

Replace all anchor tags with Link components from the 'wouter' library to enable client-side routing and prevent page reloads between sections.

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/W2v7sFm
---
 client/src/components/search-header.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 7f6b497..96ea6c1 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback } from "react";
 import { Search, Play, Menu, Grid3X3, List, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Link } from "wouter";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import go4LogoPath from "@assets/go4_1756394900352.png";
 
@@ -55,22 +56,22 @@ export default function SearchHeader({
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="flex items-center justify-between h-20">
           <div className="flex items-center space-x-4">
-            <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+            <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>
-            </a>
+            </Link>
           </div>
           
           <div className="hidden md:flex items-center space-x-6">
             <nav className="flex space-x-6">
-              <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+              <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
                 Home
-              </a>
-              <a href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
+              </Link>
+              <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
                 FOLX STADL
-              </a>
+              </Link>
             </nav>
             
             <div className="relative">
@@ -103,22 +104,22 @@ export default function SearchHeader({
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
             {/* Mobile Navigation */}
             <nav className="flex flex-col space-y-3">
-              <a 
+              <Link 
                 href="/" 
                 className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                 data-testid="link-mobile-home"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 Home
-              </a>
-              <a 
+              </Link>
+              <Link 
                 href="/folx-stadl" 
                 className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                 data-testid="link-mobile-folx-stadl"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 FOLX STADL
-              </a>
+              </Link>
             </nav>
             
             {/* Mobile Search */}