componets/onboarding3.vue

onboarding3.vue

<template>
  <f7-page>
    <section class="welcome-container">
      <p class="text-align-right"><f7-link href="/home/">Skip</f7-link></p>
      <div class="welcome text-align-center">
        <div class="earn-money__svg welcome-svg">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 512.021 512.021" style="enable-background:new 0 0 512 512" xml:space="preserve" class="cart"><g><g xmlns="http://www.w3.org/2000/svg"><g><path d="m503.235 216.261-261.056 261.055c-11.716 11.716-30.711 11.716-42.426 0l-165.048-165.047c-11.716-11.716-11.716-30.711 0-42.426l261.055-261.056c11.716-11.716 30.711-11.716 42.426 0l96.256 96.256 15.018 35.018 29.985 9.985 23.789 23.789c11.716 11.715 11.716 30.71.001 42.426z" fill="#d3e0e4" data-original="#d3e0e4" style=""/><path d="m90.609 247.463h429.188v63.643h-429.188z" fill="#002c3b" transform="matrix(.707 -.707 .707 .707 -108.092 297.612)" data-original="#002c3b" style="" class=""/></g><g><path d="m30 218.609c-16.569 0-30 13.431-30 30v233.413c0 16.569 13.431 30 30 30h184.594l30-146.706-30-146.706h-184.594z" fill="#f98a6b" data-original="#ffe477" style="" class=""/><path d="m399.188 218.609h-184.594v293.413h184.594c16.569 0 30-13.431 30-30v-233.413c0-16.569-13.431-30-30-30z" fill="#fe724c" data-original="#ffcd00" style="" class=""/></g><g><g><path d="m47.732 417.039h59.209v30h-59.209z" fill="#fdfae5" data-original="#fdfae5" style=""/></g><g><path d="m139.237 417.039h59.209v30h-59.209z" fill="#fdfae5" data-original="#fdfae5" style=""/></g><g><path d="m230.743 417.039h59.208v30h-59.208z" fill="#faf1b4" data-original="#faf1b4" style=""/></g><g><path d="m322.247 417.039h59.209v30h-59.209z" fill="#faf1b4" data-original="#faf1b4" style=""/></g><path d="m48.643 298.591h90.594v63.643h-90.594z" fill="#fdfae5" data-original="#fdfae5" style=""/></g></g></g></svg>

        </div>
        <div class="info welcome-info text-align-center">
          <h1 class="heading-2">
           Seamless online payment <br />system.
          </h1>
          <p class="p-1">
           Seamless and secured <br /> payment
          </p>
          <f7-button round raised fill class="btn-start margin-top display-flex" href="/home/"
            >Get started
          </f7-button>
          
        </div>
      </div>
    </section>
  </f7-page>
</template>

<style>
  .btn-start {
    background-color: #fe724c;
    padding: 1.6rem 4.4rem;
  }
</style>