@extends('layouts.mulabase')

@section('content')



    <main
      class="container relative bg-bgColor text-n900 overflow-hidden pt-8 dark:bg-[#242424] h-dvh dark:text-white"
    >
      <img
        src="/muladash/assets/images/element-1.png"
        alt=""
        class="absolute top-[40%] left-0"
      />
      <img
        src="/muladash/assets/images/element-2.png"
        alt=""
        class="absolute top-20 right-0"
      />

      <div class="swiper mobile-screen-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide flex items-center justify-center">
            <img src="/muladash/assets/images/onboarding-slider-img1.png" alt="" />
          </div>
          <div class="swiper-slide flex items-center justify-center">
            <img src="/muladash/assets/images/onboarding-slider-img2.png" alt="" />
          </div>
          <div class="swiper-slide flex items-center justify-center">
            <img src="/muladash/assets/images/onboarding-slider-img3.png" alt="" />
          </div>
        </div>
      </div>
      <div class="absolute bottom-6 left-0 right-0">
        <div class="swiper onboarding-steps-slider pt-10 z-30">
          <div class="swiper-wrapper">
            <div class="swiper-slide relative">
              <div class="px-6 pt-20 relative z-20">
                <p class="text-4xl font-bold">
                  Convert Your Crypto 
                </p>
                <p class="text-sm pt-5 text-n500 dark:text-darkN500">
                 Crypto to Cash convertion in 5 Minutes
                </p>
              </div>
            </div>
            <div class="swiper-slide relative">
              <div class="px-6 pt-20 relative z-20">
                <p class="text-4xl font-bold">
                  Embrace instant Funds Wiring
                </p>
                <p class="text-sm pt-5 text-n500 dark:text-darkN500">
               
                  Delay is a Myth, Escape the order queues on peer-to-peer Marketplaces
                </p>
              </div>
            </div>
            <div class="swiper-slide relative">
              <div class="px-6 pt-20 relative z-20">
                <p class="text-4xl font-bold">
                  Visualize your Transaction DATA
                </p>
                <p class="text-sm pt-5 text-n500 dark:text-darkN500">
                  Start your journey towards wellness. Embrace better health
                  starting right now!
                </p>
              </div>
            </div>
          </div>
          <div
            class="navigation flex w-full items-center justify-between px-6 py-8 z-20"
          >
            <div class="">
              <div class="onBoardingsliderPagingation swiper-pagination"></div>
            </div>
            <div class="nextButton">
              <div class="ara-next">
                <button
                  class="flex items-center justify-center rounded-full bg-g300 p-3.5 text-2xl text-white next-button"
                >
                  <i class="ph ph-caret-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="absolute -bottom-20 left-0 h-[640px] w-[570px] bg-white dark:bg-n0 blur-3xl z-20"
      ></div>
    </main>
@endsection