trippin-website/components/mycoeconomics-section.tsx

103 lines
4.0 KiB
TypeScript

"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Network, Recycle, TreePine, Zap } from "lucide-react"
export function MycoeconomicsSection() {
const principles = [
{
icon: <Network className="h-8 w-8 text-primary" />,
title: "Networked Distribution",
description:
"Like mycelial networks, economic systems should facilitate resource sharing and mutual support across interconnected communities.",
},
{
icon: <Recycle className="h-8 w-8 text-primary" />,
title: "Regenerative Cycles",
description:
"Emulate nature's circular processes where waste becomes input, creating sustainable and regenerative economic flows.",
},
{
icon: <TreePine className="h-8 w-8 text-primary" />,
title: "Ecological Wisdom",
description:
"Learn from forest ecosystems where cooperation and mutual aid are more dominant than competition for survival.",
},
{
icon: <Zap className="h-8 w-8 text-primary" />,
title: "Adaptive Resilience",
description:
"Build economic systems that can adapt and respond to changing conditions, like fungi responding to environmental shifts.",
},
]
return (
<section id="mycoeconomics" className="py-16 bg-muted/50 border-y border-primary/30 shadow-lg">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
<span className="text-primary">Mycoeconomics</span>
{": Nature's Blueprint"}
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
{"Fungi have been Earth's master economists for millions of years, "}
{"creating networks of mutual aid and resource distribution. "}
{"What if we designed our economies like mycelial networks?"}
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 mb-16">
{principles.map((principle, index) => (
<Card
key={index}
className="border-primary/20 hover:border-primary/40 transition-all duration-300 mycelial-growth"
>
<CardHeader>
<div className="flex items-center gap-4">
{principle.icon}
<CardTitle className="text-xl">{principle.title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed">{principle.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="bg-card border border-primary/20 rounded-lg p-8">
<h3 className="text-2xl font-bold mb-4 text-primary">The Mycelial Revolution</h3>
<p className="text-lg text-muted-foreground mb-6 leading-relaxed">
{"Just as fungi decompose dead matter to create new life, we can decompose failing neoliberal systems "}
{
"and upcycle their nutrients into regenerative alternatives. The revolution is — and has always been — mycelial."
}
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Button
size="lg"
onClick={() =>
window.open(
"https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies",
"_blank",
)
}
>
Read the Full Essay
</Button>
<Button
variant="outline"
size="lg"
className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
onClick={() => window.open("https://book.mycofi.earth/", "_blank")}
>
Explore MycoFi
</Button>
</div>
</div>
</div>
</section>
)
}