initial commit

.gitignore

@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# mac
+*.DS_Store

README.md

@@ -0,0 +1,69 @@
+# QuizNU
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+
+## Special Directories
+
+You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+
+### `assets`
+
+The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+
+### `components`
+
+The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+
+### `layouts`
+
+Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+
+
+### `pages`
+
+This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+
+### `plugins`
+
+The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+
+### `static`
+
+This directory contains your static files. Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### `store`
+
+This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

assets/scss/main.scss

@@ -0,0 +1,72 @@
+@import "normalize.css";
+
+html {
+  background: #FFF9EF;
+}
+
+.custom-checkbox {
+  accent-color: #CE8C74;
+  border-radius: 8px;
+
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+
+  transition: 0.2s checked;
+
+  &+label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    gap: 12px;
+  }
+
+  &+label::before {
+    content: '';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border: 1.4px solid #E3D5CA;
+    border-radius: 8px;
+    background-color: #FFF9EF;
+  }
+
+  &:checked+label::before {
+    content: "";
+    font-size: 16px;
+    color: #fff;
+    background-image: url("/icons/check.svg");
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  &:checked+label::before {
+    background-color: #CE8C74;
+    border-color: #CE8C74;
+  }
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+@font-face {
+  font-family: "Effra";
+  src: url("~assets/fonts/Effra-Light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Geometria";
+  src: url("~assets/fonts/geometria_bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Geometria";
+  src: url("~assets/fonts/geometria_medium.otf") format("opentype");
+}

components/Index/IndexLoader.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="loader">
+    <div class="loader__circle">
+      <div class="loader__circle-image">
+        <div class="loader__circle-image__percent">{{ value }}%</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IndexLoader",
+
+  data() {
+    return {
+      value: 0,
+      timer: null,
+    };
+  },
+
+  mounted() {
+    this.timer = setInterval(() => {
+      this.value += 1;
+    }, 20);
+  },
+
+  watch: {
+    value() {
+      if (this.value === 100) {
+        clearInterval(this.timer);
+
+        this.$router.push("/questions");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.loader {
+  --offset: 10px;
+  width: 245px;
+  height: 413px;
+  position: relative;
+  border-radius: 300px;
+  align-self: center;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    background: conic-gradient(#f5eade, #ce8c74);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    aspect-ratio: 1;
+    width: 400px;
+    animation: rotate 2s linear infinite;
+  }
+
+  &__circle {
+    position: absolute;
+    background-color: #FFF9EF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    inset: 0;
+    z-index: 10;
+    border-radius: 300px;
+    margin: 2px;
+
+    &-image {
+      position: absolute;
+      background-image: url(/images/index/loader.png);
+      background-repeat: no-repeat;
+      background-position: center center;
+
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+
+      width: 232px;
+      height: 400px;
+
+      &__percent {
+        position: absolute;
+
+        color: #ce8c74;
+
+        font-weight: 500;
+        font-family: "Noto Serif HK";
+        font-size: 32px;
+
+        text-align: center;
+
+        bottom: 56px;
+      }
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
+  }
+}
+</style>

components/Kit/KitButton.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="button" :class="getContainerClasses">
+    <button @click="clickEvent" :class="getButtonClasses">
+      <slot />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KitButton",
+  props: {
+    block: {
+      type: Boolean,
+      default: false,
+    },
+
+    mediumFont: {
+      type: Boolean,
+      default: false,
+    },
+
+    defaultButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    bigButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    notCenter: {
+      type: Boolean,
+      default: false,
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
+    padding: {
+      type: Boolean,
+      default: false,
+    },
+
+    background: {
+      type: Boolean,
+      default: false,
+    },
+
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+
+    flex: {
+      type: Boolean,
+      default: false,
+    },
+
+    padding16: {
+      type: Boolean,
+      default: false,
+    },
+    
+    padding24: {
+      type: Boolean,
+      default: false,
+    },
+
+    font32: {
+      type: Boolean,
+      default: false,
+    },
+
+    spaceFlex: {
+      type: Boolean,
+      default: false,
+    },
+
+    green: {
+      type: Boolean,
+      default: false,
+    },
+
+    gap12: {
+      type: Boolean,
+      default: false,
+    },
+
+    notActive: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
+  methods: {
+    clickEvent() {
+      this.$emit("click");
+    },
+  },
+
+  computed: {
+    getContainerClasses() {
+      let classes = [];
+
+      if (this.padding) {
+        classes.push("button--padding");
+      }
+
+      if (this.block) {
+        classes.push("button--block");
+      }
+
+      if (this.background) {
+        classes.push("button--background");
+      }
+
+      if (this.fixed) {
+        classes.push("button--fixed");
+      }
+
+      return classes;
+    },
+
+    getButtonClasses() {
+      let classes = [];
+
+      if (this.block) {
+        classes.push("button--block");
+      }
+
+      if (this.mediumFont) {
+        classes.push("button--medium");
+      }
+
+      if (this.defaultButton) {
+        classes.push("button--default");
+      }
+
+      if (this.bigButton) {
+        classes.push("button--big");
+      }
+
+      if (this.notCenter) {
+        classes.push("button--notcenter");
+      }
+
+      if (this.selected) {
+        classes.push("button--selected");
+      }
+
+      if (this.flex) {
+        classes.push("button--flex");
+      }
+
+      if (this.padding16) {
+        classes.push("button--padding16")
+      }
+
+      if (this.padding24) {
+        classes.push("button--padding24");
+      }
+
+      if (this.font32) {
+        classes.push("button--font32");
+      }
+
+      if (this.spaceFlex) {
+        classes.push("button--spaceFlex");
+      }
+
+      if (this.green) {
+        classes.push("button--green");
+      }
+
+      if (this.gap12) {
+        classes.push("button--gap12");
+      }
+
+      if (this.notActive) {
+        classes.push("button--notactive")
+      }
+
+      return classes;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.button {
+  margin: 0;
+  font-family: "Poppins";
+  font-weight: 400;
+
+  button {
+    cursor: pointer;
+    outline: none;
+  }
+
+  &--padding {
+    padding: 20px;
+
+    button {
+      width: 100%;
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    bottom: 0px;
+    right: 0;
+    left: 0;
+  }
+
+  &--background {
+    background-color: #CE8C744D;
+    border-radius: 30px 30px 0 0;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--medium {
+    font-weight: 500;
+  }
+
+  &--default {
+    background-color: #ce8c74;
+    padding: 16px;
+    border-radius: 16px;
+    border: none;
+    color: #fff9ef;
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  &--big {
+    padding: 24px;
+    border: 1.4px solid #f5eade;
+    background-color: #f5eade;
+    font-size: 16px;
+    border-radius: 16px;
+
+    transition: 0.2s background-color, 0.2s border-color;
+    color: #302823;
+  }
+
+  &--notcenter {
+    text-align: left;
+  }
+
+  &--selected {
+    border: 1.4px solid #d29881;
+    background-color: #edd6cd;
+  }
+
+  &--flex {
+    display: flex;
+    align-items: center;
+  }
+
+  &--padding16 {
+    padding: 16px;
+  }
+
+  &--padding24 {
+    padding: 24px;
+  }
+
+  &--font32 {
+    font-size: 32px;
+  }
+
+  &--spaceFlex {
+    justify-content: space-between;
+  }
+
+  &--green {
+    background-color: #14AF68;
+  }
+
+  &--gap12 {
+    gap: 12px;
+  }
+
+  &--notactive {
+    border: 1px solid #EDD6CD;
+    background-color: #F5EADE;
+
+    color: #CEC1B8;
+  }
+}
+</style>

components/Kit/KitRadio.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="debt-amount-slider"
+    :class="{ 'debt-amount-slider--active': isSliderActive }"
+  >
+    <input type="radio" name="debt-amount" id="1" value="1" required />
+    <label for="1" data-debt-amount="😩"></label>
+    <input type="radio" name="debt-amount" id="2" value="2" required />
+    <label for="2" data-debt-amount="🙁"></label>
+    <input type="radio" name="debt-amount" id="3" value="3" required />
+    <label for="3" data-debt-amount="😐"></label>
+    <input type="radio" name="debt-amount" id="4" value="4" required />
+    <label for="4" data-debt-amount="🙂"></label>
+
+    <input type="radio" name="debt-amount" id="5" value="5" required />
+    <label for="5" data-debt-amount="😀"></label>
+    <div id="debt-amount-pos">
+      <div class="line" />
+      <div class="line" />
+      <div class="line" />
+      <div class="line" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KitRadio",
+  data() {
+    return {
+      items: Array(5).fill(null),
+      selectedIndex: 4,
+      selectedContent: "Содержимое для первого круга",
+    };
+  },
+  methods: {
+    selectItem(index) {
+      this.selectedIndex = index;
+      this.selectedContent = `Содержимое для круга ${index + 1}`;
+    },
+  },
+  computed: {
+    isSliderActive() {
+      return this.selectedIndex <= 3; // замените someValue на актуальное значение
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.debt-amount-slider {
+  $number-of-options: 5;
+  display: flex;
+  flex-direction: row;
+  align-content: stretch;
+  position: relative;
+  width: 100%;
+  height: 50px;
+
+  input,
+  label {
+    box-sizing: border-box;
+    flex: 1;
+    cursor: pointer;
+    position: relative;
+  }
+  label {
+    position: relative;
+    width: 20%;
+    height: 100%;
+    &::before {
+      content: attr(data-debt-amount);
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -45px);
+      font-size: 32px;
+      font-weight: 600;
+      opacity: 0.4;
+    }
+    &::after {
+      content: " ";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 14px;
+      height: 14px;
+      background: #ecdfd4;
+      border-radius: 50%;
+      z-index: 1;
+      cursor: pointer;
+      transition: all 0.15s ease-in-out;
+    }
+  }
+  input {
+    display: none;
+    &:checked {
+      + label::before {
+        font-weight: 600;
+        opacity: 1;
+      }
+      + label::after {
+        transform: translate(-50%, -50%) scale(2);
+      }
+      ~ #debt-amount-pos {
+        opacity: 1;
+      }
+      @for $i from 1 through $number-of-options {
+        &:nth-child(#{$i * 2 - 1}) ~ #debt-amount-pos {
+          left: #{($i * 20%) - 10%};
+        }
+      }
+    }
+  }
+}
+
+#debt-amount-pos {
+  display: flex;
+  position: absolute;
+  
+  width: calc(100% * 4/5);;
+  height: 20px;
+  left: 15%;
+  top: 25px;
+  
+}
+
+.line {
+  width: 25%;
+  height: 2px;
+  background-color: #000;
+
+  &--active {
+    background-color: #ce8c74;
+    height: 2px;
+  }
+}
+
+</style>

components/Kit/KitSelector.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="selector">
+    <div class="selector__header">
+      <span class="selector__header-title">
+        {{ title }}
+      </span>
+
+      <div class="selector__header-text" v-if="text">
+        {{ text }}
+      </div>
+    </div>
+
+    <div class="selector__wrapper">
+      <div class="selector__wrapper-line">
+        <div class="selector__wrapper-line__progress" :style="{ width: progress + 'px' }"></div>
+      </div>
+
+      <div class="selector__wrapper-block" v-for="item, index in items" :key="index">
+        <input type="radio" :id="index" v-model="checked" :value="index"
+          @change="selectItem(index, item.title, item.text)" />
+        <label :for="index" :class="{ 'painted': index == paintedList[index] }">{{ item.emoji }}</label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KitSelector",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    }
+  },
+
+  data() {
+    return {
+      title: "",
+      text: null,
+
+      checked: 0,
+      progress: 0,
+
+      paintedList: [],
+    };
+  },
+
+  methods: {
+    selectItem(index, title, text) {
+      this.title = title;
+      this.text = text;
+      this.paintedList = [];
+
+      if (!this.paintedList.includes(index)) {
+        for (let i = 0; i <= index; i++) {
+          this.paintedList.push(i);
+        }
+      } else {
+        this.paintedList = this.paintedList.filter((number) => index !== number);
+      }
+    },
+  },
+
+  mounted() {
+    this.title = this.items[this.checked].title;
+    this.text = this.items[this.checked].text;
+  },
+
+  watch: {
+    checked() {
+      this.progress = this.checked * 70;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  &__header {
+    text-align: center;
+    font-family: "Poppins";
+
+    padding: 12px 16px;
+
+    border: 1.4px solid #ECDFD4;
+    background-color: #F5EADE;
+    border-radius: 12px;
+
+    &-title {
+      font-weight: 600;
+      font-size: 16px;
+      color: #534E4A;
+    }
+
+    &-text {
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 22px;
+      color: #7E7772;
+
+      margin-top: 4px;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+
+    position: relative;
+
+    &-line {
+      position: absolute;
+      height: 4px;
+      background-color: #ECDFD4;
+      width: 95%;
+      bottom: 12px;
+      z-index: -2;
+
+      &__progress {
+        height: 4px;
+        background-color: #CE8C74;
+      }
+    }
+
+    &-block {
+      input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+      }
+
+      label {
+        font-size: 20px;
+      }
+
+      input+label {
+        display: flex;
+        flex-direction: column-reverse;
+        flex-shrink: 0;
+        gap: 20px;
+        align-items: center;
+        user-select: none;
+
+        &.painted::before {
+          background-color: #CE8C74;
+        }
+      }
+
+      input+label::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        border: none;
+        border-radius: 50%;
+        background-color: #ECDFD4;
+      }
+
+      input:checked+label::before {
+        background-color: #CE8C74;
+        box-shadow: 0px 6px 13px 0px #0000001F;
+
+        width: 28px;
+        height: 28px;
+      }
+    }
+  }
+}
+</style>

components/Kit/KitSheet.vue

@@ -0,0 +1,255 @@
+<template>
+  <vue-bottom-sheet-vue2 class="sheet" ref="myBottomSheet" style="width: 100%;">
+    <div class="dataOne" v-if="dataOne">
+      <div class="dataOne__title">
+        Enter your email to get your
+        <div>Personalized EFT-Tapping <br>Plan</div>
+      </div>
+
+      <div class="dataOne__input">
+        <input type="text" placeholder="Your email" @input="inputChange" v-model="input">
+      </div>
+
+      <div class="dataOne__button">
+        <KitButton green defaultButton block @click="stepTwo" :notActive="!isActive" :disabled="!isActive">
+          Continue
+        </KitButton>
+      </div>
+
+      <div class="dataOne__text">
+        We respect your privacy and are committed to <br>
+        protecting your personal dataOne. We’ll email you a copy <br>
+        of your results for convenient access.
+      </div>
+    </div>
+    <!-- Data two -->
+    <div class="dataTwo" v-if="dataTwo">
+      <div class="dataTwo__title">
+        Do you want to receive email <br>
+        with special offers, EFT <br>
+        recommendation, <br>
+        meditation plan and <span>free <br>gifts</span>?
+      </div>
+
+      <div class="dataTwo__button">
+        <KitButton green defaultButton block @click="stepThree('yes')">Ok, got it</KitButton>
+      </div>
+
+      <div class="dataTwo__text">
+        <button @click="stepThree('no')">i know everything about EFT</button>
+      </div>
+    </div>
+
+    <!-- Data three -->
+    <div class="dataOne" v-if="dataThree">
+      <div class="dataOne__title">
+        What's your name?
+      </div>
+
+      <div class="dataOne__input">
+        <input type="text" placeholder="Your name" @input="inputChange" v-model="inputName">
+      </div>
+
+      <div class="dataOne__button">
+        <KitButton green defaultButton block @click="close" :notActive="!isActiveName" :disabled="!isActiveName">
+          Next step
+        </KitButton>
+      </div>
+
+      <div class="dataOne__text">
+        Why do we ask your name? Because we want to be
+        <br>your trusted companion and stay with you for every
+        <br> step of your journey
+      </div>
+    </div>
+  </vue-bottom-sheet-vue2>
+</template>
+
+<script>
+export default {
+  name: "KitSheet",
+
+  data() {
+    return {
+      isActive: false,
+      isActiveName: false,
+      input: "",
+      inputName: "",
+      dataOne: true,
+      dataTwo: false,
+      dataThree: false,
+    }
+  },
+
+  mounted() {
+    this.openModal();
+  },
+
+  methods: {
+    openModal() {
+      this.$refs.myBottomSheet.open();
+    },
+
+    close() {
+      this.$refs.myBottomSheet.close();
+    },
+
+    stepTwo() {
+      if (!this.isActive) {
+        return;
+      } else {
+        this.dataOne = false;
+        this.dataTwo = true;
+      }
+    },
+
+    stepThree(type) {
+      this.dataTwo = false;
+      this.dataThree = true;
+    },
+
+    inputChange() {
+      if (this.input.length > 0) {
+        this.isActive = true;
+      } else this.isActive = false;
+
+      if (this.inputName.length > 0) {
+        this.isActiveName = true;
+      } else this.isActiveName = false;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sheet {
+  // &.bottom-sheet {
+
+  //   .bottom-sheet__content {
+  //     border-radius: 28px 28px 0 0 !important;
+  //   }
+  // }
+
+  // .bottom-sheet__draggable-thumb {
+  //   width: 36px !important;
+  //   height: 4px !important;
+  //   background: #E3D5CA !important;
+  // }
+
+  .dataOne {
+    padding: 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__title {
+      text-align: center;
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      color: #302823;
+
+      text-align: 28px;
+
+      font-size: 24px;
+
+      div {
+        color: #14AF68;
+      }
+    }
+
+    &__input {
+      margin-top: 28px;
+
+      width: 100%;
+
+      input {
+        border: 1px solid #E3D5CA;
+        text-align: center;
+
+        background-color: #F5EADE;
+
+        font-family: "Poppins";
+        font-weight: 500;
+        font-size: 16px;
+
+        color: #B2A59D;
+        border-radius: 16px;
+        padding: 16px;
+
+        display: block;
+        width: 100%;
+        outline: none;
+
+        &::-webkit-input-placeholder {
+          color: #B2A59D;
+        }
+      }
+    }
+
+    &__button {
+      margin-top: 40px;
+      width: 100%;
+    }
+
+    &__text {
+      margin-top: 12px;
+
+      color: #988D85;
+      text-align: center;
+
+      font-family: "Poppins";
+      font-weight: 400;
+      font-size: 12px;
+    }
+  }
+
+  .dataTwo {
+    padding: 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__title {
+      text-align: center;
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      color: #302823;
+
+      text-align: 28px;
+
+      font-size: 24px;
+
+      span {
+        color: #14AF68;
+      }
+    }
+
+    &__button {
+      margin-top: 24px;
+      width: 100%;
+    }
+
+    &__text {
+      margin-top: 16px;
+
+      button {
+        padding: 0;
+        margin: 0;
+
+        background: none;
+        border: none;
+        outline: none;
+
+        color: #534E4A;
+
+        font-family: "Poppins";
+        font-weight: 500;
+        font-size: 16px;
+
+      }
+    }
+  }
+}
+</style>

components/Kit/LoadingBlock.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="loading-block">
+    <div class="loading-block__block">
+      <div class="loading-block__block-left">
+        <div class="loading-block__block-left__icon">
+          <img src="/icons/stress_icon.png">
+        </div>
+
+        <div class="loading-block__block-left__text">
+          <div class="loading-block__block-left__text--title">Level of</div>
+          <div class="loading-block__block-left__text--subtitle">Stress</div>
+        </div>
+      </div>
+
+      <div class="loading-block__block-loader">
+        <div class="loader__loading" v-if="loadingFirst">
+          <div class="loader__loading-percents">{{ percentsFirst }}%</div>
+          <div class="loader__loading-circle"></div>
+        </div>
+
+        <div class="loader__loaded" v-if="loadedFirst"></div>
+      </div>
+    </div>
+
+    <div class="loading-block__line"></div>
+
+    <div class="loading-block__block" :class="{ 'not-active': percentsSecond < 1 }">
+      <div class="loading-block__block-left">
+        <div class="loading-block__block-left__icon">
+          <img src="/icons/frustration_icon.png">
+        </div>
+
+        <div class="loading-block__block-left__text">
+          <div class="loading-block__block-left__text--title">Level of</div>
+          <div class="loading-block__block-left__text--subtitle">Frustration</div>
+        </div>
+      </div>
+
+      <div class="loading-block__block-loader">
+        <div class="loader__loading" v-if="loadingSecond">
+          <div class="loader__loading-percents">{{ percentsSecond }}%</div>
+          <div class="loader__loading-circle"></div>
+        </div>
+
+        <div class="loader__loaded" v-if="loadedSecond"></div>
+      </div>
+    </div>
+
+    <div class="loading-block__line"></div>
+
+    <div class="loading-block__block" :class="{ 'not-active': percentsThird < 1 }">
+      <div class="loading-block__block-left">
+        <div class="loading-block__block-left__icon">
+          <img src="/icons/anxiety_icon.png">
+        </div>
+
+        <div class="loading-block__block-left__text">
+          <div class="loading-block__block-left__text--title">Level of</div>
+          <div class="loading-block__block-left__text--subtitle">Anxiety</div>
+        </div>
+      </div>
+
+      <div class="loading-block__block-loader">
+        <div class="loader__loading" v-if="loadingThird">
+          <div class="loader__loading-percents">{{ percentsThird }}%</div>
+          <div class="loader__loading-circle"></div>
+        </div>
+
+        <div class="loader__loaded" v-if="loadedThird"></div>
+      </div>
+    </div>
+
+    <div class="loading-block__line"></div>
+
+    <div class="loading-block__block" :class="{ 'not-active': percentsFourth < 1 }">
+      <div class="loading-block__block-left">
+        <div class="loading-block__block-left__icon">
+          <img src="/icons/lack_icon.png">
+        </div>
+
+        <div class="loading-block__block-left__text">
+          <div class="loading-block__block-left__text--title">Level of</div>
+          <div class="loading-block__block-left__text--subtitle">Lack of focus</div>
+        </div>
+      </div>
+
+      <div class="loading-block__block-loader">
+        <div class="loader__loading" v-if="loadingFourth">
+          <div class="loader__loading-percents">{{ percentsFourth }}%</div>
+          <div class="loader__loading-circle"></div>
+        </div>
+
+        <div class="loader__loaded" v-if="loadedFourth"></div>
+      </div>
+    </div>
+
+    <ResultModal v-if="resultModal" @closeModal="contTimer" />
+  </div>
+</template>
+
+<script>
+import ResultModal from './ResultModal.vue';
+
+export default {
+  name: "LoadingBlock",
+
+  components: { ResultModal },
+
+  data() {
+    return {
+      percentsFirst: 0,
+      percentsSecond: 0,
+      percentsThird: 0,
+      percentsFourth: 0,
+
+      loadingFirst: true,
+      loadedFirst: false,
+
+      loadingSecond: false,
+      loadedSecond: false,
+
+      loadingThird: false,
+      loadedThird: false,
+
+      loadingFourth: false,
+      loadedFourth: false,
+
+      firstTimer: null,
+      secondTimer: null,
+      thirdTimer: null,
+      fourthTimer: null,
+
+      miliseconds: 15,
+
+      resultModal: false,
+    }
+  },
+
+  mounted() {
+    this.firstTimer = setInterval(() => {
+      this.percentsFirst += 1;
+    }, this.miliseconds)
+  },
+
+  methods: {
+    contTimer() {
+      this.resultModal = false;
+      this.loadingThird = true;
+
+      this.thirdTimer = setInterval(() => {
+        this.percentsThird += 1;
+      }, this.miliseconds)
+    }
+  },
+
+  watch: {
+    percentsFirst() {
+      if (this.percentsFirst === 100) {
+        clearInterval(this.firstTimer);
+
+        this.loadingFirst = false;
+        this.loadedFirst = true;
+
+        this.loadingSecond = true;
+
+        this.secondTimer = setInterval(() => {
+          this.percentsSecond += 1;
+        }, this.miliseconds)
+      }
+    },
+
+    percentsSecond() {
+      if (this.percentsSecond === 100) {
+        clearInterval(this.secondTimer);
+
+        this.loadingSecond = false;
+        this.loadedSecond = true;
+        this.resultModal = true;
+      }
+    },
+
+    percentsThird() {
+      if (this.percentsThird === 100) {
+        clearInterval(this.thirdTimer);
+
+        this.loadingThird = false;
+        this.loadedThird = true;
+
+        this.loadingFourth = true;
+
+        this.fourthTimer = setInterval(() => {
+          this.percentsFourth += 1;
+        }, this.miliseconds)
+      }
+    },
+
+    percentsFourth() {
+      if (this.percentsFourth === 100) {
+        clearInterval(this.fourthTimer);
+
+        this.loadingFourth = false;
+        this.loadedFourth = true;
+
+        this.$store.commit("nextPage")
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@property --progress-value {
+  syntax: "<integer>";
+  initial-value: 0;
+  inherits: false;
+}
+
+@keyframes progress {
+  to {
+    --progress-value: 100;
+  }
+}
+.loading-block {
+  padding: 16px;
+  border: 1px solid #E3D5CA;
+  border-radius: 24px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 12.5px;
+
+  $self: &;
+
+  .not-active {
+    #{$self}__block {
+      &-left {
+        &__icon {
+          opacity: 0.5;
+        }
+
+        &__text {
+
+          &--title,
+          &--subtitle {
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+  }
+
+  &__block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      &__icon {
+        width: 48px;
+        height: 48px;
+      }
+
+      &__text {
+        font-family: "Poppins";
+
+        &--title {
+          font-weight: 400;
+          color: #988D85;
+          font-size: 15px;
+        }
+
+        &--subtitle {
+          font-weight: 500;
+          color: #302823;
+          font-size: 16px;
+          margin-top: 4px;
+        }
+      }
+    }
+
+    &-loader {
+      .loader__loading {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        &-percents {
+          color: #B87057;
+          font-family: "Poppins";
+          font-weight: 500;
+          font-size: 16px;
+        }
+
+        &-circle {
+          width: 31px;
+          height: 31px;
+
+          border-radius: 50%;
+
+          // border: 3px solid #EDD6CD;
+
+          background:
+              radial-gradient(closest-side, #FFF9EF 79%, transparent 80% 100%),
+              conic-gradient(#CE8C74 calc(var(--progress-value) * 1%), #EDD6CD 0);
+
+          animation: progress 2s 1 forwards;
+        }
+      }
+
+      .loader__loaded {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background-color: #CE8C74;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::after {
+          content: "";
+          display: block;
+          background-image: url("/icons/check.svg");
+          background-repeat: no-repeat;
+          background-position: center center;
+
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+  }
+
+  &__line {
+    width: 100%;
+    height: 1px;
+    background-color: #F1E5DA;
+  }
+}
+</style>

components/Kit/NoteBlock.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="note-block">
+    <div class="note-block__icon" :class="getIconClasses"></div>
+    <div class="note-block__text" v-if="text">{{ text }}</div>
+
+    <div class="note-block__wrapper" v-if="title || note">
+      <div class="note-block__wrapper-title">{{ title }}</div>
+      <div class="note-block__wrapper-note">{{ note }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NoteBlock",
+  props: {
+    text: {
+      type: String,
+      required: false,
+    },
+
+    title: {
+      type: String,
+      required: false,
+    },
+
+    note: {
+      type: String,
+      required: false,
+    },
+
+    green: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
+  computed: {
+    getIconClasses() {
+      let classes = [];
+
+      if (this.title) {
+        classes.push("icon--title");
+      }
+
+      if (this.green) {
+        classes.push("icon--green");
+      }
+
+      return classes;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.note-block {
+  padding: 16px 20px;
+  border: 2px solid #EFDED5;
+  border-radius: 16px;
+  box-shadow: 0px 6px 13px 0px #3C180014;
+  display: flex;
+  gap: 12px;
+
+  &__icon {
+    mask: url("/icons/info.svg");
+    mask-repeat: no-repeat;
+    width: 20px;
+    height: 20px;
+
+    background-color: #F8B432;
+
+    &.icon--title {
+      background-color: #CE8C74;
+    }
+
+    &.icon--green {
+      background-color: #14AF68;
+    }
+  }
+
+  &__text {
+    font-weight: 700;
+    color: #534E4A;
+    font-family: "Poppins";
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 277px;
+  }
+
+  &__wrapper {
+    font-family: "Poppins";
+
+    &-title {
+      color: #302823;
+      font-weight: 500;
+    }
+
+    &-note {
+      color: #534E4A;
+      font-size: 15px;
+      line-height: 24px;
+      max-width: 277px;
+      font-weight: 400;
+      margin-top: 4px;
+    }
+  }
+}
+</style>

components/Kit/ReasonBlock.vue

@@ -0,0 +1,82 @@
+<template>
+  <button class="reason-block" @click="selectedReason">
+    <div class="reason-block__image"><img :src="image" /></div>
+    <div class="reason-block__title">{{ title }}</div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "ReasonBlock",
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+
+    title: {
+      type: String,
+      required: true,
+    }
+  },
+
+  methods: {
+    selectedReason() {
+      this.$emit("reason", this.title);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.reason-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+
+  border: none;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+
+  $self: &;
+
+  &__image {
+    img {
+      overflow: auto;
+      border-radius: 20px;
+      transition: 0.3s border;
+      border: 2px solid #FFF9EF;
+
+      transition: 0.3s opacity, 0.3s border-color;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    font-family: "Poppins";
+    font-weight: 400;
+
+    transition: color 0.3s;
+    color: #302823;
+
+    max-width: 150px;
+  }
+
+  &:hover {
+    #{$self}__image {
+      img {
+        border: 2px solid #D29881;
+        opacity: 0.9;
+      }
+    }
+
+    #{$self}__title {
+      color: #B87057;
+    }
+  }
+}
+</style>

components/Kit/ResultModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="modal">
+    <div class="modal__wrapper">
+      <div class="modal__wrapper-title">Are you ready to make <br>additional commitments?</div>
+
+      <div class="modal__wrapper-buttons">
+        <KitButton block flex notCenter bigButton gap12 @click="closeModal">
+          <div>💤</div>Yes, to better sleep in 30 days!
+        </KitButton>
+
+        <KitButton block flex notCenter bigButton gap12 @click="closeModal">
+          <div>🧘</div>Yes, I'll meditate each morning!!
+        </KitButton>
+
+        <KitButton block flex notCenter bigButton gap12 @click="closeModal">
+          <div>🙌</div>Yes, I'm up for the stress-free challenge!!
+        </KitButton>
+
+        <KitButton block flex notCenter bigButton gap12 @click="closeModal">
+          <div>🕒</div>Not now, but open to future.!
+        </KitButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from './KitButton.vue';
+
+export default {
+  name: "ResultModal",
+
+  components: { KitButton },
+
+  methods: {
+    closeModal() {
+      this.$emit("closeModal")
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 24px;
+
+  backdrop-filter: blur(5px);
+
+  z-index: 11;
+
+  &__wrapper {
+    padding: 24px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 28px;
+
+    background-color: #FFF9EF;
+    border-radius: 28px;
+    box-shadow: 0px 10px 40px 0px #0000001A;
+
+    &-title {
+      text-align: center;
+
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+
+      color: #302823;
+    }
+
+    &-buttons {
+      display: flex;
+      flex-direction: column;
+
+      gap: 12px;
+    }
+  }
+}</style>

components/Kit/ReviewBlock.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="review-block">
+    <div class="review-block__name">{{ name }}</div>
+
+    <div class="review-block__middle">
+      <div class="review-block__middle-score">
+        <div class="review-block__middle-score__star" v-for="star in stars"></div>
+      </div>
+
+      <div class="review-block__middle-nick">{{ nick }}</div>
+    </div>
+
+    <div class="review-block__text">{{ text }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReviewBlock",
+  props: {
+    name: {
+      type: String
+    },
+
+    nick: {
+      type: String,
+    },
+
+    text: {
+      type: String,
+    }
+  },
+
+  data() {
+    return {
+      stars: 5,
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.review-block {
+  padding: 20px;
+  border: 2px solid #ECDFD4;
+  box-shadow: 0px 6px 13px 0px #3C180014;
+  border-radius: 16px;
+
+  &__name {
+    font-family: "Poppins";
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  &__middle {
+    margin-top: 6px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-score {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      &__star {
+        background-image: url("/icons/star_icon.svg");
+        background-repeat: no-repeat;
+
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &-nick {
+      font-family: "Poppins";
+      font-weight: 500;
+      font-size: 15px;
+      color: #CEC1B8;
+    }
+  }
+
+  &__text {
+    margin-top: 8px;
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 24px;
+    color: #988D85;
+  }
+}
+</style>

components/Last/PlanRadio.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="plan-radio" :class="{ 'active': modelValue == value }" @click="clickEvent">
+    <div class="plan-radio__plan">
+      <input type="radio" :id="id" class="plan-radio__plan-radio" :value="value"
+        @change="$emit('change', $event.target.value)" :checked="isChecked">
+      <label :for="id" class="plan-radio__plan-label"></label>
+
+      <div class="plan-radio__plan-top" v-if="top">TOP CHOICE FOR BEGINNERS</div>
+      <div class="plan-radio__plan-recommended" v-if="recommended">Recommended for your profile</div>
+
+      <div class="plan-radio__plan-price">
+        <div class="plan-radio__plan-price__title">{{ title }}</div>
+
+        <div class="plan-radio__plan-price__prices">
+          <del class="plan-radio__plan-price__prices-old">${{ old }}</del>
+          <span class="plan-radio__plan-price__prices-actual">${{ actual }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="plan-radio__day" :class="{ 'active': modelValue == value }">
+      $
+      <div class="plan-radio__day-dollar">{{ dayDollar }}</div>
+      <div class="plan-radio__day-text">
+        <div class="plan-radio__day-text__cents">{{ dayCents }}</div>
+        <div class="plan-radio__day-text__subtitle">per day</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PlanRadio",
+
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+
+  props: {
+    title: {
+      type: String,
+    },
+
+    id: {
+      type: Number,
+    },
+
+    old: {
+      type: String
+    },
+
+    actual: {
+      type: String,
+    },
+
+    dayDollar: {
+      type: String
+    },
+
+    dayCents: {
+      type: String
+    },
+
+    top: {
+      type: Boolean,
+    },
+
+    recommended: {
+      type: Boolean,
+    },
+
+    modelValue: {
+      default: "",
+    },
+
+    value: {
+      type: String,
+    }
+  },
+
+  computed: {
+    isChecked() {
+      return this.modelValue == this.value;
+    }
+  },
+
+  methods: {
+    clickEvent() {
+      this.$emit("change", this.value)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.plan-radio {
+  padding: 16px 11px;
+  border-radius: 16px;
+  background-color: #F5EADE;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  position: relative;
+
+  transition: 0.2s background-color;
+
+  &.active {
+    background-color: #EDD6CD;
+  }
+
+  &__plan {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+
+    &-top {
+      padding: 6.5px;
+      color: #fff;
+      font-family: "Poppins";
+      font-weight: 600;
+      font-size: 11px;
+      text-align: center;
+
+      position: absolute;
+
+      background-color: #3C3028;
+
+      top: -6px;
+      border-radius: 3px;
+    }
+
+    &-recommended {
+      padding: 6.5px;
+      color: #fff;
+      font-family: "Poppins";
+      font-weight: 500;
+      font-size: 10px;
+      text-align: center;
+
+      position: absolute;
+
+      background-color: #14AF68;
+
+      bottom: -6px;
+      border-radius: 3px;
+    }
+
+    &-radio {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+    }
+
+    &-radio+label {
+      display: inline-flex;
+      align-items: center;
+      user-select: none;
+    }
+
+    &-radio+label::before {
+      content: '';
+      display: inline-block;
+      background-color: #fff;
+      width: 22px;
+      height: 22px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      border: 1px solid #E3D5CA;
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+
+    &-radio:focus:not(:checked)+label::before {
+      border-color: #80bdff;
+    }
+
+    &-radio:checked+label::before {
+      border-color: #CE8C74;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CE8D78'/%3e%3c/svg%3e");
+    }
+
+    &-radio:disabled+label::before {
+      background-color: #e9ecef;
+    }
+
+    &-price {
+      &__title {
+        font-family: "Geometria";
+        font-weight: 700;
+        font-size: 20px;
+
+        color: #302823;
+      }
+
+      &__prices {
+        margin-top: 6px;
+
+        font-family: "Geometria";
+        font-weight: 500;
+        font-size: 14px;
+
+        color: #302823;
+
+        del {
+          text-decoration-color: #B7395D;
+        }
+      }
+    }
+  }
+
+  &__day {
+    background-color: #CE8D78;
+    border-radius: 16px;
+    padding: 10px;
+
+    color: #fff;
+
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+
+    font-family: "Geometria";
+    font-weight: 700;
+
+    font-size: 20px;
+
+    opacity: 0.5;
+
+    transition: 0.2s opacity;
+
+    &.active {
+      opacity: 1;
+    }
+
+    width: 112px;
+
+    &-dollar {
+      font-size: 50px;
+      margin-left: 2px;
+    }
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: 4px;
+
+      &__subtitle {
+        font-weight: 500;
+        font-size: 11px;
+      }
+    }
+  }
+}
+</style>

components/Last/StaticFive.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="money-back">
+    <div class="money-back__icon"></div>
+
+    <div class="money-back__title">
+      <div>Money back policy</div>
+
+      We guarantee a 100% refund without<br> specifying a reason.
+    </div>
+
+    <div class="money-back__text">
+      If within 14 days for any reason you don't like <br>
+       the quality of the product, the application,<br>
+        or the tailored program, just contact us and <br>
+        request a refund.
+        <br>
+        <br>
+        Make sure to read our <br>
+        <a href="#">Terms of Service</a> & <a href="#">Privacy Policy</a>.
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.money-back {
+  background-color: #F5EADE;
+
+  margin-top: 26px;
+  box-sizing: border-box;
+
+  padding: 48px 20px;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  border-radius: 32px 32px 0px 0px;
+
+  &__icon {
+    background-image: url("/icons/moneyback.png");
+    background-repeat: no-repeat;
+
+    width: 200px;
+    height: 187px;
+  }
+
+  &__title {
+    margin-top: 24px;
+
+    text-align: center;
+
+    color: #302823;
+    font-family: "Poppins";
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    div {
+      font-family: "Noto Serif HK";
+      color: #B87057;
+      font-weight: 700;
+      font-size: 24px;
+    }
+  }
+
+  &__text {
+    margin-top: 24px;
+    text-align: center;
+
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+
+    color: #534E4A;
+
+    a {
+      color: #B87057;
+      text-decoration: none;
+    }
+  }
+}
+</style>

components/Last/StaticFour.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="plans">
+    <div class="plans__title">
+      Continue your
+      <div>JOURNEY</div>
+    </div>
+
+    <div class="plans__blocks">
+      <PlanRadio
+        v-for="button, index in buttons"
+        :key="button.title"
+        :id="index"
+        :title="button.title" 
+        :old="button.old" 
+        :actual="button.actual" 
+        :dayDollar="button.dollar"
+        :dayCents="button.cents"
+        :top="button.top"
+        :recommended="button.recommended"
+        :value="button.title"
+        v-model="selectedValue"
+      />
+    </div>
+
+    <div class="plans__text">
+      People using plan for 3 months<br> achieve twice as many results as for 1 month
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StaticFour",
+
+  data() {
+    return {
+      selectedValue: "4-WEEK",
+      buttons: [
+        {
+          title: "1-WEEK",
+          old: "14.14",
+          actual: "7.21",
+          dollar: "1",
+          cents: "03",
+        },
+        {
+          title: "4-WEEK",
+          old: "30.99",
+          actual: "15.80",
+          dollar: "0",
+          cents: "56",
+          top: true,
+        },
+        {
+          title: "12-WEEK",
+          old: "53.04",
+          actual: "27.05",
+          dollar: "0",
+          cents: "32" ,
+          recommended: true,
+        }
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.plans {
+  margin-top: 26px;
+
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+
+  &__title {
+    text-align: center;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 28px;
+    color: #302823;
+
+    div {
+      font-family: "Geometria";
+      font-size: 32px;
+      color: #14AF68;
+    }
+  }
+
+  &__blocks {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 13px;
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    margin-top: 35px;
+
+    font-family: "Poppins";
+    font-weight: 500;
+    font-size: 11px;
+    color: #3C3028A6;
+    line-height: 16px;
+
+    &::before {
+      content: "";
+      width: 23px;
+      height: 23px;
+
+      background-image: url("/icons/arrow.png");
+      background-repeat: no-repeat;
+    }
+  }
+
+  &__claim {
+    margin-top: 32px;
+  }
+
+  &__payments {
+    margin-top: 32px;
+
+    background-image: url("/icons/payments.svg");
+    background-repeat: no-repeat;
+
+    width: 100%;
+    height: 100px;
+  }
+}
+</style>

components/Last/StaticOne.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="tapping-plan">
+    <div class="tapping-plan__title">
+      Your personal tapping plan
+      <div>is Ready</div>
+    </div>
+
+    <div class="tapping-plan__info">
+      <div class="tapping-plan__info-block">
+        <div class="tapping-plan__info-block__icon">🎯</div>
+
+        <div class="tapping-plan__info-block__text">
+          <div class="tapping-plan__info-block__text--title">Goal</div>
+          <div class="tapping-plan__info-block__text--subtitle">Stress reduction</div>
+        </div>
+      </div>
+
+      <div class="tapping-plan__info-block">
+        <div class="tapping-plan__info-block__icon">🗓️</div>
+
+        <div class="tapping-plan__info-block__text">
+          <div class="tapping-plan__info-block__text--title">Tapping Frequency</div>
+          <div class="tapping-plan__info-block__text--subtitle">3 times per week</div>
+        </div>
+      </div>
+
+      <div class="tapping-plan__info-blocks">
+        <div class="block">
+          <div class="block__icon">⏱️</div>
+
+          <div class="block__text">
+            <div class="block__text-title">
+              Tapping Time
+            </div>
+
+            <div class="block__text-subtitle">
+              30 min
+            </div>
+          </div>
+        </div>
+
+        <div class="block">
+          <div class="block__icon">😖</div>
+
+          <div class="block__text">
+            <div class="block__text-title">
+              Stress level
+            </div>
+
+            <div class="block__text-subtitle">
+              High
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tapping-plan__text">
+      Goals for the next 3 months also include:<br>
+      ✅ Improve sleep
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tapping-plan {
+  padding: 31px 20px 62px 20px;
+
+  background-color: #F5EADE;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    text-align: center;
+
+    line-height: 28px;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    color: #302823;
+
+    div {
+      color: #B87057;
+    }
+  }
+
+  &__info {
+    margin-top: 17px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &-block {
+      background-color: #FFF9EF;
+      padding: 12px;
+      border: 1.4px solid #ECDFD4;
+      border-radius: 12px;
+
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &__text {
+        font-family: "Poppins";
+
+        &--title {
+          font-size: 13px;
+          font-weight: 500;
+          color: #988D85;
+        }
+
+        &--subtitle {
+          font-family: "Poppins";
+          font-weight: 400;
+          color: #302823;
+          margin-top: 2px;
+
+          font-size: 16px;
+        }
+      }
+    }
+
+    &-blocks {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      gap: 12px;
+
+      .block {
+        background-color: #FFF9EF;
+        padding: 12px;
+        border: 1.4px solid #ECDFD4;
+        border-radius: 12px;
+
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        width: 100%;
+
+        &__text {
+          font-family: "Poppins";
+
+          &-title {
+            font-size: 13px;
+            font-weight: 500;
+            color: #988D85;
+          }
+
+          &-subtitle {
+            font-family: "Poppins";
+            font-weight: 400;
+            color: #302823;
+            margin-top: 2px;
+
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  &__text {
+    margin-top: 17px;
+    padding: 0 13px;
+
+    font-family: "Poppins";
+    font-weight: 400;
+  }
+}
+</style>

components/Last/StaticThree.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="static-three">
+    <div class="static-three__title">
+      <div>3 million users</div>
+      have chosen Slowdive
+    </div>
+
+    <div class="static-three__image"></div>
+
+    <div class="static-three__text">103 people bought a tapping plan in the <b>last hour</b></div>
+
+    <div class="static-three__nicknames">
+      <div class="nickname-block" v-for="block in blocks">
+        <div class="nickname-block__icon"></div>
+        <div class="nickname-block__nick">{{ block }}</div>
+        <div class="nickname-block__text">1 month plan</div>
+      </div>
+    </div>
+
+    <div class="static-three__nicknames two">
+      <div class="nickname-block" v-for="block in blocksTwo">
+        <div class="nickname-block__icon"></div>
+        <div class="nickname-block__nick">{{ block }}</div>
+        <div class="nickname-block__text">1 month plan</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StaticThree",
+
+  data() {
+    return {
+      blocks: [
+        "willie.j...",
+        "dolora m...",
+        "christina mo...",
+      ],
+
+      blocksTwo: [
+        "tanya...",
+        "jessic...",
+        "monica...",
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.static-three {
+  background-color: #F5EADE;
+  padding: 26px 0px 48px 0px;
+
+  width: 100%;
+
+  &__title {
+    text-align: center;
+
+    color: #3C3028;
+    font-family: "Noto Serif HK";
+    font-size: 28px;
+    font-weight: 400;
+
+    div {
+      color: #CE8D78;
+      font-weight: 700;
+    }
+  }
+
+  &__image {
+    margin-top: 13px;
+
+    background-image: url("/images/last/peoples.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    width: 100%;
+    height: 340px;
+  }
+
+  &__text {
+    margin-top: 13px;
+    text-align: center;
+    font-size: 15px;
+    font-family: "Poppins";
+    font-weight: 500;
+    color: #302823;
+  }
+
+  &__nicknames {
+    margin-top: 16px;
+
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    // position: absolute;
+    margin-left: -60px;
+    overflow: hidden;
+
+    &.two {
+      margin-left: -10px
+    }
+
+    .nickname-block {
+      border: 1px solid #E3D5CA;
+      padding: 8px;
+      border-radius: 100px;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 6px;
+
+      background-color: #ECDFD4;
+
+      &__icon {
+        background-image: url("/icons/person.svg");
+        background-repeat: no-repeat;
+        width: 20px;
+        height: 20px;
+      }
+
+      &__nick {
+        font-family: "Poppins";
+        color: #B2A59D;
+        font-size: 15px;
+        font-weight: 400;
+      }
+
+      &__text {
+        font-family: "Poppins";
+        color: #534E4A;
+        font-size: 15px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>

components/Last/StaticTwo.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="static-two">
+    <div class="static-two__title">
+      Nikita, you’ll
+      <div>also get</div>
+    </div>
+
+    <div class="static-two__blocks">
+      <div class="static-two__blocks-block">
+        <div class="static-two__blocks-block__icon">
+          <img src="/images/last/last_image_one.svg">
+        </div>
+
+        <div class="static-two__blocks-block__text">
+          Unlimited access to 1000+ meditations, life coaching, stories, music,
+          & nature sounds
+        </div>
+      </div>
+
+      <div class="static-two__blocks-block reverse">
+        <div class="static-two__blocks-block__icon">
+          <img src="/images/last/last_image_two.svg">
+        </div>
+
+        <div class="static-two__blocks-block__text">
+          Fall asleep, reduce stress and anxiety and find peace effortlessly whenever you need
+        </div>
+      </div>
+
+      <div class="static-two__blocks-block">
+        <div class="static-two__blocks-block__icon">
+          <img src="/images/last/last_image_three.svg">
+        </div>
+
+        <div class="static-two__blocks-block__text">
+          Exclusive content from top mindfulness experts, psychologists, and therapists
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.static-two {
+  padding: 26px 20px;
+
+  &__title {
+    text-align: center;
+
+    font-family: "Geometria";
+    color: #534E4A;
+
+    font-size: 28px;
+    font-weight: 700;
+
+    div {
+      font-weight: 500;
+      color: #B87057;
+      font-size: 32px;
+    }
+  }
+
+  &__blocks {
+    margin-top: 32px;
+
+    &-block {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+
+      &.reverse {
+        flex-direction: row-reverse;
+      }
+
+      &__text {
+        color: #302823;
+        font-family: "Poppins";
+        font-weight: 400;
+        line-height: 24px;
+      }
+    }
+  }
+}
+</style>

components/Questions/Emotional.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="emotional">
+    <ReasonBlock 
+      v-for="block in blocks" 
+      :key="block.title" 
+      :title="block.title" 
+      :image="block.image"
+      @reason="reason"
+    />
+  </div>
+</template>
+
+<script>
+import ReasonBlock from "../Kit/ReasonBlock.vue";
+
+export default {
+  name: "Emotional",
+  components: {
+    ReasonBlock,
+  },
+
+  data() {
+    return {
+      blocks: [
+        {
+          title: "Stress reduction",
+          image: "/images/reasons/stress.png"
+        },
+        {
+          title: "Anxiety management",
+          image: "/images/reasons/anxiety.png",
+        },
+        {
+          title: "Postpartum Discomforts",
+          image: "/images/reasons/postpartum.png"
+        },
+        {
+          title: "Emotional release",
+          image: "/images/reasons/emotional.png",
+        },
+        {
+          title: "Headache",
+          image: "/images/reasons/headache.png",
+        },
+        {
+          title: "Sleep Disorders",
+          image: "/images/reasons/sleep.png"
+        },
+        {
+          title: "Insomnia",
+          image: "/images/reasons/insomnia.png"
+        }
+      ]
+    }
+  },
+
+  methods: {
+    reason(reason) {
+      this.$store.commit("setReason", reason);
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.emotional {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  max-width: 350px;
+}
+</style>

components/Questions/EmotionalTwo.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="emotional">
+    <div class="emotional__title">
+      How would you describe <br>your current emotional <br>state?
+    </div>
+
+    <div class="emotional__buttons">
+      <ReasonBlock v-for="block in blocks" :key="block.title" :title="block.title" :image="block.image"
+        @reason="reason" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ReasonBlock from "../Kit/ReasonBlock.vue";
+
+export default {
+  name: "EmotionalTwo",
+  components: {
+    ReasonBlock,
+  },
+
+  data() {
+    return {
+      blocks: [
+        {
+          title: "Calm",
+          image: "/images/reasons/calm.png"
+        },
+        {
+          title: "Anxious",
+          image: "/images/reasons/anxiety.png",
+        },
+        {
+          title: "Worried",
+          image: "/images/reasons/emotional.png"
+        },
+        {
+          title: "Stressed",
+          image: "/images/reasons/stress.png",
+        },
+        {
+          title: "Depressed",
+          image: "/images/reasons/depressed.png",
+        },
+        {
+          title: "Other",
+          image: "/images/reasons/other.png"
+        }
+      ]
+    }
+  },
+
+  methods: {
+    reason(reason) {
+      this.$store.commit("setReason", reason);
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.emotional {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  margin-top: 20px;
+
+  width: 100%;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+}
+</style>

components/Questions/LastStep.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="last">
+    <div class="last__title">
+      Today is the day for a
+      <div>new beginning</div>
+    </div>
+
+    <div class="last__graph"></div>
+
+    <StaticOne />
+    <StaticTwo />
+    <StaticThree />
+    <StaticFour ref="scrollTarget" />
+
+    <div class="last__claim">
+      <KitButton @click="scrollToStaticFour" padding defaultButton green >CLAIM MY PLAN</KitButton>
+    </div>
+
+    <div class="last__payments"></div>
+    <StaticFive />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from "vue-scrollto";
+
+export default {
+  name: "LastStep",
+  methods: {
+    scrollToStaticFour() {
+      // Используйте vue-scrollto для плавной прокрутки к элементу
+      scrollTo(this.$refs.scrollTarget.$el, 500, { offset: -50 }); // 500 - время анимации в миллисекундах, offset - отступ от верха
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.last {
+  margin-top: 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  &__title {
+    text-align: center;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    color: #302823;
+
+    div {
+      color: #14af68;
+      font-size: 28px;
+    }
+  }
+
+  &__graph {
+    margin-top: 32px;
+
+    background-image: url("/images/graph_last.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 180px;
+  }
+
+  &__button {
+    width: 100%;
+  }
+
+   &__claim {
+    position: sticky;
+    bottom: 0;
+    margin-top: 32px;
+    width: 100%;
+    
+  }
+
+  &__payments {
+    margin-top: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url("/icons/payments.svg");
+    background-repeat: no-repeat;
+    
+    width: 100%;
+    height: 100px;
+  }
+}
+
+</style>

components/Questions/Physical.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="physical">
+    <ReasonBlock v-for="block in blocks" :key="block.title" :title="block.title" :image="block.image" @reason="reason" />
+  </div>
+</template>
+
+<script>
+import ReasonBlock from "../Kit/ReasonBlock.vue";
+
+export default {
+  name: "Physical",
+  components: {
+    ReasonBlock,
+  },
+
+  data() {
+    return {
+      blocks: [
+        {
+          title: "Chronic pain",
+          image: "/images/reasons/stress.png",
+        },
+        {
+          title: "Joint and Muscle Pain",
+          image: "/images/reasons/anxiety.png",
+        },
+        {
+          title: "Stress-Related Digestive Issues",
+          image: "/images/reasons/stress2.png"
+        },
+        {
+          title: "Chronic Fatigue",
+          image: "/images/reasons/chronic.png",
+        },
+        {
+          title: "Back pain",
+          image: "/images/reasons/headache.png",
+        },
+        {
+          title: "Hypertension",
+          image: "/images/reasons/headache.png",
+        }
+      ]
+    }
+  },
+
+  methods: {
+    reason(reason) {
+      this.$store.commit("setReason", reason);
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.physical {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  max-width: 350px;
+}
+</style>

components/Questions/StepEight.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="practice">
+    <div class="practice__title">
+      Do you practice<br> mindfulness, meditation, or <br>relaxation?
+    </div>
+
+    <div class="practice__buttons">
+      <KitButton block bigButton notCenter v-for="(button, index) in buttons" :key="index"
+        :selected="index === selectedButton" @click="selectedButton = index">
+        {{ button.text }}
+      </KitButton>
+    </div>
+
+    <div class="practice__block" v-if="selectedButton === 3">
+      <NoteBlock :title="`Don't worry!`" :note="`Never too late to start! EFT is a gentle 
+        and effective way to ease into 
+        mindfulness. Begin your journey to 
+        relaxation and inner peace with 
+        tapping—it's a perfect first step.`" />
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+import NoteBlock from '../Kit/NoteBlock.vue';
+
+export default {
+  name: "StepEight",
+  components: { KitButton, NoteBlock },
+
+  data() {
+    return {
+      buttons: [
+        {
+          text: "💪 Every day",
+        },
+        {
+          text: "🤔 Occasionally",
+        },
+        {
+          text: "😐 Rarely",
+        },
+        {
+          text: "❌ Never"
+        },
+      ],
+
+      selectedButton: null,
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.practice {
+  padding: 20px;
+  margin-top: 8px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    border-bottom: 1px solid #f1e5da;
+    padding-bottom: 12px;
+  }
+
+  &__block {
+    margin-top: 12px;
+  }
+
+  &__button {
+    margin-top: 32px;
+  }
+}
+</style>

components/Questions/StepEighteen.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="question">
+    <div class="question__title">
+      Are you dealing with any<br> physical health issues or<br> chronic pain?
+    </div>
+
+    <div class="question__buttons">
+      <KitButton bigButton padding24 v-for="button, index in buttons" :key="index" :selected="index === selected"
+        @click="select(index)">
+        {{ button.emoji }}
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import NoteBlock from '../Kit/NoteBlock.vue';
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepEighteen",
+  components: { NoteBlock, KitButton },
+
+  data() {
+    return {
+      buttons: [
+        {
+          emoji: "👎",
+          data: "dislike"
+        },
+        {
+          emoji: "😐",
+          data: "normal"
+        },
+        {
+          emoji: "👍",
+          data: "like",
+        }
+      ],
+
+      selected: null,
+    }
+  },
+
+  methods: {
+    select(index) {
+      this.selected = index;
+      
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.question {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-top: 214px;
+
+  gap: 32px;
+
+  padding: 20px;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+}
+</style>

components/Questions/StepEleven.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="feel">
+    <NoteBlock :title="`Embrace Body Awareness`"
+      :note="`Sometimes feeling disconnected from your body can be a signal to delve deeper into self-awareness.`" />
+
+    <div class="feel__title">Do you feel fully connected <br> with your body?</div>
+
+    <div class="feel__selector">
+      <KitSelector :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StepEleven",
+
+  data() {
+    return {
+      items: [
+        {
+          emoji: "😩",
+          title: "Not at all",
+        },
+        {
+          emoji: "🙁",
+          title: "A little bit",
+        },
+        {
+          emoji: "😐",
+          title: "Sometimes",
+        },
+        {
+          emoji: "🙂",
+          title: "Often"
+        },
+        {
+          emoji: "😀",
+          title: "Always"
+        }
+      ],
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.feel {
+  margin-top: 16px;
+
+  &__title {
+    margin-top: 44px;
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__selector {
+    margin-top: 56px;
+
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

components/Questions/StepFive.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="apa">
+    <div class="apa__wrapper">
+      <div class="apa__wrapper-logo"></div>
+
+      <div class="apa__wrapper-title">American Psychological <br>Association's</div>
+
+      <div class="apa__wrapper-text">
+        ...A study conducted by examined the effects of EFT on the brain and pain (and other factors) using resting state
+        functional magnetic resonance imaging (fMRI) pre and post intervention. This study not only reported decreased
+        levels of pain, but also somatic symptoms, depression and anxiety.
+
+        Also reported in this study is that EFT significantly increased happiness, quality of life and satisfaction with
+        life. These results substantiate the effects of EFT as a valid... intervention...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepFive",
+  components: { KitButton },
+}
+</script>
+
+<style scoped lang="scss">
+.apa {
+  padding: 20px;
+  margin-top: 12px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &-logo {
+      background-image: url("/icons/APA_logo.png");
+      background-repeat: no-repeat;
+
+      width: 56px;
+      height: 56px;
+    }
+
+    &-title {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      text-align: center;
+
+      margin-top: 36px;
+    }
+
+    &-text {
+      margin-top: 16px;
+      font-family: "Poppins";
+      font-weight: 400;
+      width: 353px;
+      color: #534E4A;
+      text-align: center;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        background-image: url("/icons/mark.svg");
+        background-repeat: no-repeat;
+        width: 25px;
+        height: 21px;
+      }
+
+      &::after {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+</style>

components/Questions/StepFour.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="about">
+    <div class="about__title">
+      Do you know something <br />about tapping meditation?
+    </div>
+
+    <div class="about__buttons">
+      <KitButton
+        block
+        bigButton
+        notCenter
+        v-for="(button, index) in buttons"
+        :key="index"
+        :selected="index === selectedButton"
+        @click="selectedButton = index"
+      >
+        {{ button.text }}
+      </KitButton>
+    </div>
+
+    <div class="about__block" v-if="selectedButton !== null && selectedButton !== 0">
+      <NoteBlock
+        :title="'EFT = Tapping'"
+        :note="`EFT (Emotional Freedom Technique), 
+        or tapping, involves stimulating certain 
+        body points to balance energy and reduce 
+        stress, much like acupuncture but using 
+        fingertips instead of needles. It's a 
+        self-help tool for relieving a range of 
+        emotional and physical issues.`"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+import NoteBlock from "../Kit/NoteBlock.vue";
+
+export default {
+  name: "StepFour",
+  components: { KitButton, NoteBlock },
+
+  data() {
+    return {
+      buttons: [
+        { text: "💪 Yes, a lot" },
+        { text: "🤔 A little bit" },
+        { text: "😐 Don't know at all" },
+      ],
+
+      selectedButton: null,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.about {
+  padding: 20px;
+  margin-top: 8px;
+  
+  box-sizing: border-box;
+  width: 100%;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    border-bottom: 1px solid #f1e5da;
+    padding-bottom: 12px;
+  }
+
+  &__block {
+    margin-top: 12px;
+  }
+
+  &__button {
+    margin-top: 32px;
+  }
+}
+</style>

components/Questions/StepFourteen.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="hear">
+    <div class="hear__logo"></div>
+
+    <div class="hear__body">
+      <div class="hear__body-title">We Hear You</div>
+      <div class="hear__body-text">
+        Emotional state is an integral and vital aspect of our lives, akin to a breeze that brings a spectrum of feelings,
+        ranging from joy to sorrow, and everything in between, enriching our journey with diversity and depth
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StepFourteen",
+}
+</script>
+
+<style scoped lang="scss">
+.hear {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+
+  gap: 32px;
+  
+  &__logo {
+    background-image: url("/images/hear_logo.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 434px;
+
+    z-index: -2;
+    margin-top: -80px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    
+    text-align: center;
+
+    &-title {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+      color: #B87057;
+    }
+
+    &-text {
+      font-family: "Poppins";
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #534E4A;
+
+      width: 353px;
+    }
+  }
+}
+</style>

components/Questions/StepNineteen.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="question">
+    <div class="question__title">
+      Do you often take time for <br>yourself and self-care?
+    </div>
+
+    <div class="question__buttons">
+      <KitButton bigButton padding24 v-for="button, index in buttons" :key="index" :selected="index === selected"
+        @click="select(index)">
+        {{ button.emoji }}
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import NoteBlock from '../Kit/NoteBlock.vue';
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepNineteen",
+  components: { NoteBlock, KitButton },
+
+  data() {
+    return {
+      buttons: [
+        {
+          emoji: "👎",
+          data: "dislike"
+        },
+        {
+          emoji: "😐",
+          data: "normal"
+        },
+        {
+          emoji: "👍",
+          data: "like",
+        }
+      ],
+
+      selected: null,
+    }
+  },
+
+  methods: {
+    select(index) {
+      this.selected = index;
+      
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.question {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-top: 214px;
+
+  gap: 32px;
+
+  padding: 20px;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+}
+</style>

components/Questions/StepNinth.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="reported">
+    <div class="reported__header"></div>
+
+    <div class="reported__title">
+      Reported by
+      <div>The New Your Times</div>
+    </div>
+
+    <div class="reported__block">
+      <div class="reported__block-text">
+        ...If we can help our patients tolerate their
+        own bodily sensations, they’ll be able to
+        process the trauma themselves...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StepNinth"
+}
+</script>
+
+<style scoped lang="scss">
+.reported {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__header {
+    background-image: url("/images/ninth_logo.svg");
+    background-repeat: no-repeat;
+
+    width: 295px;
+    height: 317px;
+
+    margin-top: -40px;
+    z-index: -2;
+  }
+
+  &__title {
+    margin-top: 18px;
+
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+
+    color: #302823;
+
+    div {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+    }
+  }
+
+  &__block {
+    margin-top: 32px;
+    border: 1px solid #E5D5CA;
+    border-radius: 29px;
+    width: 353px;
+
+    text-align: center;
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 16px;
+    color: #534E4A;
+    line-height: 24px;
+
+    padding-top: 38px;
+    padding-bottom: 45px;
+
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 26px;
+
+      &::before {
+        content: "";
+        display: block;
+        background-image: url("/icons/mark.svg");
+        background-repeat: no-repeat;
+        width: 25px;
+        height: 21px;
+      }
+    }
+  }
+}
+</style>

components/Questions/StepOne.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="first">
+    <div class="first__background"></div>
+    <div class="first__header">What do you experience <br />most often?</div>
+    <div class="first__buttons">
+      <KitButton block bigButton @click="action('physical')">
+        Physical discomfort
+      </KitButton>
+
+      <KitButton block bigButton @click="action('emotional')">
+        Emotional fatigue
+      </KitButton>
+    </div>
+
+    <div class="first__note">
+      Complete a 2-minute quiz to get a <br />
+      personalized plan
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+
+export default {
+  name: "StepOne",
+  components: {
+    KitButton,
+  },
+
+  methods: {
+    action(type) {
+      this.$store.commit("setType", type);
+      this.$store.commit("nextPage");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.first {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__background {
+    background-image: url("/images/questions/first.svg");
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 353px;
+    height: 336px;
+  }
+
+  &__header {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+
+    margin-top: 32px;
+    margin-bottom: 32px;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+
+    width: 100%;
+  }
+
+  &__note {
+    margin-top: 24px;
+    text-align: center;
+
+    font-family: "Poppins";
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+</style>

components/Questions/StepSeven.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="emotions">
+    <div class="emotions__title">
+      What emotions do you find difficult to handle?
+    </div>
+
+    <div class="emotions__buttons">
+      <KitButton
+        flex
+        padding16
+        bigButton
+        notCenter
+        v-for="(button, index) in buttons"
+        :key="index"
+        :selected="selectedButtons[index]"
+        class="emotions__buttons-button"
+      >
+        <input 
+          type="checkbox" 
+          :id="index"
+          class="custom-checkbox"
+          v-model="selectedButtons[index]"
+        />
+        <label :for="index">{{ button }}</label>
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+import NoteBlock from "../Kit/NoteBlock.vue";
+
+export default {
+  name: "StepSeven",
+  components: { KitButton, NoteBlock },
+
+  data() {
+    return {
+      buttons: [
+        "Anger",
+        "Fear",
+        "Anxiety",
+        "Sadness",
+        "Feeling insecure",
+        "Despair",
+        "Disappointment",
+        "Embarrassment",
+        "Frustration",
+        "Overwhelm",
+        "Other",
+      ],
+
+      selectedButtons: [],
+    };
+  },
+
+  methods: {
+    toggleSelectedButton(index) {
+      let indexOfButton = this.selectedButtons.indexOf(index);
+
+      if (indexOfButton !== -1) {
+        this.selectedButtons.splice(indexOfButton, 1);
+      } else {
+        this.selectedButtons.push(index);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.emotions {
+  padding: 20px;
+  margin-top: 8px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding-bottom: 12px;
+
+    max-width: 350px;
+  }
+
+  &__block {
+    margin-top: 12px;
+  }
+}
+</style>

components/Questions/StepSeventeen.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="question">
+    <NoteBlock :title="'EFT Slowdive Team'"
+      :note="`We're here to support you, and EFT tapping can help you through those moments.`" />
+
+    <div class="question__body">
+      <div class="question__body-title">
+        Do you often experience <br>discomfort or negativity?
+      </div>
+
+      <div class="question__body-buttons">
+        <KitButton bigButton padding24 v-for="button, index in buttons" :key="index" :selected="index === selected"
+          @click="selected = index">
+          {{ button.emoji }}
+        </KitButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NoteBlock from '../Kit/NoteBlock.vue';
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepSeventeen",
+  components: { NoteBlock, KitButton },
+
+  data() {
+    return {
+      buttons: [
+        {
+          emoji: "👎",
+          data: "dislike"
+        },
+        {
+          emoji: "😐",
+          data: "normal"
+        },
+        {
+          emoji: "👍",
+          data: "like",
+        }
+      ],
+
+      selected: null,
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.question {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 102px;
+
+  padding: 20px;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+
+    &-title {
+      text-align: center;
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: #302823;
+    }
+
+    &-buttons {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+  }
+}
+</style>

components/Questions/StepSix.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="sympthoms">
+    <div class="sympthoms__title">
+      Do you often feel physical <br />symptoms like headaches,<br />stomachaches,
+      or body <br />tension?
+    </div>
+
+    <div class="sympthoms__buttons">
+      <KitButton
+        block
+        bigButton
+        notCenter
+        v-for="(button, index) in buttons"
+        :key="index"
+        :selected="index === selectedButton"
+        @click="selectedButton = index"
+      >
+        {{ button.text }}
+      </KitButton>
+    </div>
+
+    <div class="sympthoms__block" v-if="selectedButton !== null">
+      <NoteBlock
+        :title="buttons[selectedButton].text"
+        :note="buttons[selectedButton].description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+import NoteBlock from "../Kit/NoteBlock.vue";
+
+export default {
+  name: "StepSix",
+  components: { KitButton, NoteBlock },
+
+  data() {
+    return {
+      buttons: [
+        {
+          text: "😀 Never",
+          description:
+            "Great to know you're not experiencing these issues! Maintaining your well-being is key",
+        },
+        {
+          text: "🙂 Rarely",
+          description:
+            "That's good to hear. It's important to be aware of any changes in how often these occur.",
+        },
+        {
+          text: "😐 Sometimes",
+          description:
+            "Occasional symptoms can still impact your well-being. Let's find out what might be triggering them.",
+        },
+        {
+          text: "🙁 Occasionally",
+          description:
+            "Moderate symptoms observed. Let's explore patterns and consider solutions.",
+        },
+        {
+          text: "😩 A lot",
+          description:
+            "Frequent symptoms noted. Let's identify causes and find relief strategies.",
+        },
+      ],
+
+      selectedButton: null,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sympthoms {
+  padding: 20px;
+  margin-top: 8px;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    border-bottom: 1px solid #f1e5da;
+    padding-bottom: 12px;
+  }
+
+  &__block {
+    margin-top: 12px;
+  }
+}
+</style>

components/Questions/StepSixteen.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="reported">
+    <div class="reported__title">
+      Reported by
+      <div class="reported__title-logo"></div>
+    </div>
+
+    <div class="reported__block">
+      <NoteBlock
+        green
+        :title="'Rachel Zimmerman'"
+        :note="`“Emotional Freedom Technique” 
+        (tapping) the practice uses 
+        exposure and desensitization to 
+        “defuse” painful emotions 
+        associated with trauma. By 
+        tapping a series of acupuncture 
+        points on the body, and repeating 
+        certain phrases related to the
+        negative event in an accepting 
+        way, the emotional intensity of the 
+        bad memory deflates, the theory 
+        goes, and the grip of trauma 
+        melts away.`"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import NoteBlock from '../Kit/NoteBlock.vue';
+
+export default {
+  name: "StepSixteen",
+  components: { NoteBlock }
+}
+</script>
+
+<style scoped lang="scss">
+.reported {
+  margin-top: 43px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  &__title {
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+    color: #302823;
+
+    &-logo {
+      background-image: url("/images/harvard_logo.png");
+      background-repeat: no-repeat;
+
+      width: 295px;
+      height: 84.5px;
+    }
+  }
+
+  &__block {
+    margin-top: 37.5px;
+  }
+}
+</style>

components/Questions/StepTen.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="improvement">
+    <div class="improvement__title">
+      What area of your life <br />currently needs the most<br />
+      improvement?
+    </div>
+
+    <div class="improvement__buttons">
+      <KitButton
+        bigButton
+        notCenter
+        block
+        spaceFlex
+        flex
+        v-for="(button, index) in buttons"
+        :key="index"
+        :selected="selectedButtons.includes(index)"
+        @click="toggleSelectedButton(index)"
+        class="emotions__buttons-button"
+      >
+        {{ button }}
+        <input
+          type="checkbox"
+          :id="index"
+          class="custom-checkbox"
+          :checked="selectedButtons.includes(index)"
+        />
+        <label :for="index" />
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+
+export default {
+  name: "StepTen",
+  components: { KitButton },
+
+  data() {
+    return {
+      selectedButtons: [],
+      buttons: [
+        "❤️ Health",
+        "💰 Money",
+        "💼 Job",
+        "💕 Relationship",
+        "🪬 Spirituality",
+        "🤔 Other",
+      ],
+    };
+  },
+
+  methods: {
+    toggleSelectedButton(index) {
+      let indexOfButton = this.selectedButtons.indexOf(index);
+
+      if (indexOfButton !== -1) {
+        this.selectedButtons.splice(indexOfButton, 1);
+      } else {
+        this.selectedButtons.push(index);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.improvement {
+  padding: 20px;
+  margin-top: 12px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>

components/Questions/StepThirteen.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="feel">
+    <div class="feel__title">Have you been through a <br>tough experience that <br>affected your energy?</div>
+
+    <div class="feel__selector">
+      <KitSelector :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import KitSelector from '../Kit/KitSelector.vue';
+
+export default {
+  name: "StepThirteen",
+  components: { KitSelector },
+
+  data() {
+    return {
+      items: [
+        {
+          emoji: "😩",
+          title: "Yes, more than one",
+          text: "I've experienced multiple tough events in my life that have drained my energy",
+        },
+        {
+          emoji: "🙁",
+          title: "Yes, one event",
+          text: "I've had one significant event that deeply affected my energy.",
+        },
+        {
+          emoji: "😐",
+          title: "Yes, but it's behind me",
+          text: "I've had a challenging experience in the past, but it no longer affects my energy",
+        },
+        {
+          emoji: "🙂",
+          title: "No, I've been fortunate",
+          text: "I haven't faced tough events that significantly impacted my energy",
+        },
+        {
+          emoji: "😀",
+          title: "I'd rather not say",
+          text: "I prefer not to discuss tough experiences that could affect my energy"
+        }
+      ],
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.feel {
+  margin-top: 152px;
+  padding: 20px;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__selector {
+    margin-top: 56px;
+
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

components/Questions/StepThirty.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="eye">
+    <div class="eye__logo"></div>
+    <div class="eye__title">
+      Eyebrow (EB)
+    </div>
+
+    <div class="eye__text">
+      You can tap on both sides at once, pick just one side of the body, or alternate sides as you go along. Try using
+      just a few fingers, like the index and middle fingers, to tap on this point.
+    </div>
+
+    <KitButton defaultButton padding fixed green @click="nextPage">Continue</KitButton>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentyEight",
+  components: { KitButton },
+  methods: {
+    nextPage() {
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.eye {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__logo {
+    background-image: url("/images/eye.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 471px;
+
+    z-index: -2;
+  }
+
+  &__title {
+    margin-top: 13px;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    color: #302823;
+  }
+
+  &__text {
+    margin-top: 16px;
+
+    text-align: center;
+    font-family: "Poppins";
+    font-weight: 400;
+    line-height: 24px;
+    color: #534E4A;
+    font-size: 15px;
+
+    padding: 20px;
+  }
+}
+</style>

components/Questions/StepThree.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="reason">
+    <div class="reason__header"></div>
+
+    <div class="reason__text" v-html="text"></div>
+
+    <NoteBlock :text="noteText" />
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+import NoteBlock from "../Kit/NoteBlock.vue";
+
+export default {
+  name: "StepThree",
+
+  components: { NoteBlock, KitButton },
+
+  computed: {
+    reason() {
+      return this.$store.getters.selectReason;
+    },
+  },
+
+  data() {
+    return {
+      text: "",
+      noteText: "",
+    };
+  },
+
+  mounted() {
+    let text = this.reason.toLowerCase();
+
+    if (text === "stress reduction") {
+      this.text = `Ok, so your goal is <b>to focus on</b> <div>stress reduction</div>`;
+      this.noteText = `In the US and UK, only 40% of people with stress-related symptoms sought professional help in the past year, underscoring a significant gap in addressing this vital health concern.`;
+    } else if (text === "anxiety management") {
+      this.text = `Ok, so your goal is <b>to manage</b> <div>anxiety effectively</div>`;
+      this.noteText = `In the US and UK, just 30% of individuals diagnosed with Anxiety have consulted a doctor for their condition in the past year, pointing to a troubling trend in neglecting anxiety management.`;
+    } else if (text === "emotional release") {
+      this.text = `Ok, so your goal is <b>to achieve</b> <div>emotional release</div>`;
+      this.noteText = `In the US and UK, approximately 45% of people needing emotional release therapy actually reached out to a professional in the past year, indicating a hesitation to deal with emotional health issues.`;
+    } else if (text === "headache") {
+      this.text = `Ok, so your goal is <b>to alleviate</b> <div>headaches</div>`;
+      this.noteText = `In the US and UK, only 50% of people with chronic headaches have consulted a doctor in the past year, highlighting the need for more proactive headache management.`;
+    } else if (text === "chronic pain") {
+      this.text = `Ok, so your goal is <b>to address</b> <div>chronic pain</div>`;
+      this.noteText = `In the US and UK, around 35% of individuals suffering from chronic pain sought medical advice in the past year, suggesting a lack of adequate chronic pain management.`;
+    } else if (text === "joint and muscle pain") {
+      this.text = `Ok, so your goal is <b>to relieve</b> <div>joint and muscle pain</div>`;
+      this.noteText = `In the US and UK, merely 60% of those experiencing joint and muscle pain have seen a doctor for it in the past year, indicating a gap in addressing these common pain issues.`;
+    } else if (text === "insomnia") {
+      this.text = `Ok, so your goal is <b>to overcome</b> <div>insomnia</div>`;
+      this.noteText = `In the US and UK, just 55% of people suffering from insomnia consulted a healthcare provider in the past year, showing a significant overlook in treating sleep disorders.`;
+    } else if (text === "stress-related digestive issues") {
+      this.text = `Ok, so your goal is <b>to tackle</b> <div>stress-related digestive issues</div>`;
+      this.noteText = `In the US and UK, only about 50% of individuals with stress-related digestive issues sought medical help in the past year, pointing to a need for better management of these conditions.`;
+    } else if (text === "chronic fatigue") {
+      this.text = `Ok, so your goal is <b>to combat</b> <div>chronic fatigue</div>`;
+      this.noteText = `In the US and UK, a mere 70% of those with chronic fatigue syndrome have consulted a healthcare professional in the past year, highlighting the undermanagement of this debilitating condition.`;
+    } else if (text === "sleep disorders") {
+      this.text = `Ok, so your goal is <b>to deal with</b> <div>sleep disorders</div>`;
+      this.noteText = `In the US and UK, approximately 40% of people with sleep disorders sought medical advice in the past year, emphasizing a widespread neglect of these issues.`;
+    } else if (text === "back pain") {
+      this.text = `Ok, so your goal is <b>to reduce</b> <div>back pain</div>`;
+      this.noteText = `In the US and UK, only 50% of individuals suffering from back pain have visited a doctor in the past year, indicating a lack of attention to this common ailment.`;
+    } else if (text === "postpartum discomforts") {
+      this.text = `Ok, so your goal is <b>to alleviate</b> <div>postpartum discomforts</div>`;
+      this.noteText = `In the US and UK, just 30% of new mothers experiencing postpartum discomforts sought medical help in the past year, underlining a crucial gap in postpartum care.`;
+    } else if (text === "hypertension") {
+      this.text = `Ok, so your goal is <b>to manage</b> <div>hypertension effectively</div>`;
+      this.noteText = `In the US and UK, only 40% of individuals diagnosed with hypertension sought professional medical advice in the past year, highlighting a significant concern in managing this common health condition.`;
+    }
+  },
+
+  methods: {
+    fourthStep() {
+      this.$emit("fourthStep");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.reason {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+
+  &__header {
+    background-image: url("/images/reasons/bg_reason.svg");
+    background-repeat: no-repeat;
+    margin-top: -40px;
+    z-index: -2;
+    height: 300px;
+    width: 353px;
+  }
+
+  &__text {
+    text-align: center;
+    font-family: "Poppins";
+    font-size: 16px;
+    color: #534e4a;
+
+    ::v-deep b {
+      color: #302823;
+    }
+
+    ::v-deep div {
+      font-family: "Noto Serif HK";
+      font-size: 24px;
+      color: #ce8c74;
+      font-weight: 700;
+      line-height: 32px;
+    }
+  }
+
+}
+</style>

components/Questions/StepTwelve.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="feel">
+    <div class="feel__title">Is it easy for you to share <br>your thoughts and feelings<br> with others?</div>
+
+    <div class="feel__selector">
+      <KitSelector :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import KitSelector from '../Kit/KitSelector.vue';
+
+export default {
+  name: "StepTwelve",
+  components: { KitSelector },
+
+  data() {
+    return {
+      items: [
+        {
+          emoji: "😩",
+          title: "Rarely"
+        },
+        {
+          emoji: "🙁",
+          title: "Not really",
+        },
+        {
+          emoji: "😐",
+          title: "Sometimes",
+        },
+        {
+          emoji: "🙂",
+          title: "Usually",
+        },
+        {
+          emoji: "😀",
+          title: "Always"
+        }
+      ],
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.feel {
+  margin-top: 152px;
+  padding: 20px;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__selector {
+    margin-top: 56px;
+
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

components/Questions/StepTwenty.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="embrace">
+    <div class="embrace__logo"></div>
+
+    <div class="embrace__body">
+      <div class="embrace__body-title">
+        Embrace EFT
+        <div>Today!</div>
+      </div>
+
+      <div class="embrace__body-text">
+        EFT and Tapping meditation are recognized by professionals, with a third endorsing EFT for stress and emotional
+        regulation. Emphasizing self-awareness, these techniques are lauded for their contribution to emotional
+        well-being.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StepTwenty",
+}
+</script>
+
+<style scoped lang="scss">
+.embrace {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+
+  &__logo {
+    background-image: url("/images/embrace_logo.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 434px;
+
+    z-index: -2;
+    margin-top: -80px;
+  }
+
+  &__body {
+    margin-top: 23px;
+    text-align: center;
+
+    &-title {
+      font-family: "Noto Serif HK";
+      font-weight: 500;
+      font-size: 20px;
+      color: #302823;
+
+      div {
+        font-weight: 600;
+        font-size: 28px;
+        color: #14AF68;
+        line-height: 32px;
+      }
+    }
+
+    &-text {
+      margin-top: 16px;
+      font-family: "Poppins";
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #534E4A;
+    }
+  }
+}
+</style>

components/Questions/StepTwentyEight.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="collarbone">
+    <div class="collarbone__logo"></div>
+    <div class="collarbone__title">
+      Collarbone point (CB)
+    </div>
+
+    <div class="collarbone__text">
+      You can tap with a few fingers on either side of the body to stimulate this point. Alternatively, try taking your
+      whole hand and tapping the entire hand across the place where a bowtie would lie. That allows you to easily
+      stimulate this point on both sides at once without having to worry about missing the point.
+    </div>
+
+    <KitButton defaultButton padding fixed green @click="nextPage">Next point</KitButton>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentyEight",
+  components: { KitButton },
+  methods: {
+    nextPage() {
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.collarbone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__logo {
+    background-image: url("/images/collarbone.png");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 471px;
+  }
+
+  &__title {
+    margin-top: 13px;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    color: #302823;
+  }
+
+  &__text {
+    margin-top: 16px;
+
+    text-align: center;
+    font-family: "Poppins";
+    font-weight: 400;
+    line-height: 24px;
+    color: #534E4A;
+    font-size: 15px;
+
+    padding: 20px;
+  }
+}
+</style>

components/Questions/StepTwentyFive.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="loading">
+    <div class="loading__title">Loading your personal <br>results</div>
+
+    <div class="loading__block">
+      <LoadingBlock />
+    </div>
+
+    <div class="loading__reviews">
+      <ReviewBlock :name="review.name" :nick="review.nick" :text="review.text" />
+    </div>
+
+    <div class="loading__icons">
+      <img src="/images/harvard_logo.png" width="130" height="37">
+      <img src="/images/tnt_logo.png">
+      <img src="/images/ams_logo.png">
+    </div>
+  </div>
+</template>
+
+<script>
+import LoadingBlock from '../Kit/LoadingBlock.vue';
+import ReviewBlock from '../Kit/ReviewBlock.vue';
+
+export default {
+  name: "StepTwentyFive",
+  components: { LoadingBlock, ReviewBlock },
+
+  data() {
+    return {
+      number: 0,
+
+      review: {
+        name: "",
+        nick: "",
+        text: "",
+      },
+
+      reviews: [
+        {
+          name: "Mila Nukrol",
+          nick: "mila1975",
+          text: "Tapping cured my anxiety and insomnia— feeling blessed and rested!",
+        },
+
+        {
+          name: "Laura Smith",
+          nick: "HealingWithLaura",
+          text: "Tapping erased my back pain. I’m now pain-free and thriving!"
+        },
+
+        {
+          name: "Angela White",
+          nick: "mila1975",
+          text: "Post-tapping, my stress is gone. Life's joyful and calm now!",
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.review.name = this.reviews[this.number].name;
+    this.review.nick = this.reviews[this.number].nick;
+    this.review.text = this.reviews[this.number].text;
+
+    setInterval(() => {
+      this.number += 1;
+      
+      if (this.number <= 2) {
+        this.review.name = this.reviews[this.number].name;
+        this.review.nick = this.reviews[this.number].nick;
+        this.review.text = this.reviews[this.number].text;
+      } else {
+        this.number = 0;
+      }
+    }, 5000)
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.loading {
+  margin-top: 32px;
+
+  width: 100%;
+
+  &__title {
+    text-align: center;
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+  }
+
+  &__block {
+    margin-top: 12px;
+
+    padding: 20px;
+  }
+
+  &__reviews {
+    margin-top: 27px;
+
+    padding: 20px;
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 20px;
+  }
+}
+</style>

components/Questions/StepTwentyFour.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="eft">
+    <div class="eft__logo"></div>
+
+    <div class="eft__body">
+      <div class="eft__body-title">
+        EFT - <span>{{ data.theme }}</span>!
+      </div>
+
+      <div class="eft__body-text">
+        {{ data.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StepTwentyFour",
+
+  computed: {
+    data() {
+      return this.$store.getters.selectEft;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.eft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+  gap: 32px;
+
+  &__logo {
+    background-image: url("/images/eft_logo.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 434px;
+
+    z-index: -2;
+    margin-top: -80px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    text-align: center;
+
+    &-title {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+      color: #302823;
+
+      span {
+        color: #14AF68;
+      }
+    }
+
+    &-text {
+      font-family: "Poppins";
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #534E4A;
+    }
+  }
+}
+</style>

components/Questions/StepTwentyNine.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="side">
+    <div class="side__logo"></div>
+    <div class="side__title">
+      Side of the Hand (SE)
+    </div>
+
+    <div class="side__text">
+      You can tap on either hand, using the opposite hand to do the tapping. Try using several fingers from the opposite
+      hand to tap on this point. I personally like to use all four fingers to tap along the length of the side of my hand
+      to stimulate the Karate Chop point.
+    </div>
+
+    <KitButton defaultButton padding fixed green @click="nextPage">Next point</KitButton>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentyEight",
+  components: { KitButton },
+  methods: {
+    nextPage() {
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.side {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__logo {
+    background-image: url("/images/side.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 471px;
+
+    z-index: -2;
+  }
+
+  &__title {
+    margin-top: 13px;
+
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    color: #302823;
+  }
+
+  &__text {
+    margin-top: 16px;
+
+    text-align: center;
+    font-family: "Poppins";
+    font-weight: 400;
+    line-height: 24px;
+    color: #534E4A;
+    font-size: 15px;
+
+    padding: 20px;
+  }
+}
+</style>

components/Questions/StepTwentyOne.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="activity">
+    <div class="activity__title">
+      What activity brings you joy <br />and peace?
+    </div>
+
+    <div class="activity__buttons">
+      <KitButton
+        bigButton
+        notCenter
+        block
+        spaceFlex
+        flex
+        v-for="(button, index) in buttons"
+        :key="index"
+        :selected="selectedButtons.includes(index)"
+        @click="toggleSelectedButton(index)"
+        class="emotions__buttons-button"
+      >
+        {{ button }}
+        <input
+          type="checkbox"
+          :id="index"
+          class="custom-checkbox"
+          :checked="selectedButtons.includes(index)"
+        />
+        <label :for="index" />
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+
+export default {
+  name: "StepTwentyOne",
+  components: { KitButton },
+
+  data() {
+    return {
+      selectedButtons: [],
+      buttons: [
+        "🧘 Yoga",
+        "🪬 Meditation",
+        "🌲 Walking in nature",
+        "🎨 Art",
+        "🎼 Music",
+        "👤 Solitude",
+        "👨‍👩‍👧 Family time",
+        "💡 Other",
+      ],
+    };
+  },
+  methods: {
+    toggleSelectedButton(index) {
+      let indexOfButton = this.selectedButtons.indexOf(index);
+
+      if (indexOfButton !== -1) {
+        this.selectedButtons.splice(indexOfButton, 1);
+      } else {
+        this.selectedButtons.push(index);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.activity {
+  padding: 20px;
+  margin-top: 12px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>

components/Questions/StepTwentySeven.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="recommendation">
+    <div class="recommendation__logo"></div>
+    <div class="recommendation__title">
+      <span>Personal</span> recommendation:
+    </div>
+
+    <div class="recommendation__text">
+      You need to focus on <b>three main points</b> in <br>your body for the <b>next 30-90 days</b>.
+    </div>
+
+    <KitButton defaultButton padding fixed green @click="nextPage">Learn more</KitButton>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentySeven",
+  components: { KitButton },
+  methods: {
+    nextPage() {
+      this.$store.commit("nextPage");
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.recommendation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__logo {
+    background-image: url("/images/recommendation.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 471px;
+  }
+
+  &__title {
+    margin-top: 32px;
+
+    font-family: "Noto Serif HK";
+    font-weight: 500;
+    font-size: 20px;
+    color: #302823;
+
+    span {
+      font-weight: 700;
+      font-size: 24px;
+    }
+  }
+
+  &__text {
+    margin-top: 16px;
+
+    text-align: center;
+    font-family: "Poppins";
+    font-weight: 500;
+    color: #534E4A;
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+</style>

components/Questions/StepTwentySix.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="plan">
+    <div class="plan__title">
+      <div class="plan__title-first">Your personal EFT plan for</div>
+      <div class="plan__title-second">{{ reason }}</div>
+      <div class="plan__title-third">is Ready!</div>
+    </div>
+
+    <div class="plan__graph"></div>
+
+    <div class="plan__parameters">
+      <div class="plan__parameters-title">Based on your parameters</div>
+
+      <div class="plan__parameters-blocks">
+        <div class="plan__parameters-blocks__block">
+          <div class="block__circle stress"></div>
+
+          <div class="block__text">
+            <div class="block__text-title">Level of</div>
+            <div class="block__text-subtitle">Stress</div>
+          </div>
+        </div>
+
+        <div class="plan__parameters-blocks__block">
+          <div class="block__circle anxiety"></div>
+
+          <div class="block__text">
+            <div class="block__text-title">Level of</div>
+            <div class="block__text-subtitle">Anxiety</div>
+          </div>
+        </div>
+
+        <div class="plan__parameters-blocks__block">
+          <div class="block__circle frustration"></div>
+
+          <div class="block__text">
+            <div class="block__text-title">Level of</div>
+            <div class="block__text-subtitle">Frustration</div>
+          </div>
+        </div>
+
+        <div class="plan__parameters-blocks__block">
+          <div class="block__circle lack"></div>
+
+          <div class="block__text">
+            <div class="block__text-title">Level of</div>
+            <div class="block__text-subtitle">Lack of focus</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <KitButton defaultButton padding fixed green @click="next">
+      Get your first recommendations!
+    </KitButton>
+
+    <KitSheet class="plan__sheet" />
+  </div>
+</template>
+
+<script>
+import KitButton from "../Kit/KitButton.vue";
+
+export default {
+  name: "StepTwentySix",
+  components: { KitButton },
+
+  methods: {
+    next() {
+      this.$store.commit("nextPage");
+    }
+  },
+
+  computed: {
+    reason() {
+      return this.$store.getters.selectReason;
+    },
+  },
+
+  methods: {
+    next() {
+      this.$store.commit("nextPage")
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@property --progress-value {
+  syntax: "<integer>";
+  initial-value: 0;
+  inherits: false;
+}
+
+@keyframes progressStress {
+  to {
+    --progress-value: 50;
+  }
+}
+
+@keyframes progressAnxiety {
+  to {
+    --progress-value: 25;
+  }
+}
+
+@keyframes progressFrustration {
+  to {
+    --progress-value: 75;
+  }
+}
+
+@keyframes progressLack {
+  to {
+    --progress-value: 50;
+  }
+}
+
+
+.plan {
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__title {
+    text-align: center;
+
+    &-first {
+      font-family: "Poppins";
+      font-weight: 500;
+      font-size: 16px;
+    }
+
+    &-second {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 24px;
+      color: #b87057;
+    }
+
+    &-third {
+      font-family: "Noto Serif HK";
+      font-weight: 700;
+      font-size: 32px;
+      color: #14af68;
+    }
+  }
+
+  &__graph {
+    background-image: url("/images/graph.svg");
+    background-repeat: no-repeat;
+
+    width: 353px;
+    height: 233px;
+
+    margin-top: 22px;
+    animation: revealFromLeft 3s ease-out;
+    /* Настройте длительность и сглаживание по вашему вкусу */
+  }
+
+  &__parameters {
+    margin-top: 22px;
+
+    &-title {
+      font-family: "Noto Serif HK";
+      font-size: 20px;
+      font-weight: 700;
+      text-align: center;
+
+      color: #302823;
+    }
+
+    &-blocks {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      margin-top: 22px;
+
+      &__block {
+        padding: 12px;
+        border: 1.4px solid #f1e5da;
+        border-radius: 16px;
+
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        flex: 1;
+
+
+        .block {
+          &__circle {
+            width: 29px;
+            height: 29px;
+            border-radius: 50%;
+
+            background:
+              radial-gradient(closest-side, #FFF9EF 79%, transparent 80% 100%),
+              conic-gradient(#CE8C74 calc(var(--progress-value) * 1%), #ECDFD4 0);
+
+            &.stress {
+              animation: progressStress 2s 1 forwards;
+            }
+
+            &.anxiety {
+              animation: progressAnxiety 2s 1 forwards;
+            }
+
+            &.frustration {
+              animation: progressFrustration 2s 1 forwards;
+            }
+
+            &.lack {
+              animation: progressLack 2s 1 forwards;
+            }
+          }
+
+          &__text {
+            &-title {
+              font-family: "Poppins";
+              font-weight: 400;
+              font-size: 15px;
+
+              color: #988d85;
+            }
+
+            &-subtitle {
+              font-family: "Poppins";
+              font-weight: 500;
+              font-size: 15px;
+              color: #302823;
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &_sheet {
+    backdrop-filter: blur(5px);
+  }
+}
+
+@keyframes fadeInFromLeft {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes revealFromLeft {
+  from {
+    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 100%);
+  }
+
+  to {
+    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
+  }
+}
+</style>

components/Questions/StepTwentyThree.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="sympthoms">
+    <div class="sympthoms__title">
+      How often do you take time <br>for yourself and self-care?
+    </div>
+
+    <div class="sympthoms__buttons">
+      <KitButton
+        block
+        bigButton
+        notCenter
+        v-for="(button, index) in buttons"
+        :key="index"
+        @click="select"
+      >
+        {{ button }}
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentyThree",
+  components: { KitButton },
+
+  data() {
+    return {
+      buttons: [
+        "😀 Every day",
+        "🙂 Ocasionally",
+        "😐 Rarely",
+        "❌ Never",
+      ],
+
+      selectedButton: null,
+    };
+  },
+
+  methods: {
+    select(index) {
+      this.selectedButton = index;
+      this.$store.commit("nextPage");
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.sympthoms {
+  padding: 20px;
+  margin-top: 8px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>

components/Questions/StepTwentyTwo.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="sympthoms">
+    <div class="sympthoms__title">
+      How do you envision tapping <br>can affect your emotional<br> and physical wellness?
+    </div>
+
+    <div class="sympthoms__buttons">
+      <KitButton
+        block
+        bigButton
+        notCenter
+        v-for="(button, index) in buttons"
+        :key="index"
+        @click="select(index, button.theme, button.text)"
+      >
+       {{ button.emoji }} {{ button.theme }}
+      </KitButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import KitButton from '../Kit/KitButton.vue';
+
+export default {
+  name: "StepTwentyTwo",
+  components: { KitButton },
+
+  data() {
+    return {
+      buttons: [
+        {
+          emoji: "😀",
+          theme: "Feel better",
+          text: `Unlock the Power of EFT and Feel Better Today! Research indicates a significant improvement in emotional wellness among women who incorporate EFT into their routine, with a remarkable 90% reporting a more positive outlook.`
+        },
+        {
+          emoji: "⚡",
+          theme: "More energy",
+          text: `Energize Your Life with EFT! This scientifically-backed technique has been shown to elevate energy levels, providing a natural boost that revitalizes both mind and body for everyday challenges`
+        },
+        {
+          emoji: "🌿",
+          theme: "Soothe stress",
+          text: `Improve Your Sleep with EFT. By calming the mind and easing the nervous system, EFT helps pave the way for a deeper, more restorative slumber, as supported by sleep quality assessments.`
+        },
+        {
+          emoji: "🌙",
+          theme: "Improve sleep",
+          text: `Improve Your Sleep with EFT. By calming the mind and easing the nervous system, EFT helps pave the way for a deeper, more restorative slumber, as supported by sleep quality assessments.`
+        },
+        {
+          emoji: "⚖️",
+          theme: "Balance emotions",
+          text: `Energize Your Life with EFT! This scientifically-backed technique has been shown to elevate energy levels, providing a natural boost that revitalizes both mind and body for everyday challenges`
+        },
+        {
+          emoji: "🔄",
+          theme: "Restore balance",
+          text: `Restore Your Inner Balance with EFT. The methodical approach of EFT aligns with neurological principles, aiding in the reestablishment of emotional and energetic equilibrium for a more grounded existence.`
+        }
+      ],
+
+      selectedButton: null,
+    };
+  },
+
+  methods: {
+    select(index, theme, text) {
+      this.selectedButton = index;
+      this.$store.commit("nextPage");
+      this.$store.commit("setEft", { theme: theme, text: text });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.sympthoms {
+  padding: 20px;
+  margin-top: 8px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #302823;
+
+    text-align: center;
+  }
+
+  &__buttons {
+    margin-top: 32px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>

components/Questions/StepTwo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="second">
+    <div class="second__title">
+      What is your primary reason for trying tapping meditation?
+    </div>
+
+    <div class="second__body">
+      <Physical v-if="type === 'physical'" />
+      <Emotional v-if="type === 'emotional'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Physical from "./Physical.vue";
+import Emotional from "./Emotional.vue";
+
+export default {
+  name: "StepTwo",
+
+  computed: {
+    type() {
+      return this.$store.getters.selectType;
+    },
+  },
+
+  components: {
+    Physical,
+    Emotional,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.second {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+
+  padding: 20px;
+
+  &__title {
+    font-family: "Noto Serif HK";
+    font-weight: 700;
+    font-size: 24px;
+    text-align: center;
+    line-height: 28px;
+
+    max-width: 350px;
+  }
+}
+</style>

components/UIHeader.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="uiheader">
+    <div class="uiheader__top">
+      <div class="uiheader__top-wrapper">
+        <!-- <button type="button" class="uiheader__top-wrapper__prev" @click="$emit('goBack')" v-if="isBack || step !== '1'">
+          <img src="/icons/goback.svg" />
+        </button>
+
+        <div v-else style="width: 30px" /> -->
+
+        <div class="uiheader__top-wrapper__logo">
+          <img src="/icons/logo.svg" />
+          <div class="uiheader__top-wrapper__logo-text">
+            <p>Slowdive</p>
+            <span>Tapping Meditation</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="uiheader__count" v-if="step <= quizLength">
+        <span>{{ step }}</span>/{{ quizLength }}
+      </div>
+
+      <div class="uiheader__count" v-else></div>
+    </div>
+
+    <div class="uiheader__progress" v-if="step <= quizLength">
+      <div class="uiheader__progress-wrapper">
+        <div v-if="!noBorder" class="uiheader__progress-wrapper__line" :style="{ width: progress }" />
+      </div>
+    </div>
+
+    <div class="uiheader__line" v-else></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    progress: {
+      default: "100%",
+      type: String,
+    },
+
+    step: {
+      default: "1",
+      type: String,
+    },
+
+    noBorder: {
+      type: Boolean,
+      default: false,
+    },
+
+    isBack: {
+      type: Boolean,
+      default: true,
+    },
+
+    quizLength: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.uiheader {
+  margin-top: 10px;
+  width: 100%;
+  z-index: 10;
+  font-family: "Geometria";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #FFF9EF;
+
+  &__line {
+    background: #ECDFD4;
+    height: 3px;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  &__top {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0 20px;
+    gap: 133px;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      &__prev {
+        background: none;
+        border: none;
+        display: flex;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+
+        i {
+          font-size: 32px;
+          color: #8891aa;
+          line-height: 70%;
+        }
+      }
+
+      &__logo {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        gap: 12px;
+
+        img {
+          // width: 24px;
+          height: 28px;
+        }
+
+        &-text {
+          p {
+            margin: 0;
+            font-size: 15px;
+          }
+
+          span {
+            font-weight: 400;
+            line-height: 0.9;
+            font-size: 14px;
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  &__count {
+    display: flex;
+    align-items: center;
+
+    font-size: 20px;
+
+    span {
+      color: #D29881;
+    }
+  }
+
+  &__progress {
+    margin-top: 10px;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+
+    &-wrapper {
+      &__line {
+        display: flex;
+        align-items: center;
+        background: #CE8C74;
+        height: 2px;
+        border-radius: 10px;
+
+
+        &::after {
+          content: "";
+          position: absolute;
+          background: #ECDFD4;
+          width: 100%;
+          height: 3px;
+          z-index: -1;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

nuxt.config.js

@@ -0,0 +1,33 @@
+export default {
+  server: {
+    host: "0.0.0.0",
+  },
+
+  target: 'static',
+
+  head: {
+    link: [
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Serif+HK:wght@500;600;700&display=swap" },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" }
+    ],
+
+    meta: [
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    ]
+  },
+
+  plugins: [
+    { src: '~plugins/sheet.js', mode: "client" }
+  ],
+
+  components: [
+    '~/components',
+    '~/components/Kit',
+    '~/components/Last',
+    '~/components/Index',
+    '~/components/Questions'
+  ],
+
+  css: ["@/assets/scss/main.scss"],
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@webzlodimir/vue-bottom-sheet-vue2": "^0.0.9",
+    "normalize.css": "^8.0.1",
+    "nuxt": "^2.17.2",
+    "sass": "^1.42.1",
+    "sass-loader": "^10.2.0",
+    "vue-scrollto": "^2.20.0"
+  }
+}

pages/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="main">
+    <div class="main__wrapper">
+      <div class="main__wrapper-header">
+        <h1 class="main__wrapper-header__title">
+          Tapping will change your <br /><span>LIFE</span>
+        </h1>
+      </div>
+
+      <div class="main__wrapper-body">
+        <IndexLoader />
+      </div>
+
+      <div class="main__wrapper-footer">
+        <div class="main__wrapper-footer__text">
+          <div>
+            <span>3 250 000<span class="symbol">+</span></span>
+            <span class="text">people</span>
+          </div>
+          <h4>already use Slowdive EFT therapy</h4>
+        </div>
+
+        <div class="main__wrapper-footer__icons">
+          <div class="main__wrapper-footer__icons--appstore"></div>
+
+          <div class="main__wrapper-footer__icons--googleplay"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import IndexLoader from "../components/Index/IndexLoader.vue";
+
+export default {
+  components: {
+    IndexLoader,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.main {
+  display: flex;
+  justify-content: center;
+
+  &__wrapper {
+    padding: 20px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 27px;
+
+    &-header {
+      &__title {
+        font-size: 28px;
+        line-height: 28px;
+        font-family: "Noto Serif HK";
+        text-align: center;
+        color: #302823;
+
+        span {
+          font-weight: 700;
+          line-height: 48px;
+          font-size: 48px;
+          color: #ce8c74;
+        }
+      }
+    }
+
+    &-body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 27px;
+
+      &__text {
+        text-align: center;
+
+        font-size: 36px;
+
+        div {
+          span {
+            font-weight: 700;
+            font-size: 40px;
+            color: #ce8c74;
+            font-family: "Noto Serif HK";
+
+            .symbol {
+              font-size: 36px;
+            }
+          }
+
+          .text {
+            font-family: "Effra";
+            font-weight: 300;
+            color: #302823;
+          }
+        }
+
+        h4 {
+          font-family: "Poppins", sans-serif;
+          font-size: 16px;
+          margin-bottom: 0;
+        }
+      }
+
+      &__icons {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+
+        &--appstore {
+          background-image: url(/icons/Index/appstore.svg);
+          background-repeat: no-repeat;
+
+          width: 120px;
+          height: 32px;
+        }
+
+        &--googleplay {
+          background-image: url(/icons/Index/googleplay.svg);
+          background-repeat: no-repeat;
+
+          width: 120px;
+          height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/questions.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="questions">
+    <UIHeader :progress="currentQuiz" :step="String(step)" @goBack="back()" :quizLength="23" :isBack="false" />
+
+    <StepOne v-if="step == 1" />
+    <StepTwo v-if="step == 2" />
+    <StepThree v-if="step == 3" />
+    <StepFour v-if="step == 4" />
+    <StepFive v-if="step == 5" />
+    <StepSix v-if="step == 6" />
+    <StepSeven v-if="step == 7" />
+    <StepEight v-if="step == 8" />
+    <StepNinth v-if="step == 9" />
+    <StepTen v-if="step == 10" />
+    <StepEleven v-if="step == 11" />
+    <StepTwelve v-if="step == 12" />
+    <StepThirteen v-if="step == 13" />
+    <StepFourteen v-if="step == 14" />
+    <EmotionalTwo v-if="step == 15" />
+    <StepSixteen v-if="step == 16" />
+    <StepSeventeen v-if="step == 17" />
+    <StepEighteen v-if="step == 18" />
+    <StepNineteen v-if="step == 19" />
+    <StepTwenty v-if="step == 20" />
+    <StepTwentyOne v-if="step == 21" />
+    <StepTwentyTwo v-if="step == 22" />
+    <StepTwentyThree v-if="step == 23" />
+    <StepTwentyFour v-if="step == 24" />
+    <StepTwentyFive v-if="step == 25" />
+    <StepTwentySix v-if="step == 26" />
+    <StepTwentySeven v-if="step == 27" />
+    <StepTwentyEight v-if="step == 28" />
+    <StepTwentyNine v-if="step == 29" />
+    <StepThirty v-if="step == 30" />
+    <LastStep v-if="step == 31" />
+
+    <KitButton v-if="buttons.includes(step)" defaultButton padding fixed :background="buttonBackground == step"
+      :green="step == 24" @click="next">
+      Continue
+    </KitButton>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      buttonBackground: [3],
+      greenButtons: [24],
+      buttons: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 20, 21, 24],
+    };
+  },
+
+  computed: {
+    step() {
+      return this.$store.getters.selectStep;
+    },
+
+    currentQuiz() {
+      return `${(this.step / 23) * 100}%`;
+    },
+  },
+
+  methods: {
+    back() {
+      this.step -= 1;
+    },
+
+    next() {
+      this.$store.commit("nextPage");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.questions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-bottom: 120px;
+}
+</style>

plugins/sheet.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueBottomSheetVue2 from "@webzlodimir/vue-bottom-sheet-vue2";
+
+Vue.use(VueBottomSheetVue2)

static/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.8335 8.66663L6.50016 11.3333L13.1668 4.66663" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/icons/goback.svg

@@ -0,0 +1,5 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 20.64C0.5 16.5879 0.500558 13.585 0.731137 11.2259C0.960954 8.87471 1.41551 7.21634 2.29023 5.83799C3.19728 4.4087 4.4087 3.19728 5.83799 2.29023C7.21634 1.41551 8.87471 0.960954 11.2259 0.731137C13.585 0.500558 16.5879 0.5 20.64 0.5H23.36C27.4121 0.5 30.415 0.500558 32.7741 0.731137C35.1253 0.960954 36.7837 1.41551 38.162 2.29023C39.5913 3.19728 40.8027 4.4087 41.7098 5.83799C42.5845 7.21634 43.039 8.87471 43.2689 11.2259C43.4994 13.585 43.5 16.5879 43.5 20.64V23.36C43.5 27.4121 43.4994 30.415 43.2689 32.7741C43.039 35.1253 42.5845 36.7837 41.7098 38.162C40.8027 39.5913 39.5913 40.8027 38.162 41.7098C36.7837 42.5845 35.1253 43.039 32.7741 43.2689C30.415 43.4994 27.4121 43.5 23.36 43.5H20.64C16.5879 43.5 13.585 43.4994 11.2259 43.2689C8.87471 43.039 7.21634 42.5845 5.83799 41.7098C4.4087 40.8027 3.19728 39.5913 2.29023 38.162C1.41551 36.7837 0.960954 35.1253 0.731137 32.7741C0.500558 30.415 0.5 27.4121 0.5 23.36V20.64Z" fill="#FFF9EF"/>
+<path d="M0.5 20.64C0.5 16.5879 0.500558 13.585 0.731137 11.2259C0.960954 8.87471 1.41551 7.21634 2.29023 5.83799C3.19728 4.4087 4.4087 3.19728 5.83799 2.29023C7.21634 1.41551 8.87471 0.960954 11.2259 0.731137C13.585 0.500558 16.5879 0.5 20.64 0.5H23.36C27.4121 0.5 30.415 0.500558 32.7741 0.731137C35.1253 0.960954 36.7837 1.41551 38.162 2.29023C39.5913 3.19728 40.8027 4.4087 41.7098 5.83799C42.5845 7.21634 43.039 8.87471 43.2689 11.2259C43.4994 13.585 43.5 16.5879 43.5 20.64V23.36C43.5 27.4121 43.4994 30.415 43.2689 32.7741C43.039 35.1253 42.5845 36.7837 41.7098 38.162C40.8027 39.5913 39.5913 40.8027 38.162 41.7098C36.7837 42.5845 35.1253 43.039 32.7741 43.2689C30.415 43.4994 27.4121 43.5 23.36 43.5H20.64C16.5879 43.5 13.585 43.4994 11.2259 43.2689C8.87471 43.039 7.21634 42.5845 5.83799 41.7098C4.4087 40.8027 3.19728 39.5913 2.29023 38.162C1.41551 36.7837 0.960954 35.1253 0.731137 32.7741C0.500558 30.415 0.5 27.4121 0.5 23.36V20.64Z" stroke="#E3D5CA"/>
+<path d="M25 29L18 22L25 15" stroke="#302823" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/icons/index/appstore.svg

@@ -0,0 +1,12 @@
+<svg width="121" height="32" viewBox="0 0 121 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5221 14.8695C19.4903 11.3371 22.4177 9.61852 22.5516 9.53852C20.8937 7.12402 18.3239 6.79412 17.4208 6.76782C15.2625 6.54095 13.169 8.05782 12.0695 8.05782C10.9481 8.05782 9.25509 6.78974 7.43036 6.827C5.08223 6.86317 2.88553 8.22112 1.68075 10.3298C-0.805626 14.6295 1.04873 20.9479 3.43087 24.4233C4.62249 26.1254 6.0149 28.0259 7.83744 27.959C9.62047 27.8856 10.2865 26.8236 12.4382 26.8236C14.5702 26.8236 15.1956 27.959 17.0544 27.9163C18.968 27.8856 20.1728 26.2065 21.3227 24.4891C22.6997 22.5382 23.2527 20.6169 23.2747 20.5183C23.2297 20.5029 19.5583 19.1033 19.5221 14.8695Z" fill="#302823"/>
+<path d="M16.0106 4.48156C16.9696 3.28363 17.6258 1.65387 17.4437 0C16.0556 0.0613762 14.3198 0.959003 13.3202 2.13063C12.4358 3.16307 11.6458 4.85529 11.8499 6.44669C13.4091 6.56287 15.0099 5.66086 16.0106 4.48156Z" fill="#302823"/>
+<path d="M45.3257 22.7994H42.8338L41.4688 18.5151H36.7243L35.4241 22.7994H32.998L37.6987 8.21375H40.602L45.3257 22.7994ZM41.0574 16.7176L39.823 12.909C39.6924 12.5199 39.4477 11.6037 39.0867 10.1613H39.0428C38.8991 10.7817 38.6676 11.6979 38.3493 12.909L37.1369 16.7176H41.0574Z" fill="#302823"/>
+<path d="M57.4141 17.4114C57.4141 19.2 56.9302 20.6139 55.9625 21.6518C55.0956 22.5757 54.0192 23.0372 52.7343 23.0372C51.3474 23.0372 50.3511 22.5396 49.7443 21.5444H49.7004V27.0847H47.3611V15.7443C47.3611 14.6198 47.3315 13.4658 47.2744 12.2821H49.3318L49.4623 13.9491H49.5062C50.2864 12.6931 51.4703 12.0662 53.0591 12.0662C54.3012 12.0662 55.3381 12.5561 56.1677 13.537C56.9994 14.519 57.4141 15.8101 57.4141 17.4114ZM55.0309 17.4969C55.0309 16.4732 54.8005 15.6293 54.3374 14.9651C53.8316 14.2724 53.1524 13.9261 52.3009 13.9261C51.7238 13.9261 51.1993 14.119 50.7308 14.4993C50.2611 14.8829 49.9539 15.3838 49.8102 16.0041C49.7377 16.2934 49.7015 16.5302 49.7015 16.7165V18.4701C49.7015 19.2351 49.9364 19.8807 50.406 20.4078C50.8756 20.935 51.4857 21.1981 52.2362 21.1981C53.1173 21.1981 53.8031 20.8583 54.2935 20.181C54.7851 19.5025 55.0309 18.6082 55.0309 17.4969Z" fill="#302823"/>
+<path d="M69.5244 17.4114C69.5244 19.2 69.0405 20.6139 68.0716 21.6518C67.2059 22.5757 66.1295 23.0372 64.8446 23.0372C63.4576 23.0372 62.4613 22.5396 61.8557 21.5444H61.8118V27.0847H59.4724V15.7443C59.4724 14.6198 59.4428 13.4658 59.3857 12.2821H61.4431L61.5737 13.9491H61.6176C62.3966 12.6931 63.5805 12.0662 65.1705 12.0662C66.4115 12.0662 67.4484 12.5561 68.2801 13.537C69.1085 14.519 69.5244 15.8101 69.5244 17.4114ZM67.1411 17.4969C67.1411 16.4732 66.9096 15.6293 66.4466 14.9651C65.9407 14.2724 65.2637 13.9261 64.4112 13.9261C63.8329 13.9261 63.3095 14.119 62.8399 14.4993C62.3703 14.8829 62.0641 15.3838 61.9204 16.0041C61.8491 16.2934 61.8118 16.5302 61.8118 16.7165V18.4701C61.8118 19.2351 62.0466 19.8807 62.514 20.4078C62.9836 20.9339 63.5937 21.1981 64.3464 21.1981C65.2275 21.1981 65.9133 20.8583 66.4038 20.181C66.8953 19.5025 67.1411 18.6082 67.1411 17.4969Z" fill="#302823"/>
+<path d="M83.0648 18.709C83.0648 19.9497 82.6336 20.9591 81.7678 21.7384C80.8165 22.59 79.4921 23.0152 77.7903 23.0152C76.219 23.0152 74.9594 22.7128 74.0059 22.1067L74.5479 20.1591C75.5749 20.7794 76.7018 21.0907 77.9296 21.0907C78.8107 21.0907 79.4965 20.8912 79.9892 20.4944C80.4797 20.0977 80.7243 19.565 80.7243 18.9009C80.7243 18.309 80.5224 17.8103 80.1176 17.4059C79.7149 17.0015 79.0423 16.6255 78.103 16.2781C75.5464 15.3257 74.2692 13.9305 74.2692 12.0958C74.2692 10.8967 74.7169 9.91362 75.6133 9.14861C76.5065 8.38251 77.6981 8 79.1882 8C80.517 8 81.6208 8.23126 82.5019 8.69267L81.9171 10.5975C81.0941 10.1504 80.1636 9.92678 79.1224 9.92678C78.2994 9.92678 77.6564 10.1295 77.1956 10.5329C76.8061 10.8935 76.6107 11.3329 76.6107 11.8535C76.6107 12.43 76.8335 12.9068 77.2812 13.2816C77.6707 13.628 78.3784 14.0028 79.4054 14.4072C80.6618 14.9125 81.5846 15.5032 82.1782 16.1806C82.7696 16.8557 83.0648 17.7007 83.0648 18.709Z" fill="#302823"/>
+<path d="M90.7991 14.0357H88.2205V19.142C88.2205 20.4408 88.6748 21.0896 89.5855 21.0896C90.0036 21.0896 90.3503 21.0534 90.6246 20.9811L90.6893 22.7555C90.2285 22.9276 89.6217 23.0142 88.8701 23.0142C87.9462 23.0142 87.2242 22.7325 86.703 22.1702C86.184 21.6069 85.9229 20.6621 85.9229 19.3349V14.0335H84.3867V12.2799H85.9229V10.3542L88.2205 9.66156V12.2799H90.7991V14.0357Z" fill="#302823"/>
+<path d="M102.433 17.4541C102.433 19.0707 101.97 20.398 101.046 21.4359C100.077 22.5045 98.7914 23.0372 97.1883 23.0372C95.6434 23.0372 94.4134 22.5253 93.4961 21.5017C92.5788 20.478 92.1201 19.1858 92.1201 17.6284C92.1201 15.9986 92.5919 14.6637 93.5389 13.6258C94.4836 12.5868 95.7586 12.0673 97.3617 12.0673C98.9066 12.0673 100.15 12.5791 101.088 13.6039C101.986 14.5979 102.433 15.8814 102.433 17.4541ZM100.006 17.5297C100.006 16.5598 99.7987 15.7279 99.3784 15.0341C98.888 14.1946 98.1868 13.7759 97.2783 13.7759C96.338 13.7759 95.6236 14.1957 95.1332 15.0341C94.7129 15.729 94.5055 16.574 94.5055 17.5736C94.5055 18.5435 94.7129 19.3754 95.1332 20.0681C95.639 20.9076 96.3456 21.3263 97.2575 21.3263C98.1506 21.3263 98.8518 20.8989 99.3576 20.0462C99.7888 19.3392 100.006 18.4986 100.006 17.5297Z" fill="#302823"/>
+<path d="M110.038 14.3371C109.806 14.2943 109.559 14.2724 109.3 14.2724C108.477 14.2724 107.841 14.5826 107.393 15.204C107.004 15.752 106.808 16.4447 106.808 17.2809V22.7993H104.47L104.492 15.5942C104.492 14.382 104.462 13.2783 104.404 12.2832H106.442L106.527 14.2954H106.592C106.839 13.6039 107.229 13.0471 107.762 12.6295C108.283 12.2536 108.846 12.0662 109.453 12.0662C109.669 12.0662 109.864 12.0815 110.038 12.1089V14.3371Z" fill="#302823"/>
+<path d="M120.5 17.0431C120.5 17.4618 120.473 17.8147 120.414 18.103H113.396C113.424 19.142 113.763 19.9366 114.415 20.4846C115.006 20.9745 115.771 21.22 116.71 21.22C117.749 21.22 118.697 21.0545 119.55 20.7224L119.916 22.3445C118.92 22.7785 117.744 22.9944 116.386 22.9944C114.754 22.9944 113.472 22.5144 112.539 21.5554C111.609 20.5964 111.143 19.3086 111.143 17.6931C111.143 16.1071 111.576 14.7865 112.444 13.7332C113.352 12.6087 114.58 12.0464 116.125 12.0464C117.643 12.0464 118.792 12.6087 119.572 13.7332C120.189 14.6264 120.5 15.7312 120.5 17.0431ZM118.269 16.437C118.285 15.7444 118.132 15.1459 117.815 14.6407C117.41 13.9908 116.788 13.6663 115.951 13.6663C115.186 13.6663 114.564 13.9831 114.089 14.6188C113.699 15.124 113.468 15.7301 113.396 16.4359L118.269 16.437Z" fill="#302823"/>
+</svg>

static/icons/index/googleplay.svg

@@ -0,0 +1,37 @@
+<svg width="121" height="32" viewBox="0 0 121 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.8735 13.8653C58.3891 13.8653 56.4223 15.7286 56.4223 18.3166C56.4223 20.801 58.3891 22.7678 60.8735 22.7678C63.3579 22.7678 65.3248 20.9045 65.3248 18.3166C65.3248 15.6251 63.3579 13.8653 60.8735 13.8653ZM60.8735 20.9045C59.5278 20.9045 58.3891 19.7658 58.3891 18.213C58.3891 16.6603 59.5278 15.5216 60.8735 15.5216C62.2192 15.5216 63.3579 16.5568 63.3579 18.213C63.3579 19.7658 62.2192 20.9045 60.8735 20.9045ZM51.2464 13.8653C48.762 13.8653 46.7952 15.7286 46.7952 18.3166C46.7952 20.801 48.762 22.7678 51.2464 22.7678C53.7308 22.7678 55.6976 20.9045 55.6976 18.3166C55.6976 15.6251 53.7308 13.8653 51.2464 13.8653ZM51.2464 20.9045C49.9007 20.9045 48.762 19.7658 48.762 18.213C48.762 16.6603 49.9007 15.5216 51.2464 15.5216C52.5921 15.5216 53.7308 16.5568 53.7308 18.213C53.7308 19.7658 52.5921 20.9045 51.2464 20.9045ZM39.756 15.211V17.0744H44.2072C44.1037 18.1095 43.6896 18.9377 43.172 19.4552C42.5509 20.0764 41.5158 20.801 39.756 20.801C36.961 20.801 34.8907 18.6271 34.8907 15.8321C34.8907 13.0372 37.0645 10.8633 39.756 10.8633C41.2052 10.8633 42.3439 11.4844 43.172 12.209L44.5178 10.8633C43.3791 9.82814 41.9298 9 39.8595 9C36.1329 9 32.9238 12.1055 32.9238 15.8321C32.9238 19.5588 36.1329 22.6643 39.8595 22.6643C41.9298 22.6643 43.3791 22.0432 44.6213 20.6975C45.8635 19.4552 46.2776 17.6955 46.2776 16.3497C46.2776 15.9357 46.2776 15.5216 46.174 15.211H39.756ZM86.7528 16.6603C86.3388 15.6251 85.3036 13.8653 83.0262 13.8653C80.7488 13.8653 78.8855 15.6251 78.8855 18.3166C78.8855 20.801 80.7488 22.7678 83.2332 22.7678C85.2001 22.7678 86.4423 21.5256 86.8563 20.801L85.4071 19.7658C84.8895 20.4904 84.2684 21.008 83.2332 21.008C82.1981 21.008 81.577 20.5939 81.0594 19.6623L86.9599 17.1779L86.7528 16.6603ZM80.7488 18.1095C80.7488 16.4532 82.0946 15.5216 83.0262 15.5216C83.7508 15.5216 84.4755 15.9357 84.6825 16.4532L80.7488 18.1095ZM75.8835 22.3537H77.8503V9.41407H75.8835V22.3537ZM72.778 14.797C72.2604 14.2794 71.4323 13.7618 70.3971 13.7618C68.2232 13.7618 66.1529 15.7286 66.1529 18.213C66.1529 20.6975 68.1197 22.5608 70.3971 22.5608C71.4323 22.5608 72.2604 22.0432 72.6745 21.5256H72.778V22.1467C72.778 23.803 71.8463 24.7346 70.3971 24.7346C69.2584 24.7346 68.4303 23.9065 68.2232 23.1819L66.567 23.9065C67.0845 25.0452 68.3268 26.4944 70.5006 26.4944C72.778 26.4944 74.6413 25.1487 74.6413 21.9397V14.0723H72.778V14.797ZM70.5006 20.9045C69.1549 20.9045 68.0162 19.7658 68.0162 18.213C68.0162 16.6603 69.1549 15.5216 70.5006 15.5216C71.8463 15.5216 72.8815 16.6603 72.8815 18.213C72.8815 19.7658 71.8463 20.9045 70.5006 20.9045ZM95.7588 9.41407H91.1006V22.3537H93.0674V17.4884H95.7588C97.9327 17.4884 100.003 15.9357 100.003 13.4512C100.003 10.9668 97.9327 9.41407 95.7588 9.41407ZM95.8624 15.6251H93.0674V11.1739H95.8624C97.3116 11.1739 98.1397 12.4161 98.1397 13.3477C98.0362 14.4864 97.2081 15.6251 95.8624 15.6251ZM107.767 13.7618C106.318 13.7618 104.868 14.3829 104.351 15.7286L106.111 16.4532C106.525 15.7286 107.146 15.5216 107.87 15.5216C108.906 15.5216 109.837 16.1427 109.941 17.1779V17.2814C109.63 17.0744 108.802 16.7638 107.974 16.7638C106.111 16.7638 104.247 17.799 104.247 19.6623C104.247 21.4221 105.8 22.5608 107.456 22.5608C108.802 22.5608 109.423 21.9397 109.941 21.3186H110.044V22.3537H111.908V17.3849C111.701 15.1075 109.941 13.7618 107.767 13.7618ZM107.56 20.9045C106.939 20.9045 106.007 20.5939 106.007 19.7658C106.007 18.7306 107.146 18.4201 108.077 18.4201C108.906 18.4201 109.32 18.6271 109.837 18.8341C109.63 20.0764 108.595 20.9045 107.56 20.9045ZM118.429 14.0723L116.255 19.6623H116.152L113.874 14.0723H111.804L115.22 21.9397L113.253 26.2874H115.22L120.499 14.0723H118.429ZM101.038 22.3537H103.005V9.41407H101.038V22.3537Z" fill="#302823"/>
+<path d="M1.14454 2.92365C0.833986 3.2342 0.730469 3.75178 0.730469 4.37289V27.2502C0.730469 27.8713 0.937503 28.3889 1.24806 28.6995L1.35157 28.803L14.1877 15.9668V15.7598L1.14454 2.92365Z" fill="url(#paint0_linear_116_7580)"/>
+<path d="M18.3282 20.3146L14.084 16.0704V15.7598L18.3282 11.5156L18.4317 11.6191L23.5041 14.5176C24.9533 15.3458 24.9533 16.6915 23.5041 17.5196L18.3282 20.3146Z" fill="url(#paint1_linear_116_7580)"/>
+<path d="M18.4319 20.2111L14.0842 15.8634L1.14453 28.8031C1.66212 29.3207 2.38674 29.3207 3.3184 28.9066L18.4319 20.2111Z" fill="url(#paint2_linear_116_7580)"/>
+<path d="M18.4319 11.5157L3.3184 2.92372C2.38674 2.40614 1.66212 2.50965 1.14453 3.02724L14.0842 15.8634L18.4319 11.5157Z" fill="url(#paint3_linear_116_7580)"/>
+<path opacity="0.2" d="M18.3284 20.1076L3.3184 28.596C2.49026 29.1136 1.76564 29.0101 1.24805 28.596L1.14453 28.6995L1.24805 28.8031C1.76564 29.2171 2.49026 29.3206 3.3184 28.8031L18.3284 20.1076Z" fill="#534E4A"/>
+<path opacity="0.12" d="M1.14454 28.596C0.833986 28.2855 0.730469 27.7679 0.730469 27.1468V27.2503C0.730469 27.8714 0.937503 28.389 1.24806 28.6996V28.596H1.14454ZM23.5043 17.2091L18.3284 20.1076L18.4319 20.2111L23.5043 17.3126C24.2289 16.8986 24.5395 16.381 24.5395 15.8634C24.5395 16.381 24.1254 16.7951 23.5043 17.2091Z" fill="#534E4A"/>
+<path opacity="0.25" d="M3.3184 3.02721L23.5043 14.5176C24.1254 14.9317 24.5395 15.3458 24.5395 15.8634C24.5395 15.3458 24.2289 14.8282 23.5043 14.4141L3.3184 2.92369C1.86916 2.09555 0.730469 2.71666 0.730469 4.37293V4.47645C0.730469 2.92369 1.86916 2.19907 3.3184 3.02721Z" fill="#302823"/>
+<defs>
+<linearGradient id="paint0_linear_116_7580" x1="12.9455" y1="4.1762" x2="-4.4278" y2="21.5485" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A0FF"/>
+<stop offset="0.007" stop-color="#00A1FF"/>
+<stop offset="0.26" stop-color="#00BEFF"/>
+<stop offset="0.512" stop-color="#00D2FF"/>
+<stop offset="0.76" stop-color="#00DFFF"/>
+<stop offset="1" stop-color="#00E3FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_116_7580" x1="25.4026" y1="15.8644" x2="0.354482" y2="15.8644" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE000"/>
+<stop offset="0.409" stop-color="#FFBD00"/>
+<stop offset="0.775" stop-color="#FFA500"/>
+<stop offset="1" stop-color="#FF9C00"/>
+</linearGradient>
+<linearGradient id="paint2_linear_116_7580" x1="16.079" y1="18.2402" x2="-7.4795" y2="41.7986" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3A44"/>
+<stop offset="1" stop-color="#C31162"/>
+</linearGradient>
+<linearGradient id="paint3_linear_116_7580" x1="-2.06761" y1="-4.65789" x2="8.45286" y2="5.86258" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32A071"/>
+<stop offset="0.069" stop-color="#2DA771"/>
+<stop offset="0.476" stop-color="#15CF74"/>
+<stop offset="0.801" stop-color="#06E775"/>
+<stop offset="1" stop-color="#00F076"/>
+</linearGradient>
+</defs>
+</svg>

static/icons/info.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.99933C0 4.48033 4.48 -0.000671387 10 -0.000671387C15.53 -0.000671387 20 4.48033 20 9.99933C20 15.5203 15.53 19.9993 10 19.9993C4.48 19.9993 0 15.5203 0 9.99933ZM9.12 6.20933C9.12 5.73033 9.52 5.32933 10 5.32933C10.48 5.32933 10.87 5.73033 10.87 6.20933V10.6293C10.87 11.1103 10.48 11.4993 10 11.4993C9.52 11.4993 9.12 11.1103 9.12 10.6293V6.20933ZM10.01 14.6803C9.52 14.6803 9.13 14.2803 9.13 13.8003C9.13 13.3203 9.52 12.9303 10 12.9303C10.49 12.9303 10.88 13.3203 10.88 13.8003C10.88 14.2803 10.49 14.6803 10.01 14.6803Z" fill="#F8B432"/>
+</svg>

static/icons/mark.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 13.8245C0 7.89969 4.14508 2.63323 10.2332 0L10.9456 1.51411C6.54145 4.01567 4.08031 6.91223 2.91451 11.9154L2.59067 8.62382L7.05958 11.8495C9.26166 13.4295 9.71502 14.9436 9.71502 16.5893C9.71502 19.2226 7.57772 21 5.31088 21C3.69171 21 2.52591 20.2759 1.68394 19.6176C0.518135 17.906 0 15.7994 0 13.8245ZM13.9896 13.8245C13.9896 7.89969 18.1347 2.63323 24.2228 0L25 1.51411C20.5959 4.01567 18.1347 6.91223 16.9041 11.9154L16.6451 8.62382L21.114 11.8495C23.2513 13.4295 23.7694 14.9436 23.7694 16.5893C23.7694 19.2226 21.6969 21 19.3653 21C17.7461 21 16.5803 20.2759 15.7383 19.6176C14.5725 17.906 13.9896 15.7994 13.9896 13.8245Z" fill="#E1AE9A"/>
+</svg>

static/icons/person.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9113 6.0759C14.9113 8.52342 12.9489 10.4859 10.4997 10.4859C8.05126 10.4859 6.08802 8.52342 6.08802 6.0759C6.08802 3.62837 8.05126 1.66669 10.4997 1.66669C12.9489 1.66669 14.9113 3.62837 14.9113 6.0759Z" fill="#B2A59D"/>
+<path d="M10.4997 18.3334C6.88499 18.3334 3.83301 17.7458 3.83301 15.4792C3.83301 13.2116 6.90416 12.645 10.4997 12.645C14.1152 12.645 17.1663 13.2325 17.1663 15.4992C17.1663 17.7667 14.0952 18.3334 10.4997 18.3334Z" fill="#B2A59D"/>
+</svg>

static/icons/star_icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.932 11.9334C14.7162 12.1426 14.617 12.4451 14.6662 12.7418L15.407 16.8418C15.4695 17.1893 15.3228 17.5409 15.032 17.7418C14.747 17.9501 14.3678 17.9751 14.057 17.8084L10.3662 15.8834C10.2378 15.8151 10.0953 15.7784 9.94949 15.7743H9.72366C9.64532 15.7859 9.56866 15.8109 9.49866 15.8493L5.80699 17.7834C5.62449 17.8751 5.41782 17.9076 5.21532 17.8751C4.72199 17.7818 4.39282 17.3118 4.47366 16.8159L5.21532 12.7159C5.26449 12.4168 5.16532 12.1126 4.94949 11.9001L1.94032 8.98343C1.68866 8.73927 1.60116 8.3726 1.71616 8.04177C1.82782 7.71177 2.11282 7.47093 2.45699 7.41677L6.59866 6.81593C6.91366 6.78343 7.19032 6.59177 7.33199 6.30843L9.15699 2.56677C9.20032 2.48344 9.25616 2.40677 9.32366 2.34177L9.39866 2.28344C9.43782 2.2401 9.48282 2.20427 9.53282 2.1751L9.62366 2.14177L9.76532 2.08344H10.1162C10.4295 2.11594 10.7053 2.30344 10.8495 2.58344L12.6987 6.30843C12.832 6.58094 13.0912 6.7701 13.3903 6.81593L17.532 7.41677C17.882 7.46677 18.1745 7.70844 18.2903 8.04177C18.3995 8.37594 18.3053 8.7426 18.0487 8.98343L14.932 11.9334Z" fill="#F8B432"/>
+</svg>