98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import { Card } from "@/components/ui/card"
|
|
import { GitBranch, Layers, Zap, RefreshCw, Share2, Target } from "lucide-react"
|
|
|
|
const principles = [
|
|
{
|
|
icon: GitBranch,
|
|
title: "Distributed Architecture",
|
|
description: "No single point of failure—resilience through decentralization",
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "Emergent Complexity",
|
|
description: "Simple rules create sophisticated collective behaviors",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Real-Time Adaptation",
|
|
description: "Continuous feedback loops enable rapid organizational learning",
|
|
},
|
|
{
|
|
icon: RefreshCw,
|
|
title: "Regenerative Systems",
|
|
description: "Self-healing networks that grow stronger through use",
|
|
},
|
|
{
|
|
icon: Share2,
|
|
title: "Resource Sharing",
|
|
description: "Efficient allocation through transparent, collaborative protocols",
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Collaborative Design",
|
|
description: "Purpose-driven architecture aligned with community values",
|
|
},
|
|
]
|
|
|
|
export function Principles() {
|
|
return (
|
|
<section className="py-24 px-4 relative overflow-hidden">
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-3xl animate-pulse" />
|
|
<div
|
|
className="absolute bottom-0 right-1/4 w-64 h-64 bg-secondary/10 rounded-full blur-3xl animate-pulse"
|
|
style={{ animationDelay: "1.5s" }}
|
|
/>
|
|
</div>
|
|
|
|
<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-accent">
|
|
{"Myco-Principic Design"}
|
|
</h2>
|
|
<p className="text-lg text-secondary max-w-2xl mx-auto text-pretty glow-text">
|
|
{"Six foundational principles inspired by mycelial networks and applied to institutional design"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{principles.map((principle, index) => {
|
|
const Icon = principle.icon
|
|
const hue = 180 + index * 30 // Cycle through cyan to magenta
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="p-6 hover:shadow-lg transition-all border-2 glow-border bg-card/80 backdrop-blur-sm hover:scale-105"
|
|
style={{
|
|
borderColor: `hsl(${hue}, 100%, 50%)`,
|
|
boxShadow: `0 0 20px hsla(${hue}, 100%, 50%, 0.3)`,
|
|
}}
|
|
>
|
|
<div className="space-y-3">
|
|
<div
|
|
className="w-12 h-12 rounded-lg flex items-center justify-center border-2"
|
|
style={{
|
|
borderColor: `hsl(${hue}, 100%, 60%)`,
|
|
color: `hsl(${hue}, 100%, 60%)`,
|
|
boxShadow: `0 0 15px hsla(${hue}, 100%, 60%, 0.5)`,
|
|
}}
|
|
>
|
|
<Icon
|
|
className="w-6 h-6"
|
|
style={{ animation: "glow-pulse 2.5s ease-in-out infinite", animationDelay: `${index * 0.2}s` }}
|
|
/>
|
|
</div>
|
|
<h3 className="text-lg font-semibold glow-text" style={{ color: `hsl(${hue}, 100%, 70%)` }}>
|
|
{principle.title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">{principle.description}</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|