110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { BookOpen, Users, Sprout, MessageCircle } from "lucide-react"
|
|
|
|
export function ActionSection() {
|
|
const actions = [
|
|
{
|
|
icon: <BookOpen className="h-6 w-6" />,
|
|
title: "Learn & Research",
|
|
description: "Dive deeper into alternative economic models and post-capitalist theory.",
|
|
action: "Explore Resources",
|
|
},
|
|
{
|
|
icon: <Users className="h-6 w-6" />,
|
|
title: "Build Community",
|
|
description: "Connect with others working on economic alternatives in your area.",
|
|
action: "Find Groups",
|
|
},
|
|
{
|
|
icon: <Sprout className="h-6 w-6" />,
|
|
title: "Start Small",
|
|
description: "Begin implementing alternative practices in your daily life and community.",
|
|
action: "Take Action",
|
|
},
|
|
{
|
|
icon: <MessageCircle className="h-6 w-6" />,
|
|
title: "Spread Awareness",
|
|
description: "Share these ideas and help others understand that alternatives exist.",
|
|
action: "Share Ideas",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section id="action" className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
|
|
{"Ready to "}
|
|
<span className="text-primary">Take Action</span>
|
|
{"?"}
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
|
|
{"The transition to post-capitalist alternatives starts with each of us. "}
|
|
{"Here's how you can begin contributing to the mycelial revolution."}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
|
{actions.map((action, index) => (
|
|
<Card
|
|
key={index}
|
|
className="text-center border-primary/20 hover:border-primary/40 transition-all duration-300 hover:scale-105"
|
|
>
|
|
<CardHeader>
|
|
<div className="mx-auto mb-4 p-3 bg-primary/10 rounded-full w-fit">{action.icon}</div>
|
|
<CardTitle className="text-lg">{action.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-muted-foreground mb-4 leading-relaxed">{action.description}</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
|
|
>
|
|
{action.action}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-8 text-center">
|
|
<h3 className="text-3xl font-bold mb-4">Join the Mycommunity</h3>
|
|
<p className="text-lg text-muted-foreground mb-6 max-w-2xl mx-auto leading-relaxed">
|
|
{"Connect with others exploring post-capitalist alternatives. "}
|
|
{"Together, we can grow the mycelial networks of mutual aid and solidarity."}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="pulse-glow"
|
|
onClick={() => window.open("https://discord.gg/DegMn5xMCC", "_blank")}
|
|
>
|
|
🍄 Join Discord Community
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground bg-transparent"
|
|
onClick={() => window.open("https://allthingsdecent.substack.com/", "_blank")}
|
|
>
|
|
Subscribe to Newsletter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<footer className="mt-16 pt-8 border-t border-primary/20 text-center">
|
|
<p className="text-muted-foreground">
|
|
{"Built with 🍄 for the mycelial revolution • "}
|
|
<span className="text-primary font-semibold">TrippinBalls.lol</span>
|
|
{" • Exploring post-capitalist futures"}
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|