71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import { Card } from "@/components/ui/card"
|
|
import { Brain, Network, Sprout, Users } from "lucide-react"
|
|
|
|
const concepts = [
|
|
{
|
|
icon: Brain,
|
|
title: "Psilo-Cybernetics",
|
|
description:
|
|
"The study of feedback loops and self-organizing systems inspired by mycelial networks and psychedelic insights into interconnectedness.",
|
|
},
|
|
{
|
|
icon: Sprout,
|
|
title: "Institutional Neuroplasticity",
|
|
description:
|
|
"Organizations that adapt and evolve like neural networks, continuously learning and reorganizing based on environmental feedback.",
|
|
},
|
|
{
|
|
icon: Network,
|
|
title: "MycoFi Framework",
|
|
description:
|
|
"A decentralized infrastructure connecting economic, democratic, and computational systems through myco-principic design patterns.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Community Collaboration",
|
|
description:
|
|
"Real-time tooling for collective decision-making, resource allocation, and knowledge sharing across distributed networks.",
|
|
},
|
|
]
|
|
|
|
export function ConceptsGrid() {
|
|
return (
|
|
<section className="py-24 px-4 relative overflow-hidden">
|
|
<div className="absolute inset-0 cyber-grid opacity-10" />
|
|
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance glow-text text-secondary">
|
|
{"Core Concepts"}
|
|
</h2>
|
|
<p className="text-lg text-accent max-w-2xl mx-auto text-pretty glow-text">
|
|
{"Understanding the foundational principles that enable adaptive, interconnected systems"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{concepts.map((concept, index) => {
|
|
const Icon = concept.icon
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="p-8 hover:shadow-lg transition-all border-2 border-primary/50 glow-border bg-card/80 backdrop-blur-sm hover:border-primary"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-lg border-2 border-accent text-accent glow-border">
|
|
<Icon className="w-6 h-6" style={{ animation: "glow-pulse 3s ease-in-out infinite" }} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-semibold mb-2 text-primary glow-text">{concept.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">{concept.description}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|