458 lines
20 KiB
TypeScript
458 lines
20 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { ArrowRight, Calendar, MapPin, Users, Heart, Sprout, Network, X } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { useState } from "react"
|
||
|
||
export default function HomePage() {
|
||
const [selectedImage, setSelectedImage] = useState<string | null>(null)
|
||
|
||
const handleImageClick = (imageSrc: string) => {
|
||
setSelectedImage(imageSrc)
|
||
}
|
||
|
||
const handleCloseModal = () => {
|
||
setSelectedImage(null)
|
||
}
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === "Escape") {
|
||
handleCloseModal()
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
{selectedImage && (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
|
||
onClick={handleCloseModal}
|
||
onKeyDown={handleKeyDown}
|
||
tabIndex={0}
|
||
>
|
||
<button
|
||
className="absolute top-4 right-4 text-white hover:text-white/70 transition-colors"
|
||
onClick={handleCloseModal}
|
||
aria-label="Close"
|
||
>
|
||
<X className="w-8 h-8" />
|
||
</button>
|
||
<img
|
||
src={selectedImage || "/placeholder.svg"}
|
||
alt="Zoomed view"
|
||
className="max-w-full max-h-[90vh] object-contain rounded-lg"
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center z-0"
|
||
style={{
|
||
backgroundImage: `url('/images/20220429-145359.jpg')`,
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/70 to-background z-[1]" />
|
||
|
||
<div className="container mx-auto px-4 relative z-10 text-center max-w-5xl">
|
||
<p className="text-xl md:text-2xl font-spray text-primary mb-2 tracking-wide animate-in fade-in slide-in-from-bottom-4 duration-700 [text-shadow:_2px_2px_0_rgb(0_0_0_/_10%)]">
|
||
Join the SIXTH edition of the
|
||
</p>
|
||
|
||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 text-balance leading-[1.05] tracking-tight animate-in fade-in slide-in-from-bottom-6 duration-1000 [font-feature-settings:'ss01'] [text-shadow:_3px_3px_0_rgb(0_0_0_/_5%)]">
|
||
Crypto Commons
|
||
<br />
|
||
Gathering
|
||
</h1>
|
||
|
||
<div className="inline-block mb-6 px-4 py-1.5 bg-primary/10 border border-primary/20 rounded-full backdrop-blur-sm">
|
||
<p className="text-sm font-mono text-primary">August 16-22, 2026</p>
|
||
</div>
|
||
|
||
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty leading-relaxed">
|
||
A week-long retreat where genuine desire for postcapitalist change meets blockchain tinkering, commons
|
||
building, and radical imagination in the Austrian Alps.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||
<Button size="lg" className="gap-2 text-base" asChild>
|
||
<Link href="/register">
|
||
Register Now <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button size="lg" variant="outline" className="gap-2 text-base bg-transparent backdrop-blur-sm" asChild>
|
||
<Link href="https://t.me/+8a7PooNV6202YjI0" target="_blank" rel="noopener noreferrer">
|
||
Join Telegram
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-6 justify-center text-sm text-muted-foreground">
|
||
<div className="flex items-center gap-2">
|
||
<MapPin className="w-4 h-4 text-primary" />
|
||
<span>Reichenau an der Rax, Austria</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Calendar className="w-4 h-4 text-primary" />
|
||
<span>6 Days • Unconference</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Users className="w-4 h-4 text-primary" />
|
||
<span>Hackers, Academics, Activists, Researchers, Builders </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Community Photos Section */}
|
||
<section className="py-16 px-4 bg-background">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
<div
|
||
className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
|
||
onClick={() => handleImageClick("/images/20220901-085249.jpg")}
|
||
>
|
||
<img
|
||
src="/images/20220901-085249.jpg"
|
||
alt="Wooden bridge in Reichenau an der Rax with Austrian Alps"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
<div
|
||
className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
|
||
onClick={() => handleImageClick("/images/20220505-113225.jpg")}
|
||
>
|
||
<img
|
||
src="/images/20220505-113225.jpg"
|
||
alt="CCG 2022 community group photo in the Austrian Alps"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
<div
|
||
className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
|
||
onClick={() => handleImageClick("/images/20220429-145734.jpg")}
|
||
>
|
||
<img
|
||
src="/images/20220429-145734.jpg"
|
||
alt="Commons Hub venue in the Austrian Alps"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* What is CCG Section */}
|
||
<section className="py-24 px-4 bg-muted/30">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">What is CCG?</h2>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
The Crypto Commons Gathering (CCG) is an annual week-long retreat organised by the Crypto Commons
|
||
Association in collaboration with the Commons Hub. To its growing community, it serves as a recurring
|
||
temporary refuge from late-capitalism (or something worse) and as a convivium to reimagine how we
|
||
organize value, care and meaning for a "post-capitalist world of many worlds".
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
2026 marks the 6th edition of the CCG — six years of bringing together commons builders, token
|
||
tinkerers, speculative worldbuilders, artists, complex systems thinkers, degens turned regen, and
|
||
everyone curious about the weird futures that emerge when crypto meets genuine international and
|
||
intersectional postcapitalist desire.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<Heart className="w-8 h-8 text-primary mb-3" />
|
||
<h3 className="font-semibold mb-2">Lifelong Friendships</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Connect with like-minded individuals in a convivial setting
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<Sprout className="w-8 h-8 text-primary mb-3" />
|
||
<h3 className="font-semibold mb-2">Cross-Pollination</h3>
|
||
<p className="text-sm text-muted-foreground">Share visions, trajectories, and strategies</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<Network className="w-8 h-8 text-primary mb-3" />
|
||
<h3 className="font-semibold mb-2">New Infrastructures</h3>
|
||
<p className="text-sm text-muted-foreground">Build regenerative and cooperative systems</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<Users className="w-8 h-8 text-primary mb-3" />
|
||
<h3 className="font-semibold mb-2">Participant-Driven</h3>
|
||
<p className="text-sm text-muted-foreground">Everyone contributes and shapes the event</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Themes Section */}
|
||
<section className="py-24 px-4">
|
||
<div className="container mx-auto max-w-5xl">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-center text-balance">Themes: What to Expect</h2>
|
||
<p className="text-muted-foreground text-center mb-12 max-w-3xl mx-auto leading-relaxed">
|
||
Talks, workshops, and spontaneous experiments at CCG cover a wide range of topics. They often start with a
|
||
curiosity in using blockchain, tokenization and decentralized governance for the common good, but rarely
|
||
stay there exclusively – cooperative, non-crypto alternatives, open source projects, degrowth initiatives,
|
||
and other spheres increasingly cross-pollinate here under a decolonial, feminist, queer,
|
||
multispecies-attuned frame.
|
||
</p>
|
||
|
||
<div className="grid sm:grid-cols-2 gap-6 mb-8">
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-bold mb-3 text-lg">Regenerative & Collaborative Finance</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
ReFi DAO, EthicHub, CoFi Gathering, Regen Network, Circles UBI
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-bold mb-3 text-lg">Myco-Economics</h3>
|
||
<p className="text-sm text-muted-foreground">MycoFi and interconnected economic models</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-bold mb-3 text-lg">Governance & Mutualism</h3>
|
||
<p className="text-sm text-muted-foreground">Economic Space Agency, Bread Coop, Holochain</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-primary/20">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-bold mb-3 text-lg">Solarpunk & Radical Games</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
pocas, Solar Punk WOW, Futurescraft, economic science fiction
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Unconference Format */}
|
||
<section className="py-24 px-4 relative overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center"
|
||
style={{
|
||
backgroundImage: `url('/images/image.jpeg')`,
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 bg-primary/90" />
|
||
<div className="container mx-auto max-w-4xl text-center relative z-10">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance text-primary-foreground">
|
||
Format: How We Explore
|
||
</h2>
|
||
<p className="text-lg leading-relaxed opacity-90 mb-8 text-primary-foreground">
|
||
CCG follows an open space or "unconference" format. This means the schedule is co-created on-site by all
|
||
participants: during the daily morning circle, anyone can propose a session, host a discussion, or start a
|
||
collective experiment, and schedule it at one of five sites across the Hub, each with its own affordances.
|
||
</p>
|
||
<p className="leading-relaxed opacity-90 text-primary-foreground">
|
||
Workshops, keynotes, rituals, games and evening performances traditionally unfold organically, reflecting
|
||
the shared interests, dynamics and projects that emerge over the week.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Location Section */}
|
||
<section className="py-24 px-4">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div className="order-2 md:order-1">
|
||
<div className="aspect-[4/3] bg-muted rounded-lg overflow-hidden">
|
||
<img
|
||
src="/images/20220429-145734.jpg"
|
||
alt="Commons Hub in the Austrian Alps"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="order-1 md:order-2">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6">The Commons Hub</h2>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Located in the foothills of the Austrian Alps at Reichenau an der Rax, the Commons Hub provides a
|
||
convivial, off-grid setting perfect for deep reflection and meaningful connection.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||
The Commons Hub has become a full-fledged event hosting organization, co-led by brothers Felix and Emil
|
||
Fritsch, with exciting expansion and ecovillage plans in the works.
|
||
</p>
|
||
|
||
<div className="space-y-3 mb-8">
|
||
<div className="flex items-start gap-3">
|
||
<MapPin className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<p className="font-medium">Richard von Schoeller-Straße 9</p>
|
||
<p className="text-sm text-muted-foreground">2651 Reichenau an der Rax, Austria</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<Button variant="outline" asChild>
|
||
<Link href="https://ccg2025.vercel.app/directions" target="_blank" rel="noopener noreferrer">
|
||
Get Directions
|
||
</Link>
|
||
</Button>
|
||
<Button variant="outline" asChild>
|
||
<Link href="https://www.commons-hub.at/" target="_blank" rel="noopener noreferrer">
|
||
Visit Commons Hub
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-24 px-4 bg-muted/30">
|
||
<div className="container mx-auto max-w-3xl text-center">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">Join the Sixth Edition of CCG</h2>
|
||
<p className="text-lg text-muted-foreground mb-8 text-pretty">
|
||
Whether you're reconnecting or arriving for the first time, CCG 2026 presents a space to collectively take
|
||
stock of what crypto commons has become and what it still could be.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||
<Button size="lg" className="gap-2" asChild>
|
||
<Link href="/register">
|
||
Register and Get Tickets <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button size="lg" variant="outline" asChild>
|
||
<Link href="/transparency">Financial Transparency</Link>
|
||
</Button>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">
|
||
Interested in the Crypto Commons Association cooperative? Learn more at the event.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="py-12 px-4 border-t border-border">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-8">
|
||
<div>
|
||
<h3 className="font-bold mb-4">CCG 2026</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Crypto Commons Gathering
|
||
<br />
|
||
August 16-22, 2026
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-semibold mb-4 text-sm">Links</h3>
|
||
<ul className="space-y-2 text-sm">
|
||
<li>
|
||
<Link href="/gallery" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
Gallery
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
About CCG 2026
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="https://ccg2025.vercel.app/directions"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Directions
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/transparency" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
Financial Transparency
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-semibold mb-4 text-sm">Community</h3>
|
||
<ul className="space-y-2 text-sm">
|
||
<li>
|
||
<Link
|
||
href="https://t.me/+8a7PooNV6202YjI0"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Telegram
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<span className="text-muted-foreground">#CoFi</span>
|
||
</li>
|
||
<li>
|
||
<span className="text-muted-foreground">#MycoFi</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-semibold mb-4 text-sm">Partners</h3>
|
||
<ul className="space-y-2 text-sm">
|
||
<li>
|
||
<Link
|
||
href="https://www.commons-hub.at/"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Commons Hub
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="https://crypto-commons.org"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Crypto Commons Association
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-8 border-t border-border text-center text-sm text-muted-foreground">
|
||
<p>This website is under Creative Commons license. Built with solidarity for the commons.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|