matrix.org/templates/try-matrix.html

67 lines
2.9 KiB
HTML

{% extends "page.html" %}
{% block content %}
<div class="page-header">
<div class="hero-block">
<h1>{{ page.title }}</h1>
<p>{{ page.extra.summary }}</p>
</div>
</div>
<div class="try_matrix">
<div class="step-background">
<div class="step choose-a-client">
<div class="instructions">
<h3>Choose a client</h3>
<p>
We recommend Element as a safe default, but there are a variety of clients available.
</p>
<div class="cta-wrapper">
<a href="/ecosystem/clients/element/" class="call-to-action">Install Element</a>
<a href="/ecosystem/clients" class="call-to-action secondary">Browse clients</a>
</div>
</div>
<img src="/assets/try-matrix/client.svg" alt="Artist view of an abstract matrix client." />
</div>
</div>
<div class="step-background coloured">
<div class="step choose-a-server">
<div class="instructions">
<h3>Choose a server</h3>
<p>
Matrix is a decentralised protocol: like email, you need to have an account provider to start using
matrix.
</p>
<p>
But picking a provider can be overwhelming for your first steps. The Matrix.org Foundation is
hosting
the matrix.org Matrix server for every newcomer to create an account. You can safely use it to
create an account when getting started.
</p>
<div class="cta-wrapper">
<a href="/ecosystem/hosting" class="call-to-action">Browse hosters</a>
<a href="/ecosystem/servers" class="call-to-action secondary">Browse servers</a>
</div>
</div>
<img src="/assets/try-matrix/server.svg" alt="Artist view of an abstract server." />
</div>
</div>
<div class="step-background">
<div class="step register-and-chat">
<div class="instructions">
<h3>Register and start chatting</h3>
<p>That's all you need to get started! If you feel lost you can
browse the <a href="/docs/chat_basics">chat basics</a>
documentation.
</p>
<div class="cta-wrapper">
<a href="/docs/chat_basics/matrix-for-im/#creating-a-matrix-account" class="call-to-action">Create
an account</a>
<a href="/docs/chat_basics" class="call-to-action secondary">Read the docs</a>
</div>
</div>
<img src="/assets/try-matrix/chat.svg" alt="Abstract representation of a chat." />
</div>
</div>
</div>
{% endblock content %}