flowfi-network/components/sections/RegenerativeSection.tsx

40 lines
1.4 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-20">
<div className="absolute inset-0 bg-gradient-to-b from-void via-nothing to-void opacity-80" />
{/* Green tint overlay */}
<div className="absolute inset-0 bg-flow-green/3" />
<div className="relative z-10 max-w-5xl w-full text-center">
<SectionHeader wobble={1}>The Regenerative Alternative</SectionHeader>
<ScrollReveal delay={0.2}>
<div className="my-12">
<SankeyDiagram
data={regenerativeFlows}
showLabels={true}
speed="normal"
showParticles={true}
showDistortion={true}
maxParticles={8}
/>
</div>
</ScrollReveal>
<ScrollReveal delay={0.4}>
<p className="font-caveat text-xl md:text-2xl text-zen/50 max-w-2xl mx-auto">
<span className="text-flow-green/70">Pre-distributive</span>. <span className="text-flow-green/70">Re-distributive</span>. Naturally.
</p>
</ScrollReveal>
</div>
</section>
)
}