@extends('layouts.homeapp')
@section('content')


<section id="hero" class="shadow d-flex align-items-center mt-5">
  <!-- <div class="container"> -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:100%">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <div class="slide-part">
            <div class="container">
              <div class="row">
                <div class="col-lg-6 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
                  <h1 data-aos="fade-up">Quality repairing at your Affordability</h1>
                  <h2 data-aos="fade-up" data-aos-delay="400">We know how valuable your products are.</h2>
                  <div data-aos="fade-up" data-aos-delay="800">
                    <!-- <a href="#about" class="btn-get-started scrollto">Get Started</a> -->
                  </div>
                </div>
                <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
                  <img src="assets/img/homi.png" class="img-fluid animated" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="item">
        <div class="slide-part">
            <div class="container">
              <div class="row">
                <div class="col-lg-6 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
                  <h1 data-aos="fade-up">Services you can trust. Quality you can afford.</h1>
                  <h2 data-aos="fade-up" data-aos-delay="400">Your time is the most valuable thing you gain. We are providing services that you'll love to use.</h2>
                  <div data-aos="fade-up" data-aos-delay="800">
                    <!-- <a href="#about" class="btn-get-started scrollto">Get Started</a> -->
                  </div>
                </div>
                <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
                  <img src="assets/img/homi2.png" class="img-fluid animated" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      
        <div class="item">
        <div class="slide-part">
            <div class="container">
              <div class="row">
                <div class="col-lg-6 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
                  <h1 data-aos="fade-up">Always there when you needs repair.</h1>
                  <h2 data-aos="fade-up" data-aos-delay="400">We use products that revive your products and give a new feel to them.</h2>
                  <div data-aos="fade-up" data-aos-delay="800">
                    <!-- <a href="#about" class="btn-get-started scrollto">Get Started</a> -->
                  </div>
                </div>
                <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
                  <img src="assets/img/homi3.png" class="img-fluid animated" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  <!-- </div> -->

</section><!-- End Hero -->


<!-- ======= Hero Section ======= -->
<!-- <section id="hero" class="shadow d-flex align-items-center">

<div class="container">
  <div class="row">
    <div class="col-lg-6 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
      <h1 data-aos="fade-up">Where Spotless Clothes are at your Doorstep</h1>
      <h2 data-aos="fade-up" data-aos-delay="400">We know how you love the feeling of freshly washed ironed clothes.</h2>
      <div data-aos="fade-up" data-aos-delay="800"> -->

        <!-- <a href="#about" class="btn-get-started scrollto">Get Started</a> -->

      <!-- </div>
    </div>
    <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
      <img src="assets/img/homi.png" class="img-fluid animated" alt="">
    </div>
  </div>
</div>

</section> -->
<!-- End Hero -->




<!-- ======= Features Section ======= -->
<section id="features" class="shadow features pb-5">
  <div class="container">

    <!-- <div class="section-title" data-aos="fade-up">
      <h2>Features</h2>
      <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem</p>
    </div> -->

    <div class="row" data-aos="fade-up" data-aos-delay="300">
      <div class="col-lg-3 col-md-4">
        <a href="/myorders "><div class="icon-box">
          <!-- <i class="ri-store-line" style="color: #2a8bcb"></i> -->
          <i class="fas fa-clipboard-list"></i>
          <h3>My Orders</h3>
        </div></a>
      </div>
      <div class="col-lg-3 col-md-4 mt-4 mt-md-0">
        <a href="/trackorders"><div class="icon-box">
          <!-- <i class="ri-bar-chart-box-line" style="color: #5578ff;"></i> -->
          <i class="fas fa-truck"></i>
          <h3>Track My Orders</h3>
        </div></a>
      </div>
      <div class="col-lg-3 col-md-4 mt-4 mt-md-0">
        <a href="/myoffers"><div class="icon-box">
          <!-- <i class="ri-calendar-todo-line" style="color: #e80368;"></i> -->
          <i class="fas fa-percentage"></i>
          <h3>My Offers</h3>
        </div></a>
      </div>
      <div class="col-lg-3 col-md-4 mt-4 mt-lg-0">
        <a href="/notifications"><div class="icon-box">
          <!-- <i class="ri-paint-brush-line" style="color: #e361ff;"></i> -->
          <i class="far fa-comment-alt"></i>
          <h3>Notifications</h3>
        </div></a>
      </div>
      <div class="col-lg-3 col-md-4 mt-4 mt-lg-0">
        <a href="/mypreviousorders"><div class="icon-box">
        <i class="fas fa-list-alt"></i>
          <h3>My  Previous Orders</h3>
        </div></a>
      </div> 
    </div>

  </div>
</section><!-- End Features Section -->


<!-- ======= Button Section ======= -->
<section id="round-btn" class="round-btn">
  <div class="container">
        <a href="Order"><button class="btn rounded-circle sticky-btn basket" ><i class="fas fa-tools fa-2x"></i></button></a>
  </div>
</section><!-- End Button Section -->


@endsection