<%-include("partials/header.ejs")%>
<main>

    <article>
    <section class="nssp" style="background-image: url('./image.png');">
    <div class="container">
      <div class="back-has-left">
          <h1 class="titles"> The Best site for Online Delivery</h1>
          <p class="hero-text">
              Lorem, ipsum dolor sit  
              Best site for Delivery
          </p>
          <div class="btn-box">
            <a href="<%= locals.login ? '/order_now' :  '/login'%>" class="btn" style="text-decoration: none;font-size: 20px;" class="as">Order Now</a>
        </div>
      </div>
      </div>
    </div>

  </section>
  <section class="section-instruction" id="sec">
      <div class="containers">
          <!-- <h2 class="h2-section-title" id="instruction-label" data-reveal >How It Works</h2> -->
          <div class="nss" id="nss">
          <h2 class="heads">How It Works</h2>
          <p class="section-text" data-reveal>
              this site works by this and this
          </p>
        </div>
        <div class="containers">
        <div class="flexm">
          <div class="cards" id="cs-one">
            <div class="image"><img src="./instructuion-1.png" alt="" ></div>
            <div class="heading"><div class="number">01</div><h1 class="sm">Select Restaurant</h1></div>
            <div class="text"><p style="text-align: center;">Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p></div>
          </div>
          <div class="cards" id="cs-two">
            <div class="image"><img src="./instructuion-2.png" alt=""></div>
            <div class="heading"><div class="number">02</div><h1 class="sm">Select menu</h1></div>
            <div class="text"><p style="text-align: center;">Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p></div>
          </div>
          <div class="cards" id="cs-three">
            <div class="image"><img src="./instructuion-3.png" alt=""></div>
            <div class="heading"><div class="number">03</div><h1 class="sm" style="text-align: center;">Wait for delivery</h1></div>
            <div class="text"><p style="text-align: center;">Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p></div>
          </div>
        </div>
      </div>
      </div>
  </section>
  <div class="section-three">
    <div class="heading-box">
      <div class="heading-three"><p>10 Best Restaurants in Your City</p></div>
      <div class="par-three"><p>Magna sit amet purus gravida quis blandit turpis cursus. Venenatis tellus in metus vulputate.</p></div>
    </div>
    <div class="card-box">
      <div class="instruction-card">
        <div class="images"><img src="./instructuion-1.png" alt="nss"></div>
        <div class="button">
          <div class="btn-box">
            <a href="<%= locals.login ? '/order_now' :  '/login'%>" class="btn" style="text-decoration: none;font-size: 20px;" class="as">Order Now</a>
        </div>
        <i class='bx bxs-down-arrow' id="box-icon" onmouseover="callsm()" onmouseleave="callbm()"></i>
      </div>
         <h3>james johnson</h3>
        <div class="description">
          <p>Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p>
        </div>
      </div>
      <div id="npms" style="display: none;">
        <a href="#" class="value">Items_one</a>
        <a href="#" class="value">Items_two</a>
        <a href="#" class="value">Items_three</a>
        <a href="#" class="value">Items_four</a>
        <a href="#" class="value">Items_five</a>
        <a href="#" class="value">Items_six</a>
        <a href="#" class="value">Items_seven</a>
      </div>
      <div class="instruction-card">
        <div class="images"><img src="./instructuion-1.png" alt="nss"></div>
        <div class="button">
          <div class="btn-box">
            <a href="<%= locals.login ? '/order_now' :  '/login'%>" class="btn" style="text-decoration: none;font-size: 20px;" class="as">Order Now</a>
        </div>
        <i class='bx bxs-down-arrow' id="box-icon"onmouseover="callsm()" onmouseleave="callbm()" ></i>
      </div>
        <h3>world johnson</h3>
        <div class="description">
          <p>Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p>
        </div>
      </div>
      <div id="npms-one" style="display: none;">
        <a href="#" class="value">Items_one</a>
        <a href="#" class="value">Items_two</a>
        <a href="#" class="value">Items_three</a>
        <a href="#" class="value">Items_four</a>
        <a href="#" class="value">Items_five</a>
        <a href="#" class="value">Items_six</a>
        <a href="#" class="value">Items_seven</a>
      </div>
                  <div class="instruction-card">
        <div class="images"><img src="./instructuion-1.png" alt="nss"></div>
        <div class="button">
          <div class="btn-box">
            <a href="<%= locals.login ? '/order_now' :  '/login'%>" class="btn" style="text-decoration: none;font-size: 20px;" class="as">Order Now</a>
        </div>
        <i class='bx bxs-down-arrow' id="box-icon" onmouseover="callsm()" onmouseleave="callbm()"></i>
      </div>
        <h4>Var world</h4>
        <div class="description">
          <p>Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p>
        </div>
      </div>         
      <div id="npms-two" style="display: none;">
        <a href="#" class="value">Items_one</a>
        <a href="#" class="value">Items_two</a>
        <a href="#" class="value">Items_three</a>
        <a href="#" class="value">Items_four</a>
        <a href="#" class="value">Items_five</a>
        <a href="#" class="value">Items_six</a>
        <a href="#" class="value">Items_seven</a>
      </div>  
       <div class="instruction-card">
        <div class="images"><img src="./instructuion-1.png" alt="nss"></div>
        <div class="button">
          <div class="btn-box">
            <a href="<%= locals.login ? '/order_now' :  '/login'%>" class="btn" style="text-decoration: none;font-size: 20px;" class="as">Order Now</a>
        </div>
        <i class='bx bxs-down-arrow' id="box-icon" onmouseover="callsm()" onmouseleave="callbm()"></i>
      </div>
        <h4>const world</h4>
        <div class="description">
          <p>Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel.</p>
        </div>
      </div>
      <div id="npms-three" style="display: none;">
        <a href="#" class="value">Items_one</a>
        <a href="#" class="value">Items_two</a>
        <a href="#" class="value">Items_three</a>
        <a href="#" class="value">Items_four</a>
        <a href="#" class="value">Items_five</a>
        <a href="#" class="value">Items_six</a>
        <a href="#" class="value">Items_seven</a>
      </div>
    </div>
  </div>
  <div class="section-four">
    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="l-intro-1645057933.jpg" class="d-block" style="height:800px; width: 2000px;" alt="...">
        </div>
        <div class="carousel-item">
          <img src="image.png" class="d-block" style="height:800px; width:2000px"alt="...">
        </div>
        <div class="carousel-item">
          <img src="image.png" class="d-block"style="height:800px; width:2000px" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
