40 lines
1.4 KiB
TypeScript
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 { extractiveFlows } from '@/lib/sankey-data'
|
|
|
|
export default function ExtractivePipeSection() {
|
|
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-less to-void opacity-80" />
|
|
{/* Red tint overlay */}
|
|
<div className="absolute inset-0 bg-anti-green/5" />
|
|
|
|
<div className="relative z-10 max-w-5xl w-full text-center">
|
|
<SectionHeader wobble={3}>The Extractive Pattern</SectionHeader>
|
|
|
|
<ScrollReveal delay={0.2}>
|
|
<div className="my-12">
|
|
<SankeyDiagram
|
|
data={extractiveFlows}
|
|
showLabels={true}
|
|
speed="fast"
|
|
showParticles={true}
|
|
showDistortion={false}
|
|
maxParticles={6}
|
|
/>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.4}>
|
|
<blockquote className="font-caveat text-xl md:text-2xl text-zen/50 max-w-2xl mx-auto border-l-2 border-anti-green/30 pl-6 wobble-1">
|
|
The plumbing hired a marketing team and <span className="text-anti-green/70">went public</span>.
|
|
</blockquote>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|