myc0punkz-website/components/device-section.tsx

68 lines
2.3 KiB
TypeScript

import { Lock, HardDrive, Radio, Users } from 'lucide-react'
const features = [
{
icon: Lock,
title: 'Zero-Knowledge Security',
description: 'Metadata-encrypted. Your data, your keys, your sovereignty.',
},
{
icon: HardDrive,
title: 'Local Edge Storage',
description: 'Sovereign data hosting. Media servers. All at the edge.',
},
{
icon: Radio,
title: 'Secure Communications',
description: 'Encrypted channels. Private by default. Owned by you.',
},
{
icon: Users,
title: 'Collaborative Spaces',
description: 'Powered by folkjs.org. Real connection, no extraction.',
},
]
export function DeviceSection() {
return (
<section className="py-24 px-4 border-t border-border">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
The Node
</div>
<h2 className="text-3xl md:text-5xl font-bold mb-6 font-mono text-balance">
Regenerative Sovereign Infrastructure
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto leading-relaxed text-pretty">
A local edge node that puts power back where it belongs. Secure, affordable, and built
for the regenerative future.
</p>
</div>
<div className="grid md:grid-cols-2 gap-6 mb-12">
{features.map((feature) => (
<div
key={feature.title}
className="bg-card border border-border p-6 hover:border-primary/50 transition-colors"
>
<feature.icon className="w-8 h-8 text-primary mb-4" />
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
</div>
))}
</div>
<div className="bg-secondary/50 border border-primary/30 p-8 text-center">
<div className="text-sm font-mono text-primary mb-2 tracking-wider uppercase">
Exclusive First Run
</div>
<p className="text-lg text-foreground">
Limited initial devices. Early access for those who found the underground first.
</p>
</div>
</div>
</section>
)
}