<section class="spaced">
    <div class="cards">
        <div class="presentation card">
            <h2>{{ "What is Plume?" | _ }}</h2>
            <main>
                <p>{{ "Plume is a decentralized blogging engine." | _ }}</p>
                <p>{{ "Authors can manage various blogs from an unique website." | _ }}</p>
                <p>{{ "Articles are also visible on other Plume websites, and you can interact with them directly from other platforms like Mastodon." | _ }}</p>
            </main>
            <a href="/users/new">{{ "Create your account" | _ }}</a>
        </div>
        <div class="presentation card">
            <h2>{{ "About {{ instance_name }}" | _(instance_name=instance.name) }}</h2>
            <main>
                {{ instance.short_description_html | safe }}
                <section class="stats">
                    <div>
                        <p>{{ "Home to" | _ }}</p>
                        <em>{{ n_users }}</em>
                        <p>{{ "people" | _ }}</p>
                    </div>
                    <div>
                        <p>{{ "Who wrote" | _ }}</p>
                        <em>{{ n_articles }}</em>
                        <p>{{ "articles" | _ }}</p>
                    </div>
                </section>
            </main>
            <a href="/about">{{ "Read the detailed rules" | _ }}</a>
        </div>
    </div>
</section>
