206 lines
9.7 KiB
TypeScript
206 lines
9.7 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import { ArrowRight, FileText, LightbulbIcon, MessageSquare, VoteIcon } from "lucide-react"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
|
import { CountUpAnimation } from "@/components/count-up-animation"
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-8">
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section className="py-12 md:py-24">
|
||
|
|
<div className="mx-auto max-w-4xl text-center">
|
||
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Your Voice, Your Laws</h1>
|
||
|
|
<p className="mt-6 text-lg text-muted-foreground md:text-xl">
|
||
|
|
VoxPop empowers citizens to shape legislation through collective wisdom. Submit your perspectives, vote on
|
||
|
|
insights, and influence policy decisions.
|
||
|
|
</p>
|
||
|
|
<div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
|
||
|
|
<Button asChild size="lg" className="gap-2">
|
||
|
|
<Link href="/submit">
|
||
|
|
Join Now
|
||
|
|
<ArrowRight className="h-4 w-4" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
<Button asChild variant="outline" size="lg">
|
||
|
|
<Link href="/insights">Explore Insights</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Process Timeline */}
|
||
|
|
<section className="py-12">
|
||
|
|
<div className="mx-auto max-w-5xl">
|
||
|
|
<h2 className="mb-8 text-center text-3xl font-bold">How VoxPop Works</h2>
|
||
|
|
<div className="grid grid-cols-1 gap-8 md: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">Submit Perspective</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Share your opinion on issues that matter to you. Your voice is the foundation of better policy.
|
||
|
|
</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">Vote on Insights</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Review AI-synthesized insights and vote on the best ideas from the community to build consensus.
|
||
|
|
</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">Create Resolutions</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-center text-muted-foreground">
|
||
|
|
Validated contributions become formal resolutions that can be presented to policymakers.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
<div className="mt-12 flex justify-center">
|
||
|
|
<Button asChild variant="outline">
|
||
|
|
<Link href="/about">Learn More About Our Process</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Stats Dashboard */}
|
||
|
|
<section className="py-12 bg-muted/50 rounded-lg my-12">
|
||
|
|
<div className="mx-auto max-w-5xl px-4">
|
||
|
|
<h2 className="mb-8 text-center text-3xl font-bold">Community Impact</h2>
|
||
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<CountUpAnimation end={1234} className="text-4xl font-bold text-primary" prefix="" suffix="" />
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Perspectives Submitted</p>
|
||
|
|
<p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Ideas shared by the community</p>
|
||
|
|
<div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
|
||
|
|
<div className="h-full w-[85%] animate-pulse rounded-full bg-primary"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<CountUpAnimation end={567} className="text-4xl font-bold text-primary" prefix="" suffix="" />
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Insights Generated</p>
|
||
|
|
<p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">AI-synthesized solutions from perspectives</p>
|
||
|
|
<div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
|
||
|
|
<div className="h-full w-[65%] animate-pulse rounded-full bg-primary"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<CountUpAnimation end={89} className="text-4xl font-bold text-primary" prefix="" suffix="" />
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Contributions Validated</p>
|
||
|
|
<p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Community-approved ideas</p>
|
||
|
|
<div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
|
||
|
|
<div className="h-full w-[45%] animate-pulse rounded-full bg-primary"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<CountUpAnimation end={12} className="text-4xl font-bold text-primary" prefix="" suffix="" />
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Resolutions Delivered</p>
|
||
|
|
<p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Policies sent to decision-makers</p>
|
||
|
|
<div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
|
||
|
|
<div className="h-full w-[25%] animate-pulse rounded-full bg-primary"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Featured Insights */}
|
||
|
|
<section className="py-12">
|
||
|
|
<div className="mx-auto max-w-5xl">
|
||
|
|
<h2 className="mb-8 text-center text-3xl font-bold">Featured Insights</h2>
|
||
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Increase Park Funding</CardTitle>
|
||
|
|
<CardDescription>Environmental Policy</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
Community members support increasing funding for local parks by 15% to improve maintenance and add new
|
||
|
|
recreational facilities.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
<CardFooter className="flex justify-between">
|
||
|
|
<div className="flex items-center text-sm text-muted-foreground">
|
||
|
|
<VoteIcon className="mr-1 h-4 w-4" />
|
||
|
|
<span>245 votes</span>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm" asChild>
|
||
|
|
<Link href="/insights/park-funding">View Details</Link>
|
||
|
|
</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Public Transportation Expansion</CardTitle>
|
||
|
|
<CardDescription>Infrastructure</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
Residents propose extending bus routes to underserved neighborhoods and increasing service frequency
|
||
|
|
during peak hours.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
<CardFooter className="flex justify-between">
|
||
|
|
<div className="flex items-center text-sm text-muted-foreground">
|
||
|
|
<VoteIcon className="mr-1 h-4 w-4" />
|
||
|
|
<span>189 votes</span>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm" asChild>
|
||
|
|
<Link href="/insights/transportation">View Details</Link>
|
||
|
|
</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
<div className="mt-8 flex justify-center">
|
||
|
|
<Button asChild>
|
||
|
|
<Link href="/insights">
|
||
|
|
View All Insights
|
||
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Call to Action */}
|
||
|
|
<section className="py-12 md:py-24">
|
||
|
|
<div className="mx-auto max-w-3xl text-center">
|
||
|
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Ready to make your voice heard?</h2>
|
||
|
|
<p className="mt-6 text-lg text-muted-foreground">
|
||
|
|
Join thousands of citizens who are already shaping the future of their communities through VoxPop.
|
||
|
|
</p>
|
||
|
|
<div className="mt-10 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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|