index.html

---
layout: default
image: /assets/images/og-image.png
---

{% assign pages = site.content | sort_pages %}

<div class="layout-index">

  <div class="ttn-header">
    <div class="ttn-container container-fluid">
      <h1>
        <img src="{{ site.baseurl }}/assets/images/the-things-white.png" alt="⛅ The Things Network" />
        <span>Learn</span>
      </h1>
      <p>Learn how to grow the Network and connect all Things!</p>
    </div>
  </div>

  <div class="ttn-container container-fluid">

    <div class="index-intro panel">
      <div class="row">
        <div class="col-sm-6">
          <p>The Things Network is about enabling low power <a href="{{ site.baseurl }}/devices/">Devices</a> to use long range <a href="{{ site.baseurl }}/gateways/">Gateways</a> to connect to an open-source, decentralized <a href="{{ site.baseurl }}/network/">Network</a> to exchange data with <a href="{{ site.baseurl }}/applications/">Applications</a> and <a href="{{ site.baseurl }}/platforms/">Platforms</a>.</p>
        </div>
        <div class="col-sm-6">
          <p><img src="{{ site.baseurl }}/assets/images/architecture.png" alt="Devices - Gateways - The Things Network - Applications" /></p>
        </div>
      </div>
    </div>

    <h2 class="index-title">Documentation</h2>

    <div class="index-docs index-blocks row">

      {% for apage in pages %}
        {% unless apage.hidden %}
          {% assign apage_depth = apage.url | remove:'/index.html' | split:'/' | size %}
          {% if apage_depth == 2 %}
            <div class="col-sm-3">
              <div class="panel">
                <a href="{{ apage.url | prepend:site.baseurl | remove:'index.html' }}">
                  <div class="panel-body">
                    <h3>{{ apage.title }}</h3>
                    <img src="{{ apage.image | prepend:site.baseurl }}" alt="{{ apage.title }}" />
                    <p>{{ apage.description }}</p>
                  </div>
                </a>
              </div>
            </div>
          {% endif %}
        {% endunless %}
      {% endfor %}

    </div>

    <h2 class="index-title">Community</h2>

    <div class="index-community index-blocks row">

        <div class="col-sm-3">
          <div class="panel">
            <a href="https://www.thethingsnetwork.org/forum">
              <div class="panel-body">
                <h3>Forum</h3>
                <p>Ask and answer questions about IoT, LoRa and other related topics.</p>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="panel">
            <a href="https://account.thethingsnetwork.org/">
              <div class="panel-body">
                <h3>Slack</h3>
                <p>Invite yourself to the community Slack to chat about The Things Network.</p>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="panel">
            <a href="https://www.thethingsnetwork.org/wiki">
              <div class="panel-body">
                <h3>Wiki</h3>
                <p>Dive into the technical details with content curated by the community.</p>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="panel">
            <a href="https://www.thethingsnetwork.org/labs">
              <div class="panel-body">
                <h3>Labs</h3>
                <p>Inspire and get inspired by community contributed use cases.</p>
              </div>
            </a>
          </div>
        </div>

    </div>

  </div><!-- .ttn-container -->

</div>