header

src/components/ComingSoon.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ComingSoon = () => {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
+      <h1 className="text-5xl font-bold">Coming Soon!</h1>
+    </div>
+  );
+};
+
+export default ComingSoon;

src/components/Header.jsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import SocietyTerminal from './SocietyTerminal';
+
+function Header() {
+  const [showTerminal, setShowTerminal] = useState(false);
+
+    return (
+      <>
+        <header className="w-full bg-black border-b border-green-500/30 shadow-lg">
+          <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center h-16">
+              {/* Left: Mycelium Society */}
+              <div className="flex-shrink-0 min-w-fit">
+                <span className="text-xl sm:text-2xl font-bold text-bright-cyan font-mono tracking-tight whitespace-nowrap">
+                  Mycelium Society
+                </span>
+              </div>
+              
+              {/* Center: Home, Membership */}
+              <div className="flex items-center space-x-8 sm:space-x-12 lg:space-x-16 mx-auto">
+                <Link
+                  to="/"
+                  className="text-white font-mono hover:text-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
+                >
+                  Home
+                </Link>
+                <Link
+                  to="/membership"
+                  className="text-white font-mono hover:text-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
+                >
+                  Membership
+                </Link>
+              </div>
+
+              {/* Right: Enter the Network */}
+              <div className="flex items-center">
+                <button
+                  onClick={() => setShowTerminal(true)}
+                  className="btn-primary animate-pulse-glow whitespace-nowrap"
+                >
+                  Enter the Network
+                </button>
+              </div>
+            </div>
+          </nav>
+        </header>
+
+        {showTerminal && (
+          <SocietyTerminal
+            showTerminal={showTerminal}
+            setShowTerminal={setShowTerminal}
+          />
+        )}
+      </>
+    );
+  }
+  
+  export default Header;