components/onboarding2.vue

onboarding2.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 512"
            style="enable-background: new 0 0 512 512"
            xml:space="preserve"
            class="cart"
          >
            <g>
              <g xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m248.5 2.01-208.714 120.5c-4.641 2.679-7.5 7.631-7.5 12.99v241c0 5.359 2.859 10.311 7.5 12.99l208.714 120.5c4.641 2.679 10.359 2.679 15 0l208.714-120.5c4.641-2.68 7.5-7.631 7.5-12.99v-241c0-5.359-2.859-10.311-7.5-12.99l-208.714-120.5c-4.641-2.68-10.359-2.68-15 0z"
                  fill="#ffb454"
                  data-original="#ffb454"
                  style=""
                  class=""
                />
                <path
                  d="m256 256 221.705-128c-1.295-2.243-3.17-4.151-5.49-5.49l-208.715-120.5c-4.641-2.679-10.359-2.679-15 0l-208.714 120.5c-2.321 1.34-4.196 3.248-5.49 5.49z"
                  fill="#ffd321"
                  data-original="#ffd321"
                  style=""
                />
                <path
                  d="m477.705 128c-1.295-2.243-3.17-4.151-5.49-5.49l-208.715-120.5c-2.321-1.34-4.91-2.01-7.5-2.01v256z"
                  fill="#ffb454"
                  data-original="#ffb454"
                  style=""
                  class=""
                />
                <path
                  d="m256 512c2.59 0 5.179-.67 7.5-2.01l208.714-120.5c4.641-2.68 7.5-7.631 7.5-12.99v-241c0-2.679-.715-5.257-2.01-7.5l-221.704 128z"
                  fill="#fe724c"
                  data-original="#ff936b"
                  style=""
                  class=""
                />
                <path
                  d="m332.385 315.324 86.106-49.709c7.174-4.142 9.633-13.315 5.491-20.489s-13.315-9.636-20.49-5.491l-86.106 49.709c-7.174 4.142-9.633 13.315-5.491 20.489 3.72 6.443 12.651 10.018 20.49 5.491z"
                  fill="#1e354b"
                  data-original="#1e354b"
                  style=""
                  class=""
                />
                <path
                  d="m423.983 331.231c-4.142-7.175-13.316-9.635-20.49-5.49l-86.106 49.71c-7.175 4.142-9.633 13.315-5.491 20.49 3.689 6.391 12.589 10.054 20.49 5.49l86.106-49.71c7.174-4.141 9.632-13.315 5.491-20.49z"
                  fill="#1e354b"
                  data-original="#1e354b"
                  style=""
                  class=""
                />
                <path
                  d="m330.654 40.776-223.714 129.16-.062 77.258c-.004 5.363 2.855 10.32 7.5 13.002l44.63 25.77c10 5.774 22.5-1.443 22.5-12.99v-59.986l223.714-129.16z"
                  fill="#fff7f4"
                  data-original="#fff7f4"
                  style=""
                />
                <g fill="#f0e6e6">
                  <path
                    d="m256 83.878v86.105l149.22-86.152-74.57-43.053z"
                    fill="#f0e6e6"
                    data-original="#f0e6e6"
                    style=""
                    class=""
                  />
                  <path
                    d="m181.509 272.976v-59.986l-74.568-43.053-.062 77.258c-.004 5.363 2.855 10.32 7.499 13.002l44.63 25.77c10 5.774 22.501-1.443 22.501-12.991z"
                    fill="#f0e6e6"
                    data-original="#f0e6e6"
                    style=""
                    class=""
                  />
                </g>
              </g>
            </g>
          </svg>
        </div>
        <div class="info welcome-info text-align-center">
          <h1 class="heading-2">
            Your cart is empty. <br />Please add a few items.
          </h1>
          <p class="p-1">
            We use modern shopping <br />
            system
          </p>
          <f7-button class="btn-next" href="/onboarding3/"
            ><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>