footer

src/App.jsx

@@ -8,6 +8,7 @@ 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">
@@ -34,6 +35,8 @@ function App() {
         <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 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 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 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 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 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 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 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/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/referral.jsx

@@ -17,7 +17,7 @@ const Referral = () => {
   };
 
   return (
-    <section ref={ref} className="section-padding bg-dark-gradient">
+    <section id="referral" ref={ref} className="section-padding bg-dark-gradient">
       <motion.div 
         className="w-full"
         initial="hidden"
@@ -49,19 +49,9 @@ const Referral = () => {
         {/* 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">
+            <motion.div variants={fadeInUp} className="pl-6 py-4 text-center">
-              <p className="text-lg text-gray-300 leading-relaxed">
+              <p className="text-lg text-gray-300 leading-relaxed mx-auto max-w-3xl">
-                <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.
+                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>
-            <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>

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; }
@@ -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;
@@ -377,3 +381,86 @@ button {
 .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 */
+}