feat: reskin public pages to zine direction
This commit is contained in:
parent
8b3daadadd
commit
88caca94c7
8 changed files with 2663 additions and 3577 deletions
|
|
@ -1,148 +1,219 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<PageHeader
|
||||
title="About Ghost Guild"
|
||||
subtitle=""
|
||||
size="large"
|
||||
/>
|
||||
<!-- ABOUT HERO (side by side) -->
|
||||
<div class="about-hero">
|
||||
<div class="about-hero-left">
|
||||
<h1>About Ghost Guild</h1>
|
||||
<p>A membership community for game developers exploring cooperative business models.</p>
|
||||
</div>
|
||||
<div class="about-hero-right">
|
||||
<div class="section-label">Our Story</div>
|
||||
<p>Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been supporting indie game developers since 2018. We noticed a gap: game developers interested in cooperative models had nowhere to learn, practice, and connect with others doing the same work.</p>
|
||||
<p>Ghost Guild is the response — a membership program where developers at every stage of cooperative practice can find resources, events, mentorship, and community.</p>
|
||||
<p>We don't prescribe a single model. We're a place to explore the options, learn from people who've tried them, and build something that works for your team.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<section class="py-20 bg-[--ui-bg]">
|
||||
<UContainer>
|
||||
<div class="max-w-3xl prose prose-lg dark:prose-invert">
|
||||
<!-- directives:[] -->
|
||||
<div id="content">
|
||||
<p>
|
||||
Ghost Guild is a community of learning and practice for anyone,
|
||||
anywhere interested in a video game industry-wide shift to
|
||||
worker-owned studio models.
|
||||
</p>
|
||||
<p>
|
||||
We reject hierarchy wherever it shows up. Ghost Guild is
|
||||
tier-less, but peer-full.
|
||||
</p>
|
||||
<h2 id="our-story">Our Story</h2>
|
||||
<p>
|
||||
Ghost Guild is the membership program of Baby Ghosts, a Canadian
|
||||
nonprofit that provides resources and support for worker-owned
|
||||
game studios.
|
||||
</p>
|
||||
<p>
|
||||
For three years, Baby Ghosts has run the Peer Accelerator - an
|
||||
intensive program pairing early-stage studios with mentorship,
|
||||
peer learning, and grants. Twenty-five studios have graduated. The
|
||||
model works! Peer learning builds stronger foundations than
|
||||
top-down advice ever could.
|
||||
</p>
|
||||
<p>
|
||||
But not everyone can commit to a six-month cohort. Some folks are
|
||||
still exploring. Others are already running established
|
||||
cooperatives and want to give back. Many are scattered across the
|
||||
world and just need to know they're not alone in wanting to build
|
||||
something different.
|
||||
</p>
|
||||
<p><em>Ghost Guild is how we open the doors wider.</em></p>
|
||||
<p>
|
||||
As we build our knowledge commons, more folks can benefit from
|
||||
collectively compiled wisdom and find community - whether or not
|
||||
they ever apply to the Peer Accelerator. The intensive program
|
||||
continues. Ghost Guild expands access to everything around it.
|
||||
</p>
|
||||
<h2 id="the-circles">The Circles</h2>
|
||||
<p>
|
||||
We've loosely named some circles you can join. This is not to rank
|
||||
you, but to connect you with folks at a similar stage and with
|
||||
resources that fit where you are right now.
|
||||
</p>
|
||||
<p>
|
||||
No circle is superior. There's no shame in sticking with one for a
|
||||
while, or moving between them to find the best fit.
|
||||
</p>
|
||||
<p>
|
||||
The Community Circle is for individuals exploring cooperative
|
||||
principles. Whether you're working in the industry or in academia,
|
||||
you'll get access to the knowledge commons, workshops, resources,
|
||||
guides, community Slack and peer support, and social events and
|
||||
networking.
|
||||
</p>
|
||||
<p>
|
||||
The Founder Circle is for those actively building a worker-owned
|
||||
studio. You'll have access to everything within the platform, just
|
||||
like any other member, but you might be particularly interested in
|
||||
peer matching with studios at similar stages and Peer Accelerator
|
||||
alumni, and templates for governance, financial modelling, and
|
||||
decision-making.
|
||||
</p>
|
||||
<p>
|
||||
The Practitioner Circle is for Peer Accelerator alumni and
|
||||
experienced cooperative studio leaders. You'll hopefully find
|
||||
yourself providing paid support to other members, as well as
|
||||
engaging in collaborative research opportunities with academic
|
||||
partners, connecting to other coops for business development, and
|
||||
helping build a platform for changing industry practices.
|
||||
</p>
|
||||
<h2 id="how-contribution-works">How Contribution Works</h2>
|
||||
<p>
|
||||
Choosing your financial contribution is also not about paying for
|
||||
access. Everything is available to every member, no matter their
|
||||
circle or contribution level.
|
||||
</p>
|
||||
<p>
|
||||
Rather, it's about finding a dues level that's meaningful to you
|
||||
without being a burden.
|
||||
</p>
|
||||
<p>
|
||||
The knowledge commons is open to all Ghosties. Your contribution
|
||||
sustains a community you believe in.
|
||||
</p>
|
||||
<p>
|
||||
If dues are a barrier, that's okay. Members who are able to
|
||||
contribute more can direct additional funds to the Solidarity
|
||||
Fund, which covers dues for those who need support.
|
||||
</p>
|
||||
<h2 id="community">Community</h2>
|
||||
<p>
|
||||
When you join Ghost Guild, you join a community of Ghosties -
|
||||
folks at every stage of the journey, learning from each other.
|
||||
</p>
|
||||
<p>
|
||||
Our Slack community is built with care. New members are welcomed
|
||||
thoughtfully, channels are structured to help you find your
|
||||
people, and we grow at a pace that protects what makes this space
|
||||
special.
|
||||
</p>
|
||||
<p>
|
||||
This is a cascading mentorship structure where everyone is both
|
||||
learning and teaching. Practitioners mentor Founders. Founders
|
||||
mentor Community members. And Community members bring fresh
|
||||
perspectives that keep everyone honest.
|
||||
</p>
|
||||
<p>Welcome, Ghostie! 👻</p>
|
||||
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
|
||||
<div class="content-area">
|
||||
<div class="content-main">
|
||||
|
||||
<!-- THE CIRCLES -->
|
||||
<div class="about-section" id="circles">
|
||||
<div class="section-label">The Circles</div>
|
||||
<div class="circles-grid">
|
||||
<div id="community" class="circle-cell">
|
||||
<h3 style="color: var(--c-community);">Community</h3>
|
||||
<div class="circle-subtitle">"The open hall"</div>
|
||||
<p>For anyone exploring cooperative models. Wiki access, public events, Slack community, monthly meetings.</p>
|
||||
</div>
|
||||
<div id="founder" class="circle-cell">
|
||||
<h3 style="color: var(--c-founder);">Founder</h3>
|
||||
<div class="circle-subtitle">"The workshop"</div>
|
||||
<p>For people actively building cooperatives. Peer accelerator, mentorship, governance templates.</p>
|
||||
</div>
|
||||
<div id="practitioner" class="circle-cell">
|
||||
<h3 style="color: var(--c-practitioner);">Practitioner</h3>
|
||||
<div class="circle-subtitle">"The alcove"</div>
|
||||
<p>For experienced practitioners. Mentoring, teaching, shaping the program direction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Link to Membership Circles -->
|
||||
<section class="py-20 bg-[--ui-bg-elevated]">
|
||||
<UContainer>
|
||||
<div class="max-w-3xl">
|
||||
<h2 class="text-display-sm font-bold text-[--ui-text] mb-4">
|
||||
Membership Circles
|
||||
</h2>
|
||||
<p class="text-lg text-[--ui-text-muted] mb-6">
|
||||
Learn about our three membership circles and find where you fit.
|
||||
</p>
|
||||
<UButton to="/about/circles" variant="outline" size="lg">
|
||||
Explore Membership Circles
|
||||
</UButton>
|
||||
<!-- HOW CONTRIBUTION WORKS -->
|
||||
<div class="about-section">
|
||||
<div class="section-label">How Contribution Works</div>
|
||||
<p>Membership is $0–50/month, pay what you can. Nobody is excluded for lack of funds. Your contribution supports infrastructure, events, and community resources.</p>
|
||||
<ul class="tier-list">
|
||||
<li><span class="tier-amt">$0</span> I need support right now</li>
|
||||
<li><span class="tier-amt">$5</span> I can contribute</li>
|
||||
<li><span class="tier-amt">$15</span> I can sustain the community</li>
|
||||
<li><span class="tier-amt">$30</span> I can support others too</li>
|
||||
<li><span class="tier-amt">$50</span> I want to sponsor multiple members</li>
|
||||
</ul>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- COMMUNITY -->
|
||||
<div class="about-section">
|
||||
<div class="section-label">Community</div>
|
||||
<p>We gather in Slack, at monthly meetings, and through peer support sessions. The wiki is our shared knowledge base — growing as members contribute. Events range from workshops to social hangs to deep-dive series.</p>
|
||||
<NuxtLink to="/join" class="cta">Join the Guild →</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT BABY GHOSTS -->
|
||||
<div class="about-section">
|
||||
<div class="section-label">About Baby Ghosts</div>
|
||||
<p>Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit advancing cooperative models in game development. No tracking. No ads. No venture capital.</p>
|
||||
<p><a href="https://babyghosts.fund" target="_blank">babyghosts.fund →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EVENTS MINI SIDEBAR -->
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// No specific logic needed for the about page at this time
|
||||
const { data: upcomingEvents } = await useFetch('/api/events', {
|
||||
query: { limit: 3, upcoming: true },
|
||||
default: () => [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ---- ABOUT HERO ---- */
|
||||
.about-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.about-hero-left {
|
||||
padding: 32px 32px 28px;
|
||||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
.about-hero-left h1 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.about-hero-left p {
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
font-size: 13px;
|
||||
}
|
||||
.about-hero-right {
|
||||
padding: 32px;
|
||||
}
|
||||
.about-hero-right p {
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ---- CONTENT AREA ---- */
|
||||
.content-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
}
|
||||
.content-main {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---- SECTIONS ---- */
|
||||
.about-section {
|
||||
padding: 28px 32px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.about-section > p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 8px;
|
||||
max-width: 560px;
|
||||
}
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
/* ---- CIRCLES GRID ---- */
|
||||
.circles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
border: 1px dashed var(--border);
|
||||
}
|
||||
.circle-cell {
|
||||
padding: 20px;
|
||||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
.circle-cell:last-child { border-right: none; }
|
||||
.circle-cell h3 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.circle-subtitle {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.circle-cell p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* ---- TIER LIST ---- */
|
||||
.tier-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.tier-list li {
|
||||
padding: 5px 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.tier-list li:last-child { border-bottom: none; }
|
||||
.tier-amt {
|
||||
color: var(--text-bright);
|
||||
font-weight: 600;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.content-area { grid-template-columns: 1fr; }
|
||||
.circles-grid { grid-template-columns: 1fr; }
|
||||
.circle-cell {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.circle-cell:last-child { border-bottom: none; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.about-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.about-hero-left {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue