mycelium/www_mycelium_society
12
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

membership

Browse Source
This commit is contained in:
Emre
2025-09-30 14:19:44 +03:00
parent 751a69804a
commit dd19d9c377
4 changed files with 61 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/free.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 KiB

97
src/components/MembershipOptions.jsx
View File

@@ -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'
: 'text-gray-500 hover:text-gray-300'
? 'btn-primary-selected'
: ''
}`}
>
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'
: 'text-gray-500 hover:text-gray-300'
? 'btn-primary-selected'
: ''
}`}
>
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-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>
<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>
@@ -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>
</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>
<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>
@@ -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"
style={{
background: 'linear-gradient(to right, rgb(6, 182, 212), rgb(34, 211, 238))',
borderRadius: '16px'
}}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="w-full btn-primary animate-pulse-glow whitespace-nowrap font-mono"
onClick={() => setShowSocietyTerminal(true)}
>
Become a Digital Resident
</motion.button>
@@ -366,6 +355,10 @@ const MembershipOptions = () => {
</div>
</motion.div>
)}
{showSocietyTerminal && (
<SocietyTerminal showTerminal={showSocietyTerminal} setShowTerminal={setShowSocietyTerminal} />
)}
</div>
</section>
);

1
src/components/ScrollingCards.jsx
View File

@@ -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 = [

6
src/index.css
View File

@@ -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;