components/onboarding.vue

onboarding1.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"
            class="cart"
            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 512"
            style="enable-background: new 0 0 512 512"
            xml:space="preserve"
          >
            <g>
              <g xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m410.073 89.887h-68.82c-8.274 0-14.981-6.707-14.981-14.981v-25.516c0-27.234 22.157-49.39 49.391-49.39s49.391 22.157 49.391 49.39v25.515c0 8.275-6.707 14.982-14.981 14.982zm-53.838-19.975h38.857v-20.522c0-10.713-8.716-19.428-19.429-19.428s-19.429 8.716-19.429 19.428v20.522z"
                  fill="#29376d"
                  data-original="#29376d"
                  style=""
                />
                <path
                  d="m454.868 242.889s0 0-.01 0h-154.785c-8.27 0-14.981-6.712-14.981-14.981v-59.925c0-.12.02-.24.02-.36s-.01-.25 0-.369l4.994-92.434c.39-7.98 6.971-14.252 14.961-14.252h141.192c7.97 0 14.542 6.232 14.961 14.182l8.629 152.358c.001 9.98-6.916 15.781-14.981 15.781z"
                  fill="#ff3053"
                  data-original="#ff645a"
                  style=""
                  class=""
                />
                <path
                  d="m454.868 242.889s0 0-.01 0h-137.077v-182.321h128.478c7.97 0 14.542 6.232 14.961 14.182l8.629 152.358c.001 9.98-6.916 15.781-14.981 15.781z"
                  fill="#fe724c"
                  data-original="#ff3053"
                  style=""
                  class=""
                />
                <path
                  d="m317.778 118.046v109.862c0 8.27-6.702 14.981-14.981 14.981h-155.222c-9.072 0-16.115-8.036-14.831-17.088l7.019-109.862c1.049-7.381 7.371-12.874 14.831-12.874h148.203c8.279 0 14.981 6.711 14.981 14.981z"
                  fill="#fabe2c"
                  data-original="#fabe2c"
                  style=""
                />
                <circle
                  cx="395.493"
                  cy="467.057"
                  fill="#29376d"
                  r="44.943"
                  data-original="#29376d"
                  style=""
                />
                <circle
                  cx="235.944"
                  cy="467.057"
                  fill="#47568c"
                  r="44.943"
                  data-original="#47568c"
                  style=""
                />
                <path
                  d="m406.629 217.171c.21 4.095-1.278 8.1-4.105 11.076-2.826 2.966-6.752 4.654-10.856 4.654h-147.774c-4.105 0-8.02-1.688-10.856-4.654-2.827-2.976-4.305-6.981-4.105-11.076l2.996-59.925c.4-7.97 6.981-14.232 14.961-14.232h141.782c7.98 0 14.562 6.262 14.961 14.232z"
                  fill="#4793ff"
                  data-original="#4793ff"
                  style=""
                />
                <path
                  d="m406.629 217.171c.21 4.095-1.278 8.1-4.105 11.076-2.826 2.966-6.752 4.654-10.856 4.654h-73.887v-89.887h70.891c7.98 0 14.562 6.262 14.961 14.232z"
                  fill="#4756ff"
                  data-original="#4756ff"
                  style=""
                />
                <path
                  d="m488.047 221.695-26.167 90.536c-7.041 29.423-33.068 49.957-63.34 49.957h-218.915c-7.321-29.822-27.755-100.703-42.586-159.25h336.507c4.634 0 9.009 2.147 11.855 5.823 2.835 3.666 3.814 8.44 2.646 12.934z"
                  fill="#dfe7f4"
                  data-original="#dfe7f4"
                  style=""
                  class=""
                />
                <path
                  d="m488.047 221.695-26.167 90.536c-7.041 29.423-33.068 49.957-63.34 49.957h-80.758v-159.25h155.764c4.634 0 9.009 2.147 11.855 5.823 2.835 3.666 3.814 8.44 2.646 12.934z"
                  fill="#b6c0d1"
                  data-original="#b6c0d1"
                  style=""
                  class=""
                />
                <circle
                  cx="235.944"
                  cy="467.057"
                  fill="#f0f7ff"
                  r="15"
                  data-original="#f0f7ff"
                  style=""
                  class=""
                />
                <circle
                  cx="395.493"
                  cy="467.057"
                  fill="#dfe7f4"
                  r="15"
                  data-original="#dfe7f4"
                  style=""
                  class=""
                />
                <path
                  d="m448.581 407.13c0 8.27-6.72 14.98-14.99 14.98h-214.671c-27 0-50.2-18.35-56.42-44.63-5.16-18.16-3.24-11.38-61.18-242.91-1.68-6.61-7.61-11.22-14.42-11.22h-48.45c-8.27 0-14.98-6.71-14.98-14.98 0-8.28 6.71-14.98 14.98-14.98h48.45c20.54 0 38.41 13.9 43.46 33.8 0 0 7.19 28.32 16.67 65.76 14.83 58.55 35.26 139.42 42.58 169.24.88 3.56 1.57 6.41 2.04 8.39 3.01 12.7 14.22 21.57 27.27 21.57h214.67c8.27 0 14.991 6.71 14.991 14.98z"
                  fill="#47568c"
                  data-original="#47568c"
                  style=""
                />
                <path
                  d="m448.581 407.13c0 8.27-6.72 14.98-14.99 14.98h-115.811v-29.96h115.81c8.27 0 14.991 6.71 14.991 14.98z"
                  fill="#29376d"
                  data-original="#29376d"
                  style=""
                />
              </g>
            </g>
          </svg>
        </div>
        <div class="info welcome-info text-align-center">
          <h1 class="heading-2">Your order has been placed</h1>
          <p class="p-1">
            Track your order <br />
            details in the app
          </p>
          <f7-button class="btn-next" href="/onboarding2/"
            ><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"
              class="icon-next"
              x="0"
              y="0"
              viewBox="0 0 407.436 407.436"
              style="enable-background: new 0 0 512 512"
              xml:space="preserve"
            >
              <g>
                <polygon
                  xmlns="http://www.w3.org/2000/svg"
                  points="112.814,0 91.566,21.178 273.512,203.718 91.566,386.258 112.814,407.436 315.869,203.718 "
                  fill="#ffffff"
                  data-original="#000000"
                  style=""
                />
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
                <g xmlns="http://www.w3.org/2000/svg"></g>
              </g>
            </svg>
          </f7-button>
        </div>
      </div>
    </section>
  </f7-page>
</template>

<script>
export default {
  components: {},
};
</script>

<style lang="scss">
.welcome-container {
  padding: 1rem;
  .welcome {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .cart {
      width: 14rem;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .btn-next {
    background-color: #fe724c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    border-radius: 50%;
    height: 4rem;
    margin-top: 2rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    .icon-next {
      width: 2rem;
    }
  }
}
</style>