---
layout: base.njk
---

<section class="hero__Container">
  <div class="hero__Content">
    <div class="hero__Circles">
      <div class="hero__OuterCircle">
        <div class="hero__InnerCircle"></div>
      </div>
    </div>
    <div class="hero__InnerBits">
      <img
        src="/static/big-logo.gif"
        alt="tap logo"
        class="hero__Logo" />
      <h1 class="hero__Title">
        {{ metadata.description }}
      </h1>
      <a class="button-link" href="/basics">Get Started</a>
    </div>
  </div>
</section>

<section class="features">
  <div class="features__Content">
    <h2>Node-Tap Features</h2>
    <div class="features__Columns">
      <section class="no-fancy-dsl">
        <img src="/static/brain.gif" alt="brain" />
        <div>{% renderFile "./_includes/no-fancy-dsl.md" %}</div>
      </section>
      <section class="batteries-included">
        <img src="/static/batteries.gif" alt="batteries" />
        <div>
          {% renderFile "./_includes/batteries-included.md" %}
        </div>
      </section>
    </div>
    <a class="button-link" href="/basics">Get Started</a>
  </div>
</section>

<section class="why-tap">
  <div class="why-tap__Content">
    <div class="EncircledImage__GreyCircle">
      <div class="EncircledImage__WhiteCircle">
        <img src="/static/question-mark.gif" alt="(?)" />
      </div>
    </div>
    {% renderFile "./_includes/why-tap.md" %}
  </div>
</section>

<footer>{% renderFile "./_includes/footer.md" %}</footer>
