214 lines
9.6 KiB
TypeScript
214 lines
9.6 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'FlowFi — Finance as Metabolism, Not Mechanism',
|
|
description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F. FlowFi is the constructive emergence — finance as invisible vascular infrastructure.',
|
|
openGraph: {
|
|
title: 'FlowFi — Finance as Metabolism, Not Mechanism',
|
|
description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F.',
|
|
url: 'https://nofi.lol/flowfi',
|
|
siteName: 'NoFi',
|
|
type: 'website',
|
|
},
|
|
}
|
|
|
|
export default function FlowFi() {
|
|
return (
|
|
<main className="min-h-screen">
|
|
{/* Section 1 — Hero: From NoFi to FlowFi */}
|
|
<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="absolute inset-0 bg-gradient-to-br from-flow-green/5 via-transparent to-flow-green/3 animate-flow" />
|
|
<div className="relative z-10 text-center max-w-4xl">
|
|
<Link href="/" className="text-zen/30 text-sm hover:text-flow-green transition-colors duration-500 mb-8 inline-block">
|
|
← NoFi
|
|
</Link>
|
|
<a
|
|
href="https://flowfi.network"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block text-zen/25 text-xs tracking-[0.2em] mb-12 hover:text-flow-green/60 transition-all duration-1000 font-caveat"
|
|
>
|
|
the full experience flows at flowfi.network →
|
|
</a>
|
|
<p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
|
|
a movement toward movement
|
|
</p>
|
|
<h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1 animate-breathe">
|
|
<span className="text-flow-green">Flow</span>Fi
|
|
</h1>
|
|
<p className="font-caveat text-2xl md:text-3xl text-zen/70 mb-4">
|
|
NoFi didn't mean no flows.
|
|
</p>
|
|
<p className="font-caveat text-xl md:text-2xl text-zen/50 mb-16">
|
|
It meant no Finance-with-a-capital-F.
|
|
</p>
|
|
</div>
|
|
<div className="absolute bottom-8 text-zen/20 text-xs animate-drift">
|
|
keep flowing (or don't)
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 2 — The Insight: Finance Became the Disease */}
|
|
<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-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-2">
|
|
The Insight
|
|
</h2>
|
|
<div className="space-y-12 text-lg leading-relaxed text-zen/60">
|
|
<p>
|
|
Finance was supposed to be plumbing. Invisible infrastructure that moved
|
|
resources from where they pooled to where they were needed. Boring. Essential.
|
|
Beneath the surface.
|
|
</p>
|
|
<p>
|
|
Instead, it became a growth industry. The plumbing hired a marketing team,
|
|
went public, and started charging you for the privilege of having pipes.
|
|
</p>
|
|
<p className="font-caveat text-zen/80 text-2xl border-l-2 border-flow-green pl-6 wobble-1">
|
|
“Your body doesn't have a Federal Reserve. It has kidneys.”
|
|
</p>
|
|
<p>
|
|
NoFi was the diagnosis. FlowFi is the prognosis: finance that dissolves
|
|
back into infrastructure. Invisible. Metabolic. Beneath the surface
|
|
where it belongs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 3 — Living Systems Comparison Table */}
|
|
<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-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-3">
|
|
Finance vs. Living Systems
|
|
</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-anti-green">Finance Pathology</th>
|
|
<th className="pb-4 text-flow-green">Living System Health</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-zen/60">
|
|
{[
|
|
['Yield optimization', 'Nutrient cycling'],
|
|
['Liquidity extraction', 'Osmotic balance'],
|
|
['Centralized banking', 'Distributed capillaries'],
|
|
['Interest rates', 'Feedback signals'],
|
|
['Capital accumulation', 'Hoarding = disease'],
|
|
['"Too big to fail"', 'Monoculture = fragility'],
|
|
['Governance tokens', 'Hormones nobody voted on'],
|
|
].map(([pathology, health], i) => (
|
|
<tr key={i} className="border-b border-zen/5">
|
|
<td className="py-4 text-anti-green/70">{pathology}</td>
|
|
<td className="py-4 text-flow-green/70">{health}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 4 — Key Reframes */}
|
|
<section className="py-32 px-4 bg-nothing">
|
|
<div className="max-w-3xl mx-auto text-center space-y-12">
|
|
<h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 scrawl-underline-flow mx-auto w-fit wobble-4">
|
|
Reframes
|
|
</h2>
|
|
{[
|
|
'Finance became the disease it claimed to cure.',
|
|
'FlowFi is finance that forgot it was finance.',
|
|
'From extractive to regenerative: finance as metabolism, not mechanism.',
|
|
'The best financial system is the one you never notice.',
|
|
"Capital doesn't accumulate in healthy systems. It circulates.",
|
|
].map((line, i) => (
|
|
<p key={i} className={`font-caveat text-2xl md:text-3xl text-zen/70 leading-relaxed wobble-${(i % 4) + 1}`}>
|
|
{line}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 5 — The Meta Statement */}
|
|
<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-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-1">
|
|
The Meta Statement
|
|
</h2>
|
|
<div className="space-y-12 text-lg leading-relaxed text-zen/60">
|
|
<p className="font-caveat text-zen/80 text-2xl text-center animate-breathe">
|
|
FlowFi doesn't need a domain. Domains are infrastructure.
|
|
FlowFi <em>is</em> infrastructure.
|
|
</p>
|
|
<p className="text-zen/30 text-sm text-center">
|
|
(We said that before we got{' '}
|
|
<a
|
|
href="https://flowfi.network"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-flow-green/40 hover:text-flow-green/70 transition-colors duration-1000 underline underline-offset-4 decoration-flow-green/20"
|
|
>
|
|
flowfi.network
|
|
</a>.
|
|
We contain multitudes. Also contradictions.)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 6 — Footer/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 <span className="text-flow-green">flow</span>?
|
|
</h2>
|
|
<p className="text-zen/40 mb-12">
|
|
You already are. The flows don't need your permission.
|
|
They just need you to stop building dams and calling them features.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8">
|
|
<Link
|
|
href="/"
|
|
className="inline-block border border-zen/20 px-12 py-6 hover:border-flow-green/50 transition-all duration-[3000ms] wobble-2"
|
|
>
|
|
<span className="font-caveat text-zen/50 text-lg">
|
|
← Back to Doing Nothing
|
|
</span>
|
|
</Link>
|
|
<a
|
|
href="https://flowfi.network"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-block border border-flow-green/30 px-12 py-6 hover:border-flow-green/70 hover:bg-flow-green/5 transition-all duration-[3000ms] wobble-3"
|
|
>
|
|
<span className="font-caveat text-flow-green/70 text-lg">
|
|
Enter flowfi.network →
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<p className="text-zen/30 text-sm mt-12 font-caveat">
|
|
NoFi → FlowFi → the full experience awaits
|
|
</p>
|
|
<p className="text-zen/20 text-xs mt-8">
|
|
Part of the CoFi cinematic universe
|
|
</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>FlowFi • No Rights Reserved • Flows Freely</p>
|
|
<p className="mt-2 md:mt-0">
|
|
A proud tributary of the CoFi cinematic universe
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
)
|
|
}
|