<template name="home">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="row">
        <a class="navbar-brand link" href="{{pathFor 'home'}}">
          {{Config.name}}
        </a>
        <div id="main-nav" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            {{#if User}}
              {{> userDropdown}}
            {{else}}
              <li>
                <a href="{{pathFor 'atSignIn'}}" class="link">{{_ "login2"}}</a>
              </li>
              <li>
                <a href="{{pathFor 'atSignUp'}}" class="link btn btn-hollow">{{_ "signup"}}</a>
              </li>
            {{/if}}
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <section id="intro" class="colored text-center">
    <div class="container">
      <div class="intro-well wow animated fadeInDown">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
            <img style="max-width: 150px; padding-top: 30px;" src="/img/jackui-logo.png">
            <h1>{{Config.title}}</h1>
            <h2 class="hidden-xs">{{Config.subtitle}}</h2>
            {{#if User}}
              <a href="{{pathFor 'dashboard'}}" class="btn btn-success"><i class="fa fa-dashboard"></i> {{_
                  "dashboard"}}</a>
            {{else}}
              <a class="btn btn-hollow" href="{{pathFor 'atSignUp'}}">{{_ "getstarted"}}</a>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="how-it-works" class="text-center">
    <div class="container wow fadeIn animated">
      <div class="row col-md-12">
        <h3>{{_ "how"}}</h3>
        <h4>{{Config.name}} - {{Config.subtitle}}</h4>
      </div>
    </div>
    <div class="container">
      <div class="row" id="icon-row">
        <div class="col-md-4 wow fadeInUp animated" data-wow-delay="0.4s">
          <div class="iconbox">
            <i class="fa fa-user-plus fa-3x"></i>
          </div>
          <h2 class="icntitle">1. {{_ "step_1"}}</h2>
          <p class="icnp">{{_ "step_1_text"}}</p>
        </div>
        <div class="col-md-4 wow fadeInUp animated" data-wow-delay="0.8s">
          <div class="iconbox">
            <i class="fa fa-wrench fa-3x"></i>
          </div>
          <h2 class="icntitle">2. {{_ "step_2"}}</h2>
          <p class="icnp">{{_ "step_2_text"}}</p>
        </div>
        <div class="col-md-4 wow fadeInUp animated" data-wow-delay="1.2s">
          <div class="iconbox">
            <i class="fa fa-check fa-3x"></i>
          </div>
          <h2 class="icntitle">3. {{_ "step_3"}}</h2>
          <p class="icnp">{{_ "step_3_text"}}</p>
        </div>
      </div>
    </div>
  </section>
  <section id="ipad" class="colored text-center">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 wow animated fadeInLeft" data-wow-delay="1s">
          <h3>{{_ "section_ipad_header"}}</h3>
          <p>{{_ "section_ipad_text"}}</p>
        </div>
        <div class="col-sm-6">
          <img id="ipad" src="/img/butter-robot.png" alt="" class="wow animated fadeInRight" data-wow-delay="1.5s">
        </div>
      </div>
    </div>
  </section>
  <section id="final">
    <div class="container">
      <div class="row">
        <div class="col-md-4 text-center wow fadeInDown animated" data-wow-delay="1s">
          <h3>
            {{_ "final_text"}}
          </h3>
          <div class="text-center">
            <a class="btn btn-primary" href="{{pathFor 'atSignUp'}}">{{_ "final_cta"}}</a>
          </div>
        </div>
        <div class="col-md-8 wow fadeInUp animated">
          <img src="img/robot.jpg" class="img-responsive wow" data-wow-delay="1.2s" alt="picture">
        </div>
      </div>
    </div>
  </section>
</template>