Spaces:
Sleeping
Sleeping
File size: 1,993 Bytes
08f4311 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | export default function HowItWorks() {
const steps = [
{ num: '01', title: 'Launch Your Economy', desc: 'Deploy your token, liquidity vault, and NFT collection contracts in a single transaction.' },
{ num: '02', title: 'Distribute Tokens', desc: 'Share your tokens with fans. Every transfer includes a small tax that flows to the liquidity vault.' },
{ num: '03', title: 'Whales Join Vault', desc: 'Large holders deposit tokens and base assets into the vault to earn rewards from taxes and royalties.' },
{ num: '04', title: 'Mint & Trade NFTs', desc: 'Create exclusive NFT content. Royalties from secondary sales automatically flow back to the vault.' },
];
return (
<section className="features" id="how-it-works" style={{ paddingTop: '2rem' }}>
<div className="section-header">
<h2>How It <span className="accent">Works</span></h2>
<p>From zero to a full creator economy in four steps</p>
</div>
<div style={{ maxWidth: '800px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
{steps.map((step) => (
<div key={step.num} className="glass-card" style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', padding: '1.5rem 2rem' }}>
<div style={{
minWidth: '56px', height: '56px', borderRadius: '14px',
background: 'linear-gradient(135deg, #C8FF00 0%, #228B22 100%)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
fontFamily: "'Space Mono', monospace", fontSize: '1.2rem', fontWeight: 700, color: '#050508',
}}>
{step.num}
</div>
<div>
<h3 style={{ fontSize: '1.2rem', marginBottom: '0.35rem', color: '#F8FAF0' }}>{step.title}</h3>
<p style={{ color: 'rgba(248,250,240,0.5)', lineHeight: 1.5, fontSize: '0.95rem' }}>{step.desc}</p>
</div>
</div>
))}
</div>
</section>
);
}
|