communityRuleFrontend/index.html

---
layout: page
permalink: /
---

<div style="text-align: center">

    <div class="callout-text">
        <strong>CommunityRule</strong> is a governance toolkit for great communities.
    </div>

    <img src="{% link assets/diagram_co.png %}" alt="Diagram of a consensus circle" />

    <div class="callout-text">
        How does your community work?<br />
        Are you ready to make hard decisions?
    </div>

    Too often, we leave the most basic questions unstated and unanswered. CommunityRule makes it easier to clarify the basics so you can focus on other things.


    <div class="callout-box">
        <div class="callout-box__yellow-bar"></div>
        <div class="callout-box__text">
            <h2 class="callout-text">Would you like help designing your community?</h2>
            <p>Tell us a bit about your community and we'll reach out to schedule a governance design consultation (for free!).</p>
        </div>
        <div class="callout-box__button">
            <a href="https://o082czm9j51.typeform.com/to/UplfMG3w" class="button button--white button--call-out" target="_blank">Get Started</a>
        </div>
    </div>

    <div class="callout-icon">
        <img src="{% link assets/tabler_icons/edit.svg %}" width="10%" />
    </div>

    <div class="callout-text">
        <a href="{% link create.md %}">Start from scratch</a> or <a href="{% link templates.md %}">choose a template</a>
    </div>

    <div class="callout-icon">
        <img src="{% link assets/tabler_icons/chart-candle.svg %}" width="10%" />
    </div>

    <div class="callout-text">
        <a href="{% link guides.md %}">Tailor a Rule</a> to your community's needs and values
    </div>

    <div class="callout-icon">
        <img src="{% link assets/tabler_icons/license.svg %}" width="10%" />
    </div>

    <div class="callout-text">
        Then publish your Rule and <a href="{% link library.md %}">share it with others</a>
    </div>

    <a href="{% link book.md %}" style="display: block; margin: 30px 0;">
        <img src="{% link assets/book/communityrules-cover.png %}" alt="Community Rules cover"
            style="box-shadow: 0 2px 8px #0003; height:40vh; width: auto; transform: rotate(4deg);" />
    </a>

    <div class="callout-text">
        Get a <a href="{% link book.md %}">book version</a> of the templates
    </div>

</div>