107 lines
4.3 KiB
TypeScript
107 lines
4.3 KiB
TypeScript
import { Card } from "@/components/ui/card"
|
|
import { MapPin, Snowflake, Sprout, Users, Calendar, Coins } from "lucide-react"
|
|
|
|
const examples = [
|
|
{
|
|
icon: MapPin,
|
|
title: "Litter Cleanup Bounties",
|
|
description:
|
|
"Map trash hotspots in your neighborhood, set bounties for cleanup tasks, track progress on an interactive dashboard, and reward community members who pitch in.",
|
|
color: "text-primary",
|
|
bgColor: "bg-primary/10",
|
|
},
|
|
{
|
|
icon: Snowflake,
|
|
title: "Snow Shoveling Co-op",
|
|
description:
|
|
"Elderly neighbors need help? Create a schedule, assign volunteers, track completed driveways, and manage community appreciation funds—all in your rspace.",
|
|
color: "text-secondary",
|
|
bgColor: "bg-secondary/10",
|
|
},
|
|
{
|
|
icon: Sprout,
|
|
title: "Lawn Care Exchange",
|
|
description:
|
|
"Trade services with neighbors: mow a lawn, earn credits for garden help. Track commitments, share equipment calendars, and build real community connections.",
|
|
color: "text-accent",
|
|
bgColor: "bg-accent/10",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Community Tool Library",
|
|
description:
|
|
"Share tools collectively. Schedule borrowing, track inventory, split maintenance costs through shared funds, and reduce waste by owning things together.",
|
|
color: "text-primary",
|
|
bgColor: "bg-primary/10",
|
|
},
|
|
{
|
|
icon: Calendar,
|
|
title: "Neighborhood Events",
|
|
description:
|
|
"Plan block parties, potlucks, or skill-sharing workshops. Poll for dates, coordinate food signups, and manage event budgets transparently.",
|
|
color: "text-secondary",
|
|
bgColor: "bg-secondary/10",
|
|
},
|
|
{
|
|
icon: Coins,
|
|
title: "Local Mutual Aid",
|
|
description:
|
|
"Pool resources for emergency support. Transparent fund management, democratic decision-making on aid distribution, all with zero-knowledge privacy.",
|
|
color: "text-accent",
|
|
bgColor: "bg-accent/10",
|
|
},
|
|
]
|
|
|
|
export function RealWorldExamples() {
|
|
return (
|
|
<section className="border-b-4 border-secondary bg-muted/30 py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl retro-shadow-sm">
|
|
Digital Spaces for <span className="text-primary">Physical</span> Impact
|
|
</h2>
|
|
<p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
|
RSpaces aren't just for chatting online—they're tools for making your{" "}
|
|
<span className="font-semibold text-foreground">real neighborhood</span> better. Here's how communities are
|
|
already using them:
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{examples.map((example, index) => {
|
|
const Icon = example.icon
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="group relative overflow-hidden border-2 border-border bg-card p-6 transition-all hover:border-primary hover:-translate-y-1 hover:retro-shadow-sm"
|
|
>
|
|
<div
|
|
className={`absolute inset-0 ${example.bgColor} opacity-0 transition-opacity group-hover:opacity-100`}
|
|
/>
|
|
<div className="relative">
|
|
<div
|
|
className={`mb-4 inline-flex rounded-lg ${example.bgColor} p-3 ${example.color} border-2 border-current`}
|
|
>
|
|
<Icon className="h-7 w-7" />
|
|
</div>
|
|
<h3 className="mb-3 text-xl font-bold text-card-foreground">{example.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">{example.description}</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-16 text-center">
|
|
<div className="inline-block rounded-lg border-2 border-accent bg-accent/10 px-6 py-4 backdrop-blur-sm retro-shadow-sm">
|
|
<p className="text-lg font-semibold text-foreground">
|
|
<span className="text-accent">Your space.</span> <span className="text-primary">Your community.</span>{" "}
|
|
<span className="text-secondary">Your rules.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|