<!DOCTYPE html>
<html lang="en">


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="mpay" />
  <meta name="keywords" content="mpay" />
  <meta name="author" content="mpay" />
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" href="assets/images/logo/favicon.png" type="image/x-icon" />
  <title>mPay App</title>
  <link rel="apple-touch-icon" href="assets/images/logo/favicon.png" />
  <meta name="theme-color" content="#122636" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="mpay" />
  <meta name="msapplication-TileImage" content="assets/images/logo/favicon.png" />
  <meta name="msapplication-TileColor" content="#FFFFFF" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!--Google font-->
  <link rel="preconnect" href="https://fonts.googleapis.com/" />
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&amp;display=swap" rel="stylesheet" />

  <!-- bootstrap css -->
  <link rel="stylesheet" id="rtl-link" type="text/css" href="assets/css/vendors/bootstrap.min.css" />

  <!-- swiper css -->
  <link rel="stylesheet" type="text/css" href="assets/css/vendors/swiper-bundle.min.css" />

  <!-- aos css -->
  <link rel="stylesheet" type="text/css" href="assets/css/vendors/aos.css" />

  <!-- Theme css -->
  <link rel="stylesheet" id="change-link" type="text/css" href="assets/css/style.css" />
</head>

<body>
  <!-- loading section start -->
  <div class="onboarding-loader" id="onboardingLoader">
    <div class="rocket-img">
      <img class="rocket" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500"
        src="assets/images/svg/rocket.svg" alt="rocket">
    </div>
    <div class="flash-img">
      <img class="flash" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800"
        src="assets/images/svg/flash.svg" alt="flash">
    </div>
    <div class="logo-img">
      <img class="img-fluid" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="1000"
        src="assets/images/logo/logo-white.png" alt="logo">
    </div>
  </div>
  <!-- loading section end -->

  <!-- onboarding section start -->
  <section class="onboarding-section highlight se" id="onboardingBody">
    <div class="swiper onboarding">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="poster-wapper">
            <div class="poster-box-chain" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1700">
              <span class="left-chain"></span>
              <span class="right-chain"></span>
            </div>
            <div class="poster-box color1 box1" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1700">
              <h2>EARN</h2>
              <img class="img-fluid top-line" src="assets/images/svg/lines.svg" alt="lines">
            </div>
            <div class="poster-box color2 box2" data-aos="fade-right" data-aos-duration="2000" data-aos-delay="2000">
              <h2>MORE</h2>
            </div>
            <div class="poster-box color1 box3" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="2500">
              <h2>FINANCE</h2>
            </div>
            <div class="poster-box color2 box4" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="3000">
              <h2>DAILY</h2>
              <img class="img-fluid bottom-line" src="assets/images/svg/lines-fill.svg" alt="lines">
            </div>
          </div>

          <div class="custom-container">
            <p>The best platform to earn money daily</p>
            <div class="d-flex justify-content-between align-items-center pb-3">
              <a href="signin" class="btn btn-link mt-0 p-0">Skip</a>

              <div class="onboarding-next">
                <img class="img-fluid arrow" src="assets/images/svg/arrow-white.svg" alt="arrow">
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="poster-wapper">
            <div class="poster-box-chain poster-box-chain1" data-aos="fade-down" data-aos-duration="1000"
              data-aos-delay="500">
              <span class="left-chain"></span>
              <span class="right-chain"></span>
            </div>
            <div class="poster-box poster-box1 color1 box1" data-aos="fade-down" data-aos-duration="1000"
              data-aos-delay="500">
              <h3>Add different stocks and manage</h2>
            </div>
            <div class="custom-container">
              <ul class="card-list">
                <li>
                  <img class="img-fluid card-img card5" src="assets/images/card/card5.png" alt="card">
                </li>
                <li>
                  <img class="img-fluid card-img card4" src="assets/images/card/card4.png" alt="card">
                </li>
                <li>
                  <img class="img-fluid card-img card3" src="assets/images/card/card3.png" alt="card">
                </li>
                <li>
                  <img class="img-fluid card-img card2" src="assets/images/card/card2.png" alt="card">
                </li>
                <li>
                  <img class="img-fluid card-img card1" src="assets/images/card/card1.png" alt="card">
                </li>
              </ul>
            </div>
          </div>
          <p>Manage diffrent stock plans in the app your money will safe here</p>
          <div class="custom-container button-group">
            <a href="signin" class="btn theme-btn w-100">Sign in</a>
            <a href="signup" class="btn btn-link mt-3 pb-3">Sign up</a>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!-- onboarding section end -->

  <!-- swiper js -->
  <script src="assets/js/swiper-bundle.min.js"></script>
  <script src="assets/js/custom-swiper.js"></script>

  <!-- aos js -->
  <script src="assets/js/aos.js"></script>
  <script src="assets/js/init-aos.js"></script>

  <!-- bootstrap js -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>

  <!-- onload rocket -->
  <script src="assets/js/onload.js"></script>

  <!-- script js -->
  <script src="assets/js/script.js"></script>
  <script>

  </script>
</body>


</html>