@section('stylesheets')
    @parent
    <link rel="stylesheet" href="/css/slick.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/slick-theme.css">
    <style>
      
      body {
        overflow-x: hidden;
        width: 100%;
      }

      .foot-heading {
        text-align: center;
      }

      .foot-pieces {
        display: flex;
        flex-wrap: wrap;
      }

      .piece {
        width: 21%;
        flex: 1 0 21%;
        text-align: center;
        margin: 2%;
      }

      .piece img {
        width: 40px;
        padding-bottom: 10px;
      }

      .piece h5 {
        font-size: 15px;
        font-weight: 400;
        text-transform: capitalize;
      }

      .piece h5 a {
        word-wrap: break-word;
      }

      .home-address {
        width: 40%;
        margin-bottom: 0;
        position: relative;
      }

      .home-address > input {
        width: 100%;
        height: 100%;
        padding-right: 10%;
      }

      .get-location {
        cursor: pointer;
      }

      .input-group {
          width: 40%;
      }

      .get-location, .get-location:hover {
          background-color: #fff;
          color: #00a676;
      }

      .btn-form {
        background-color: #222;
      }

      .home-address, .input-group, .btn-group2, #address {
          border: none;
      }
      
      @media (min-width: 580px){
        .home-address, .input-group, .btn-group2, #address, .btn-form {
          height: 55px;
        }

        .btn-group1 {
          border-right: 1px solid #ccc;
        }

        .get-location {
          border-radius: 0;
        }

        .btn-form {
          padding: 0 10px 0 0;
        }

        .input-group-append {
          width: 20%;
          padding: 0;
        }
      }

      @media (max-width: 680px){
        .home-address {
          width: 100%;
        }

        .home-address > span {
          top: 30%;
        }

        .input-group {
          width: 100%;
        }
      }

      .explore-foods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
        grid-column-gap: 20px;
      }

      @media (min-width: 600px) {
        .explore-foods {
          grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
          grid-column-gap: 30px;
        }
      }
      
      
      
      .category-block {
        border: none;
      }

      .category-block img {
        width: 100%;
        border-radius: 50%;
      }

      .category-wrap:hover .category-block {
          background: none;
      }

      .category-wrap:hover .category-block h6 {
          color: #222;
          text-decoration: none;
      }

      .footers {
          width: 100%;
          justify-content: space-evenly;
          background: #fff;
          z-index: 1200;
      }

      .footers-link {
          text-align: center;
          /* border-right: 2px solid #ccc; */
          border-top: 1px solid #ccc;
          width: 100%;
          cursor: pointer;
          font-size: 18px;
          padding: 10px 0;
          display: flex;
          
      }

      .footers-link:last-of-type {
          border-right: none;
      }

      .footers-link>* {
          margin: auto;
      }

      .plus {
          /*border: 1px solid #ccc;*/
          padding: 0 7px;
          border-radius: 3px;
      }

      .how-it-works .card {
        min-height: 180px;
        display: flex;

      }

      .how-it-works .card h3 {
        margin: auto;
      }

      .about .col-sm-6 {
        margin: 0;
        padding: 0;
      }

      .about img {
        width: 100%;
      }

      .about .about-text {
        padding: 20px;
        padding-top: 0;
        display: flex;
      }

      .about-inner {
        margin:auto;
      }

      .about-text p {
        margin: auto;
        font-size: 18px;
        padding-bottom: 12px;
      }

      @media (min-width: 600px) {
        .hidden-lg {
          display: none;
        }
      }

      @media (max-width: 600px){
        .about .about-text {
          padding-top: 30px;
        }

        .hidden-sm {
          display: none;
        }

        /*.about-text p {
          margin: auto;
          font-size: 18px;
          padding-bottom: 12px;
        }*/
      }
      
    </style>
  @endsection
  @section('nav')
    <nav class="navbar" style="position: fixed; top: 10px; right: 20px;">
      hello
    </nav>
  @endsection
  <!-- Header -->
  @section('content')
  <section class="slider d-flex" style="padding-top: 10%;">
    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-md-12">
                <div class="slider-title_box">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="slider-content_wrap">
                                <!-- <h1>Discover great places in Lagos</h1> -->
                                <img src="/images/logo_trans_new.png" alt="Logo">
                                <h3 style="color:#fff">Let's help you discover the best places to eat.</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row d-flex justify-content-center">
                        <div class="col-md-10">
                            <form action="/search" method="get" class="form-wrap mt-4 search-form">
                                <div class="btn-group" role="group" aria-label="Search">
                                    <div class="form-group home-address">
                                        <input type="search" placeholder="What do you crave?" data-type="food" name="food" id="food" class="btn-group1 main-search">
                                        <span class="fa fa-times close-addon"></span>
                                    </div>
                                    <div class="input-group">
                                        <input type="text" name="address" placeholder="Enter Location" class="btn-group2" id="address" required>
                                        <div class="input-group-append btn-group2">
                                            <button type="button" class="btn btn-primary get-location"><span class="ta ta-target"></span></button>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span>SEARCH<i class="pe-7s-angle-right"></i></button>
                                </div>
                                <input type="hidden" name="longitude" id="longitude">
                                <input type="hidden" name="latitude" id="latitude">
                            </form>
                            <div class="slider-link">
                                {{-- <a href="#">Browse Popular</a> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
  <section class="main-block how-it-works">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="styled-heading">
                <h3>How it Works</h3>
            </div>
        </div>
      </div>
      <div class="row cards">
        <div class="col-sm-3">
          <div class="card">
            <h3>Crave it</h3>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <h3>Find it</h3>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <h3>Have it</h3>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <h3>Rate it</h3>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="main-block about">
    <div class="container-fluid">
      <div class="row justify-content-center hidden-sm">
          <div class="col-md-5">
              <div class="styled-heading">
                  <h3>About Cravvings</h3>
              </div>
          </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <img src="/images/about_.jpg" alt="About Picture">
        </div>
        <div class="col-sm-6 about-text">

          <div class="about-inner">
            <div class="row justify-content-center hidden-lg">
                <div class="col-md-5">
                    <div class="styled-heading">
                        <h3>About Cravvings</h3>
                    </div>
                </div>
            </div>
            <p>Cravvings is your new search and review platform that makes finding where to get the food you crave as easy as thinking about it. </p>
            <p>We have the largest food and restaurant data base which gives you an extensive list of options to pick from. </p>
            <p>Cravvings also  helps you refine your search by providing reviews, pictures, average costs, opening/closing times as well as letting you know how far a place is from you.</p>
            <!-- <p>Our food feed also helps make your experience more personal and gives inspiration when deciding what to eat becomes a task. You see something you like? Problem solved. Share your experiences with us and look out for the experiences of other users.</p>
            <p>Join the community!</p> -->
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="main-block find-place-search" style="background: url('/images/place_search_background.jpg'); background-size: cover;">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="styled-heading">
                <h3>Places</h3>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <!-- <h3>Places</h3> -->
        <p class="text-center">Find your favourite places here.</p>
        <form action="#" class="form-inline">
          <div class="form-group" style="flex: 3">
            <input type="text" class="form-control" placeholder="The Place, Chicken Republic..." style="width: 100%; margin-right: 10px;">
          </div>
          <button type="submit" class="btn btn-primary">Search</button>
        </form>
      </div>
    </div>
  </section>
  <section class="main-block">
    <div class="container-fluid">
      <div class="row justify-content-center hidden-sm">
          <div class="col-md-5">
              <div class="styled-heading">
                  <h3>Recent Reviews</h3>
              </div>
          </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="card">
            <!-- <img src="/images/resized/spaghetti_cropped.jpg" class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title" style="margin-bottom: 0;">The Place (Lekki)</h5>
              <small><em>Spaghetti</em></small>
              <div class="ratings">
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="card-text" style="padding-top: 10px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer class="footer">
                  <small>
                    <div class="media">
                      <div class="media-left">
                        <img src="/images/profile.jpg" alt="" style="width: 45px; border-radius: 50%; margin-right: 10px;">
                      </div>
                      <div class="media-body">
                        Someone famous
                      </div>
                    </div>
                  </small>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <!-- <img src="/images/resized/spaghetti_cropped.jpg" class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title" style="margin-bottom: 0;">The Place (Lekki)</h5>
              <small><em>Spaghetti</em></small>
              <div class="ratings">
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="card-text" style="padding-top: 10px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer class="footer">
                  <small>
                    <div class="media">
                      <div class="media-left">
                        <img src="/images/profile.jpg" alt="" style="width: 45px; border-radius: 50%; margin-right: 10px;">
                      </div>
                      <div class="media-body">
                        Someone famous
                      </div>
                    </div>
                  </small>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <!-- <img src="/images/resized/spaghetti_cropped.jpg" class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title" style="margin-bottom: 0;">The Place (Lekki)</h5>
              <small><em>Spaghetti</em></small>
              <div class="ratings">
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="card-text" style="padding-top: 10px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer class="footer">
                  <small>
                    <div class="media">
                      <div class="media-left">
                        <img src="/images/profile.jpg" alt="" style="width: 45px; border-radius: 50%; margin-right: 10px;">
                      </div>
                      <div class="media-body">
                        Someone famous
                      </div>
                    </div>
                  </small>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card">
            <!-- <img src="/images/resized/spaghetti_cropped.jpg" class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title" style="margin-bottom: 0;">The Place (Lekki)</h5>
              <small><em>Spaghetti</em></small>
              <div class="ratings">
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="card-text" style="padding-top: 10px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer class="footer">
                  <small>
                    <div class="media">
                      <div class="media-left">
                        <img src="/images/profile.jpg" alt="" style="width: 45px; border-radius: 50%; margin-right: 10px;">
                      </div>
                      <div class="media-body">
                        Someone famous
                      </div>
                    </div>
                  </small>
                </footer>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="main-block">
      <div class="container-fluid">
          <div class="row justify-content-center">
              <div class="col-md-5">
                  <div class="styled-heading">
                      <h3>Explore</h3>
                  </div>
              </div>
          </div>
          <div class="row explore-foods">
              <div class="">
                  <a href="/search?food=ofada" class="category-wrap" data-name="ofada">
                      <div class="category-block">
                          <img src="/images/explore/ofada.jpg" alt="">
                          <h6>Ofada</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=asun" class="category-wrap" data-name="asun">
                      <div class="category-block">
                          <img src="/images/explore/asun.jpg" alt="">
                          <h6>Asun</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=amala" class="category-wrap" data-name="amala">
                      <div class="category-block">
                          <img src="/images/explore/amala.jpg" alt="">
                          <h6>Amala</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=catfish" class="category-wrap" data-name="catfish">
                      <div class="category-block">
                          <img src="/images/explore/catfish.jpg" alt="">
                          <h6>Grilled Catfish</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=jollof" class="category-wrap" data-name="jollof">
                      <div class="category-block">
                          <img src="/images/explore/jollof.jpg" alt="">
                          <h6>Jollof Rice</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=shawarma" class="category-wrap" data-name="shawarma">
                      <div class="category-block">
                          <img src="/images/explore/shawarma.jpg" alt="">
                          <h6>Shawarma</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=nkwobi" class="category-wrap" data-name="nkwobi">
                      <div class="category-block">
                          <img src="/images/explore/nkwobi.jpg" alt="">
                          <h6>Nkwobi</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=wings" class="category-wrap" data-name="wings">
                      <div class="category-block">
                          <img src="/images/explore/wings.jpg" alt="">
                          <h6>Chicken Wings</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=snail" class="category-wrap" data-name="snail">
                      <div class="category-block">
                          <img src="/images/explore/snail.jpg" alt="">
                          <h6>Snail</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=boli" class="category-wrap" data-name="boli">
                      <div class="category-block">
                          <img src="/images/explore/bole.jpg" alt="">
                          <h6>Bole</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=peppersoup" class="category-wrap" data-name="peppersoup">
                      <div class="category-block">
                          <img src="/images/explore/peppersoup.jpg" alt="">
                          <h6>Peppersoup</h6>
                      </div>
                  </a>
              </div>
              <div class="">
                  <a href="/search?food=porridge" class="category-wrap" data-name="porridge">
                      <div class="category-block">
                          <img src="/images/explore/porridge.jpg" alt="">
                          <h6>Porridge</h6>
                      </div>
                  </a>
              </div>
          </div>
      </div>
      
    </section>
  @endsection