membership

src/components/MembershipOptions.jsx

@@ -1,9 +1,11 @@
 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('explorer');
+  const [selectedPlan, setSelectedPlan] = useState('resident');
+  const [showSocietyTerminal, setShowSocietyTerminal] = useState(false);
 
   const fadeInUp = {
     hidden: { opacity: 0, y: 30 },
@@ -16,7 +18,7 @@ const MembershipOptions = () => {
   };
 
   return (
-    <section className="min-h-screen bg-black text-white py-16 px-4" style={{fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'}}>
+    <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">
         {/* Toggle Pills - Centered */}
         <motion.div 
@@ -28,20 +30,20 @@ const MembershipOptions = () => {
           <div className="inline-flex bg-zinc-900 rounded-full p-1">
             <button
               onClick={() => setSelectedPlan('explorer')}
-              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 min-w-[120px] ${
+              className={`btn-primary animate-pulse-glow text-sm px-4 py-2 transition-all duration-200 ${
                 selectedPlan === 'explorer'
-                  ? 'bg-gray-300 text-black' 
+                  ? 'btn-primary-selected'
-                  : 'text-gray-500 hover:text-gray-300'
+                  : ''
               }`}
             >
               EXPLORER
             </button>
             <button
               onClick={() => setSelectedPlan('resident')}
-              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 min-w-[120px] ${
+              className={`btn-primary animate-pulse-glow text-sm px-4 py-2 transition-all duration-200 ${
                 selectedPlan === 'resident'
-                  ? 'bg-gray-300 text-black' 
+                  ? 'btn-primary-selected'
-                  : 'text-gray-500 hover:text-gray-300'
+                  : ''
               }`}
             >
               RESIDENT
@@ -66,23 +68,12 @@ const MembershipOptions = () => {
             }}>
               <div className="flex items-center justify-between gap-12">
                 <div className="flex-1">
-                  <h1 className="text-4xl lg:text-5xl font-bold mb-4">Explorer Tier</h1>
+                  <h1 className="text-4xl lg:text-5xl font-bold mb-3">Explorer Tier</h1>                
                   <div className="mb-3">
-                    <span className="text-4xl font-bold">0€</span>
+                    <span className="text-4xl font-bold">Free</span>
-                    <span className="text-gray-400 text-lg">/month</span>
-                  </div>
-                  <p className="text-gray-400 text-base">Mycelium Network Entry Point</p>
-                </div>
-                
-                {/* Mascot/Character Placeholder */}
-                <div className="hidden lg:flex flex-shrink-0 items-center justify-center">
-                  <div className="w-64 h-52 flex items-center justify-center">
-                    <div className="w-36 h-36 rounded-full flex items-center justify-center" style={{
-                      background: 'radial-gradient(circle, rgba(34, 211, 238, 0.3), rgba(6, 182, 212, 0.1))'
-                    }}>
-                      <span className="text-gray-500 text-sm">Network Mascot</span>
-                    </div>
                   </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>
@@ -93,12 +84,15 @@ const MembershipOptions = () => {
                 Everything you're getting with Explorer Tier
               </h2>
 
-              <div className="max-w-4xl mx-auto" style={{
+              <div
+                className="mb-12"
+                style={{
                   background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
-                border: '1px solid rgba(34, 211, 238, 0.25)',
+                  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">
@@ -192,6 +186,16 @@ const MembershipOptions = () => {
                 </div>
               </div>
             </div>
+
+            {/* CTA Button for Explorer Tier */}
+            <div className="flex justify-center">
+              <motion.button
+                className="w-full btn-primary animate-pulse-glow whitespace-nowrap font-mono"
+                onClick={() => setShowSocietyTerminal(true)}
+              >
+                Explore the Network
+              </motion.button>
+            </div>
           </motion.div>
         )}
 
@@ -213,25 +217,12 @@ const MembershipOptions = () => {
               <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>
-                  <span className="text-cyan-400 text-sm font-semibold">with legal standing</span>
                   <div className="mt-5 mb-3">
                     <span className="text-4xl font-bold">10$</span>
-                    <span className="text-gray-400 text-lg">/month*</span>
+                    <span className="text-gray-400 text-lg">/month</span>
-                  </div>
-                  <p className="text-gray-400 text-sm">120$ for 2 years*</p>
-                  <p className="text-gray-400 text-sm">only for Early Adopters - limited</p>
-                </div>
-                
-                {/* Mascot/Character Placeholder */}
-                <div className="hidden lg:flex flex-shrink-0 items-center justify-center">
-                  <div className="w-64 h-52 flex items-center justify-center">
-                    <div className="grid grid-cols-2 gap-3">
-                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(22, 163, 74, 0.3)'}}></div>
-                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(34, 211, 238, 0.3)'}}></div>
-                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(147, 51, 234, 0.3)'}}></div>
-                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(234, 88, 12, 0.3)'}}></div>
-                    </div>
                   </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>
@@ -250,12 +241,15 @@ const MembershipOptions = () => {
                 What You Get as a Digital Resident
               </h2>
 
-              <div style={{
+              <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">
@@ -350,15 +344,10 @@ const MembershipOptions = () => {
               </div>
 
               {/* CTA Button */}
-              <div className="mt-8">
+              <div className="flex justify-center">
                 <motion.button
-                  className="w-full py-4 text-black text-base font-bold transition-all duration-300"
+                  className="w-full btn-primary animate-pulse-glow whitespace-nowrap font-mono"
-                  style={{
+                  onClick={() => setShowSocietyTerminal(true)}
-                    background: 'linear-gradient(to right, rgb(6, 182, 212), rgb(34, 211, 238))',
-                    borderRadius: '16px'
-                  }}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
                 >
                   Become a Digital Resident
                 </motion.button>
@@ -366,6 +355,10 @@ const MembershipOptions = () => {
             </div>
           </motion.div>
         )}
+
+        {showSocietyTerminal && (
+          <SocietyTerminal showTerminal={showSocietyTerminal} setShowTerminal={setShowSocietyTerminal} />
+        )}
       </div>
     </section>
   );

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/index.css

@@ -133,6 +133,12 @@ button {
   transform: scale(1.05);
 }
 
+.btn-primary-selected {
+  background: #00d9ff;
+  color: #000000;
+  border: 2px solid #00d9ff;
+}
+
 /* Container widths */
 .container-width {
   max-width: 56rem;