534 lines
20 KiB
JavaScript
534 lines
20 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom'
|
|
import './App.css'
|
|
import { Button } from './components/ui/button'
|
|
import BlogPage from './blog/BlogPage'
|
|
import BlogPost from './blog/BlogPost'
|
|
import mushroomImage from './assets/mushroom.png'
|
|
import RegistrationTerminal from './components/RegistrationTerminal'
|
|
|
|
function App() {
|
|
const [showTerminal, setShowTerminal] = useState(false)
|
|
const [networkNodes, setNetworkNodes] = useState([])
|
|
const [showConfirmation, setShowConfirmation] = useState(false)
|
|
|
|
// Terminal typing effect
|
|
const [terminalText, setTerminalText] = useState('')
|
|
|
|
const terminalCommands = [
|
|
'> connecting to mycelium network...',
|
|
'> establishing secure p2p connection...',
|
|
'> welcome to the digital frontier',
|
|
]
|
|
|
|
useEffect(() => {
|
|
let typingTimer
|
|
|
|
if (showTerminal) {
|
|
// Reset terminal text when opening
|
|
setTerminalText('')
|
|
|
|
let index = 0
|
|
let charIndex = 0
|
|
let isDeleting = false
|
|
|
|
const type = () => {
|
|
if (index < terminalCommands.length) {
|
|
if (!isDeleting && charIndex <= terminalCommands[index].length) {
|
|
setTerminalText(terminalCommands[index].substring(0, charIndex))
|
|
charIndex++
|
|
typingTimer = setTimeout(type, 20)
|
|
} else if (isDeleting && charIndex >= 0) {
|
|
setTerminalText(terminalCommands[index].substring(0, charIndex))
|
|
charIndex--
|
|
typingTimer = setTimeout(type, 10)
|
|
} else {
|
|
isDeleting = !isDeleting
|
|
if (!isDeleting) {
|
|
index++
|
|
typingTimer = setTimeout(type, 500)
|
|
} else {
|
|
typingTimer = setTimeout(type, 300)
|
|
}
|
|
}
|
|
} else {
|
|
// After the last prompt, show the confirmation dialog
|
|
setTerminalText('> mycelial network patterns')
|
|
setTimeout(() => {
|
|
setShowTerminal(false)
|
|
setShowConfirmation(true)
|
|
}, 1000)
|
|
}
|
|
}
|
|
|
|
// Start the typing effect
|
|
typingTimer = setTimeout(type, 30)
|
|
|
|
// Clean up the timer when component unmounts or showTerminal changes
|
|
return () => clearTimeout(typingTimer)
|
|
} else {
|
|
// Reset terminal state when closing
|
|
setTerminalText('')
|
|
}
|
|
}, [showTerminal])
|
|
|
|
// Generate network nodes
|
|
useEffect(() => {
|
|
const generateNodes = () => {
|
|
const nodes = []
|
|
const nodeCount = 15
|
|
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
nodes.push({
|
|
id: i,
|
|
x: Math.random() * 100,
|
|
y: Math.random() * 100,
|
|
size: Math.random() * 20 + 10,
|
|
pulseSpeed: Math.random() * 2 + 1
|
|
})
|
|
}
|
|
|
|
setNetworkNodes(nodes)
|
|
}
|
|
|
|
generateNodes()
|
|
}, [])
|
|
|
|
return (
|
|
<Router>
|
|
<div className="app">
|
|
<Routes>
|
|
<Route path="/blog/:id" element={<BlogPost />} />
|
|
<Route path="/blog" element={<BlogPage />} />
|
|
<Route path="/register" element={<RegistrationPage />} />
|
|
<Route path="/" element={<HomePage
|
|
showTerminal={showTerminal}
|
|
setShowTerminal={setShowTerminal}
|
|
terminalText={terminalText}
|
|
networkNodes={networkNodes}
|
|
showConfirmation={showConfirmation}
|
|
setShowConfirmation={setShowConfirmation}
|
|
/>} />
|
|
</Routes>
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
function HomePage({ showTerminal, setShowTerminal, terminalText, networkNodes, showConfirmation, setShowConfirmation }) {
|
|
const navigate = useNavigate();
|
|
|
|
const handleConfirmRegistration = () => {
|
|
setShowConfirmation(false);
|
|
navigate('/register');
|
|
};
|
|
|
|
const handleCancelRegistration = () => {
|
|
setShowConfirmation(false);
|
|
};
|
|
|
|
return (
|
|
<div className="app">
|
|
{/* Network Nodes Background */}
|
|
<div className="network-nodes">
|
|
{networkNodes.map(node => (
|
|
<motion.div
|
|
key={node.id}
|
|
className="network-node"
|
|
style={{
|
|
left: `${node.x}%`,
|
|
top: `${node.y}%`,
|
|
width: `${node.size}px`,
|
|
height: `${node.size}px`
|
|
}}
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
opacity: [0.3, 0.7, 0.3]
|
|
}}
|
|
transition={{
|
|
duration: node.pulseSpeed,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Terminal Overlay */}
|
|
{showTerminal && (
|
|
<div className="terminal-overlay">
|
|
<div className="terminal">
|
|
<div className="terminal-header">
|
|
<div className="terminal-title">MYCELIUM NETWORK TERMINAL</div>
|
|
<button className="terminal-close" onClick={() => setShowTerminal(false)}>
|
|
Close Terminal
|
|
</button>
|
|
</div>
|
|
<div className="terminal-body">
|
|
<div id="terminal-content">{terminalText}<span className="terminal-cursor"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Registration Confirmation Dialog */}
|
|
{showConfirmation && (
|
|
<div className="terminal-overlay">
|
|
<div className="terminal">
|
|
<div className="terminal-header">
|
|
<div className="terminal-title">MYCELIUM NETWORK CONFIRMATION</div>
|
|
<button className="terminal-close" onClick={handleCancelRegistration}>
|
|
Close Terminal
|
|
</button>
|
|
</div>
|
|
<div className="terminal-body">
|
|
<div className="font-mono text-green-400 mb-6">
|
|
<p>{'>'} Do you want to register for the Mycelium Network?</p>
|
|
<p className="mt-2">{'>'} Registration is required to access the network.</p>
|
|
</div>
|
|
<div className="flex space-x-4 mt-4">
|
|
<Button
|
|
onClick={handleConfirmRegistration}
|
|
className="bg-transparent border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-bold px-4 py-2 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/50"
|
|
>
|
|
{'>'} Yes, Register
|
|
</Button>
|
|
<Button
|
|
onClick={handleCancelRegistration}
|
|
className="bg-transparent border-2 border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black font-bold px-4 py-2 transition-all duration-300 hover:shadow-lg hover:shadow-gray-400/50"
|
|
>
|
|
{'>'} Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Hero Section */}
|
|
<section className="hero-section">
|
|
<div className="container mx-auto px-6 py-24 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1 }}
|
|
className="logo-container mb-8"
|
|
>
|
|
<div className="logo-box"></div>
|
|
</motion.div>
|
|
|
|
<div className="relative flex justify-center items-center">
|
|
<img
|
|
src={mushroomImage}
|
|
alt="Mushroom"
|
|
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full w-100 h-100 object-contain z-10"
|
|
/>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.2 }}
|
|
className="text-6xl md:text-7xl font-bold mb-4 relative z-0 mt-2"
|
|
style={{ fontFamily: 'monospace' }}
|
|
>
|
|
MYCELIUM <span className="text-cyan-400">SOCIETY</span>
|
|
</motion.h1>
|
|
</div>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.4 }}
|
|
className="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto"
|
|
>
|
|
The Digital Frontier. A Virtual Nation for the Digital Age.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.6 }}
|
|
>
|
|
<Button
|
|
className="bg-transparent border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-bold px-8 py-4 text-lg transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/50"
|
|
onClick={() => setShowTerminal(true)}
|
|
>
|
|
<span className="mr-2">{'>'}</span> ENTER THE NETWORK
|
|
</Button>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1 }}
|
|
className="scroll-indicator mt-16"
|
|
>
|
|
<div className="scroll-arrow"></div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manifesto Section */}
|
|
<section className="manifesto-section py-24 relative">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto text-center"
|
|
>
|
|
<h2 className="text-5xl font-bold mb-8 text-cyan-400" style={{ fontFamily: 'monospace' }}>
|
|
THE MANIFESTO
|
|
</h2>
|
|
<div className="space-y-8 text-lg leading-relaxed">
|
|
<p className="text-gray-300">
|
|
We are not just a network — we are a <strong className="text-white">virtual nation for the digital age</strong>,
|
|
where each member operates as their own sovereign entity within a recognized legal framework.
|
|
</p>
|
|
<p className="text-gray-300">
|
|
By combining resilient peer-to-peer infrastructure with cooperative governance,
|
|
we enable individuals to thrive as entrepreneurs, creators, and collaborators
|
|
while strengthening the global digital economy.
|
|
</p>
|
|
<p className="text-cyan-400 text-xl font-bold">
|
|
Building the future together, legally and transparently.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Core Pillars Section */}
|
|
<section className="core-pillars-section py-24 bg-gray-900">
|
|
<div className="container mx-auto px-6">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-5xl font-bold mb-16 text-center text-cyan-400"
|
|
style={{ fontFamily: 'monospace' }}
|
|
>
|
|
CORE PILLARS
|
|
</motion.h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="pillar-card bg-black p-8 rounded-lg"
|
|
>
|
|
<div className="pillar-icon text-cyan-400 text-4xl mb-6">
|
|
<i className="fas fa-network-wired"></i>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-white">TECHNOLOGY</h3>
|
|
<p className="text-gray-300">
|
|
Decentralized P2P cloud infrastructure with end-to-end encryption, AI integration, unbreakable network and distributed trust layer.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="pillar-card bg-black p-8 rounded-lg"
|
|
>
|
|
<div className="pillar-icon text-cyan-400 text-4xl mb-6">
|
|
<i className="fas fa-balance-scale"></i>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-white">GOVERNANCE</h3>
|
|
<p className="text-gray-300">
|
|
Every member operates as their own legal entity with a flat 5% tax rate in our digital free zone. With integrated legal dispute resolution also for AI agents.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="pillar-card bg-black p-8 rounded-lg"
|
|
>
|
|
<div className="pillar-icon text-cyan-400 text-4xl mb-6">
|
|
<i className="fas fa-chart-line"></i>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-white">ECONOMY</h3>
|
|
<p className="text-gray-300">
|
|
Sovereign web infrastructure with unbreakable websites, Personal AI Agents, Web3 integration, and marketplace for frictionless global trade.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Blog Section Preview */}
|
|
<section className="blog-preview-section py-24">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-4xl font-bold mb-4 text-cyan-400" style={{ fontFamily: 'monospace' }}>
|
|
THE FRONTIER JOURNAL
|
|
</h2>
|
|
<p className="text-xl text-gray-300">
|
|
Insights and updates from our digital nation
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="blog-card bg-gray-900 border border-cyan-400/30 rounded-lg overflow-hidden"
|
|
>
|
|
<div className="p-6">
|
|
<div className="text-sm text-gray-400 mb-2">2025-09-24 • Mycelium Society</div>
|
|
<h3 className="text-2xl font-bold mb-2 text-white">Welcome to the Digital Frontier</h3>
|
|
<p className="text-gray-300 mb-4">
|
|
An introduction to the Mycelium Society and our vision for a sovereign digital nation.
|
|
</p>
|
|
<Link to="/blog/welcome-to-the-frontier" className="text-cyan-400 hover:underline">
|
|
Read more →
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="blog-card bg-gray-900 border border-cyan-400/30 rounded-lg overflow-hidden"
|
|
>
|
|
<div className="p-6">
|
|
<div className="text-sm text-gray-400 mb-2">2025-09-23 • Tech Team</div>
|
|
<h3 className="text-2xl font-bold mb-2 text-white">The Technology Behind Mycelium Society</h3>
|
|
<p className="text-gray-300 mb-4">
|
|
An exploration of the decentralized infrastructure powering our digital nation.
|
|
</p>
|
|
<Link to="/blog/technology-behind-mycelium" className="text-cyan-400 hover:underline">
|
|
Read more →
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Link to="/blog">
|
|
<Button className="bg-transparent border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-bold px-8 py-3 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/50">
|
|
VIEW ALL POSTS
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
<section className="cta-section py-24 bg-black">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<h2 className="text-4xl font-bold mb-8 text-white" style={{ fontFamily: 'monospace' }}>
|
|
READY TO JOIN THE <span className="text-cyan-400">FRONTIER</span>?
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
Join visionary entrepreneurs and creators building the next generation of digital infrastructure.
|
|
Become a founding member of our sovereign digital nation.
|
|
</p>
|
|
<Link to="/register">
|
|
<Button
|
|
className="bg-transparent border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-bold px-12 py-4 text-lg transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/50"
|
|
>
|
|
<i className="fas fa-bolt mr-2"></i> REQUEST ACCESS
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 px-6 bg-gray-900 border-t border-cyan-400/30">
|
|
<div className="max-w-6xl mx-auto text-center">
|
|
<div className="mb-4">
|
|
<Link to="/" className="text-gray-400 hover:text-cyan-400 mx-3">Home</Link>
|
|
<Link to="/blog" className="text-gray-400 hover:text-cyan-400 mx-3">Blog</Link>
|
|
</div>
|
|
<p className="text-gray-500 font-mono">
|
|
© 2025 Mycelium Society. The Digital Frontier.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RegistrationPage() {
|
|
const [showRegistrationTerminal, setShowRegistrationTerminal] = useState(true)
|
|
const [registrationSuccess, setRegistrationSuccess] = useState(false)
|
|
const navigate = useNavigate()
|
|
|
|
const handleRegister = (data) => {
|
|
// In a real application, you would send this data to your backend
|
|
// For demonstration purposes, we'll just simulate a successful registration
|
|
console.log('Registration data:', data)
|
|
setRegistrationSuccess(true)
|
|
|
|
// In a real app, you might redirect the user or update the app state
|
|
// For now, we'll just keep the terminal open to show the success message
|
|
}
|
|
|
|
const handleCloseTerminal = () => {
|
|
setShowRegistrationTerminal(false)
|
|
navigate('/')
|
|
}
|
|
|
|
return (
|
|
<div className="app">
|
|
<RegistrationTerminal
|
|
showTerminal={showRegistrationTerminal}
|
|
setShowTerminal={handleCloseTerminal}
|
|
onRegister={handleRegister}
|
|
/>
|
|
|
|
{/* Additional content could go here if needed */}
|
|
{registrationSuccess && (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
|
<div className="bg-gray-900 border border-cyan-400/30 rounded-lg p-8 max-w-md w-full mx-4">
|
|
<h2 className="text-2xl font-bold text-cyan-400 mb-4 font-mono">Registration Successful</h2>
|
|
<p className="text-gray-300 mb-6 font-mono">
|
|
Welcome to the Mycelium Network. Your digital identity has been created.
|
|
</p>
|
|
<Button
|
|
onClick={() => {
|
|
setRegistrationSuccess(false)
|
|
setShowRegistrationTerminal(false)
|
|
navigate('/')
|
|
}}
|
|
className="bg-transparent border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-bold px-4 py-2 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/50 w-full font-mono"
|
|
>
|
|
{'>'} Continue to Network
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|