Initial commit

app/components/layout/Header.tsx

@@ -0,0 +1,33 @@
+import { Link } from "react-router";
+
+export function Header() {
+  return (
+    <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
+      <div className="max-w-6xl mx-auto px-4 py-3 h-auto min-h-16 flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div className="bg-blue-600 p-2 rounded-lg shrink-0">
+            <img
+              src="https://img.icons8.com/ios-filled/50/ffffff/flash-on.png"
+              className="w-5 h-5 object-contain"
+              alt="logo"
+            />
+          </div>
+          <div>
+            <h1 className="font-bold text-lg leading-tight">
+              Distributed Systems and Blockchain
+            </h1>
+            <p className="text-xs text-slate-500">Brainster Next College</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <p className="text-sm text-slate-500 hidden md:block">Chain: Next Testnet</p>
+
+          <Link to="/status" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm">
+            Connect Wallet
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}