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

200
src/app/page.tsx
View File

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