ghostguild-org/app/pages/about.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 &mdash; 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>

        <!-- HOW CONTRIBUTION WORKS -->
        <div class="about-section">
          <div class="section-label">How Contribution Works</div>
          <p>Membership is $0&ndash;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>

        <!-- 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 &mdash; growing as members contribute. Events range from workshops to social hangs to deep-dive series.</p>
          <NuxtLink to="/join" class="cta">Join the Guild &rarr;</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 &rarr;</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;
}

/* ---- 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>