ghostguild-org/app/pages/about.vue

278 lines
10 KiB
Vue

<template>
<div>
<!-- Page Header -->
<PageHeader
title="About Our Membership Circles"
subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
theme="blue"
size="large"
/>
<!-- How Ghost Guild Works -->
<section class="py-20 bg-[--ui-bg]">
<UContainer>
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-[--ui-text] mb-6">
How Ghost Guild Works
</h2>
<div class="prose prose-lg dark:prose-invert max-w-none">
<p class="text-xl font-semibold text-[--ui-text] mb-6">
Everyone gets everything. Your circle reflects where you are in
your cooperative journey. Your financial contribution reflects
what you can afford. These are completely separate choices.
</p>
<ul
class="text-lg leading-relaxed text-[--ui-text-muted] space-y-3 mb-12"
>
<li>
<strong>Equal access:</strong> The entire knowledge commons, all
events, and full community participation
</li>
<li>
<strong>Equal voice:</strong> One member, one vote in all
decisions
</li>
<li>
<strong>Solidarity economics:</strong> Pay what you can
($0-50+/month), take what you need
</li>
<li>
<strong>Value Flow integration:</strong> Contribute your skills,
time, and knowledge - not just money
</li>
</ul>
</div>
</div>
</UContainer>
</section>
<!-- Find Your Circle -->
<section class="py-20 bg-[--ui-bg-elevated]">
<UContainer>
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
Find Your Circle
</h2>
<p class="text-lg text-[--ui-text-muted] mb-12">
Circles help us provide relevant guidance and connect you with
others at similar stages. Choose based on where you are, not what
you want to access.
</p>
<div class="space-y-12">
<!-- Community Circle -->
<div class="bg-[--ui-bg] rounded-xl p-8">
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
Community Circle
</h3>
<p class="text-lg text-[--ui-text-muted] mb-6">
You're exploring what cooperatives could mean for your work
</p>
<div class="mb-6">
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
Where you might be:
</h4>
<ul class="text-[--ui-text-muted] space-y-2">
<li>
Curious about alternatives to traditional studio structures
</li>
<li>Researching cooperative principles</li>
<li>Considering if a co-op is right for you</li>
<li>Supporting the movement as an ally</li>
</ul>
</div>
<div class="mb-6">
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
We'll help you navigate:
</h4>
<ul class="text-[--ui-text-muted] space-y-2">
<li>Understanding cooperative basics</li>
<li>Connecting with others asking similar questions</li>
<li>Exploring real examples from game studios</li>
<li>Deciding your next steps</li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
You might be:
</h4>
<ul class="text-[--ui-text-muted] space-y-2">
<li>Individual game workers</li>
<li>Researchers and students</li>
<li>Industry allies and supporters</li>
<li>Anyone co-op-curious</li>
</ul>
</div>
</div>
<!-- Founder Circle -->
<div class="bg-[--ui-bg] rounded-xl p-8">
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
Founder Circle
</h3>
<p class="text-lg text-[--ui-text-muted] mb-6">
You're actively building or transitioning to a cooperative model
</p>
<div class="mb-6">
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
Where you might be:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Forming a new cooperative studio</li>
<li>Converting an existing studio to a co-op</li>
<li>Preparing to apply for the Peer Accelerator</li>
<li>Working through governance and structure decisions</li>
</ul>
</div>
<div class="mb-6">
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
We'll help you navigate:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Practical implementation challenges</li>
<li>Governance document creation</li>
<li>Financial planning for co-ops</li>
<li>Peer connections with other founders</li>
<li>Balancing ideals with sustainability</li>
</ul>
</div>
<div class="mb-6">
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
Two paths available:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>
<strong>Peer Accelerator Prep Track:</strong> Structured
preparation for the PA program
</li>
<li>
<strong>Indie Track:</strong> Self-paced development for
alternative pathways
</li>
</ul>
</div>
<div>
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
You might be:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Founding teams</li>
<li>Studios in transition</li>
<li>PA program applicants</li>
<li>Solo founders exploring structures</li>
</ul>
</div>
</div>
<!-- Practitioner Circle -->
<div class="bg-[--ui-bg] rounded-xl p-8">
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
Practitioner Circle
</h3>
<p class="text-lg text-[--ui-text-muted] mb-6">
You're operating a cooperative and contributing to the field
</p>
<div class="mb-6">
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
Where you might be:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Running an established cooperative studio</li>
<li>Graduated from the Peer Accelerator</li>
<li>Mentoring other cooperatives</li>
<li>Advancing cooperative practices in games</li>
</ul>
</div>
<div class="mb-6">
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
We'll help you navigate:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Advanced operational challenges</li>
<li>Opportunities to mentor and teach</li>
<li>Contributing to best practices</li>
<li>Cross-pollination with other co-ops</li>
<li>Research and publication opportunities</li>
<li>Co-op to co-op collaboration</li>
</ul>
</div>
<div>
<h4
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
>
You might be:
</h4>
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li>Peer Accelerator alumni</li>
<li>Established co-op members</li>
<li>Industry mentors</li>
<li>Cooperative researchers</li>
</ul>
</div>
</div>
</div>
</div>
</UContainer>
</section>
<!-- Important Notes -->
<section class="py-20 bg-[--ui-bg]">
<UContainer>
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-[--ui-text] mb-8">
Important Notes
</h2>
<div class="space-y-6 text-lg text-[--ui-text-muted]">
<p>
<strong>Movement between circles is fluid.</strong> As you move
along in your journey, you can shift circles anytime. Just let us
know.
</p>
<p>
<strong>Your contribution is separate from your circle.</strong>
Whether you contribute $0 or $50+/month, you get full access to
everything. Choose based on your financial capacity, not your
circle.
</p>
<p>
<strong>Not sure which circle?</strong> Start with Community - you
can always move. Or email us and we'll chat about what makes sense
for you.
</p>
</div>
</div>
</UContainer>
</section>
</div>
</template>
<script setup>
// No specific logic needed for the about page at this time
</script>