membership page
This commit is contained in:
Emre
10
package-lock.json
generated
10
package-lock.json
generated
@@ -12,6 +12,7 @@
|
||||
"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",
|
||||
@@ -2360,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",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"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",
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import React from 'react';
|
||||
import MembershipOptions from './MembershipOptions';
|
||||
|
||||
const ComingSoon = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
|
||||
<h1 className="text-5xl font-bold">Coming Soon!</h1>
|
||||
</div>
|
||||
);
|
||||
return <MembershipOptions />;
|
||||
};
|
||||
|
||||
export default ComingSoon;
|
||||
@@ -21,13 +21,13 @@ function Header() {
|
||||
<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-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
|
||||
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-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
|
||||
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>
|
||||
@@ -39,7 +39,7 @@ function Header() {
|
||||
onClick={() => setShowTerminal(true)}
|
||||
className="btn-primary animate-pulse-glow whitespace-nowrap"
|
||||
>
|
||||
Enter the Network
|
||||
> Enter the Network
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
374
src/components/MembershipOptions.jsx
Normal file
374
src/components/MembershipOptions.jsx
Normal file
@@ -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';
|
||||
|
||||
const MembershipOptions = () => {
|
||||
const [selectedPlan, setSelectedPlan] = useState('explorer');
|
||||
|
||||
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-16 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
|
||||
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={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 min-w-[120px] ${
|
||||
selectedPlan === 'explorer'
|
||||
? 'bg-gray-300 text-black'
|
||||
: '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] ${
|
||||
selectedPlan === 'resident'
|
||||
? 'bg-gray-300 text-black'
|
||||
: 'text-gray-500 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
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-4">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>
|
||||
</div>
|
||||
</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="max-w-4xl mx-auto" style={{
|
||||
background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
|
||||
border: '1px solid rgba(34, 211, 238, 0.25)',
|
||||
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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</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 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="mt-8">
|
||||
<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 }}
|
||||
>
|
||||
Become a Digital Resident
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MembershipOptions;
|
||||
@@ -82,7 +82,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; }
|
||||
@@ -342,6 +342,7 @@ button {
|
||||
|
||||
/* 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 */
|
||||
|
||||
Reference in New Issue
Block a user