@layout('layouts.landing')

@section('page-title')
Seepur | Shared story time
@endsection
@section('hero')
<section class="hero is-large is-primary hero-bg-landing0{{bgIndex}}">
  @!component('components.nav.nav', isLanding = true, auth=auth)
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Seepur
      </h1>
      <h2 class="subtitle">
        A Shared Story Time Experience
      </h2>
      <div class="buttons">
        <a class="button is-primary" href="/register">Sign Up</a>
        <a class="button is-link" href='/login'>Log In</a>
      </div>
    </div>
  </div>
</section>
@endsection
@section('content')

<section class="section">
  <div class="container has-text-centered">
    <h1 class="title">Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, dolores laudantium ipsam labore reiciendis iusto quas corrupti iure voluptatum cumque. Quos eveniet non molestias quidem alias, maiores et sed animi placeat molestiae! Ut neque, eligendi ab ipsam laboriosam tempore nostrum quas atque, rerum assumenda est reiciendis. Fuga modi rerum earum voluptates assumenda, asperiores corporis facere qui numquam dolorum. At consectetur, aut excepturi cumque quas incidunt explicabo! Maxime assumenda quas a placeat optio, unde excepturi dolorum delectus necessitatibus dolores ab officiis aut obcaecati rerum perferendis aperiam. Ex qui beatae, esse animi facere, ipsam tempora consequuntur corporis fuga dolor pariatur optio cum unde suscipit ipsum dolorum asperiores aliquam expedita. Necessitatibus perspiciatis expedita iure quae eos sit delectus veritatis earum, maxime explicabo, laborum fugit culpa eius quibusdam dolorum! Impedit quam incidunt quaerat quos sed officia at animi suscipit, hic ipsa cumque, sequi porro eos nostrum! Enim vitae, itaque eum placeat sint est, blanditiis fuga numquam reiciendis nesciunt expedita, modi sit natus! Fugit magni assumenda adipisci, doloremque maxime voluptas earum dolorem dignissimos? Saepe fugit est ab commodi dolorem recusandae architecto, natus quasi eaque veniam illum sed tenetur minima rem aperiam provident, blanditiis laudantium numquam aliquid optio ipsum autem. Odio architecto corrupti libero. Animi, culpa.</p>
    <a href="#" class="button">More...</a>
  </div>
</section>

<section class="section">
  <div class="columns">
    <div class="column">
      <img src="/images/landing-hero03.jpg" alt="">
    </div>
    <div class="column has-text-centered">
      <div class="title">Title 2</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id dolorum incidunt aliquid voluptatibus sapiente aliquam neque nesciunt ullam labore illo quae nostrum est, veniam cupiditate, ducimus, eos et voluptate quod libero! Quibusdam doloremque illo sapiente officiis dignissimos. Tempora consequuntur beatae nesciunt doloremque dolorem sit vero! Neque similique velit quae modi.</p>
      <a href="#" class="button">More...</a>
    </div>
  </div>
</section>

<section class="section">
  <div class="columns">
    <div class="column has-text-centered">
      <div class="title">Title 3</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id dolorum incidunt aliquid voluptatibus sapiente aliquam neque nesciunt ullam labore illo quae nostrum est, veniam cupiditate, ducimus, eos et voluptate quod libero! Quibusdam doloremque illo sapiente officiis dignissimos. Tempora consequuntur beatae nesciunt doloremque dolorem sit vero! Neque similique velit quae modi.</p>
      <a href="#" class="button">More...</a>
    </div>
    <div class="column">
      <img src="/images/landing-hero01.jpg" alt="">
    </div>
  </div>
</section>

<section class="section">
  <div class="columns has-text-centered">
    <div class="column">
      <div>
        <span class="icon title"><i class="fa fa-desktop"></i></span>
      </div>
      <div>Feature name</div>
    </div>
    <div class="column">
      <div>
        <span class="icon title"><i class="fa fa-fire"></i></span>
      </div>
      <div>Feature name</div>
    </div>
    <div class="column">
      <div>
        <span class="icon title"><i class="fa fa-video is-rounded"></i></span>
      </div>
      <div>Feature name</div>
    </div>
    <div class="column">
      <div>
        <span class="icon title"><i class="fa fa-gitea is-rounded"></i></span>
      </div>
      <div>Feature name</div>
    </div>
  </div>
</section>


@endsection
  