723 lines
34 KiB
TypeScript
723 lines
34 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { ArrowRight, Calendar, MapPin, Users, Heart, Sprout, Network, X, Mail, Loader2, CheckCircle2 } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { useState } from "react"
|
||
|
||
export default function HomePage() {
|
||
const [selectedImage, setSelectedImage] = useState<string | null>(null)
|
||
const [email, setEmail] = useState("")
|
||
const [subscribeStatus, setSubscribeStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
|
||
const [subscribeError, setSubscribeError] = useState("")
|
||
|
||
const handleSubscribe = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (!email) return
|
||
|
||
setSubscribeStatus("loading")
|
||
setSubscribeError("")
|
||
|
||
try {
|
||
const res = await fetch("https://blog.crypto-commons.org/members/api/send-magic-link/", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ email, emailType: "subscribe" }),
|
||
})
|
||
|
||
if (res.ok) {
|
||
setSubscribeStatus("success")
|
||
setEmail("")
|
||
} else {
|
||
throw new Error("Subscription failed")
|
||
}
|
||
} catch {
|
||
setSubscribeStatus("error")
|
||
setSubscribeError("Something went wrong. Please try again.")
|
||
}
|
||
}
|
||
|
||
const handleImageClick = (imageSrc: string) => {
|
||
setSelectedImage(imageSrc)
|
||
}
|
||
|
||
const handleCloseModal = () => {
|
||
setSelectedImage(null)
|
||
}
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === "Escape") {
|
||
handleCloseModal()
|
||
}
|
||
}
|
||
|
||
const handleAddToCalendar = () => {
|
||
const event = {
|
||
title: "Crypto Commons Gathering 2026",
|
||
description:
|
||
"A week-long retreat where genuine desire for postcapitalist change meets blockchain tinkering, commons building, and radical imagination in the Austrian Alps.",
|
||
location: "Commons Hub, Richard von Schoeller-Straße 9, 2651 Reichenau an der Rax, Austria",
|
||
startDate: "2026-08-16T15:00:00",
|
||
endDate: "2026-08-22T12:00:00",
|
||
}
|
||
|
||
const icsContent = `BEGIN:VCALENDAR
|
||
VERSION:2.0
|
||
PRODID:-//Crypto Commons Gathering//CCG 2026//EN
|
||
BEGIN:VEVENT
|
||
UID:ccg2026@cryptocommonsgather.ing
|
||
DTSTAMP:${new Date().toISOString().replace(/[-:]/g, "").split(".")[0]}Z
|
||
DTSTART:${event.startDate.replace(/[-:]/g, "")}
|
||
DTEND:${event.endDate.replace(/[-:]/g, "")}
|
||
SUMMARY:${event.title}
|
||
DESCRIPTION:${event.description}
|
||
LOCATION:${event.location}
|
||
STATUS:CONFIRMED
|
||
END:VEVENT
|
||
END:VCALENDAR`
|
||
|
||
const blob = new Blob([icsContent], { type: "text/calendar;charset=utf-8" })
|
||
const link = document.createElement("a")
|
||
link.href = URL.createObjectURL(blob)
|
||
link.download = "ccg2026.ics"
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
}
|
||
|
||
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/60 via-background/50 to-background/70 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-6 py-2 bg-primary/20 border-2 border-primary/40 rounded-full backdrop-blur-sm">
|
||
<p className="text-lg md:text-xl font-mono font-semibold text-primary">August 16-23, 2026</p>
|
||
</div>
|
||
|
||
<p className="text-xl md:text-2xl text-foreground/90 mb-8 max-w-2xl mx-auto text-pretty leading-relaxed font-medium">
|
||
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-8">
|
||
<Button size="lg" className="gap-2 text-base" asChild>
|
||
<Link href="/register">
|
||
Register Now to Save Your Seat! <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="gap-2 text-base bg-transparent backdrop-blur-sm"
|
||
onClick={handleAddToCalendar}
|
||
>
|
||
<Calendar className="w-4 h-4" />
|
||
Add to Calendar
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="gap-2 text-base bg-transparent backdrop-blur-sm"
|
||
onClick={() => {
|
||
const aboutSection = document.getElementById("about-ccg")
|
||
aboutSection?.scrollIntoView({ behavior: "smooth" })
|
||
}}
|
||
>
|
||
Learn about the Event
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="max-w-md mx-auto mb-12">
|
||
<p className="text-sm text-foreground/80 mb-3 font-medium">
|
||
Drop your email to stay in the loop on upcoming announcements!
|
||
</p>
|
||
{subscribeStatus === "success" ? (
|
||
<div className="flex items-center justify-center gap-2 text-sm text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 rounded-md py-2.5 px-4 border border-green-200 dark:border-green-800">
|
||
<CheckCircle2 className="w-4 h-4" />
|
||
You're subscribed! Check your inbox to confirm.
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubscribe} className="flex gap-2">
|
||
<Input
|
||
type="email"
|
||
placeholder="your@email.com"
|
||
value={email}
|
||
onChange={(e) => { setEmail(e.target.value); setSubscribeStatus("idle") }}
|
||
required
|
||
className="bg-background/80 backdrop-blur-sm"
|
||
/>
|
||
<Button type="submit" size="default" className="gap-2 shrink-0" disabled={subscribeStatus === "loading"}>
|
||
{subscribeStatus === "loading" ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<Mail className="w-4 h-4" />
|
||
)}
|
||
Subscribe
|
||
</Button>
|
||
</form>
|
||
)}
|
||
{subscribeStatus === "error" && (
|
||
<p className="text-sm text-destructive mt-2">{subscribeError}</p>
|
||
)}
|
||
</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/20250826-161715.jpg")}
|
||
>
|
||
<img
|
||
src="/images/20250826-161715.jpg"
|
||
alt="Discussion circle at Commons Hub with Austrian Alps backdrop"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* What is CCG Section */}
|
||
<section className="py-24 px-4 bg-muted/30" id="about-ccg">
|
||
<div className="container mx-auto max-w-4xl">
|
||
<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">
|
||
Unconference 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 – crypto, 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">
|
||
<Link href="https://www.refidao.com/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">ReFi DAO</Link>,{" "}
|
||
<Link href="https://www.ethichub.com/en" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">EthicHub</Link>,{" "}
|
||
<Link href="https://www.collaborative-finance.net/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">CoFi Gathering</Link>,{" "}
|
||
<Link href="https://www.regen.network/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Regen Network</Link>,{" "}
|
||
<Link href="https://circles.garden/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Circles UBI</Link>
|
||
</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">
|
||
<Link href="https://mycofi.earth" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">MycoFi</Link>,{" "}
|
||
<Link href="https://psilo-cyber.net/ics" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Psilo-Cybernetics</Link>,{" "}
|
||
<Link href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Post-Appitalism</Link>
|
||
</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">
|
||
<Link href="https://ecsa.io/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Economic Space Agency</Link>,{" "}
|
||
<Link href="https://bread.coop/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Bread Coop</Link>,{" "}
|
||
<Link href="https://www.holochain.org/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Holochain</Link>
|
||
</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">
|
||
<Link href="https://pocas.store/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">pocas</Link>,{" "}
|
||
<Link href="https://dandelion.events/e/ct16g" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Solar Punk WOW</Link>,{" "}
|
||
<Link href="https://linktr.ee/futurescraft" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Futurescraft</Link>, 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/4] bg-muted rounded-lg overflow-hidden">
|
||
<img
|
||
src="/images/20220429-145359.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 mountains 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="/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 Now to Save Your Seat! <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button size="lg" variant="outline" asChild>
|
||
<Link href="/transparency">Financial Transparency</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="max-w-md mx-auto mb-8">
|
||
<p className="text-sm text-muted-foreground mb-3 font-medium">
|
||
Drop your email to stay in the loop on upcoming announcements!
|
||
</p>
|
||
{subscribeStatus === "success" ? (
|
||
<div className="flex items-center justify-center gap-2 text-sm text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 rounded-md py-2.5 px-4 border border-green-200 dark:border-green-800">
|
||
<CheckCircle2 className="w-4 h-4" />
|
||
You're subscribed! Check your inbox to confirm.
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubscribe} className="flex gap-2">
|
||
<Input
|
||
type="email"
|
||
placeholder="your@email.com"
|
||
value={email}
|
||
onChange={(e) => { setEmail(e.target.value); setSubscribeStatus("idle") }}
|
||
required
|
||
/>
|
||
<Button type="submit" size="default" className="gap-2 shrink-0" disabled={subscribeStatus === "loading"}>
|
||
{subscribeStatus === "loading" ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<Mail className="w-4 h-4" />
|
||
)}
|
||
Subscribe
|
||
</Button>
|
||
</form>
|
||
)}
|
||
{subscribeStatus === "error" && (
|
||
<p className="text-sm text-destructive mt-2">{subscribeError}</p>
|
||
)}
|
||
</div>
|
||
|
||
<p className="text-sm text-muted-foreground">
|
||
Interested in the Crypto Commons Association cooperative? Learn more at the event.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Valley of the Commons Section */}
|
||
<section className="py-24 px-4 relative overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center"
|
||
style={{
|
||
backgroundImage: `url('/images/20220429-145359.jpg')`,
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-background/95 via-background/90 to-background/95" />
|
||
<div className="container mx-auto max-w-5xl relative z-10">
|
||
<div className="text-center mb-12">
|
||
<p className="text-sm font-mono text-primary mb-3 tracking-wider uppercase">New for 2026</p>
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">
|
||
Stay for the Valley of the Commons
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
|
||
When CCG wraps on August 22, the experiment is just getting started. Stick around for 1 to 4 weeks and
|
||
join a new extended event right where you are — in the Austrian Alps.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 items-start mb-12">
|
||
<div>
|
||
<h3 className="text-xl font-bold mb-4">What is it?</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Valley of the Commons is a four-week experimental pop-up village running{" "}
|
||
<span className="font-semibold text-foreground">August 24 – September 20, 2026</span> — picking up
|
||
just two days after CCG ends. It's not a conference or a simulation: it's a functioning co-living
|
||
community taking concrete steps toward permanent settlement in the Höllental valley.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Mornings are structured learning paths, afternoons bring workshops and working groups, evenings are
|
||
communal time, and weekends are open for exploring the Alps. You can stay for one week or all four.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-xl font-bold mb-4">Weekly Themes</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex gap-3 items-start">
|
||
<span className="text-primary font-mono font-bold text-sm mt-0.5 shrink-0">WK 1</span>
|
||
<div>
|
||
<p className="font-semibold text-sm">Return of the Commons</p>
|
||
<p className="text-sm text-muted-foreground">Commons theory and history, with guest speakers</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 items-start">
|
||
<span className="text-primary font-mono font-bold text-sm mt-0.5 shrink-0">WK 2</span>
|
||
<div>
|
||
<p className="font-semibold text-sm">Production & Value</p>
|
||
<p className="text-sm text-muted-foreground">Cosmo-local production, open value accounting systems</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 items-start">
|
||
<span className="text-primary font-mono font-bold text-sm mt-0.5 shrink-0">WK 3</span>
|
||
<div>
|
||
<p className="font-semibold text-sm">Cooperative Housing</p>
|
||
<p className="text-sm text-muted-foreground">Nomad-friendly communal housing, renovation, ecological integration</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 items-start">
|
||
<span className="text-primary font-mono font-bold text-sm mt-0.5 shrink-0">WK 4</span>
|
||
<div>
|
||
<p className="font-semibold text-sm">Governance & Funding</p>
|
||
<p className="text-sm text-muted-foreground">Horizontal governance, legal frameworks, funding mechanisms</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Card className="border-primary/20 bg-background/80 backdrop-blur-sm">
|
||
<CardContent className="p-6 md:p-8">
|
||
<div className="flex flex-col md:flex-row gap-6 items-center justify-between">
|
||
<div className="text-center md:text-left">
|
||
<h3 className="font-bold text-lg mb-2">CCG + Valley: The Full Experience</h3>
|
||
<p className="text-sm text-muted-foreground max-w-lg">
|
||
Come for CCG's unconference week (Aug 16-23), then flow straight into Valley of the Commons
|
||
(Aug 24 – Sep 20). Same mountains, same community, deeper roots. Perfect for digital workers,
|
||
post-corporate professionals, and anyone seeking grounded, cooperative ways of living.
|
||
</p>
|
||
</div>
|
||
<Button size="lg" variant="outline" className="gap-2 shrink-0" asChild>
|
||
<Link href="https://www.valleyofthecommons.com/" target="_blank" rel="noopener noreferrer">
|
||
Learn More <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</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-23, 2026
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-semibold mb-4 text-sm">Links</h3>
|
||
<ul className="space-y-2 text-sm">
|
||
<li>
|
||
<Link href="/register" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
Register to Attend
|
||
</Link>
|
||
</li>
|
||
<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="/directions" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
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/+n5V_wDVKWrk1ZTBh"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Join the CCG26 Telegram
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="https://t.me/+gZjhNaDswIc0ZDg0"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Join the Crypto Commons Association Telegram
|
||
</Link>
|
||
</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>
|
||
<li>
|
||
<Link href="/sponsorships" className="text-muted-foreground hover:text-foreground transition-colors">
|
||
Sponsorships
|
||
</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 a Creative Commons license. Built with solidarity for the commons.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|