Make the header stay in place when scrolling down the page

Update CSS to change the header's position from sticky to fixed, ensuring it remains visible at the top of the viewport. Add padding to the body to prevent content from being obscured by the fixed header.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/BesXHXW

client/src/pages/home.tsx

@@ -73,7 +73,7 @@ export default function Home() {
   }, [searchQuery, refetch]);
 
   return (
-    <div style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
+    <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
       {/* STICKY HEADER */}
       <div className="header-sticky bg-transparent overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">