jeffemmett
/
rvote-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rebrand to Quadratic Ranking with rSpace ecosystem styling 

- Rename "Quadratic Voting" to "Quadratic Ranking" throughout
- Update headline to "Democratic Backlog Prioritization"
- Add rSpace ecosystem branding and color scheme
- Apply cyan/teal primary colors using oklch format
- Add gradient backgrounds and decorative elements
- Focus messaging on backlog prioritization vs voting mechanism

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-05 11:15:32 +00:00
parent 1f454f67ed
commit 76f81736ec
2 changed files with 169 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/app/globals.css
View File

@ -48,71 +48,71 @@
:root { :root {
--radius: 0.625rem; --radius: 0.625rem;
--background: oklch(1 0 0); --background: oklch(0.98 0.01 195);
--foreground: oklch(0.145 0 0); --foreground: oklch(0.145 0.02 195);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0.02 195);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0.02 195);
--primary: oklch(0.205 0 0); --primary: oklch(0.65 0.18 195);
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.85 0.08 280);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.2 0.02 280);
--muted: oklch(0.97 0 0); --muted: oklch(0.95 0.02 195);
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.45 0.05 195);
--accent: oklch(0.97 0 0); --accent: oklch(0.75 0.15 145);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.15 0.02 145);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0); --border: oklch(0.88 0.04 195);
--input: oklch(0.922 0 0); --input: oklch(0.92 0.02 195);
--ring: oklch(0.708 0 0); --ring: oklch(0.65 0.18 195);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.65 0.18 195);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.7 0.15 145);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.65 0.12 280);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.75 0.18 85);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.7 0.2 30);
--sidebar: oklch(0.985 0 0); --sidebar: oklch(0.98 0.01 195);
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: oklch(0.145 0.02 195);
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: oklch(0.65 0.18 195);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: oklch(0.92 0.04 195);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.2 0.02 195);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.88 0.04 195);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.65 0.18 195);
} }
.dark { .dark {
--background: oklch(0.145 0 0); --background: oklch(0.12 0.02 195);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.95 0.01 195);
--card: oklch(0.205 0 0); --card: oklch(0.18 0.02 195);
--card-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.95 0.01 195);
--popover: oklch(0.205 0 0); --popover: oklch(0.18 0.02 195);
--popover-foreground: oklch(0.985 0 0); --popover-foreground: oklch(0.95 0.01 195);
--primary: oklch(0.922 0 0); --primary: oklch(0.75 0.18 195);
--primary-foreground: oklch(0.205 0 0); --primary-foreground: oklch(0.12 0.02 195);
--secondary: oklch(0.269 0 0); --secondary: oklch(0.35 0.08 280);
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: oklch(0.95 0.01 280);
--muted: oklch(0.269 0 0); --muted: oklch(0.25 0.02 195);
--muted-foreground: oklch(0.708 0 0); --muted-foreground: oklch(0.65 0.05 195);
--accent: oklch(0.269 0 0); --accent: oklch(0.6 0.15 145);
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.95 0.01 145);
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%); --border: oklch(0.3 0.04 195);
--input: oklch(1 0 0 / 15%); --input: oklch(0.25 0.02 195);
--ring: oklch(0.556 0 0); --ring: oklch(0.75 0.18 195);
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.75 0.18 195);
--chart-2: oklch(0.696 0.17 162.48); --chart-2: oklch(0.7 0.15 145);
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.65 0.12 280);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.75 0.18 85);
--chart-5: oklch(0.645 0.246 16.439); --chart-5: oklch(0.7 0.2 30);
--sidebar: oklch(0.205 0 0); --sidebar: oklch(0.15 0.02 195);
--sidebar-foreground: oklch(0.985 0 0); --sidebar-foreground: oklch(0.95 0.01 195);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: oklch(0.75 0.18 195);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.12 0.02 195);
--sidebar-accent: oklch(0.269 0 0); --sidebar-accent: oklch(0.25 0.04 195);
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.95 0.01 195);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(0.3 0.04 195);
--sidebar-ring: oklch(0.556 0 0); --sidebar-ring: oklch(0.75 0.18 195);
} }
@layer base { @layer base {

200
src/app/page.tsx
View File

@ -19,6 +19,9 @@ import {
CheckCircle, CheckCircle,
Shield, Shield,
Play, Play,
ListOrdered,
Target,
Layers,
} from "lucide-react"; } from "lucide-react";
export default async function HomePage() { export default async function HomePage() {
@ -76,85 +79,92 @@ export default async function HomePage() {
return ( return (
<div className="space-y-16"> <div className="space-y-16">
{/* Hero section */} {/* Hero section */}
<section className="text-center py-16 space-y-6"> <section className="relative text-center py-16 space-y-6 overflow-hidden">
<Badge variant="secondary" className="text-sm px-4 py-1"> <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10 -z-10" />
Quadratic Voting for Communities <div className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl -z-10" />
<div className="absolute bottom-0 left-0 w-96 h-96 bg-accent/5 rounded-full blur-3xl -z-10" />
<Badge variant="secondary" className="text-sm px-4 py-1 bg-primary/10 text-primary border-primary/20">
Part of the rSpace Ecosystem
</Badge> </Badge>
<h1 className="text-5xl md:text-6xl font-bold tracking-tight max-w-4xl mx-auto leading-tight"> <h1 className="text-5xl md:text-6xl font-bold tracking-tight max-w-4xl mx-auto leading-tight">
Democratic Governance,{" "} Democratic Backlog{" "}
<span className="text-primary">Reimagined</span> <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Prioritization</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto"> <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
rVote uses quadratic voting to give every voice weight while preventing rVote uses <strong className="text-foreground">quadratic ranking</strong> to let your community democratically
any single actor from dominating. Proposals are ranked by the community, prioritize proposals. The best ideas rise to the top through collective intelligence,
and the best ideas rise to the top. then advance to final voting.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4 pt-4"> <div className="flex flex-col sm:flex-row justify-center gap-4 pt-4">
<Button asChild size="lg" className="text-lg px-8"> <Button asChild size="lg" className="text-lg px-8 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70">
<Link href="/demo"> <Link href="/demo">
<Play className="mr-2 h-5 w-5" /> <Play className="mr-2 h-5 w-5" />
Try the Demo Try the Demo
</Link> </Link>
</Button> </Button>
{!session?.user ? ( {!session?.user ? (
<Button asChild variant="outline" size="lg" className="text-lg px-8"> <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
<Link href="/auth/signup">Create Account</Link> <Link href="/auth/signup">Create Account</Link>
</Button> </Button>
) : ( ) : (
<Button asChild variant="outline" size="lg" className="text-lg px-8"> <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
<Link href="/proposals">Browse Proposals</Link> <Link href="/proposals">Browse Proposals</Link>
</Button> </Button>
)} )}
</div> </div>
</section> </section>
{/* What is Quadratic Voting */} {/* What is Quadratic Ranking */}
<section className="py-8"> <section className="py-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-4">What is Quadratic Voting?</h2> <Badge variant="outline" className="mb-4 border-primary/30">The Core Concept</Badge>
<h2 className="text-3xl font-bold mb-4">What is Quadratic Ranking?</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto"> <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
A voting system where the cost of each additional vote increases A system where expressing <em>strong</em> preference costs progressively more,
quadratically, making it expensive to dominate but cheap to participate. creating a fair and balanced priority list that reflects true community consensus.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<Card className="border-2"> <Card className="border-2 border-destructive/20 bg-destructive/5">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Scale className="h-5 w-5 text-primary" /> <Scale className="h-5 w-5 text-destructive" />
The Problem with Traditional Voting The Problem
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3 text-muted-foreground"> <CardContent className="space-y-3 text-muted-foreground">
<p> <p>
In traditional systems, those with more resources (time, money, Traditional priority systems let those with more time, resources, or influence
influence) can easily dominate outcomes. dominate what gets attention.
</p> </p>
<ul className="list-disc list-inside space-y-1"> <ul className="list-disc list-inside space-y-1">
<li>One vote per person ignores intensity of preference</li> <li>Loudest voices set the agenda</li>
<li>Unlimited voting lets whales control results</li> <li>Important but less flashy ideas get buried</li>
<li>Small voices get drowned out</li> <li>No way to express intensity of preference</li>
<li>Backlogs become political battlegrounds</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-2 border-primary/50 bg-primary/5"> <Card className="border-2 border-primary/30 bg-gradient-to-br from-primary/5 to-accent/5">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-primary" /> <CheckCircle className="h-5 w-5 text-primary" />
The Quadratic Solution The Solution: Quadratic Ranking
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3 text-muted-foreground"> <CardContent className="space-y-3 text-muted-foreground">
<p> <p>
Quadratic voting balances participation and conviction by making Quadratic ranking balances participation and conviction by making
additional votes progressively more expensive. additional votes progressively more expensive.
</p> </p>
<ul className="list-disc list-inside space-y-1"> <ul className="list-disc list-inside space-y-1">
<li>1 vote = 1 credit, 2 votes = 4 credits, 3 = 9</li> <li>1 vote = 1 credit, 2 votes = 4, 3 = 9</li>
<li>Everyone can participate meaningfully</li>
<li>Express strong opinions, but at a cost</li> <li>Express strong opinions, but at a cost</li>
<li>More voices, more balanced outcomes</li> <li>Naturally surfaces community consensus</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
@ -169,73 +179,77 @@ export default async function HomePage() {
{[1, 2, 3, 4, 5].map((votes) => ( {[1, 2, 3, 4, 5].map((votes) => (
<div <div
key={votes} key={votes}
className="p-4 rounded-lg border-2 bg-card hover:border-primary/50 transition-colors" className="p-4 rounded-lg border-2 bg-card hover:border-primary/50 hover:bg-primary/5 transition-all duration-200"
> >
<div className="text-2xl font-bold text-primary">{votes}</div> <div className="text-2xl font-bold text-primary">{votes}</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
vote{votes > 1 ? "s" : ""} vote{votes > 1 ? "s" : ""}
</div> </div>
<div className="text-lg font-mono mt-2">{votes * votes}</div> <div className="text-lg font-mono mt-2 text-accent">{votes * votes}</div>
<div className="text-xs text-muted-foreground">credits</div> <div className="text-xs text-muted-foreground">credits</div>
</div> </div>
))} ))}
</div> </div>
<p className="text-center text-sm text-muted-foreground mt-4"> <p className="text-center text-sm text-muted-foreground mt-4">
It&apos;s more efficient to spread votes across proposals you support Spreading votes across proposals you support is more efficient than concentrating on one.
than to concentrate them on one.
</p> </p>
</div> </div>
</section> </section>
{/* How it works - 2 stages */} {/* How it creates a democratic backlog */}
<section className="py-8 bg-muted/30 -mx-4 px-4 rounded-xl"> <section className="py-8 bg-gradient-to-r from-primary/5 via-transparent to-accent/5 -mx-4 px-4 rounded-xl">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-4">Two-Stage Voting Process</h2> <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">How It Works</Badge>
<h2 className="text-3xl font-bold mb-4">From Chaos to Consensus</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto"> <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Proposals go through ranking before reaching a final vote, ensuring Transform your community&apos;s ideas into a democratically prioritized backlog
only well-supported ideas get full consideration. through two simple stages.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<Card> <Card className="border-primary/20 bg-card/80 backdrop-blur">
<CardHeader> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center"> <div className="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center">
<span className="font-bold text-primary">1</span> <ListOrdered className="h-5 w-5 text-primary-foreground" />
</div> </div>
<div> <div>
<Badge className="mb-1">Stage 1</Badge> <Badge className="mb-1 bg-primary/10 text-primary">Stage 1</Badge>
<CardTitle>Ranking</CardTitle> <CardTitle>Quadratic Ranking</CardTitle>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="text-muted-foreground"> <CardContent className="text-muted-foreground">
<ul className="space-y-2"> <ul className="space-y-2">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<TrendingUp className="h-4 w-4 mt-1 shrink-0" /> <TrendingUp className="h-4 w-4 mt-1 shrink-0 text-primary" />
<span>Proposals start here</span> <span>All proposals enter the ranking pool</span>
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Coins className="h-4 w-4 mt-1 shrink-0" /> <Coins className="h-4 w-4 mt-1 shrink-0 text-primary" />
<span>Upvote/downvote with quadratic cost</span> <span>Upvote/downvote with quadratic cost</span>
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Clock className="h-4 w-4 mt-1 shrink-0" /> <Clock className="h-4 w-4 mt-1 shrink-0 text-primary" />
<span>Votes decay over 30-60 days</span> <span>Votes decay over 30-60 days</span>
</li> </li>
<li className="flex items-start gap-2">
<Target className="h-4 w-4 mt-1 shrink-0 text-primary" />
<span>Creates a living priority queue</span>
</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-primary/50"> <Card className="border-accent/30 bg-gradient-to-br from-accent/10 to-primary/10">
<CardHeader> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center"> <div className="h-10 w-10 rounded-full bg-gradient-to-br from-accent to-primary flex items-center justify-center">
<ArrowRight className="h-5 w-5 text-primary-foreground" /> <ArrowRight className="h-5 w-5 text-white" />
</div> </div>
<div> <div>
<Badge variant="secondary" className="mb-1"> <Badge variant="secondary" className="mb-1 bg-accent/20 text-accent-foreground">
Threshold Threshold
</Badge> </Badge>
<CardTitle>Score +100</CardTitle> <CardTitle>Score +100</CardTitle>
@ -244,44 +258,48 @@ export default async function HomePage() {
</CardHeader> </CardHeader>
<CardContent className="text-muted-foreground"> <CardContent className="text-muted-foreground">
<p> <p>
When a proposal reaches a score of <strong>+100</strong>, it When a proposal reaches a score of <strong className="text-foreground">+100</strong>, it
automatically advances to the final voting stage. automatically advances to the final voting stage.
</p> </p>
<p className="mt-2 text-sm"> <p className="mt-2 text-sm">
This ensures only proposals with genuine community support move This ensures only proposals with genuine community support move
forward. forward for implementation decisions.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border-secondary/30 bg-card/80 backdrop-blur">
<CardHeader> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center"> <div className="h-10 w-10 rounded-full bg-gradient-to-br from-secondary to-secondary/60 flex items-center justify-center">
<span className="font-bold text-primary">2</span> <Vote className="h-5 w-5 text-secondary-foreground" />
</div> </div>
<div> <div>
<Badge variant="outline" className="mb-1"> <Badge variant="outline" className="mb-1 border-secondary/30">
Stage 2 Stage 2
</Badge> </Badge>
<CardTitle>Pass/Fail</CardTitle> <CardTitle>Pass/Fail Vote</CardTitle>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="text-muted-foreground"> <CardContent className="text-muted-foreground">
<ul className="space-y-2"> <ul className="space-y-2">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Vote className="h-4 w-4 mt-1 shrink-0" /> <Vote className="h-4 w-4 mt-1 shrink-0 text-secondary" />
<span>Yes / No / Abstain voting</span> <span>Yes / No / Abstain voting</span>
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Users className="h-4 w-4 mt-1 shrink-0" /> <Users className="h-4 w-4 mt-1 shrink-0 text-secondary" />
<span>One member = one vote</span> <span>One member = one vote</span>
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Clock className="h-4 w-4 mt-1 shrink-0" /> <Clock className="h-4 w-4 mt-1 shrink-0 text-secondary" />
<span>7-day voting period</span> <span>7-day voting period</span>
</li> </li>
<li className="flex items-start gap-2">
<CheckCircle className="h-4 w-4 mt-1 shrink-0 text-secondary" />
<span>Majority decides implementation</span>
</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
@ -291,14 +309,15 @@ export default async function HomePage() {
{/* Features */} {/* Features */}
<section className="py-8"> <section className="py-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-4">Built for Fair Governance</h2> <h2 className="text-3xl font-bold mb-4">Built for Fair Prioritization</h2>
<p className="text-muted-foreground">Everything you need for democratic backlog management</p>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<Card> <Card className="border-primary/20 hover:border-primary/40 transition-colors">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-3"> <div className="h-12 w-12 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center mx-auto mb-3">
<Coins className="h-6 w-6 text-green-500" /> <Coins className="h-6 w-6 text-white" />
</div> </div>
<h3 className="font-semibold mb-1">Earn Credits Daily</h3> <h3 className="font-semibold mb-1">Earn Credits Daily</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@ -307,10 +326,10 @@ export default async function HomePage() {
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border-primary/20 hover:border-primary/40 transition-colors">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="h-12 w-12 rounded-full bg-blue-500/10 flex items-center justify-center mx-auto mb-3"> <div className="h-12 w-12 rounded-full bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center mx-auto mb-3">
<Clock className="h-6 w-6 text-blue-500" /> <Clock className="h-6 w-6 text-white" />
</div> </div>
<h3 className="font-semibold mb-1">Vote Decay</h3> <h3 className="font-semibold mb-1">Vote Decay</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@ -319,10 +338,10 @@ export default async function HomePage() {
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border-primary/20 hover:border-primary/40 transition-colors">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="h-12 w-12 rounded-full bg-purple-500/10 flex items-center justify-center mx-auto mb-3"> <div className="h-12 w-12 rounded-full bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center mx-auto mb-3">
<Shield className="h-6 w-6 text-purple-500" /> <Shield className="h-6 w-6 text-white" />
</div> </div>
<h3 className="font-semibold mb-1">Sybil Resistant</h3> <h3 className="font-semibold mb-1">Sybil Resistant</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@ -331,10 +350,10 @@ export default async function HomePage() {
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border-primary/20 hover:border-primary/40 transition-colors">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="h-12 w-12 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-3"> <div className="h-12 w-12 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center mx-auto mb-3">
<Zap className="h-6 w-6 text-orange-500" /> <Zap className="h-6 w-6 text-white" />
</div> </div>
<h3 className="font-semibold mb-1">Auto Promotion</h3> <h3 className="font-semibold mb-1">Auto Promotion</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@ -349,27 +368,27 @@ export default async function HomePage() {
{(rankingCount > 0 || userCount > 1) && ( {(rankingCount > 0 || userCount > 1) && (
<section className="py-8"> <section className="py-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<Card> <Card className="bg-gradient-to-br from-primary/10 to-transparent border-primary/20">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="text-3xl font-bold">{userCount}</div> <div className="text-3xl font-bold text-primary">{userCount}</div>
<p className="text-sm text-muted-foreground">Members</p> <p className="text-sm text-muted-foreground">Members</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="bg-gradient-to-br from-accent/10 to-transparent border-accent/20">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="text-3xl font-bold">{rankingCount}</div> <div className="text-3xl font-bold text-accent">{rankingCount}</div>
<p className="text-sm text-muted-foreground">Being Ranked</p> <p className="text-sm text-muted-foreground">Being Ranked</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="bg-gradient-to-br from-secondary/10 to-transparent border-secondary/20">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="text-3xl font-bold">{votingCount}</div> <div className="text-3xl font-bold text-secondary">{votingCount}</div>
<p className="text-sm text-muted-foreground">In Voting</p> <p className="text-sm text-muted-foreground">In Voting</p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="bg-gradient-to-br from-green-500/10 to-transparent border-green-500/20">
<CardContent className="pt-6 text-center"> <CardContent className="pt-6 text-center">
<div className="text-3xl font-bold">{passedCount}</div> <div className="text-3xl font-bold text-green-600">{passedCount}</div>
<p className="text-sm text-muted-foreground">Passed</p> <p className="text-sm text-muted-foreground">Passed</p>
</CardContent> </CardContent>
</Card> </Card>
@ -382,7 +401,7 @@ export default async function HomePage() {
<section className="py-8"> <section className="py-8">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold">Active Proposals</h2> <h2 className="text-2xl font-bold">Active Proposals</h2>
<Button asChild variant="ghost"> <Button asChild variant="ghost" className="text-primary hover:text-primary/80">
<Link href="/proposals"> <Link href="/proposals">
View All <ArrowRight className="ml-2 h-4 w-4" /> View All <ArrowRight className="ml-2 h-4 w-4" />
</Link> </Link>
@ -398,22 +417,25 @@ export default async function HomePage() {
{/* CTA */} {/* CTA */}
<section className="py-12"> <section className="py-12">
<Card className="border-2 border-primary/50 bg-gradient-to-br from-primary/5 to-primary/10"> <Card className="border-2 border-primary/30 bg-gradient-to-br from-primary/10 via-accent/5 to-secondary/10 overflow-hidden relative">
<CardContent className="py-12 text-center space-y-6"> <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
<h2 className="text-3xl font-bold">Ready to give it a try?</h2> <div className="absolute bottom-0 left-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl" />
<CardContent className="py-12 text-center space-y-6 relative">
<Badge className="bg-primary/10 text-primary border-primary/20">Join the rSpace Ecosystem</Badge>
<h2 className="text-3xl font-bold">Ready to prioritize democratically?</h2>
<p className="text-lg text-muted-foreground max-w-xl mx-auto"> <p className="text-lg text-muted-foreground max-w-xl mx-auto">
Experience quadratic voting firsthand. Try the interactive demo or Experience quadratic ranking firsthand. Try the interactive demo or
create an account to start participating in community governance. create an account to start building your community&apos;s backlog together.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4">
<Button asChild size="lg" className="text-lg px-8"> <Button asChild size="lg" className="text-lg px-8 bg-gradient-to-r from-primary to-accent hover:opacity-90">
<Link href="/demo"> <Link href="/demo">
<Play className="mr-2 h-5 w-5" /> <Play className="mr-2 h-5 w-5" />
Interactive Demo Interactive Demo
</Link> </Link>
</Button> </Button>
{!session?.user && ( {!session?.user && (
<Button asChild variant="outline" size="lg" className="text-lg px-8"> <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
<Link href="/auth/signup"> <Link href="/auth/signup">
Create Free Account Create Free Account
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />