trippin-website/components/action-section.tsx

74 lines
2.5 KiB
TypeScript

"use client"
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-12">
<div className="container mx-auto px-4">
<div className="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">
{"The transition to post-capitalist alternatives starts with each of us. "}
{
"Connect with others exploring myco-economic alternatives for economies of care through mutual solidarity."
}
</p>
<div className="flex justify-center">
<Button
size="lg"
className="pulse-glow"
onClick={() => window.open("https://discord.gg/DegMn5xMCC", "_blank")}
>
🍄 Join Discord Community
</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 & "}
<a
href="https://post-appitalism.app"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline font-semibold"
>
post-appitalist futures
</a>
</p>
</footer>
</div>
</section>
)
}