66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Clock, TrendingUp, Shield, Users } from "lucide-react"
|
|
|
|
export function OverviewSection() {
|
|
const features = [
|
|
{
|
|
icon: Clock,
|
|
title: "Continuous Voting",
|
|
description:
|
|
"Express your preferences continuously, not just during time-boxed voting periods. Change your vote at any time.",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "Conviction Growth",
|
|
description:
|
|
"Your vote weight grows over time according to a halflife algorithm, giving more influence to long-term community members.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Attack Resistant",
|
|
description: "Sidesteps sybil attacks and provides collusion resistance through time-weighted mechanisms.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Human-Centric",
|
|
description: "Captures human needs in temporal data flows, ensuring people remain central to automated systems.",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section id="overview" className="py-24 bg-muted/40">
|
|
<div className="container mx-auto max-w-screen-xl px-4">
|
|
<div className="max-w-3xl mx-auto text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">What is Conviction Voting?</h2>
|
|
<p className="text-lg text-muted-foreground leading-relaxed">
|
|
Conviction Voting is a decision-making process in which voters continuously express their preference by
|
|
staking tokens in support of proposals. The conviction (weight) of their vote grows over time, and proposals
|
|
pass when they reach an algorithmically-set threshold.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon
|
|
return (
|
|
<Card key={index}>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-lg bg-primary/10">
|
|
<Icon className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|