91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { Card } from "@/components/ui/card"
|
|
import { MessageSquare, FolderOpen, Shield, BarChart3, Coins, Lock } from "lucide-react"
|
|
|
|
const features = [
|
|
{
|
|
icon: MessageSquare,
|
|
title: "Secure Messaging",
|
|
description:
|
|
"End-to-end encrypted communication channels for your community. Nobody can read your messages, not even us.",
|
|
color: "text-primary",
|
|
bgColor: "bg-primary/10",
|
|
},
|
|
{
|
|
icon: FolderOpen,
|
|
title: "File Sharing",
|
|
description: "Share files and create collaborative views over data with localized, zero-knowledge storage.",
|
|
color: "text-secondary",
|
|
bgColor: "bg-secondary/10",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Delegated Authority",
|
|
description: "Manage group permissions and authority structures democratically. Your space, your rules.",
|
|
color: "text-accent",
|
|
bgColor: "bg-accent/10",
|
|
},
|
|
{
|
|
icon: Coins,
|
|
title: "Shared Funds",
|
|
description: "Allocate and manage community resources through transparent, multi-sig controls.",
|
|
color: "text-primary",
|
|
bgColor: "bg-primary/10",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Interactive Dashboards",
|
|
description: "Multidimensional views of your data powered by folkjs - HTML as a computing substrate.",
|
|
color: "text-secondary",
|
|
bgColor: "bg-secondary/10",
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: "Data Privacy",
|
|
description: "Zero-knowledge architecture ensures your data never exists unencrypted outside your control.",
|
|
color: "text-accent",
|
|
bgColor: "bg-accent/10",
|
|
},
|
|
]
|
|
|
|
export function Features() {
|
|
return (
|
|
<section className="border-b-4 border-primary bg-card/50 py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl retro-shadow-sm">
|
|
Shared Digital Spaces for <span className="text-primary">Collaboration</span>
|
|
</h2>
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
|
Everything you need to build thriving communities outside big tech's surveillance apparatus
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="group relative overflow-hidden border-2 border-border bg-card p-6 transition-all hover:border-primary hover:-translate-y-1 hover:retro-shadow-sm"
|
|
>
|
|
<div
|
|
className={`absolute inset-0 ${feature.bgColor} opacity-0 transition-opacity group-hover:opacity-100`}
|
|
/>
|
|
<div className="relative">
|
|
<div
|
|
className={`mb-4 inline-flex rounded-lg ${feature.bgColor} p-3 ${feature.color} border-2 border-current`}
|
|
>
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<h3 className="mb-2 text-xl font-semibold text-card-foreground">{feature.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|