46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import SankeyDiagram from '@/components/visualizations/SankeyDiagram'
|
|
import SectionHeader from '@/components/ui/SectionHeader'
|
|
import ScrollReveal from '@/components/ui/ScrollReveal'
|
|
import { regenerativeFlows } from '@/lib/sankey-data'
|
|
|
|
export default function RegenerativeSection() {
|
|
return (
|
|
<section className="min-h-screen flex flex-col items-center justify-center relative px-4 py-24">
|
|
<div className="absolute inset-0 bg-deep" />
|
|
|
|
<div className="relative z-10 max-w-5xl w-full text-center">
|
|
<SectionHeader>The Regenerative Alternative</SectionHeader>
|
|
|
|
<ScrollReveal delay={0.1}>
|
|
<div className="flex justify-center gap-6 mb-6 text-xs font-light">
|
|
<span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-flow/60 inline-block" /> Economic</span>
|
|
<span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-[#a78bfa]/60 inline-block" /> Governance</span>
|
|
<span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-[#60a5fa]/60 inline-block" /> Data</span>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.2}>
|
|
<div className="my-8 rounded-2xl overflow-hidden p-4 bg-ocean/20 border border-flow/8">
|
|
<SankeyDiagram
|
|
data={regenerativeFlows}
|
|
showLabels={true}
|
|
speed="normal"
|
|
showParticles={true}
|
|
showDistortion={false}
|
|
maxParticles={8}
|
|
/>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.4}>
|
|
<p className="font-caveat text-xl md:text-2xl text-foam/45 max-w-2xl mx-auto leading-relaxed">
|
|
<span className="text-flow/70">Pre-distributive</span>. <span className="text-flow/70">Re-distributive</span>. Naturally.
|
|
</p>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|