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>.</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">

      <div class="col-sm-12">
        <div class="panel">
          <a href="lorawan/index.html">
            <div class="panel-body">
              <img src="lorawan/icon.png" alt="LoRaWAN" width="150" />
              <p>Learn about LoRaWAN: the secure messaging protocol used by The Things Network.</p>
            </div>
          </a>
        </div>
      </div>
    
    </div>

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

      <div class="col-sm-3">
        <div class="panel">
          <a href="devices/index.html">
            <div class="panel-body">
              <h3>Devices</h3>
              <img src="devices/icon.png" alt="Devices" />
              <p>Connect devices to The Things Network.</p>
            </div>
          </a>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="panel">
          <a href="gateways/index.html">
            <div class="panel-body">
              <h3>Gateways</h3>
              <img src="gateways/icon.png" alt="Gateways" />
              <p>Extend The Things Network by installing a gateway.</p>
            </div>
          </a>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="panel">
          <a href="network/index.html">
            <div class="panel-body">
              <h3>Network</h3>
              <img src="network/icon.png" alt="Network" />
              <p>Manage your applications and devices.</p>
            </div>
          </a>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="panel">
          <a href="applications/index.html">
            <div class="panel-body">
              <h3>Applications</h3>
              <img src="applications/icon.png" alt="Applications" />
              <p>Build applications on The Things Network.</p>
            </div>
          </a>
        </div>
      </div>

    </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/community">
              <div class="panel-body">
                <h3>Join</h3>
                <p>Find The Things Network communities nearby or start a new community.</p>
              </div>
            </a>
          </div>
        </div>

        <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/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>