header
This commit is contained in:
Emre
54
package-lock.json
generated
54
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"framer-motion": "^12.23.22",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.3",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -1684,6 +1685,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
|
||||
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -2601,6 +2611,44 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.9.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
|
||||
"integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.9.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.3.tgz",
|
||||
"integrity": "sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.9.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@@ -2669,6 +2717,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
|
||||
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"framer-motion": "^12.23.22",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.3",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
17
src/App.jsx
17
src/App.jsx
@@ -1,12 +1,14 @@
|
||||
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';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
const Home = () => (
|
||||
<div className="App">
|
||||
<Hero />
|
||||
<Manifesto />
|
||||
@@ -15,6 +17,17 @@ function App() {
|
||||
<CallToAction />
|
||||
</div>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Header /> {/* Render Header here */}
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/membership" element={<ComingSoon />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
11
src/components/ComingSoon.jsx
Normal file
11
src/components/ComingSoon.jsx
Normal file
@@ -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;
|
||||
59
src/components/Header.jsx
Normal file
59
src/components/Header.jsx
Normal file
@@ -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;
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user