Init

frontend/src/components/Header.jsx

@@ -0,0 +1,37 @@
+import { Search, User, Volume2 } from 'lucide-react'
+
+export default function Header() {
+  return (
+    <header className="bg-white border-b border-gray-200 px-4 py-3 flex-shrink-0">
+      <div className="max-w-[1400px] mx-auto flex items-center justify-between gap-6">
+        {/* Left: Logo */}
+        <div className="flex items-center gap-3 flex-shrink-0">
+          <div className="w-8 h-8 bg-[#f4b840] rounded-lg flex items-center justify-center">
+            <Volume2 size={18} className="text-white" />
+          </div>
+          <h1 className="text-lg font-bold text-gray-900">VoiceVault</h1>
+        </div>
+
+        {/* Center: Search Bar */}
+        <div className="flex-1 max-w-2xl">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
+            <input
+              type="text"
+              placeholder="Search archives, stories, history..."
+              className="w-full bg-white border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
+            />
+          </div>
+        </div>
+
+        {/* Right: Login */}
+        <div className="flex items-center gap-3 flex-shrink-0">
+          <button className="bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] px-4 py-2 rounded text-sm font-medium flex items-center gap-2">
+            <User size={16} />
+            Log In
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}