<section id="hero" class="IndexHero">
  <header id="logo-wrap" class="IndexHero-header">
    <img id="logo" class="IndexHero-logo" title="Uppy" alt="Uppy" src="<%- config.logo_large %>">
    <h1 class="IndexHero-title"><%- config.title %></h1>

    <h2 class="IndexHero-tagline">
      The file uploader that <br>
      <span class="IndexHero-taglinePart js-IndexHero-taglinePart is-visible">loves to play fetch</span>
    </h2>

    <ul class="IndexHero-taglineList js-IndexHero-taglineList">
      <% site.data.taglines.forEach(function(tagline) {%>
        <li><%- tagline %></li>
      <% }); %>
    </ul>
  </header>

  <%- partial('partials/social') %>
</section>

<section id="example" class="IndexExample">
  <!-- <h2 class="IndexSection-title">Demo</h2> -->

  <div class="IndexExample-block">
    <video class="IndexExample-video"
           src="/images/uppy-demo.mp4"
           autoplay loop muted></video>
  </div>

  <div class="IndexExample-block">
    <%- partial('partials/frontpage-code-sample') %>
  </div>

  <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
</section>

<section class="IndexAbout">
  <div class="IndexAbout-item">
    <img class="IndexAbout-icon" src="/images/traffic-light.svg">
    <h2 class="IndexSection-title">Work in progress</h2>
    <p><%- config.description %></p>
  </div>
  <div class="IndexAbout-item">
    <a href="https://transloadit.com"><img class="IndexAbout-icon" src="/images/transloadit-logo.png"></a>
    <h2 class="IndexSection-title">Open Source</h2>
    <p><%- config.descriptionWho %></p>
  </div>
</section>

<section class="IndexDesignGoals">
  <h2>Design Goals:</h2>
  <ul>
    <% for (var k in site.data.design_goals) { var v = site.data.design_goals[k]; %>
    <li>
      <%- v %>
    </li>
    <% } %>
  </ul>
</section>

<section class="IndexActivity">
  <h2>Activity Feed</h2>

  <div class="on-the-githubs" data-event-source="repos/transloadit/uppy">Loading...</div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//kvz.github.io/on-the-githubs/js/jquery.on-the-githubs.min.js"></script>
  <script type="text/javascript">
    $('.on-the-githubs').onthegithubs();
  </script>
</section>

<footer class="IndexFooter">
  <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
  <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>) (he <a href="https://twitter.com/youyuxi/status/672441843183960067">approves</a>)</p>
  <p>© <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
</footer>