</div>
<section id="fd" style="padding:10%">
  <div class="outer-box">
    <div class="inner">
      <div class="iconsme"><i class='bx bx-smile' id="snm"></i></div>
      <div class="number"><p id="sn">0</p></div>
      <div class="wording"><p>Happy Customers</p></div>
    </div>
    <div class="inner">
      <div class="iconsme"><i class='bx bxs-bowl-rice' ></i></div>
      <div class="number"><p id="sn1">0</p></div>
      <div class="wording"><p>Dishes Served</p></div>

    </div>
    <div class="inner">
      <div class="iconsme"><i class='bx bxs-wine' ></i></div>
      <div class="number"><p id="sn2">0</p></div>
      <div class="wording"><p>Total Beverages</p></div>

    </div>
    <div class="inner">
      <div class="iconsme"><i class='bx bxs-coffee' ></i></div>
      <div class="number"><p id="sn3">0</p></div>
      <div class="wording"><p>Cup Of Coffee</p></div>
    </div>
  </div>
</section>
  <section id="testimonial">
    <div class="my-5">
      <div class="p-5 text-center bg-body-tertiary">
        <div class="containerms py-5" style="text-align: center;">
          <h2 class="text-body-emphasis" id="reviews">"Delicious food! Fast delivery."</h2>
          <div class="ns" style="display: inline-block;">
          <img class="" src="5926713.jpg" alt="dog image" width="48px" height="48px" style="border-radius: 40px;filter: brightness(3);"></div>
          <p class="col-lg-8 mx-auto lead mt-2">
            War, New York
          </p>
        </div>
      </div>
    </div>
    <div class="controls">
      <button id="prev-btn"><i class="fas fa-chevron-left"></i></button>
      <button id="next-btn"><i class="fas fa-chevron-right"></i></button>
    </div>
  </section>
<%-include("partials/footer.ejs")%>

    
