referral

src/App.jsx

@@ -6,7 +6,8 @@ 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';
+import MembershipOptions from './components/MembershipOptions';
+import Referral from './components/referral';
 
 const Home = () => (
   <div className="App">
@@ -18,13 +19,20 @@ const Home = () => (
   </div>
 );
 
+const MembershipPage = () => (
+  <div className="App">
+    <MembershipOptions />
+    <Referral />
+  </div>
+);
+
 function App() {
   return (
     <Router>
       <Header /> {/* Render Header here */}
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/membership" element={<ComingSoon />} />
+        <Route path="/membership" element={<MembershipPage />} />
       </Routes>
     </Router>
   );

src/components/ComingSoon.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import MembershipOptions from './MembershipOptions';
-
-const ComingSoon = () => {
-  return <MembershipOptions />;
-};
-
-export default ComingSoon;

src/components/Hero.jsx

@@ -75,7 +75,7 @@ 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.ourworld.tf/mycelium_society/docs/" target="_blank" rel="noopener noreferrer">
               <motion.button
                 className="btn-primary"
                 whileHover={{ scale: 1.05 }}

src/components/MembershipOptions.jsx

@@ -20,6 +20,13 @@ const MembershipOptions = () => {
   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"

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://docs.ourworld.tf/mycelium_society/docs/';
                 }, 1000);
             }
         }

src/components/referral.jsx

@@ -0,0 +1,74 @@
+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 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 paid 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="border-l-2 border-bright-cyan pl-6 py-4">
+              <p className="text-lg text-gray-300 leading-relaxed">
+                <span className="text-teal-400 mr-2">✓</span> Digital Residents receive $20 credited to their resident wallet for each new member they invite who upgrades to paid membership.
+              </p>
+            </motion.div>
+            <motion.div variants={fadeInUp} className="border-l-2 border-bright-cyan pl-6 py-4">
+              <p className="text-lg text-gray-300 leading-relaxed">
+                <span className="text-teal-400 mr-2">✓</span> Rewards are capped at 20 referrals per resident (maximum $400).
+              </p>
+            </motion.div>
+            <motion.div variants={fadeInUp} className="border-l-2 border-bright-cyan pl-6 py-4">
+              <p className="text-lg text-gray-300 leading-relaxed">
+                <span className="text-teal-400 mr-2">✓</span> Referral credits are applied once new members complete their paid residency registration.
+              </p>
+            </motion.div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+};
+
+export default Referral;