@layout('layouts.landing')

@section('page-title')
A safe and fun way to spend time with far away loved ones
@endsection
@section('hero')
<div class="">
  <section class="hero is-large hero-bg is-light hero-bg-svg">
    @!component('components.nav.nav', isLanding = false, auth=auth)
    <div class="hero-body">
      <div class="container">
        <div class="columns">
          <div class="column">
            <h1 class="title has-text-grey-darker">
              Seepur
            </h1>
            <h2 class="subtitle has-text-grey">
              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 is-rounded" href="/register">Sign Up</a>
              <a class="button is-rounded  is-outlined" href='/login'>Log In</a>
            </div>
          </div>
          <div class="column is-one-third">
            <figure class="image">
              <img src="/images/whale.svg" alt="" srcset="">
            </figure>

          </div>
        </div>
      </div>
    </div>
    <div class="scroll-down-indicator is-hidden-mobile">
      <a href="#info" class="button is-rounded is-outlined is-large is-borderless" style="background-color:transparent">
        <i class="fa fa-fw fa-angle-double-down"></i>
      </a>
    </div>
  </section>
  @endsection
  @section('content')
  <div class="bg-moon-stars">
    <section class="section" id="info">
      <div class="container has-text-centered">
        <h1 class="title is-1">Being far, but never apart</h1>
        <h3 class="subtitle is-3">Not just a video call</h3>
        <p class="has-diego-width-800 m-l-a m-r-a">
          Choose one of the fun activities Seepur offers and start making the most out of your time together!
        </p>
        <p class="has-diego-width-800 m-l-a m-r-a">
          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 m-t-md">More...</a>  --}}
      </div>
    </section>


    {{--  3 Important feature bloks  --}}
    <section class="section">
      <div class="columns">
        <div class="column is-flex">
          <div class="message has-text-centered p-lg is-info">
            <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
              <img src="/images/shield.svg" class="landing-featue-image">
            </figure>
            <div class="message-body-y m-t-lg">
              <div class="subtitle is-3">Secure</div>
              <p>
                Using the best practices and security messures to protect all.
              </p>
              <p>Only connections that the parent have created will be able to connect with a child</p>
            </div>
          </div>
        </div>
        <div class="column is-flex">
          <div class="message has-text-centered p-lg is-info">
            <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
              <img src="/images/coding.svg" class="landing-featue-image">
            </figure>
            <div class="message-body-y m-t-lg">
              <div class="subtitle is-3">Open Source</div>
              <p>
                Seepur is an open source project
              </p>
              <p>You can view the code, modify the code and basically do whatever you want.</p>
              <p>There is a cool article HERE on how you can run this yourself so you never need to trust anyone else,
                not
                even us!</p>
            </div>
          </div>
        </div>
        <div class="column is-flex">
          <div class="message has-text-centered p-lg is-info">
            <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
              <img src="/images/easy.svg" class="landing-featue-image">
            </figure>
            <div class="message-body-y m-t-lg">
              <div class="subtitle is-3">Easy to use</div>
              <p>
                Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your
                far away loved one.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="bg-sun-cloud">
    <section class="section">
      <div class="columns">
        <div class="column p-md">
          <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 m-t-md">More...</a>  --}}
        </div>
        <div class="column is-half">
          <figure class="image">
            <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>
    </section>
  </div>

  <div class="bg-flower">
    <section class="section">
      <div class="columns">
        <div class="column is-half">
          <figure class="image">
            <img src="/images/build.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 p-md">
          <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>
          <p>
            Your creations are yours, only available for sessions where you are a part of. So yes, Make interesting
            stuff,
            upload better books because the child will be picky!
          </p>
          {{--  <a href="#" class="button m-t-md">More...</a>  --}}
        </div>
      </div>
    </section>
  </div>




</div>
@endsection