@layout('layouts.landing')

@section('page-title')
Seepur | Shared story time
@endsection
@section('hero')
<section class="hero is-medium hero-bg">
  @!component('components.nav.nav', isLanding = true, auth=auth)
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column m-t-a m-b-a">
          <h1 class="title">
            Seepur
          </h1>
          <h2 class="subtitle">
            A <span class="has-text-weight-bold">safe</span> and <span class="has-text-weight-bold">fun</span> way to spend time with far away loved ones
          </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 class="column is-half ">
          <figure class="image">
            <img src="/images/grand.svg" alt="" srcset="">
          </figure>
          <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>

        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('content')

<section class="section">
  <div class="container has-text-centered">
    <h1 class="title">Being far, but never apart</h1>
    <p>
      Not just a video call. Choose one of the fun activities SEEPUR offers and start making the most out of your time together!
With SEEPUR you can simply choose your grandchild/niece/nephew you wish to connect with, click on your chosen activity for the day, and share a fun experience together.
    </p>
    <a href="#" class="button">More...</a>
  </div>
</section>

<section class="section">
  <div class="columns">
    <div class="column">
      <figure class="image is-5by4">
        <img src="/images/be-there.svg" alt="" srcset="">
      </figure>
      <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>
    </div>
    <div class="column has-text-centered">
      <div class="title">Be There</div>
      <p>
        Make an actual impact on the child by creating shared memories. You will be surprised how engaged and comunicative a little child could be during active sessions.
        With the great combination of video calling and your shared view of the book pages, you can make the story come alive by using different voices for different characters, and even acting out parts of the story, as if you’re right there by their side.
      </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">Yours</div>
      <p>
        Seepur is all about you and the child. You can upload your own books and read together, create puzzles with your own photos and more!
      </p>
      <a href="#" class="button">More...</a>
    </div>
    <div class="column">
      <figure class="image is-5by4">
        <img src="/images/learning.svg" alt="" srcset="">
      </figure>
      <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>
    </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