hackerspace-governance-in-a-box/src/pages/HomePage.vue

<template>
  <div class="home-page">
    <DocumentHeader
      title="Hackerspace Governance in a Box"
      description="A complete governance framework for hackerspaces, based on do-ocracy principles and community-driven decision making."
      :show-meta="false"
    />

    <section class="intro-section">
      <h2>Welcome to Your Governance Framework</h2>
      <p class="lead">
        This site contains everything you need to run a successful hackerspace:
        bylaws, community standards, decision-making processes, and operational
        guidelines that actually work in practice.
      </p>
    </section>

    <CalloutBox type="tip" title="Adapt This for Your Space">
      <p>
        While this framework is tailored for {{ hackerspaceStore.hackerspace.name }},
        it's designed to be easily adapted for any hackerspace. Replace our name
        with yours, adjust the specifics to match your community's needs, and
        you'll have a complete governance system ready to go.
      </p>
    </CalloutBox>

    <section class="principles-section">
      <h2>Core Principles</h2>

      <div class="principle-grid">
        <div class="principle-card">
          <h3>Do-ocracy</h3>
          <p>
            If you want something done, do it. Authority comes from taking action,
            not from titles or elections. Those who do the work make the decisions.
          </p>
        </div>

        <div class="principle-card">
          <h3>Be Excellent</h3>
          <p>
            Respect everyone's right to exist and make things. Take care of the
            space so others can use it. Handle conflicts directly when you can.
          </p>
        </div>

        <div class="principle-card">
          <h3>Community First</h3>
          <p>
            The space exists so people can make things. Every decision should
            support that mission. We protect the community's ability to create.
          </p>
        </div>

        <div class="principle-card">
          <h3>Iterate & Improve</h3>
          <p>
            Our governance isn't perfect, and that's okay. We continuously update
            our systems based on what works and what doesn't.
          </p>
        </div>
      </div>
    </section>

    <section class="structure-section">
      <h2>How This Framework Works</h2>

      <dl class="structure-list">
        <dt>Bylaws</dt>
        <dd>
          The legal foundation required for 501(c)(3) status. Minimal and
          empowering, designed to meet legal requirements while maximizing
          member autonomy.
        </dd>

        <dt>Community Standards</dt>
        <dd>
          Clear expectations for behavior and a transparent accountability
          process. Protects everyone's ability to participate safely.
        </dd>

        <dt>Do-ocracy Guide</dt>
        <dd>
          How to actually get things done. When to act independently, when
          to seek feedback, and how to document your work.
        </dd>

        <dt>Decision Making</dt>
        <dd>
          When meetings are needed vs when you can just act. Designed for
          9-14 day proposal cycles, not months of bureaucracy.
        </dd>

        <dt>The Board</dt>
        <dd>
          Limited to infrastructure and conflict resolution. Board members
          are "wardens" not leaders, maintaining the space without
          controlling its direction.
        </dd>
      </dl>
    </section>

    <section class="getting-started">
      <h2>Getting Started</h2>

      <p>
        Whether you're a new member, a board member, or starting your own
        hackerspace, here's how to use this framework:
      </p>

      <ol>
        <li>
          <strong>New Members:</strong> Start with the Community Standards
          to understand expectations, then read the Do-ocracy Guide to learn
          how to contribute.
        </li>
        <li>
          <strong>Active Members:</strong> Reference the Decision Making
          section when proposing changes. Use the Do-ocracy Guide for daily
          operations.
        </li>
        <li>
          <strong>Board Members:</strong> Focus on the Bylaws and Board
          sections. Remember: your role is to maintain, not to lead.
        </li>
        <li>
          <strong>Other Hackerspaces:</strong> Jump to "Adapt This" for a
          guide on customizing this framework for your community.
        </li>
      </ol>
    </section>

    <CalloutBox type="info" title="About This Framework">
      <p>
        This governance framework synthesizes best practices from successful
        hackerspaces worldwide, particularly drawing from the Hackerspace
        Blueprint and decades of community experience. It's licensed under
        Creative Commons for sharing and adaptation.
      </p>
    </CalloutBox>
  </div>
</template>

<script setup lang="ts">
import DocumentHeader from '@/components/document/DocumentHeader.vue'
import CalloutBox from '@/components/ui/CalloutBox.vue'
import { useHackerspaceStore } from '@/stores/hackerspace'

const hackerspaceStore = useHackerspaceStore()
</script>

<style lang="scss" scoped>
.home-page {
  max-width: $max-content-width;
}

.intro-section {
  margin-bottom: $space-7;
}

.principles-section {
  margin-bottom: $space-7;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $space-5;
  margin-top: $space-5;
}

.principle-card {
  padding: $space-5;
  background-color: $color-paper-light;
  border-radius: $radius-md;
  border-left: 4px solid $color-accent;

  h3 {
    font-size: $font-size-lg;
    margin-bottom: $space-3;
    color: $color-accent;
  }

  p {
    margin: 0;
    font-size: $font-size-sm;
  }
}

.structure-section {
  margin-bottom: $space-7;
}

.structure-list {
  margin-top: $space-5;

  dt {
    font-weight: 600;
    margin-bottom: $space-2;
    color: $color-accent;
  }

  dd {
    margin-bottom: $space-4;
    margin-left: 0;
    padding-left: $space-5;
    border-left: 2px solid $color-border;
    color: $color-text;
  }
}

.getting-started {
  margin-bottom: $space-7;

  ol {
    margin-top: $space-4;
    padding-left: $space-5;

    li {
      margin-bottom: $space-3;
      line-height: 1.6;
    }
  }
}
</style>