trippin-website/components/compost-capitalism-section.tsx

74 lines
3.7 KiB
TypeScript

import { Button } from "@/components/ui/button"
import { ArrowRight, Leaf, Recycle, Sprout } from "lucide-react"
export function CompostCapitalismSection() {
return (
<section id="compost" className="py-20 bg-muted/50 border-y border-secondary/30">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
<span className="text-secondary">(Com)post</span> Capitalism
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
What if we treated capitalism like organic matter breaking down its extractive excesses to nourish
regenerative systems that work for the many, not the few?
</p>
</div>
<div className="grid md:grid-cols-3 gap-8 mb-16">
<div className="bg-gradient-to-br from-secondary/10 to-secondary/5 rounded-lg p-6 border border-secondary/20">
<div className="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
<Leaf className="w-6 h-6 text-secondary" />
</div>
<h4 className="text-xl font-bold mb-3">Decompose</h4>
<p className="text-muted-foreground leading-relaxed">
Zombified institutions corporate monopolies, financialized housing, extractive industries are the dead
matter. Mycelium breaks them down.
</p>
</div>
<div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 border border-primary/20">
<div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
<Recycle className="w-6 h-6 text-primary" />
</div>
<h4 className="text-xl font-bold mb-3">Transform</h4>
<p className="text-muted-foreground leading-relaxed">
Capital trapped in outdated systems, attention harvested by algorithms, care work rendered invisible
these are resources waiting to be redirected.
</p>
</div>
<div className="bg-gradient-to-br from-accent/10 to-accent/5 rounded-lg p-6 border border-accent/20">
<div className="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mb-4">
<Sprout className="w-6 h-6 text-accent" />
</div>
<h4 className="text-xl font-bold mb-3">Regenerate</h4>
<p className="text-muted-foreground leading-relaxed">
From the composted remains, new systems emerge worker cooperatives, commons-based governance,
solidarity economies rooted in mutual aid.
</p>
</div>
</div>
<div className="bg-gradient-to-r from-secondary/10 via-primary/10 to-accent/10 rounded-lg p-8 text-center border border-secondary/20">
<p className="text-xl mb-6 leading-relaxed max-w-3xl mx-auto">
Capitalism isn't something to overthrow — it's something to compost. The nutrients are already here.
The mycelial networks are already spreading. The soil is ready.
</p>
<Button size="lg" className="bg-secondary hover:bg-secondary/90 text-secondary-foreground font-semibold" asChild>
<a
href="https://compostcapitalism.xyz"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2"
>
Explore (Com)post Capitalism
<ArrowRight className="w-5 h-5" />
</a>
</Button>
</div>
</div>
</section>
)
}