316 lines
8.3 KiB
Vue
316 lines
8.3 KiB
Vue
<template>
|
|
<div class="about-page">
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
|
|
<div class="two-col-row">
|
|
<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>
|
|
<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>
|
|
</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>
|
|
const { data: upcomingEvents } = await useFetch("/api/events", {
|
|
query: { limit: 3, upcoming: true },
|
|
default: () => [],
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
|
|
.about-page {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ---- ABOUT HERO ---- */
|
|
.about-hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
align-items: stretch;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
.about-hero-left {
|
|
padding: 32px 32px 28px;
|
|
border-right: 1px dashed var(--border);
|
|
align-self: stretch;
|
|
}
|
|
.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;
|
|
align-self: stretch;
|
|
}
|
|
.about-hero-right p {
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ---- CONTENT AREA ---- */
|
|
.content-area {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 200px;
|
|
align-items: stretch;
|
|
min-height: 0;
|
|
}
|
|
.content-main {
|
|
padding: 0;
|
|
min-width: 0;
|
|
align-self: stretch;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ---- 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;
|
|
}
|
|
|
|
/* ---- TWO-COL ROW ---- */
|
|
.two-col-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
.two-col-row .about-section {
|
|
border-bottom: none;
|
|
}
|
|
.two-col-row .about-section:first-child {
|
|
border-right: 1px dashed var(--border);
|
|
}
|
|
|
|
/* ---- 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;
|
|
}
|
|
.two-col-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.two-col-row .about-section:first-child {
|
|
border-right: none;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.about-hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.about-hero-left {
|
|
border-right: none;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
}
|
|
</style>
|