header

src/App.jsx

@@ -1,19 +1,32 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Header from './components/Header';
 import Hero from './components/Hero';
 import Manifesto from './components/Manifesto';
 import CorePillars from './components/CorePillars';
 import Foundations from './components/Foundations';
 import ForYou from './components/ForYou';
 import CallToAction from './components/CallToAction';
+import ComingSoon from './components/ComingSoon';
+
+const Home = () => (
+  <div className="App">
+    <Hero />
+    <Manifesto />
+    <Foundations />
+    <ForYou />
+    <CallToAction />
+  </div>
+);
 
 function App() {
   return (
-    <div className="App">
-      <Hero />
-      <Manifesto />
-      <Foundations />
-      <ForYou />
-      <CallToAction />
-    </div>
+    <Router>
+      <Header /> {/* Render Header here */}
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/membership" element={<ComingSoon />} />
+      </Routes>
+    </Router>
   );
 }
 

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;

src/index.css

@@ -324,3 +324,49 @@ button {
 .focus\:ring-0:focus {
   box-shadow: none;
 }
+
+/* Custom utility for no-underline */
+.no-underline {
+  text-decoration: none;
+}
+
+/* Missing Tailwind-like utility classes */
+.h-16 { height: 4rem; } /* 16 * 0.25rem = 4rem */
+.min-w-fit { min-width: fit-content; }
+.tracking-tight { letter-spacing: -0.025em; }
+.whitespace-nowrap { white-space: nowrap; }
+.rounded { border-radius: 0.25rem; } /* 4px */
+
+.bg-green-500 { background-color: #22c55e; } /* A common green-500 shade */
+.border-green-500\/30 { border-color: rgba(34, 197, 94, 0.3); } /* Green-500 with 30% opacity */
+
+/* Hover effects */
+.hover\:text-green-400:hover { color: #4ade80; }
+.hover\:bg-green-400:hover { background-color: #4ade80; }
+
+/* Transitions */
+.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
+.duration-200 { transition-duration: 200ms; }
+
+/* Spacing utilities (similar to Tailwind's space-x) */
+.space-x-4 > * + * { margin-left: 1rem; }
+.space-x-6 > * + * { margin-left: 1.5rem; }
+.space-x-8 > * + * { margin-left: 2rem; }
+.space-x-12 > * + * { margin-left: 3rem; }
+.space-x-16 > * + * { margin-left: 4rem; }
+
+/* Responsive spacing */
+@media (min-width: 640px) {
+  .sm\:space-x-6 > * + * { margin-left: 1.5rem; }
+  .sm\:space-x-12 > * + * { margin-left: 3rem; }
+}
+@media (min-width: 1024px) {
+  .lg\:space-x-8 > * + * { margin-left: 2rem; }
+  .lg\:space-x-16 > * + * { margin-left: 4rem; }
+}
+
+/* Responsive text sizes (already present, but ensuring consistency) */
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }