@include('/frontend/'.$dir.'/header')

  <!-- hero page ----start -->
  <div class="container-fluid p-0 m-0">
    <div class="row g-0 ">
      <div class="col-md-6 hero_imges">
        <img src="{{asset('images/frontend/hero_img.png')}}" class="img-fluid" alt="">
      </div>
      <div class="col-md-6 d-flex align-items-center" style=" background-image: linear-gradient( #543FAF,#361B9A);">
        <div class="mx-5 hero_text">
          <h1 class=" pb-2">Every purchase will bring happiness</h1>
          <p>Proin Ex Ipsum, Facilisis Id Tincidunt Sed, Vulputate In Lacus. Donec
            Pharetra Faucibus Leo, Vitae Vestibulum Leo Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut, Eleifend
            Tristique Metus. Integer Sit Amet Auctor Ligula, Vel Dictum Orci.
          </p>
          <button class="btn btn-warning custome_btn my-3">Explore</button>
        </div>
      </div>
    </div>
  </div>
  <!-- hero page ----End -->

  <!-- --------------------------------------------------------------------------------about -->
  <small id="about"></small>
  <div class="container about_page text-center py-5">
    <h1 class="mt-5 pt-lg-5">What is “App Name”</h1>
    <div class="container mb-5 mt-1 p-1">
      <p>
        Proin Ex Ipsum, Facilisis Id Tincidunt Sed, Vulputate In Lacus. Donec Pharetra Faucibus Leo, Vitae Vestibulum Leo
        Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut, Eleifend Tristique Metus.
        Integer Sit Amet Auctor Ligula, Vel Dictum Orci. Nam Feugiat Interdum Nisl. Ut Id Velit Ac Ante Maximus Gravida.
      </p>
    </div>
  </div>
  <!-- Explanation div strat here  -->
  <section>
    <div class="container-fluid p-0 m-0">
      <div class="row g-0 flex-column-reverse flex-md-row">
        <div class="col-md-6  p-0 m-0">
          <img src="{{asset('images/frontend/side_img_1.png')}}" class="img-fluid" alt="">
        </div>
        <div class="col-md-6 d-flex align-items-center" style="background-color:#361B9A;">
          <div class="explain m-5">
            <div class="d-flex circle_r">
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
            </div>
            <H1 class="text-white">Lorem Ipsum5</H1>
            <p>Proin Ex Ipsum, Facilisis Id Tincidunt Sed, Vulputate In Lacus. Donec Pharetra Faucibus
              Leo,
              Vitae Vestibulum Leo Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut.</p>
            <div class=" table-responsive">
              <table class="table table-borderless">
                @for ($i=0; $i < 4 ; $i++) <tr>
                  <td class="svg_rtl"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
                      <path id="Polygon_4" data-name="Polygon 4" d="M6.264,3.039a2,2,0,0,1,3.473,0l4.554,7.969A2,2,0,0,1,12.554,14H3.446A2,2,0,0,1,1.71,11.008Z" transform="translate(14) rotate(90)" fill="#f56a20" />
                    </svg>
                  </td>
                  <td>Vestibulum Leo Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut.</td>
                  </tr>
                  @endfor
              </table>
            </div>
          </div>
        </div>
        <!-- second explain -->
        <div class="col-md-6 d-flex align-items-center" style="background-color:#361B9A;">
          <div class="explain m-5">
            <div class="d-flex circle_r">
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
              <i class="bi bi-record-fill ms-1"></i>
            </div>
            <H1 class="text-white">Lorem Ipsum</H1>
            <p>Proin Ex Ipsum, Facilisis Id Tincidunt Sed, Vulputate In Lacus. Donec Pharetra Faucibus
              Leo,
              Vitae Vestibulum Leo Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut.</p>
            <div class=" table-responsive">
              <table class="table table-borderless">
                @for ($i=0; $i < 4 ; $i++) <tr>
                  <td class="svg_rtl"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
                      <path id="Polygon_4" data-name="Polygon 4" d="M6.264,3.039a2,2,0,0,1,3.473,0l4.554,7.969A2,2,0,0,1,12.554,14H3.446A2,2,0,0,1,1.71,11.008Z" transform="translate(14) rotate(90)" fill="#f56a20" />
                    </svg>
                  </td>
                  <td>Vestibulum Leo Scelerisque Eu. Nam Enim Dolor, Porta At Ex Ut.</td>
                  </tr>
                  @endfor
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-6  p-0 m-0">
          <img src="{{asset('images/frontend/side_img_2.png')}}" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </section>
  <!-- Explanation div enddedd here  -->
  <!-- App shot here start ================================  -->
  <section class="my-5 py-5">
    <div class="container">
      <div class="d-flex justify-content-center">
        <h1 class="app_shot my-5">
          App shot
        </h1>
      </div>
    </div>
    <div class="container-fluid my-5 py-lg-5">
      <!-- slider here start  -->
      <div class="slider">
        <div class="slider-tracks">
          <!-- 9 slides -->
          <div class="slides">
            <img src="{{asset('images/frontend/1.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/2.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/3.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/4.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/5.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/1.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/2.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/3.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <!-- 9 slides -->
          <div class="slides">
            <img src="{{asset('images/frontend/4.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/5.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/1.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/2.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/3.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/4.png')}}" class="img-fluid ps-3" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/5.png')}}" class="img-fluid" alt="">
          </div>
          <div class="slides">
            <img src="{{asset('images/frontend/1.png')}}" class="img-fluid ps-3" alt="">
          </div>
        </div>
      </div>
      <!-- end slider  -->
    </div>
  </section>
  <!-- App shot here ended ================================  -->
  <!-- download div  -->
  <section>
    <div class="container-fluid my-5 pt-lg-5 p-0" id="download">
      <div class="row g-0 flex-column-reverse flex-md-row">
        <div class="col-md-6 d-flex align-items-center " style="background-color: #F0F0F0;">
          <div class="m-5 down ">
            <h1>Download Now</h1>
            <p>Proin Ex Ipsum, Facilisis Id Tincidunt Sed, Vulputate In Lacus. Donec Pharetra Faucibus Leo, Vitae Vestibulum Leo Scelerisque Eu. Nam Enim Dolor,</p>
            <div class="d-flex pt-4">
              <a href="">
                <img src="{{asset('images/frontend/googl.png')}}" class="img-fluid" alt="">
              </a>
              <a href="">
                <img src="{{asset('images/frontend/app.png')}}" class="img-fluid ps-3" alt="">
              </a>

            </div>
          </div>
        </div>
        <div class="col-md-6">
          <img src="{{asset('images/frontend/download.png')}}" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </section>
  <!-- end download div  -->


@include('/frontend/'.$dir.'/footer')