jeffemmett
/
cosmolocal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add comprehensive content from foundation documentation 

Expand site from 4 to 9 sections with vision, mission pillars,
8 strategic priorities, founder bio (Michel Bauwens), investment
case with Cosmo-Local Financing Facility, core values from
Social Charter, and governance framework. Sticky nav with
backdrop blur, updated metadata/OpenGraph.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-07 13:02:06 +00:00
parent 32803f8470
commit 65e9ba0e83
2 changed files with 405 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout.tsx
View File

@ -15,11 +15,11 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Cosmolocal Foundation", title: "Cosmolocal Foundation",
description: description:
"Bridging cosmic perspective with local action. The Cosmolocal Foundation supports projects at the intersection of global coordination and community resilience.", "The Cosmolocal Foundation empowers communities to build localized, regenerative economies connected through global knowledge-sharing, commons-based collaboration, and decentralized governance.",
openGraph: { openGraph: {
title: "Cosmolocal Foundation", title: "Cosmolocal Foundation",
description: description:
"Bridging cosmic perspective with local action.", "What is heavy should be local, and what is light should be global and shared.",
url: "https://cosmolocal.world", url: "https://cosmolocal.world",
siteName: "Cosmolocal Foundation", siteName: "Cosmolocal Foundation",
type: "website", type: "website",

463
src/app/page.tsx
View File

@ -2,18 +2,24 @@ export default function Home() {
return ( return (
<div className="flex min-h-screen flex-col"> <div className="flex min-h-screen flex-col">
{/* Nav */} {/* Nav */}
<header className="border-b border-border"> <header className="border-b border-border sticky top-0 z-50 bg-background/80 backdrop-blur-sm">
<nav className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4"> <nav className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
<span className="text-lg font-semibold tracking-tight"> <a href="#" className="text-lg font-semibold tracking-tight">
Cosmolocal Foundation Cosmolocal Foundation
</span> </a>
<div className="flex items-center gap-6 text-sm text-muted"> <div className="flex items-center gap-6 text-sm text-muted">
<a href="#about" className="transition-colors hover:text-foreground"> <a href="#vision" className="hidden sm:inline transition-colors hover:text-foreground">
About Vision
</a> </a>
<a href="#mission" className="transition-colors hover:text-foreground"> <a href="#mission" className="hidden sm:inline transition-colors hover:text-foreground">
Mission Mission
</a> </a>
<a href="#priorities" className="hidden sm:inline transition-colors hover:text-foreground">
Priorities
</a>
<a href="#founder" className="hidden sm:inline transition-colors hover:text-foreground">
Founder
</a>
<a href="#contact" className="transition-colors hover:text-foreground"> <a href="#contact" className="transition-colors hover:text-foreground">
Contact Contact
</a> </a>
@ -29,19 +35,22 @@ export default function Home() {
{/* Hero */} {/* Hero */}
<section className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center"> <section className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center">
<h1 className="max-w-2xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl"> <blockquote className="text-lg italic text-muted sm:text-xl">
&ldquo;What is heavy should be local, and what is light should be global and shared.&rdquo;
</blockquote>
<h1 className="mt-8 max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
Bridging cosmic perspective Bridging cosmic perspective
<br /> <br />
with local action with local action
</h1> </h1>
<p className="mt-6 max-w-xl text-lg leading-relaxed text-muted"> <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted">
The Cosmolocal Foundation supports projects at the intersection of The Cosmolocal Foundation envisions a world where local communities
global coordination and community resilience — designing tools, thrive within regenerative economies, connected through global
frameworks, and networks for a thriving world. knowledge-sharing and commons-based collaboration.
</p> </p>
<div className="mt-10 flex gap-4"> <div className="mt-10 flex gap-4">
<a <a
href="#about" href="#vision"
className="rounded-full bg-accent px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-light" className="rounded-full bg-accent px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-light"
> >
Learn More Learn More
@ -55,42 +64,31 @@ export default function Home() {
</div> </div>
</section> </section>
{/* About */} {/* Vision */}
<section id="about" className="border-t border-border bg-foreground/[0.02]"> <section id="vision" className="border-t border-border bg-foreground/[0.02]">
<div className="mx-auto max-w-5xl px-6 py-20"> <div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight"> <h2 className="text-2xl font-semibold tracking-tight">Vision</h2>
About the Foundation <p className="mt-4 max-w-3xl text-muted leading-relaxed">
</h2> The unfolding ecological crisis and the broader metacrisis
<p className="mt-4 max-w-2xl text-muted leading-relaxed"> necessitate a fundamental reorientation of our productive forces and
The Cosmolocal Foundation is a home for projects working toward financial coordination. We must transition toward production models
planetary coordination, commons-based governance, and regenerative that prioritize long-term ecological and social resilience rather
systems. We believe in designing from both the cosmic and the local than short-term efficiency, balancing local autonomy with global
scale simultaneously — thinking globally while acting in service of cooperation.
real communities. </p>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
The Foundation bridges this gap by connecting localized regenerative
efforts with global knowledge commons and decentralized financial
coordination &mdash; scaling physically rooted projects with the
coordination capacity available through Web3 technologies.
</p>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
To achieve systemic transformation, we must relocalize production,
de-risk supply chains, and prioritize economies of scope over
economies of scale. Traditional globalization has led to fragile
supply networks &mdash; the Cosmolocal Foundation addresses this by
fostering bioregional resiliency through global collaboration.
</p> </p>
<div className="mt-12 grid gap-8 sm:grid-cols-3">
<div>
<h3 className="font-semibold">Coordination Tools</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Building open-source tools for collective decision-making,
resource allocation, and collaborative governance.
</p>
</div>
<div>
<h3 className="font-semibold">Research & Frameworks</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Developing theoretical frameworks that bridge systems thinking,
network science, and indigenous knowledge systems.
</p>
</div>
<div>
<h3 className="font-semibold">Community Networks</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Connecting practitioners, researchers, and communities working
on cosmolocal approaches to shared challenges.
</p>
</div>
</div>
</div> </div>
</section> </section>
@ -98,24 +96,361 @@ export default function Home() {
<section id="mission" className="border-t border-border"> <section id="mission" className="border-t border-border">
<div className="mx-auto max-w-5xl px-6 py-20"> <div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">Mission</h2> <h2 className="text-2xl font-semibold tracking-tight">Mission</h2>
<p className="mt-4 max-w-2xl text-muted leading-relaxed"> <p className="mt-4 max-w-3xl text-muted leading-relaxed">
Our mission is to catalyze the emergence of cosmolocal We aim to empower communities to build localized, regenerative
infrastructure — systems that are globally coordinated yet locally economies by providing open-source tools, funding, and global
adapted, open-source yet contextually meaningful, and coordination networks. Through strategic investments, pilot
technologically sophisticated yet ecologically grounded. projects, and policy advocacy, we foster:
</p> </p>
<div className="mt-12 grid gap-8 sm:grid-cols-2">
<div className="rounded-lg border border-border p-6">
<h3 className="font-semibold">Decentralized Governance</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Transparent, community-led decision-making that distributes
power equitably and ensures accountability at every level.
</p>
</div>
<div className="rounded-lg border border-border p-6">
<h3 className="font-semibold">Open Knowledge Commons</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Sharing sustainable production methods, governance models, and
regenerative blueprints globally &mdash; free and accessible to all.
</p>
</div>
<div className="rounded-lg border border-border p-6">
<h3 className="font-semibold">Commons-Compatible Capital</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Legal and property forms adapted to commons requirements,
financing transformative local projects without extractive
conditions.
</p>
</div>
<div className="rounded-lg border border-border p-6">
<h3 className="font-semibold">Cosmolocal Coordination</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Connecting localized efforts into a global, impact-driven
network where knowledge flows freely while production remains
rooted in place.
</p>
</div>
</div>
</div>
</section>
{/* Strategic Priorities */}
<section id="priorities" className="border-t border-border bg-foreground/[0.02]">
<div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">
Strategic Priorities
</h2>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
To achieve scalable impact, the Foundation executes these key
initiatives:
</p>
<div className="mt-12 grid gap-6 sm:grid-cols-2">
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
1
</span>
<div>
<h3 className="font-semibold">Mapping Regenerative Communities</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Identifying and cataloging eco-villages, circular economy hubs,
and decentralized governance initiatives worldwide to find
strategic points of leverage for intervention.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
2
</span>
<div>
<h3 className="font-semibold">Web3 Funding</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Connecting local projects with crypto-native financial
mechanisms such as quadratic funding, DAOs, and Collaborative
Finance.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
3
</span>
<div>
<h3 className="font-semibold">Open Resources</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Developing a global knowledge commons of decentralized
governance models, regenerative production blueprints, and
circular economy tools.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
4
</span>
<div>
<h3 className="font-semibold">Education & Advocacy</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Producing educational content and engaging policymakers to
scale cosmolocal principles in governance and finance.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
5
</span>
<div>
<h3 className="font-semibold">Pilots & Grants Program</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Funding and launching projects that demonstrate scalable
cosmolocal solutions, integrating blockchain transparency and
commons-based innovation.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
6
</span>
<div>
<h3 className="font-semibold">Cosmolocal Certification</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Establishing credibility and standards for cosmolocal
initiatives, verified through decentralized, blockchain-based
compliance mechanisms.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
7
</span>
<div>
<h3 className="font-semibold">Global Alliances</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Building bioregional alliances to facilitate transnational
collaboration on governance, resource management, and mutual
aid.
</p>
</div>
</div>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<div className="flex items-start gap-3">
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
8
</span>
<div>
<h3 className="font-semibold">Impact Research & Iteration</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Establishing a Cosmolocal Research Institute to track success
metrics, iterate on best practices, and drive evidence-based
scaling strategies.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Why Support */}
<section id="support" className="border-t border-border">
<div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">
Why Support the Foundation?
</h2>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
Supporters play a pivotal role in scaling decentralized,
community-driven economies. The Foundation creates systemic
transformation by bridging regenerative finance with real-world
social and ecological impact.
</p>
<div className="mt-10 grid gap-6 sm:grid-cols-2">
<div className="flex items-start gap-3">
<span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-accent" />
<p className="text-sm leading-relaxed text-muted">
<span className="font-medium text-foreground">Economic self-sufficiency</span>{" "}
and resilience for local communities
</p>
</div>
<div className="flex items-start gap-3">
<span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-accent" />
<p className="text-sm leading-relaxed text-muted">
<span className="font-medium text-foreground">Decentralized governance</span>{" "}
models that distribute power more equitably
</p>
</div>
<div className="flex items-start gap-3">
<span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-accent" />
<p className="text-sm leading-relaxed text-muted">
<span className="font-medium text-foreground">Open-source innovation</span>{" "}
to democratize knowledge and technology
</p>
</div>
<div className="flex items-start gap-3">
<span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-accent" />
<p className="text-sm leading-relaxed text-muted">
<span className="font-medium text-foreground">Commons-based economics</span>{" "}
ensuring long-term sustainable and fair returns
</p>
</div>
</div>
<div className="mt-10 rounded-lg border border-accent/20 bg-accent/5 p-6">
<h3 className="font-semibold">Cosmo-Local Financing Facility</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
The Foundation will establish a special purpose vehicle to create
a seamless bridge between impact-driven investors and local
regenerative projects. This facility allows unrooted financial
capital to flow into productive, regenerative networks, ensuring
sustainable returns through resilient, decentralized economies.
</p>
</div>
</div>
</section>
{/* Founder */}
<section id="founder" className="border-t border-border bg-foreground/[0.02]">
<div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">Founder</h2>
<div className="mt-6 max-w-3xl">
<h3 className="text-xl font-semibold">Michel Bauwens</h3>
<p className="mt-1 text-sm text-accent">
Founder, P2P Foundation
</p>
<p className="mt-4 text-muted leading-relaxed">
Michel Bauwens is the driving force behind the Cosmolocal
Foundation and a pioneering thinker in peer-to-peer economics and
commons-based governance. As the founder of the P2P Foundation, he
has researched and promoted decentralized, collaborative economic
models that empower communities through shared knowledge and
resources, and hosted the first release of the Bitcoin Whitepaper
by Satoshi Nakamoto.
</p>
<p className="mt-4 text-muted leading-relaxed">
Bauwens has led multiple initiatives demonstrating the viability
of cosmolocal approaches, such as the Ghent Commons Transition
Plan, and has advised governments (Ecuador), international
institutions (the Vatican), and grassroots organizations. He
regularly speaks at global conferences about the intersection of
decentralized technology, regenerative economics, and the future
of production and value exchange.
</p>
</div>
</div>
</section>
{/* Core Values */}
<section id="values" className="border-t border-border">
<div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">
Core Values
</h2>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
Guided by our Social Charter, the Foundation upholds these
principles across all initiatives.
</p>
<div className="mt-12 grid gap-8 sm:grid-cols-3">
<div>
<h3 className="font-semibold">Regenerative Socio-Economics</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Promoting systems where local communities pool resources for
shared prosperity, transitioning from extractive, centralized
economies to regenerative, commons-based economies.
</p>
</div>
<div>
<h3 className="font-semibold">Decentralized Systems</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Leveraging Web3 technologies &mdash; blockchain, DAOs, community
currencies &mdash; to foster transparency, inclusivity, and
fairness in governance.
</p>
</div>
<div>
<h3 className="font-semibold">Transnational Collaboration</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Building global alliances to share resources, knowledge, and
strategies across borders, strengthening local resilience
through supportive global networks.
</p>
</div>
</div>
</div>
</section>
{/* Governance */}
<section id="governance" className="border-t border-border bg-foreground/[0.02]">
<div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight">Governance</h2>
<p className="mt-4 max-w-3xl text-muted leading-relaxed">
The Foundation operates through transparent, community-led
governance with clear accountability frameworks.
</p>
<div className="mt-10 grid gap-6 sm:grid-cols-2">
<div className="rounded-lg border border-border bg-background p-6">
<h3 className="font-semibold">Transparency & Accountability</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
All financial transactions, governance decisions, and project
outcomes are documented and accessible. Periodic assessments
ensure alignment with cosmolocal principles.
</p>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<h3 className="font-semibold">Collaborative Decision-Making</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Decentralized governance mechanisms with voting for key
decisions. Members operate with autonomy within the
Foundation&apos;s principles.
</p>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<h3 className="font-semibold">Conflict Resolution</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
Disagreements are resolved through open dialogue and mediation,
with escalation paths through the core team in accordance with
shared principles.
</p>
</div>
<div className="rounded-lg border border-border bg-background p-6">
<h3 className="font-semibold">Knowledge Sharing</h3>
<p className="mt-2 text-sm text-muted leading-relaxed">
All team members document and share experiences, innovations,
and lessons learned, contributing to the commons and maintaining
thorough records.
</p>
</div>
</div>
</div> </div>
</section> </section>
{/* Contact */} {/* Contact */}
<section id="contact" className="border-t border-border bg-foreground/[0.02]"> <section id="contact" className="border-t border-border">
<div className="mx-auto max-w-5xl px-6 py-20"> <div className="mx-auto max-w-5xl px-6 py-20">
<h2 className="text-2xl font-semibold tracking-tight"> <h2 className="text-2xl font-semibold tracking-tight">
Get in Touch Get in Touch
</h2> </h2>
<p className="mt-4 max-w-xl text-muted leading-relaxed"> <p className="mt-4 max-w-xl text-muted leading-relaxed">
Interested in collaborating or learning more about the Cosmolocal Interested in collaborating, supporting, or learning more about
Foundation? Reach out to us. cosmolocal approaches? We welcome researchers, practitioners,
communities, and impact-driven investors.
</p> </p>
<a <a
href="mailto:hello@cosmolocal.world" href="mailto:hello@cosmolocal.world"
@ -130,12 +465,20 @@ export default function Home() {
<footer className="border-t border-border"> <footer className="border-t border-border">
<div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-6 text-sm text-muted"> <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-6 text-sm text-muted">
<span>&copy; {new Date().getFullYear()} Cosmolocal Foundation</span> <span>&copy; {new Date().getFullYear()} Cosmolocal Foundation</span>
<a <div className="flex items-center gap-6">
href="https://docs.cosmolocal.world" <a
className="transition-colors hover:text-foreground" href="https://p2pfoundation.net"
> className="transition-colors hover:text-foreground"
Documentation >
</a> P2P Foundation
</a>
<a
href="https://docs.cosmolocal.world"
className="transition-colors hover:text-foreground"
>
Documentation
</a>
</div>
</div> </div>
</footer> </footer>
</div> </div>