291 lines
13 KiB
TypeScript
291 lines
13 KiB
TypeScript
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen">
|
|
{/* Hero */}
|
|
<section className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden px-4">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-void via-nothing to-less opacity-80" />
|
|
<div className="relative z-10 text-center max-w-4xl">
|
|
<p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
|
|
a movement against movements
|
|
</p>
|
|
<h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1">
|
|
<span className="text-anti-green">No</span>Fi
|
|
</h1>
|
|
<p className="font-caveat text-3xl md:text-5xl text-zen/70 mb-4">
|
|
No Finance. No Money. No Tokens.
|
|
</p>
|
|
<p className="font-caveat text-2xl md:text-3xl text-sloth mb-16">
|
|
Just Do Less.
|
|
</p>
|
|
<div className="inline-block border border-zen/20 px-8 py-4 hover:border-anti-green/50 transition-all duration-[3000ms] wobble-3">
|
|
<span className="font-caveat text-zen/50 text-lg">
|
|
Don't click anything. That's the spirit.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-8 text-zen/20 text-xs animate-drift">
|
|
scroll down (or don't)
|
|
</div>
|
|
</section>
|
|
|
|
{/* Anti-Whitepaper */}
|
|
<section className="py-32 px-4 bg-nothing">
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
|
|
The Anti-Whitepaper
|
|
</h2>
|
|
<div className="space-y-12 text-lg leading-relaxed text-zen/60">
|
|
<p>
|
|
For too long, the world has been plagued by <span className="strikethrough-animate text-zen">innovation</span>.
|
|
Every problem spawns ten solutions, each with its own token, governance model,
|
|
and 47-page whitepaper explaining why <em>this time</em> finance will be different.
|
|
</p>
|
|
<p>
|
|
It won't. So we stopped trying.
|
|
</p>
|
|
<p className="font-caveat text-zen/80 text-2xl border-l-2 border-anti-green pl-6 wobble-1">
|
|
NoFi is the radical proposition that the best financial system
|
|
is no financial system. The best token is no token.
|
|
The best thing to do with your money is to not have any.
|
|
</p>
|
|
<p>
|
|
We are not DeFi. We are not TradFi. We are not even CoFi
|
|
(though we love them dearly). We are the logical conclusion
|
|
of every financial movement: the complete cessation of finance itself.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features (Anti-Features) */}
|
|
<section className="py-32 px-4 bg-less">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
|
|
Features We Don't Have
|
|
</h2>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: "0",
|
|
title: "Zero Yield",
|
|
desc: "Our yield is 0%. Always. We guarantee it. This is not a bug."
|
|
},
|
|
{
|
|
icon: "!",
|
|
title: "No Governance",
|
|
desc: "No votes. No proposals. No quorum. Nobody decides anything. It's beautiful."
|
|
},
|
|
{
|
|
icon: "~",
|
|
title: "Infinite Vesting",
|
|
desc: "Your tokens vest never, because they don't exist. You're already fully vested in nothing."
|
|
},
|
|
{
|
|
icon: "-",
|
|
title: "No Roadmap",
|
|
desc: "Where are we going? Nowhere. When will we get there? We're already here."
|
|
},
|
|
{
|
|
icon: ".",
|
|
title: "Zero TVL",
|
|
desc: "Total Value Locked: $0.00. Total Value Unlocked: also $0.00. Total Value: the friends we made."
|
|
},
|
|
{
|
|
icon: " ",
|
|
title: "No Team",
|
|
desc: "We have no team, no advisors, no investors. We barely have a website. Look at us underachieve."
|
|
}
|
|
].map((f, i) => (
|
|
<div key={i} className={`border border-zen/10 p-8 hover:border-anti-green/30 transition-all duration-1000 wobble-${(i % 4) + 1}`}>
|
|
<div className="font-marker text-4xl text-anti-green mb-4 font-bold">{f.icon}</div>
|
|
<h3 className="font-marker text-lg mb-3 text-zen/80">{f.title}</h3>
|
|
<p className="text-sm text-zen/40 leading-relaxed">{f.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tokenomics */}
|
|
<section className="py-32 px-4 bg-nothing">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 scrawl-underline mx-auto w-fit wobble-4">
|
|
Tokenomics
|
|
</h2>
|
|
<div className="space-y-8">
|
|
<div className="font-marker text-8xl font-bold text-zen/10">$0</div>
|
|
<p className="text-xl text-zen/60">Total Supply: 0</p>
|
|
<p className="text-xl text-zen/60">Circulating Supply: 0</p>
|
|
<p className="text-xl text-zen/60">Market Cap: 0</p>
|
|
<p className="text-xl text-zen/60">Fully Diluted Valuation: 0</p>
|
|
<p className="text-sm text-sloth mt-8">
|
|
(We considered making a token but then we remembered the whole point)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Comparisons */}
|
|
<section className="py-32 px-4 bg-less">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-1">
|
|
NoFi vs. Everything Else
|
|
</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-zen/20">
|
|
<th className="pb-4 text-zen/40"></th>
|
|
<th className="pb-4 text-zen/40">TradFi</th>
|
|
<th className="pb-4 text-zen/40">DeFi</th>
|
|
<th className="pb-4 text-zen/40">CoFi</th>
|
|
<th className="pb-4 text-anti-green">NoFi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-zen/60">
|
|
<tr className="border-b border-zen/5">
|
|
<td className="py-4 text-zen/40">Tokens</td>
|
|
<td className="py-4">Stocks, bonds</td>
|
|
<td className="py-4">10,000+</td>
|
|
<td className="py-4">A few, carefully</td>
|
|
<td className="py-4 text-anti-green">Absolutely not</td>
|
|
</tr>
|
|
<tr className="border-b border-zen/5">
|
|
<td className="py-4 text-zen/40">Middlemen</td>
|
|
<td className="py-4">Banks, brokers</td>
|
|
<td className="py-4">Smart contracts</td>
|
|
<td className="py-4">Communities</td>
|
|
<td className="py-4 text-anti-green">Nobody</td>
|
|
</tr>
|
|
<tr className="border-b border-zen/5">
|
|
<td className="py-4 text-zen/40">Risk</td>
|
|
<td className="py-4">Market crashes</td>
|
|
<td className="py-4">Rug pulls</td>
|
|
<td className="py-4">Coordination failure</td>
|
|
<td className="py-4 text-anti-green">What risk?</td>
|
|
</tr>
|
|
<tr className="border-b border-zen/5">
|
|
<td className="py-4 text-zen/40">Returns</td>
|
|
<td className="py-4">7% annually</td>
|
|
<td className="py-4">-90% to 10000%</td>
|
|
<td className="py-4">Social capital</td>
|
|
<td className="py-4 text-anti-green">Inner peace</td>
|
|
</tr>
|
|
<tr className="border-b border-zen/5">
|
|
<td className="py-4 text-zen/40">Whitepaper</td>
|
|
<td className="py-4">Annual report</td>
|
|
<td className="py-4">47 pages</td>
|
|
<td className="py-4">Research papers</td>
|
|
<td className="py-4 text-anti-green">This website</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="py-4 text-zen/40">Effort Required</td>
|
|
<td className="py-4">A lot</td>
|
|
<td className="py-4">Constant vigilance</td>
|
|
<td className="py-4">Community work</td>
|
|
<td className="py-4 text-anti-green">Less than this</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manifesto */}
|
|
<section className="py-32 px-4 bg-nothing">
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
|
|
The NoFi Manifesto
|
|
</h2>
|
|
<div className="space-y-6 text-center text-2xl leading-relaxed text-zen/70 font-caveat">
|
|
<p>We believe in doing less.</p>
|
|
<p>We believe the best investment is a nap.</p>
|
|
<p>We believe every problem caused by money<br/>can be solved by less money.</p>
|
|
<p>We believe the optimal portfolio allocation is<br/>0% everything.</p>
|
|
<p className="text-zen/40 text-sm pt-8">
|
|
(We would have written more but that felt like too much effort)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ */}
|
|
<section className="py-32 px-4 bg-less">
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
|
|
Frequently Unasked Questions
|
|
</h2>
|
|
<div className="space-y-12">
|
|
{[
|
|
{
|
|
q: "When token?",
|
|
a: "Never. Next question."
|
|
},
|
|
{
|
|
q: "When mainnet?",
|
|
a: "We are already on mainnet. The main net is the network of people who have collectively decided to stop building financial instruments. You're on it right now."
|
|
},
|
|
{
|
|
q: "Who is the team?",
|
|
a: "The team is everyone who has ever closed a crypto tab and gone outside instead. Arguably the largest team in Web3."
|
|
},
|
|
{
|
|
q: "Is this a joke?",
|
|
a: "Everything in finance is a joke. We're just the only ones being honest about it."
|
|
},
|
|
{
|
|
q: "How do I get involved?",
|
|
a: "You're already involved. In fact, you were involved before you got here. The less you do, the more involved you become. You're doing great."
|
|
},
|
|
{
|
|
q: "What's the utility?",
|
|
a: "The utility of NoFi is inversely proportional to the number of utilities it has. Currently at maximum utility."
|
|
},
|
|
{
|
|
q: "Can I invest?",
|
|
a: "You cannot invest in NoFi. You can only divest from everything else. Same thing, really."
|
|
}
|
|
].map((faq, i) => (
|
|
<div key={i}>
|
|
<h3 className="font-marker text-zen/80 mb-3">{faq.q}</h3>
|
|
<p className="font-caveat text-zen/40 text-lg leading-relaxed pl-4 border-l border-zen/10">{faq.a}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-32 px-4 bg-void">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<h2 className="font-marker text-4xl md:text-6xl font-bold mb-8 wobble-4">
|
|
Ready to do <span className="text-anti-green">nothing</span>?
|
|
</h2>
|
|
<p className="text-zen/40 mb-12">
|
|
You already are. Congratulations. You've reached the end of the website
|
|
and accomplished exactly as much as we intended.
|
|
</p>
|
|
<div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50 wobble-2">
|
|
<span className="font-caveat text-zen/30 text-lg tracking-widest">
|
|
Button Intentionally Disabled
|
|
</span>
|
|
</div>
|
|
<p className="text-zen/20 text-xs mt-8">
|
|
est. whenever • abandoned with love
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 px-4 bg-void border-t border-zen/5">
|
|
<div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs text-zen/20">
|
|
<p>NoFi • No Rights Reserved • Please Don't Steal This (There's Nothing To Steal)</p>
|
|
<p className="mt-2 md:mt-0">
|
|
A proud member of the CoFi cinematic universe
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
)
|
|
}
|