initial

apps/client/pages/verification/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <form
+    class="verification"
+    @submit="onSubmit"
+  >
+    <UiButton
+      icon="chevron-left"
+      color="secondary"
+      type="link"
+      class="mb-8"
+      :href="step === 0 ? '/verification/status' : ''"
+      @click="step--"
+    >
+      {{ $t('back') }}
+    </UiButton>
+
+    <h1 class="mb-40">
+      Identity verification
+    </h1>
+
+    <!--    TODO: бырбырбыр -->
+    <Stepper
+      :step="step"
+      :items="[
+        'Personal <br> information',
+        'Identity <br> verification',
+        'Organization <br> data',
+      ]"
+    />
+
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div v-if="step === 0" class="mt-40">
+        <UiInput
+          id="name"
+          label="Name"
+          class="mb-10"
+          rules="required"
+        />
+        <UiInput
+          id="surname"
+          label="Surname"
+          class="mb-10"
+          rules="required"
+        />
+        <UiInput
+          id="patronymic"
+          label="Patronymic (optional)"
+          class="mb-28"
+        />
+        <UiInput
+          id="bday"
+          label="Date of birth"
+          class="mb-10"
+          rules="required"
+        />
+        <UiSelect
+          id="region"
+          class="w-100"
+          label="Country / Region of residence"
+          placeholder="Choose an option"
+          :options="['Россия', 'священная', 'наша', 'держава']"
+        />
+
+        <UiButton
+          class="w-100 mt-40"
+          size="large"
+          @click="step++"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+
+      <div v-else-if="step === 1" class="mt-40">
+        <UiAlert class="mb-40">
+          Upload a photo of the <strong> front </strong> and <strong> back </strong> of your document
+        </UiAlert>
+
+        <VerificationWeAccept
+          class="mb-40"
+          :list="[{ title: 'Identity document', underTitle: '(For example: passport, residence permit, driver\'s license.)' }]"
+        />
+
+        <!--        TODO: zaglushka -->
+        <div class="zaglushka" />
+
+        <UiButton
+          class="w-100 mt-40"
+          size="large"
+          @click="step++"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+
+      <div v-else-if="step === 2" class="mt-22">
+        <UiAlert class="mb-24">
+          Upload the documents for the right to conduct commercial activities
+        </UiAlert>
+
+        <VerificationWeAccept
+          class="mb-24"
+          :list="[
+            { title: 'Company registration documents.' },
+            { title: 'License to trade.' },
+            { title: 'Documents on the identity of the individual to the organization,', underTitle: '(power of attorney, inheritance, donation, sub-sponsorship)' },
+          ]"
+        />
+
+        <!--        TODO: zaglushka -->
+        <div class="zaglushka" />
+
+        <UiButton
+          class="w-100 mt-24"
+          size="large"
+          href="/verification/processing"
+        >
+          {{ $t('next') }}
+        </UiButton>
+      </div>
+    </Transition>
+  </form>
+</template>
+
+<script setup>
+import { useForm } from 'vee-validate'
+
+definePageMeta({
+  middleware: ['auth'],
+  centerContent: true,
+})
+
+const { handleSubmit, isSubmitting } = useForm()
+
+const step = ref(0)
+
+const onSubmit = handleSubmit(async (values) => {
+  console.log(values)
+  navigateTo('/projects')
+})
+</script>
+
+<style lang="scss">
+.verification {
+  margin: 0 auto;
+  width: 500px;
+}
+
+.zaglushka {
+  height: 143px;
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px dashed var(--grey-grey-400, #A7B9D5);
+  background: var(--grey-grey-100, #F4F6FF);
+}
+</style>

apps/client/pages/verification/processing.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="verification-processing">
+    <h1 class="mb-56">
+      We process your data
+    </h1>
+
+    <UiAlert
+      size="large"
+      class="mb-40"
+    >
+      The verification status of your documents will be displayed here. It usually takes 1-2 business days.
+      <br> <br>
+      Also, at the end of the verification, we will send a notification
+      to the mail john@gmail.com
+    </UiAlert>
+
+    <UiButton
+      size="large"
+      class="w-100"
+      href="/projects"
+    >
+      {{ $t('to_main') }}
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth'],
+  centerContent: true,
+});
+</script>
+
+<style lang="scss">
+.verification-processing{
+  margin: 0 auto;
+  width: 513px;
+}
+</style>

apps/client/pages/verification/status.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="verification-status">
+    <UiButton
+      icon="chevron-left"
+      color="secondary"
+      type="link"
+      class="mb-8"
+      href="/projects"
+    >
+      {{ $t('to_main') }}
+    </UiButton>
+
+    <h1 class="mb-32">
+      Identity verification
+    </h1>
+
+    <div class="verification-cards">
+      <VerificationBaseCard
+        passed
+        :info="{ perMonth: '10 000 USD', perDay: '1 000 USD' }"
+        :badge="{ type: 'marketing', title: 'Basic' }"
+      >
+        <VerificationBasic />
+      </VerificationBaseCard>
+
+      <VerificationBaseCard
+        :badge="{ type: 'extended', title: 'Extended' }"
+        link="/verification"
+      >
+        <VerificationExtended />
+      </VerificationBaseCard>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  // middleware: ['auth'],
+  centerContent: true,
+})
+</script>
+
+<style lang="scss">
+.verification-status {
+  margin: 0 auto;
+  width: 834px;
+}
+
+.verification-cards {
+  display: flex;
+  gap: 24px;
+}
+</style>