ghostguild-org/app/pages/about.vue

<template>
  <PageShell>
    <!-- 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
          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
          advancing cooperative and worker-centric models in the game industry
          since 2023.
        </p>
        <p>
          Developers interested in co-op practice had few places to learn,
          connect, and figure things out alongside others doing the same work.
          Ghost Guild is that place: a membership community for developers at
          every stage of cooperative practice, with resources, events, and peers
          to learn from.
        </p>
        <p>
          We don't prescribe a single model. We're here 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 -->
    <ColumnsLayout cols="events-sidebar" :limit="3">
      <!-- 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">
            <h2 style="color: var(--c-community)">Community</h2>

            <p>For anyone exploring cooperative models.</p>
          </div>
          <div id="founder" class="circle-cell">
            <h2 style="color: var(--c-founder)">Founder</h2>
            <p>For people actively building cooperatives.</p>
          </div>
          <div id="practitioner" class="circle-cell">
            <h2 style="color: var(--c-practitioner)">Practitioner</h2>
            <p>For experienced practitioners sharing what they know.</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&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>
        <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>
      </div>

      <!-- ABOUT BABY GHOSTS -->
      <div class="about-section">
        <div class="section-label">About Baby Ghosts</div>
        <p>
          Ghost Guild is part of Baby Ghosts, a Canadian nonprofit advancing
          cooperative models in game development.
        </p>
        <p>
          <a href="https://babyghosts.org" target="_blank"
            >babyghosts.org &rarr;</a
          >
        </p>
      </div>
    </ColumnsLayout>
  </PageShell>
</template>

<script setup></script>

<style scoped>
/* ---- 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;
}

/* ---- 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) {
  .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>