67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { Shield, Network, Users, Lock, Zap, Globe } from "lucide-react"
|
|
|
|
const features = [
|
|
{
|
|
icon: Network,
|
|
title: "Distributed Architecture",
|
|
description: "No central servers. No single point of failure. Your data lives on the mesh.",
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: "Zero Knowledge",
|
|
description: "End-to-end encrypted by default. Nobody can see your data, not even us.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Collaborative First",
|
|
description: "Built for cooperation. Share resources, knowledge, and compute power.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Democratic Governance",
|
|
description: "Community-driven decisions. No corporate overlords controlling your experience.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Local First",
|
|
description: "Work offline. Sync when connected. Your data is always accessible.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "New Economic Models",
|
|
description: "Fair value distribution. Contributors are rewarded, not exploited.",
|
|
},
|
|
]
|
|
|
|
export function Features() {
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<div className="container px-4">
|
|
<div className="max-w-3xl mx-auto text-center mb-20">
|
|
<h2 className="text-5xl md:text-6xl font-bold mb-6 text-balance">A New Digital Foundation</h2>
|
|
<p className="text-xl text-muted-foreground text-balance leading-relaxed">
|
|
Built on principles of freedom, privacy, and collective ownership. The internet as it should have been.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="group p-8 border border-border hover:border-foreground transition-colors bg-card"
|
|
>
|
|
<div className="mb-6">
|
|
<div className="inline-flex p-3 bg-foreground text-background">
|
|
<feature.icon className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-3">{feature.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|