fixes

package-lock.json

@@ -12,8 +12,10 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.22",
+        "lucide-react": "^0.544.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-router-dom": "^7.9.3",
         "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
@@ -1684,6 +1686,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",
@@ -2350,6 +2361,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2601,6 +2621,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 +2727,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",

package.json

@@ -14,8 +14,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.22",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.3",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

src/App.jsx

@@ -1,19 +1,43 @@
+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 MembershipOptions from './components/MembershipOptions';
+import Referral from './components/referral';
+import Footer from './components/Footer';
+
+const Home = () => (
+  <div className="App">
+    <Hero />
+    <Manifesto />
+    <Foundations />
+    <ForYou />
+    <CallToAction />
+  </div>
+);
+
+const MembershipPage = () => (
+  <div className="App">
+    <MembershipOptions />
+    <Referral />
+  </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={<MembershipPage />} />
+      </Routes>
+      <div className="mt-8 footer-separator" />
+      <Footer />
+    </Router>
   );
 }
 

src/components/Footer.jsx

@@ -0,0 +1,116 @@
+import { motion } from 'framer-motion';
+
+const Footer = () => {
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+  };
+
+  const staggerContainer = {
+    visible: { transition: { staggerChildren: 0.1 } }
+  };
+
+  return (
+    <footer className="bg-gray-900 py-20">
+      <motion.div
+        className="max-w-7xl mx-auto px-6"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={staggerContainer}
+      >
+        <div className="flex items-start mb-12">
+          <motion.div variants={fadeInUp} className="w-full sm:w-1/2">
+            <h3 className="text-3xl md:text-4xl font-bold text-white mb-6 leading-tight font-mono">
+              Stay connected. <br /> Spread the culture.
+            </h3>
+
+            <div
+              className="flex space-x-6 mt-8"
+              style={{ position: 'relative', zIndex: 50 }}
+            >
+              <a
+                href="https://t.me/+-qm4EFOqvZFlMTMx"
+                className="social-circle"
+                aria-label="Telegram"
+                title="Join us on Telegram"
+                target="_blank"
+                rel="noopener noreferrer external"
+                style={{ position: 'relative', zIndex: 50, pointerEvents: 'auto' }}
+              >
+                <img
+                  src="https://cdn.simpleicons.org/telegram/000000"
+                  alt="Telegram"
+                  width="22"
+                  height="22"
+                  style={{ pointerEvents: 'none' }}
+                />
+              </a>
+              <a
+                href="https://x.com/myceliums0ciety"
+                className="social-circle"
+                aria-label="X (Twitter)"
+                title="Follow us on X"
+                target="_blank"
+                rel="noopener noreferrer external"
+                style={{ position: 'relative', zIndex: 50, pointerEvents: 'auto' }}
+              >
+                <img
+                  src="https://cdn.simpleicons.org/x/000000"
+                  alt="X"
+                  width="22"
+                  height="22"
+                  style={{ pointerEvents: 'none' }}
+                />
+              </a>
+            </div>
+          </motion.div>
+
+          <div className="w-full sm:w-1/2 flex justify-end gap-12 mt-8 sm:mt-0">
+            <motion.div variants={fadeInUp} className="w-48">
+              <div className="text-left" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="/#manifesto" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">MISSION</a>
+                </p>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="/#foundations" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">FOUNDATION</a>
+                </p>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="/#foryou" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">USERS</a>
+                </p>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="/membership" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">MEMBERSHIP</a>
+                </p>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="/membership#referral" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">REFERRAL</a>
+                </p>
+              </div>
+            </motion.div>
+
+            <motion.div variants={fadeInUp} className="w-48">
+              <div className="text-left" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="https://docs.mycelium.tf" target="_blank" rel="noopener noreferrer" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">DOCS</a>
+                </p>
+                <p className="text-white font-mono uppercase tracking-wide text-xxs">
+                  <a href="https://platform.mycelium.tf" target="_blank" rel="noopener noreferrer" className="no-underline text-white hover:text-bright-cyan transition-colors duration-200">MEMBER PLATFORM</a>
+                </p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+
+        <motion.div 
+          className="pt-8"
+          variants={fadeInUp}
+        >
+          <p className="text-white font-mono text-sm">
+            Mycelium Society. All Rights Reserved. {new Date().getFullYear()}
+          </p>
+        </motion.div>
+      </motion.div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/ForYou.jsx

@@ -17,7 +17,7 @@ const ForYou = () => {
   };
 
   return (
-    <section ref={ref} className="section-padding bg-dark-gradient">
+    <section id="foryou" ref={ref} className="section-padding bg-dark-gradient">
       <motion.div 
         className="w-full"
         initial="hidden"

src/components/Foundations.jsx

@@ -31,7 +31,7 @@ const Foundations = () => {
   ];
 
   return (
-    <section className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
+    <section id="foundations" className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
       <div className="max-w-7xl mx-auto px-6">
         {/* Header */}
         <div className="mb-16 text-center">

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-white 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-bright-cyan 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-bright-cyan 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/components/Hero.jsx

@@ -49,7 +49,7 @@ const Hero = () => {
           >
             <span className="text-white">Welcome to</span>
             <br />
-            <span className="text-bright-cyan">Mycelium Society</span>
+            <span className="text-white">Mycelium Society</span>
           </motion.h1>
 
           {/* Tagline */}
@@ -75,13 +75,13 @@ const Hero = () => {
             >
               > ENTER THE NETWORK
             </motion.button>
-            <a href="https://docs.ourworld.tf/mycelium_society_docs/docs/" target="_blank" rel="noopener noreferrer">
+            <a href="https://docs.mycelium.tf" target="_blank" rel="noopener noreferrer">
               <motion.button
                 className="btn-primary"
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                > LEARN MORE
+                > DOCS
               </motion.button>
             </a>
           </motion.div>

src/components/Manifesto.jsx

@@ -3,7 +3,7 @@
 const Manifesto = () => {
 
   return (
-    <section className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
+    <section id="manifesto" className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
       <div className="max-w-7xl mx-auto px-6">
         {/* Header */}
         <div className="mb-16 text-center">

src/components/MembershipOptions.jsx

@@ -0,0 +1,374 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Wallet, Database, Users, Cloud, Eye, X, Scale, MessageSquare, Bot, Lock, Check } from 'lucide-react';
+import SocietyTerminal from './SocietyTerminal';
+
+const MembershipOptions = () => {
+  const [selectedPlan, setSelectedPlan] = useState('resident');
+  const [showSocietyTerminal, setShowSocietyTerminal] = useState(false);
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+  };
+
+  const scaleIn = {
+    hidden: { scale: 0.95, opacity: 0 },
+    visible: { scale: 1, opacity: 1, transition: { duration: 0.4 } }
+  };
+
+  return (
+    <section className="min-h-screen bg-black text-white py-20 px-4" style={{fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'}}>
+      <div className="max-w-6xl mx-auto">
+        <motion.h1
+          className="text-5xl lg:text-6xl font-bold text-center mb-16 leading-tight"
+          initial={{ opacity: 0, y: -30 }}
+          animate={{ opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.2 } }}
+        >
+          Membership
+        </motion.h1>
+        {/* Toggle Pills - Centered */}
+        <motion.div 
+          className="flex justify-center mb-12"
+          initial="hidden"
+          animate="visible"
+          variants={fadeInUp}
+        >
+          <div className="inline-flex bg-zinc-900 rounded-full p-1">
+            <button
+              onClick={() => setSelectedPlan('explorer')}
+              className={`btn-primary animate-pulse-glow text-sm px-4 py-2 transition-all duration-200 ${
+                selectedPlan === 'explorer'
+                  ? 'btn-primary-selected'
+                  : ''
+              }`}
+            >
+              EXPLORER
+            </button>
+            <button
+              onClick={() => setSelectedPlan('resident')}
+              className={`btn-primary animate-pulse-glow text-sm px-4 py-2 transition-all duration-200 ${
+                selectedPlan === 'resident'
+                  ? 'btn-primary-selected'
+                  : ''
+              }`}
+            >
+              RESIDENT
+            </button>
+          </div>
+        </motion.div>
+
+        {/* Explorer Tier View */}
+        {selectedPlan === 'explorer' && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={scaleIn}
+            className="space-y-8"
+          >
+            {/* Main Hero Card */}
+            <div className="max-w-4xl mx-auto mb-12" style={{
+              background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+              border: '1px solid rgba(34, 211, 238, 0.25)',
+              padding: '48px 56px',
+              borderRadius: '24px'
+            }}>
+              <div className="flex items-center justify-between gap-12">
+                <div className="flex-1">
+                  <h1 className="text-4xl lg:text-5xl font-bold mb-3">Explorer Tier</h1>                
+                  <div className="mb-3">
+                    <span className="text-4xl font-bold">Free</span>
+                  </div>
+                  <span className="text-cyan-400 text-sm font-semibold">Mycelium Network Entry Point</span>
+                  <p className="text-gray-400 text-sm">No access to full suite</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Features Section */}
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-semibold mb-8 px-2">
+                Everything you're getting with Explorer Tier
+              </h2>
+
+              <div
+                className="mb-12"
+                style={{
+                  background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+                  border: '1px solid rgba(34, 211, 238, 0.35)',
+                  padding: '48px 56px',
+                  borderRadius: '24px'
+                }}
+              >
+                <div className="space-y-6">
+                  {/* Feature 1 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Wallet className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Resident wallet and decentralized domain name</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Get your own decentralized identity with a resident wallet and custom domain name on the authentic web.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 2 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Database className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">5 GB decentralized storage and bandwidth</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Store your data securely on the decentralized network with 5 GB of storage and bandwidth allocation.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 3 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Users className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Community access and product exploration</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Connect with the Mycelium Society community and explore the ecosystem of decentralized products.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 4 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Cloud className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Discounted VM hosting on decentralized cloud</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Get special pricing on virtual machine hosting using our decentralized cloud infrastructure.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 5 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Eye className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Ability to browse products (read-only/limited)</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Explore and browse the ecosystem products with limited read-only access to understand the platform.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Denied Access */}
+                  <div className="flex items-start gap-4 pt-6 border-t border-gray-800">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{backgroundColor: 'rgba(127, 29, 29, 0.2)'}}>
+                        <X className="w-4 h-4 text-red-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2 text-red-400">Full Access - denied</h3>
+                      <p className="text-gray-500 text-sm leading-relaxed">
+                        Upgrade to Digital Resident for full access to all Mycelium Society features.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* CTA Button for Explorer Tier */}
+            <div className="flex justify-center">
+              <motion.button
+                className="btn-primary animate-pulse-glow whitespace-nowrap"
+                onClick={() => setShowSocietyTerminal(true)}
+              >
+                Explore the Network
+              </motion.button>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Digital Resident View */}
+        {selectedPlan === 'resident' && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={scaleIn}
+            className="space-y-8"
+          >
+            {/* Main Hero Card */}
+            <div className="max-w-4xl mx-auto mb-12" style={{
+              background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+              border: '1px solid rgba(34, 211, 238, 0.25)',
+              padding: '48px 56px',
+              borderRadius: '24px'
+            }}>
+              <div className="flex items-center justify-between gap-12">
+                <div className="flex-1">
+                  <h1 className="text-4xl lg:text-5xl font-bold mb-3">Digital Resident</h1>
+                  <div className="mt-5 mb-3">
+                    <span className="text-4xl font-bold">10$</span>
+                    <span className="text-gray-400 text-lg">/month</span>
+                  </div>
+                  <span className="text-cyan-400 text-sm font-semibold">120$ for 2 year</span>
+                  <p className="text-gray-400 text-sm">for limited time for Early Adopters</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="max-w-4xl mx-auto mb-10 px-2">
+              <p className="text-gray-300 text-base">
+                Full access. Full sovereignty. A legal and technological framework to live, work, 
+                and build in the authentic web.
+              </p>
+            </div>
+
+            {/* Features Section */}
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-semibold mb-8 px-2">
+                What You Get as a Digital Resident
+              </h2>
+
+              <div
+                className="mb-12"
+                style={{
+                  background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+                  border: '1px solid rgba(34, 211, 238, 0.35)',
+                  padding: '48px 56px',
+                  borderRadius: '24px'
+                }}
+              >
+                <div className="space-y-6">
+                  {/* Feature 1 - Legal & Financial */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Scale className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Legal & Financial Framework</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Digital company license, freezone banking with fiat and crypto accounts, 5% flat tax rate, legal protection with dispute resolution, international operations support, and asset management capabilities.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 2 - Decentralized Cloud */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Cloud className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Mycelium Cloud Infrastructure</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        P2P hosting with quantum-safe storage, no vendor lock-in. A true alternative to AWS and Google Cloud that you control.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 3 - Communication Tools */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <MessageSquare className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Private Communication Suite</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Decentralized email compatible with existing systems, secure chat and docs with end-to-end encryption, replacing Slack and Google Workspace.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 4 - AI & Privacy */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Bot className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Private AI Agents & Secure Networking</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        AI agents that work exclusively for you, built-in privacy through P2P VPN infrastructure, and blockchain domains you actually own.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 5 - Storage & Identity */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Lock className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Unlimited storage and full sovereignty</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Unlimited decentralized storage, bandwidth, and complete control over your digital identity and data.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* All Tools Included */}
+                  <div className="flex items-start gap-4 pt-6 border-t border-cyan-400 border-opacity-20">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{backgroundColor: 'rgba(34, 211, 238, 0.2)'}}>
+                        <Check className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2 text-cyan-400">Everything from Explorer Tier included</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Plus all the tools and infrastructure to build, operate, and scale your digital presence with complete sovereignty.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* CTA Button */}
+              <div className="flex justify-center">
+                <motion.button
+                  className="btn-primary animate-pulse-glow whitespace-nowrap"
+                  onClick={() => setShowSocietyTerminal(true)}
+                >
+                  Become a Digital Resident
+                </motion.button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        {showSocietyTerminal && (
+          <SocietyTerminal showTerminal={showSocietyTerminal} setShowTerminal={setShowSocietyTerminal} />
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default MembershipOptions;

src/components/ScrollingCards.jsx

@@ -5,7 +5,6 @@ import nomadImg from '../assets/nomad.png';
 import creatorImg from '../assets/creator.png';
 import developerImg from '../assets/developer.png';
 import communityImg from '../assets/community.png';
-import mushroomImg from '../assets/mushroom.png';
 
 const ScrollingCards = () => {
   const cards = [

src/components/SocietyTerminal.jsx

@@ -27,7 +27,7 @@ function SocietyTerminal({ showTerminal, setShowTerminal }) {
                 }
             } else {
                 setTimeout(() => {
-                    window.location.href = 'https://docs.ourworld.tf/mycelium_society_docs/docs/';
+                    window.location.href = 'https://platform.mycelium.tf';
                 }, 1000);
             }
         }

src/components/referral.jsx

@@ -0,0 +1,64 @@
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import referralImage from '../assets/referral.png'; // Import the new image
+
+const Referral = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+  };
+
+  const staggerContainer = {
+    visible: { transition: { staggerChildren: 0.3 } }
+  };
+
+  return (
+    <section id="referral" ref={ref} className="section-padding bg-dark-gradient">
+      <motion.div 
+        className="w-full"
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        variants={staggerContainer}
+      >
+        {/* Section Header */}
+        <div className="container-width text-center mb-16">
+          <motion.h2 
+            className="text-4xl md:text-5xl font-bold text-white mb-8"
+            variants={fadeInUp}
+          >
+            Referral Program
+          </motion.h2>
+          
+          <motion.p 
+            className="text-lg md:text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto"
+            variants={fadeInUp}
+          >
+            Mycelium Society grows through its members. As a Digital Resident, you can invite others to join and help expand the community while earning rewards for successful referrals.
+          </motion.p>
+        </div>
+
+        {/* Referral Image */}
+        <motion.div variants={fadeInUp} className="container-width flex justify-center mb-16">
+          <img src={referralImage} alt="Referral Program" className="max-w-3xl mx-auto h-auto" />
+        </motion.div>
+
+        {/* Referral Details Block */}
+        <motion.div variants={fadeInUp} className="container-width max-w-4xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg border border-gray-700">
+          <div className="space-y-8">
+            <motion.div variants={fadeInUp} className="pl-6 py-4 text-center">
+              <p className="text-lg text-gray-300 leading-relaxed mx-auto max-w-3xl">
+                Digital Residents receive $20 credited to their wallets for each new member they invite who upgrades to paid membership. Rewards are capped at 20 referrals per resident (maximum $400). Referral credits are applied once new members complete their membership upgrade.
+              </p>
+            </motion.div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export default Referral;

src/index.css

@@ -46,6 +46,7 @@ button {
 .overflow-hidden { overflow: hidden; }
 .z-10 { z-index: 10; }
 .mx-auto { margin-left: auto; margin-right: auto; }
+.ml-auto { margin-left: auto; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-8 { margin-bottom: 2rem; }
 .mb-12 { margin-bottom: 3rem; }
@@ -82,7 +83,7 @@ button {
 
 /* Background classes */
 .bg-dark-gradient { background: #000000; }
-.bg-gray-900 { background-color: #111827; }
+.bg-gray-900 { background-color: #000000; }
 .bg-amber-100 { background-color: #fef3c7; }
 .bg-blue-100 { background-color: #dbeafe; }
 .bg-pink-100 { background-color: #fce7f3; }
@@ -112,6 +113,9 @@ button {
 .text-6xl { font-size: 3.75rem; }
 .text-7xl { font-size: 4.5rem; }
 
+/* Extra small text sizes */
+.text-xs { font-size: 0.75rem; }
+.text-xxs { font-size: 0.65rem; }
 /* Button styles */
 .btn-primary {
   background: transparent;
@@ -133,6 +137,12 @@ button {
   transform: scale(1.05);
 }
 
+.btn-primary-selected {
+  background: #00d9ff;
+  color: #000000;
+  border: 2px solid #00d9ff;
+}
+
 /* Container widths */
 .container-width {
   max-width: 56rem;
@@ -324,3 +334,133 @@ 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\:text-bright-cyan:hover { color: #00d9ff; }
+.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; }
+/* Flex utilities (small missing subset similar to Tailwind) */
+.flex-1 { flex: 1 1 0%; }
+.flex-row { flex-direction: row; }
+.items-start { align-items: flex-start; }
+.justify-between { justify-content: space-between; }
+
+/* Text alignment utilities */
+.text-right { text-align: right; }
+.text-left { text-align: left; }
+
+/* ===== Footer layout utilities (added) ===== */
+.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
+
+.w-1\/2 { width: 50%; }
+
+.justify-end { justify-content: flex-end; }
+
+.gap-12 { gap: 3rem; }
+
+.space-y-2 > * + * { margin-top: 0.5rem; }
+
+.mt-8 { margin-top: 2rem; }
+
+.border-t { border-top-width: 1px; }
+
+ /* Border color utilities */
+.border-white { border-color: #ffffff; }
+
+ /* Border style utility */
+.border-solid { border-style: solid; }
+
+ /* Tailwind-like color opacity utility used in footer borders */
+.border-bright-cyan\/20 { border-color: rgba(0, 217, 255, 0.2); }
+
+/* Simple social icon circles used in footer */
+.social-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background: #ffffff;
+  color: #000000;
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
+  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.social-circle:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 2px rgba(0,217,255,0.5) inset, 0 0 10px rgba(0,217,255,0.25);
+}
+
+/* ===== Footer responsive helpers ===== */
+.w-full { width: 100%; }
+
+@media (min-width: 640px) {
+  .sm\:w-1\/2 { width: 50%; }
+  .sm\:mt-0 { margin-top: 0; }
+}
+
+/* Missing utility used by footer links */
+.tracking-wide { letter-spacing: 0.05em; }
+
+/* Solid royal blue background to match reference footer */
+.bg-royal-blue { background-color: #0b1fd1; }
+.bg-bright-cyan { background-color: #00d9ff; }
+
+/* Footer separator (cyan blue, thinner) */
+.footer-separator {
+  width: 100%;
+  height: 1px;            /* Thinner line */
+  background: #ffffff;    /* Bright white */
+  opacity: 0.95;          /* Slightly toned */
+  box-shadow: 0 0 8px rgba(0, 217, 255, 0.25); /* subtle cyan glow */
+}