274 lines
13 KiB
TypeScript
274 lines
13 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import {
|
||
|
|
ArrowRight,
|
||
|
|
CheckCircle,
|
||
|
|
FileText,
|
||
|
|
LightbulbIcon,
|
||
|
|
MessageSquare,
|
||
|
|
VoteIcon,
|
||
|
|
Database,
|
||
|
|
Lock,
|
||
|
|
Server,
|
||
|
|
} from "lucide-react"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
|
|
|
||
|
|
export default function AboutPage() {
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-8">
|
||
|
|
<div className="mx-auto max-w-4xl">
|
||
|
|
<div className="mb-12 text-center">
|
||
|
|
<h1 className="text-4xl font-bold">About VoxPop</h1>
|
||
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
||
|
|
Empowering citizens to shape legislation through collective wisdom
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Tabs defaultValue="platform" className="mb-12">
|
||
|
|
<TabsList className="grid w-full grid-cols-3">
|
||
|
|
<TabsTrigger value="platform">Our Platform</TabsTrigger>
|
||
|
|
<TabsTrigger value="process">Our Process</TabsTrigger>
|
||
|
|
<TabsTrigger value="technology">Our Technology</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
<TabsContent value="platform" className="mt-6">
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h2 className="text-2xl font-semibold">Decentralized Public Opinion Platform</h2>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
VoxPop is a decentralized platform that bridges the gap between citizens and policymakers. We believe
|
||
|
|
that the collective wisdom of communities should directly inform the laws that govern them.
|
||
|
|
</p>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
Our mission is to create a transparent, accessible, and effective system for public participation in the
|
||
|
|
legislative process. By leveraging blockchain technology and artificial intelligence, we ensure that
|
||
|
|
every voice is heard and every contribution is valued.
|
||
|
|
</p>
|
||
|
|
<div className="mt-8">
|
||
|
|
<h3 className="text-xl font-medium">Key Benefits</h3>
|
||
|
|
<ul className="mt-4 space-y-2">
|
||
|
|
<li className="flex items-start">
|
||
|
|
<CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">Transparent Governance</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
All submissions and votes are recorded on the blockchain, ensuring complete transparency and
|
||
|
|
accountability.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">Inclusive Participation</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Our platform is designed to be accessible to all citizens, regardless of technical expertise or
|
||
|
|
political connections.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li className="flex items-start">
|
||
|
|
<CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">Efficient Consensus Building</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
AI-powered synthesis of perspectives helps identify common ground and build consensus around
|
||
|
|
complex issues.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent value="process" className="mt-6">
|
||
|
|
<h2 className="text-2xl font-semibold">The VoxPop Process</h2>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
Our platform follows a structured process to transform individual perspectives into actionable policy
|
||
|
|
recommendations.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<MessageSquare className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">1. Perspective</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Citizens submit their raw opinions, ideas, and concerns on specific issues or proposed legislation.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<Server className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">2. Synthesis</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
AI algorithms process and synthesize similar perspectives to identify common themes and potential
|
||
|
|
solutions.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<LightbulbIcon className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">3. Insight</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Synthesized ideas become Insights that are presented to the community for review and voting.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<VoteIcon className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">4. Consensus</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Community members vote on Insights to build consensus and identify the most widely supported ideas.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<CheckCircle className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">5. Contribution</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Insights that reach community consensus become validated Contributions ready for policy
|
||
|
|
consideration.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<FileText className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="mt-4">6. Resolution</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Validated Contributions are compiled into formal Resolutions that can be presented to policymakers.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent value="technology" className="mt-6">
|
||
|
|
<h2 className="text-2xl font-semibold">Our Technology Stack</h2>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
VoxPop leverages cutting-edge technologies to ensure security, transparency, and efficiency.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="mt-8 space-y-6">
|
||
|
|
<div className="rounded-lg border p-6">
|
||
|
|
<div className="flex items-start">
|
||
|
|
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<Database className="h-5 w-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-medium">Polygon PoS Blockchain</h3>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
We use the Polygon Proof-of-Stake blockchain for its energy efficiency, low transaction costs, and
|
||
|
|
high throughput. All votes, contributions, and resolutions are recorded on-chain for complete
|
||
|
|
transparency and immutability.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border p-6">
|
||
|
|
<div className="flex items-start">
|
||
|
|
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<Server className="h-5 w-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-medium">IPFS Storage</h3>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
The InterPlanetary File System (IPFS) provides decentralized storage for perspective submissions
|
||
|
|
and other content. This ensures that data cannot be censored or altered, and remains accessible
|
||
|
|
even if VoxPop's servers are unavailable.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border p-6">
|
||
|
|
<div className="flex items-start">
|
||
|
|
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<Lock className="h-5 w-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-medium">Privado ID</h3>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
Privado ID provides privacy-preserving identity verification using zero-knowledge proofs. This
|
||
|
|
allows users to prove their eligibility to participate without revealing personal information,
|
||
|
|
preventing both identity fraud and protecting user privacy.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border p-6">
|
||
|
|
<div className="flex items-start">
|
||
|
|
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<LightbulbIcon className="h-5 w-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-medium">AI Synthesis</h3>
|
||
|
|
<p className="mt-2 text-muted-foreground">
|
||
|
|
Our proprietary AI algorithms analyze and synthesize perspectives to identify common themes,
|
||
|
|
concerns, and potential solutions. This helps transform thousands of individual opinions into
|
||
|
|
actionable insights that can be effectively evaluated by the community.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
|
||
|
|
<div className="mt-12 text-center">
|
||
|
|
<h2 className="text-2xl font-semibold">Ready to make your voice heard?</h2>
|
||
|
|
<p className="mt-4 text-muted-foreground">
|
||
|
|
Join thousands of citizens who are already shaping the future of their communities through VoxPop.
|
||
|
|
</p>
|
||
|
|
<div className="mt-8 flex flex-col gap-4 sm:flex-row sm:justify-center">
|
||
|
|
<Button asChild size="lg" className="gap-2">
|
||
|
|
<Link href="/submit">
|
||
|
|
Submit Your Perspective
|
||
|
|
<ArrowRight className="h-4 w-4" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
<Button asChild variant="outline" size="lg">
|
||
|
|
<Link href="/insights">Explore Insights</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|