myc0punkz-website/components/network-section.tsx

66 lines
2.7 KiB
TypeScript

import Link from 'next/link'
const nodes = [
{ name: 'alltor.net', url: 'https://alltor.net', description: 'Distributed networks' },
{ name: 'post-appitalism.app', url: 'https://post-appitalism.app', description: 'Beyond extraction' },
{ name: 'compostcapitalism.xyz', url: 'https://compostcapitalism.xyz', description: 'Regenerative economics' },
{ name: 'mycofi.earth', url: 'https://mycofi.earth', description: 'Mycelial finance' },
{ name: 'folkjs.org', url: 'https://folkjs.org', description: 'Collaborative tools' },
{ name: 'rspace.online', url: 'https://rspace.online', description: 'Interaction spaces' },
]
export function NetworkSection() {
return (
<section className="py-24 px-4 border-t border-border">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
The Mycelial Network
</div>
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-mono text-balance">
Interconnected. Resilient. Growing.
</h2>
<p className="text-muted-foreground leading-relaxed max-w-2xl mx-auto text-pretty">
Like mycelium beneath the forest floor, we&apos;re part of a larger living network. These are
our kindred nodes.
</p>
</div>
<div className="grid md:grid-cols-2 gap-4">
{nodes.map((node) => (
<Link
key={node.name}
href={node.url}
target="_blank"
rel="noopener noreferrer"
className="bg-card border border-border p-4 hover:border-accent hover:bg-card/80 transition-all group"
>
<div className="flex items-center justify-between">
<div>
<div className="font-mono text-accent group-hover:text-accent/80 transition-colors">
{node.name}
</div>
<div className="text-sm text-muted-foreground mt-1">{node.description}</div>
</div>
<svg
className="w-5 h-5 text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</div>
</Link>
))}
</div>
</div>
</section>
)
}