<%- include('_common/_head', {
  key: 'index',
}) %>

<%- include('_component/index/_header') %>

<%- include('_component/index/_menu') %>

<%- include('_component/index/_hero', {
  title: 'Simple and beautiful components.',
  text: 'UNITS v'+ pkg.version +' / Early access edition'
}) %>

<!-- Hero -->
<div class="uc-hero">
  <div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/MmuW8T6GwK4)"></div>
  <div class="uc-hero-title">Lorem ipsum dolor sit amet.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, quam.</p>
  <div class="uc-btn-unit">
    <div class="uc-btn _ghost"><a href="#">Button</a></div>
    <div class="uc-btn"><a href="#">Button</a></div>
  </div>
</div>
<!-- /Hero -->

<main class="uc-content">

  <section class="uc-section">
    <div class="uc-section-inner">
      <h2 class="uc-section-title">Lorem ipsum dolor.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit. Exercitationem, ab.</p>
      <div class="uc-btn-unit">
        <div class="uc-btn">
          <a href="">Success</a>
        </div>
        <div class="uc-btn _secondary">
          <a href="">Secondary</a>
        </div>
        <div class="uc-btn _success">
          <a href="">Success</a>
        </div>
        <div class="uc-btn _danger">
          <a href="">Danger</a>
        </div>
        <div class="uc-btn _warning">
          <a href="">Warning</a>
        </div>
        <div class="uc-btn _disabled">
          <a href="">Disabled</a>
        </div>
      </div>
    </div>
  </section>

  <section class="uc-section _gray">
    <h2 class="uc-section-title _center">Form</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    <div class="uc-form-unit">
      <form class="uc-form _set">
        <div class="uc-form-parts-unit uc-grid _gutter">
          <div class="uc-grid-cell _col-fit">
            <label for="name">First name <span>required</span></label>
            <input type="text" class="uc-form-parts" id="name" required>
          </div>
          <div class="uc-grid-cell _col-fit">
            <label for="kana">Last name <span>required</span></label>
            <input type="text" class="uc-form-parts" id="kana" required>
          </div>
        </div>
        <div class="uc-form-parts-unit uc-grid _gutter">
          <div class="uc-grid-cell _col-fit">
            <label for="name">First name <span>required</span></label>
            <input type="text" class="uc-form-parts" id="name" required>
          </div>
          <div class="uc-grid-cell _col-fit">
            <label for="kana">Last name <span>required</span></label>
            <input type="text" class="uc-form-parts" id="kana" required>
          </div>
        </div>
        <div class="uc-form-parts-unit">
          <label for="tel">Phone number</label>
          <input type="text" class="uc-form-parts" id="tel">
        </div>
        <div class="uc-form-parts-unit">
          <label for="select">Select</label>
          <select class="uc-form-parts" id="select">
            <option value="">select 1</option>
            <option value="">select 2</option>
            <option value="">select 3</option>
            <option value="">select 4</option>
          </select>
        </div>
        <div class="uc-form-parts-unit _center">
          <label for="check1">
            <input type="checkbox" class="uc-form-parts" id="check1">Item1
          </label>
          <label for="check2">
            <input type="checkbox" class="uc-form-parts" id="check2">Item2
          </label>
          <label for="check3">
            <input type="checkbox" class="uc-form-parts" id="check3">Item3
          </label>
        </div>
        <div class="uc-form-parts-unit _center">
          <label for="radio1">
            <input type="radio" name="example" class="uc-form-parts" id="radio1">Item1
          </label>
          <label for="radio2">
            <input type="radio" name="example" class="uc-form-parts" id="radio2">Item2
          </label>
          <label for="radio3">
            <input type="radio" name="example" class="uc-form-parts" id="radio3">Item3
          </label>
        </div>
        <div class="uc-form-parts-unit">
          <label for="address">Address</label>
          <div class="uc-form-group">
            <input type="text" class="uc-form-parts" id="name" required>
            <button class="uc-btn"><span>Search</span></button>
          </div>
        </div>
        <div class="uc-form-parts-unit">
          <label for="message">Message</label>
          <textarea class="uc-form-parts" id="message"></textarea>
        </div>
        <div class="uc-form-parts-unit">
          <button class="uc-btn _primary"><a href="#">Send</a></button>
        </div>
      </form>
    </div>
  </section>

  <section class="uc-section _dark">
    <h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Iusto, veritatis!</p>
  </section>

</main>

<%- include('_component/_footer') %>

<%- include('_common/_foot') %>
