<section id="hero" class="IndexHero">
  <header id="logo-wrap" class="IndexHero-logo">
    <img id="logo" width="200" class="IndexHero-logoImg emoji dog" title="puppy" alt="uppy" src="<%- config.logo_large %>">
    <h1 class="indexHero-title"><%- config.title %></h1>
  </header>

  <div class="IndexHero-desc">
    <h3 class="IndexHero-subtitle">
      <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
    </h3>
    <p><%- config.description %></p>
  </div>

  <a href="/guide/installation.html" class="IndexHero-installBtn button">Install v<%- config.uppy_version %></a>

  <ul id="social" class="IndexSocial">
    <li><a href="https://twitter.com/uppyjs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppyjs</a></li>
    <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
  allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
    <li id="buildbadge" class="BuildBadge">
     <span class="wrapper">
       <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
     </span>
    </li>
  </ul>
</section>

<section id="example" class="IndexExample">
  <h2>10 Second Example</h2>

  <div class="block"><%- partial('partials/example1') %></div>

  <div class="sign">&raquo;</div>

  <div class="block"><%- partial('partials/example2') %></div>

</section>

<section id="features">
  <div class="feats">
    <% for (var k in site.data.features) { var v = site.data.features[k]; %>
      <div class="feat">
        <h2><span class="icon <%- v.icon %>"></span><%- v.title %></h2>
        <p> <%- render(v.description, 'swig', {uppy_gz_size: config.uppy_gz_size}) %></p>
      </div>
    <% } %>
  </div>
</section>

<section id="design_goals">
  <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>

<footer id="footer">
  <a class="start" href="/guide/index.html">Get Started</a>
  <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>Puppy icon by <a href="https://thenounproject.com/2y2"></a>Jorge Fernandez del Castillo Gomez</a> from the Noun Project.</p>
  <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
</footer>

<!-- Twitter follow button script -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
