212 lines
11 KiB
TypeScript
212 lines
11 KiB
TypeScript
import Link from 'next/link'
|
|
import { AppSwitcher } from '@/components/AppSwitcher'
|
|
import { AuthButton } from '@/components/AuthButton'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
|
{/* Nav */}
|
|
<nav className="border-b border-slate-700/50 backdrop-blur-sm">
|
|
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<AppSwitcher current="funds" />
|
|
<div className="w-8 h-8 bg-gradient-to-br from-amber-400 to-emerald-500 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
|
|
rF
|
|
</div>
|
|
<span className="font-semibold text-lg">rFunds</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/tbff"
|
|
className="text-sm text-slate-300 hover:text-white transition-colors"
|
|
>
|
|
Demo
|
|
</Link>
|
|
<Link
|
|
href="/river"
|
|
className="text-sm text-slate-300 hover:text-white transition-colors"
|
|
>
|
|
River View
|
|
</Link>
|
|
<Link
|
|
href="/space"
|
|
className="text-sm px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg transition-colors font-medium"
|
|
>
|
|
Create Space
|
|
</Link>
|
|
<AuthButton />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero */}
|
|
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
|
<div className="text-center max-w-3xl mx-auto">
|
|
<h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-amber-300 via-emerald-300 to-blue-300 bg-clip-text text-transparent">
|
|
Threshold-Based Flow Funding
|
|
</h1>
|
|
<p className="text-xl text-slate-300 mb-8 leading-relaxed">
|
|
Design continuous funding flows that respond dynamically to threshold conditions.
|
|
Connect funnels, set overflow rules, and track outcomes in real-time.
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4">
|
|
<Link
|
|
href="/tbff"
|
|
className="px-6 py-3 bg-slate-700 hover:bg-slate-600 rounded-xl text-lg font-medium transition-all border border-slate-600"
|
|
>
|
|
Try the Demo
|
|
</Link>
|
|
<Link
|
|
href="/river"
|
|
className="px-6 py-3 bg-cyan-700 hover:bg-cyan-600 rounded-xl text-lg font-medium transition-all border border-cyan-600"
|
|
>
|
|
River View
|
|
</Link>
|
|
<Link
|
|
href="/space"
|
|
className="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-emerald-900/30"
|
|
>
|
|
Create Your Own
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How it Works */}
|
|
<section className="max-w-6xl mx-auto px-6 py-16">
|
|
<h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{/* Funnel Card */}
|
|
<div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
|
|
<div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2">Create Funnels</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
Each funnel represents a funding pool with three zones: overflow (above max),
|
|
healthy (between thresholds), and critical (below min). Set thresholds by
|
|
dragging handles.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Flow Card */}
|
|
<div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
|
|
<div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2">Connect Flows</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
Connect funnels with overflow edges (sideways) so excess funds automatically
|
|
route to other pools. Add spending edges (downward) to fund outcomes and
|
|
deliverables.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Simulate Card */}
|
|
<div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
|
|
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2">Simulate & Share</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
Run simulations to see how funds flow through your system. Watch edge widths
|
|
scale proportionally. Save your space locally and share it with a link.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Funnel Diagram */}
|
|
<section className="max-w-6xl mx-auto px-6 py-16">
|
|
<div className="bg-slate-800/30 rounded-2xl border border-slate-700/50 p-8">
|
|
<h2 className="text-2xl font-bold mb-8 text-center">The Funnel Metaphor</h2>
|
|
<div className="max-w-md mx-auto">
|
|
{/* ASCII-art style funnel */}
|
|
<div className="font-mono text-sm space-y-0 text-center">
|
|
<div className="text-amber-400">
|
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-t-xl px-8 py-3">
|
|
<div className="font-semibold">OVERFLOW ZONE</div>
|
|
<div className="text-xs text-amber-300">Above MAX threshold</div>
|
|
<div className="text-xs text-amber-300/70">Excess funds redistribute to other funnels</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-amber-500 font-bold border-b-2 border-dashed border-amber-500/50 py-1 bg-amber-500/5">
|
|
-- MAX THRESHOLD --
|
|
</div>
|
|
<div className="text-emerald-400">
|
|
<div className="bg-emerald-500/10 border-x border-emerald-500/30 px-8 py-4">
|
|
<div className="font-semibold">HEALTHY ZONE</div>
|
|
<div className="text-xs text-emerald-300">Normal operations</div>
|
|
<div className="text-xs text-emerald-300/70">Full flow rate, balanced funding</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-red-500 font-bold border-b-2 border-dashed border-red-500/50 py-1 bg-red-500/5">
|
|
-- MIN THRESHOLD --
|
|
</div>
|
|
<div className="text-slate-400">
|
|
<div className="bg-slate-700/30 border border-slate-600/30 rounded-b-xl px-8 py-3 clip-funnel">
|
|
<div className="font-semibold text-red-400">CRITICAL ZONE</div>
|
|
<div className="text-xs text-red-300">Below MIN threshold</div>
|
|
<div className="text-xs text-slate-500">Outflow restricted, conservation mode</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="max-w-6xl mx-auto px-6 py-16 text-center">
|
|
<h2 className="text-3xl font-bold mb-4">Ready to design your funding flows?</h2>
|
|
<p className="text-slate-400 mb-8 max-w-lg mx-auto">
|
|
Start with the interactive demo or create your own space with custom funnels and connections.
|
|
</p>
|
|
<Link
|
|
href="/space"
|
|
className="inline-block px-8 py-4 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-emerald-900/30"
|
|
>
|
|
Create Your Space
|
|
</Link>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-slate-700/50 py-8">
|
|
<div className="max-w-6xl mx-auto px-6">
|
|
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-500 mb-4">
|
|
<span className="font-medium text-slate-400">r* Ecosystem</span>
|
|
<a href="https://rspace.online" className="hover:text-slate-300 transition-colors">rSpace</a>
|
|
<a href="https://rmaps.online" className="hover:text-slate-300 transition-colors">rMaps</a>
|
|
<a href="https://rnotes.online" className="hover:text-slate-300 transition-colors">rNotes</a>
|
|
<a href="https://rvote.online" className="hover:text-slate-300 transition-colors">rVote</a>
|
|
<a href="https://rfunds.online" className="hover:text-slate-300 transition-colors font-medium text-slate-300">rFunds</a>
|
|
<a href="https://rtrips.online" className="hover:text-slate-300 transition-colors">rTrips</a>
|
|
<a href="https://rcart.online" className="hover:text-slate-300 transition-colors">rCart</a>
|
|
<a href="https://rchoices.online" className="hover:text-slate-300 transition-colors">rChoices</a>
|
|
<a href="https://rwallet.online" className="hover:text-slate-300 transition-colors">rWallet</a>
|
|
<a href="https://rfiles.online" className="hover:text-slate-300 transition-colors">rFiles</a>
|
|
<a href="https://rtube.online" className="hover:text-slate-300 transition-colors">rTube</a>
|
|
<a href="https://rcal.online" className="hover:text-slate-300 transition-colors">rCal</a>
|
|
<a href="https://rnetwork.online" className="hover:text-slate-300 transition-colors">rNetwork</a>
|
|
<a href="https://rinbox.online" className="hover:text-slate-300 transition-colors">rInbox</a>
|
|
<a href="https://rstack.online" className="hover:text-slate-300 transition-colors">rStack</a>
|
|
<a href="https://rauctions.online" className="hover:text-slate-300 transition-colors">rAuctions</a>
|
|
<a href="https://rpubs.online" className="hover:text-slate-300 transition-colors">rPubs</a>
|
|
<a href="https://rbooks.online" className="hover:text-slate-300 transition-colors">rBooks</a>
|
|
<a href="https://rdata.online" className="hover:text-slate-300 transition-colors">rData</a>
|
|
</div>
|
|
<p className="text-center text-xs text-slate-600">
|
|
Part of the r* ecosystem — collaborative tools for communities.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|