initial

apps/client/components/verification/base-card.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    class="verification-card"
+    :class="{
+      'verification-card--passed': passed,
+    }"
+  >
+    <div class="verification-card__header">
+      <UiBadge
+        v-if="badge"
+        :type="badge.type"
+        class="mb-24"
+      >
+        {{ badge.title }}
+      </UiBadge>
+
+      <p class="verification-card-info__title">
+        Withdrawal
+      </p>
+
+      <div
+        v-if="info"
+        class="verification-card-info"
+      >
+        <div>
+          <span class="verification-card-info__per-month-amount">
+            {{ info.perMonth }}
+          </span>
+
+          <span class="verification-card-info__per-month-text"> / month </span>
+        </div>
+
+        <div class="mt-4">
+          <span class="verification-card-info__per-day-amount">
+            {{ info.perDay }}
+          </span>
+
+          <span class="verification-card-info__per-day-text"> / day </span>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="verification-card-info"
+      >
+        <span class="verification-card-info__per-month-amount">
+          No limit
+        </span>
+
+        <span class="verification-card-info__per-month-text"> / month & day </span>
+      </div>
+    </div>
+
+    <div class="verification-card-body">
+      <slot />
+    </div>
+
+    <div class="verification-card__action">
+      <UiAlert
+        v-if="passed"
+        type="positive"
+        text="Your current status"
+      />
+
+      <UiButton
+        v-else
+        class="w-100"
+        size="large"
+        :href="link"
+      >
+        Start verification
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  passed: {
+    type: Boolean,
+    default: false,
+  },
+  badge: {
+    type: Object,
+    required: true,
+  },
+  info: {
+    type: Object,
+    default: null,
+  },
+  link: {
+    type: String,
+    default: '#',
+  },
+})
+</script>
+
+<style lang="scss">
+.verification-card {
+  $self: &;
+  display: flex;
+  flex-direction: column;
+
+  width: var(--verification-card-width, 405px);
+  //height: 585px;
+  padding: 24px;
+  border-radius: 12px;
+  background-color: $clr-grey-200;
+
+  &__header {
+    height: 157px;
+    border-bottom: 1px solid $clr-grey-400;
+    margin-bottom: 16px;
+  }
+
+  &__action {
+    margin-top: auto;
+  }
+
+  &--passed {
+    background-color: $clr-white;
+    outline: $clr-green-500 solid 2px;
+    outline-offset: -2px;
+
+    .verification-card__title {
+      color: $clr-black;
+    }
+  }
+}
+
+.verification-card-info {
+  &__per-month-amount {
+    @include h2;
+  }
+
+  &__per-month-text {
+    @include txt-l-sb;
+    color: $clr-grey-400;
+  }
+
+  &__per-day-amount {
+    @include txt-l-sb;
+  }
+
+  &__per-day-text {
+    @include txt-l-sb;
+    color: $clr-grey-400;
+  }
+
+  &__title {
+    @include txt-l-m;
+    color: $clr-grey-500;
+    margin-bottom: 4px;
+  }
+}
+
+.verification-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+</style>

apps/client/components/verification/basic.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div
+      v-for="block in propertyBlocks"
+      :key="block.title"
+      class="elements"
+    >
+      <span class="title">
+        {{ block.title }}
+      </span>
+
+      <h5 class="text-clr-grey-500">
+        {{ block.underTitle }}
+      </h5>
+
+      <VerificationProperty
+        v-for="property in block.properties"
+        :key="property.title"
+        :title="property.title"
+        :text="property.text"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const propertyBlocks=[
+  {
+  title: 'Restrictions',
+  underTitle: 'Invoices',
+   properties:[
+  {title:'Minimum amount in the invoice is', text:' 5 USDT'},
+  {title:'Commission for creating an invoice is', text:'0.5 USDT'},
+  {title:'Limit for creating invoices is', text:'200 per day, 1000 per month'},
+]},
+{
+  underTitle: 'Withdrawal of funds',
+      properties:[
+  {title:'Minimum withdrawal amount is', text:'5 USDT'},
+  {title:'Commission for withdrawal is', text:'2.5 USDT + 1%'}
+]},
+]
+</script>
+
+<style lang="scss" scoped>
+  .elements {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .title{
+    @include txt-m-b;
+  }
+</style>

apps/client/components/verification/extended.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="elements mb-16">
+      <span class="requirements"> Requirements </span>
+
+      <div>
+        <UiIconSSocialCard class="mr-4 text-clr-grey-400 d-inline-block" />
+        <span class="text"> Organization data </span>
+      </div>
+
+      <div>
+        <UiIconSExcursion class="mr-4 text-clr-grey-400" />
+        <span class="text">Identity verification </span>
+      </div>
+    </div>
+
+    <div
+      v-for="block in propertyBlocks"
+      :key="block.title"
+      class="elements"
+    >
+      <span class="title">
+        {{ block.title }}
+      </span>
+
+      <h5 class="text-clr-grey-500">
+        {{ block.underTitle }}
+      </h5>
+
+      <VerificationProperty
+        v-for="property in block.properties"
+        :key="property.title"
+        :title="property.title"
+        :text="property.text"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const propertyBlocks = [
+  {
+    title: 'Restrictions',
+    underTitle: 'Invoices',
+    properties: [
+      { title: 'Invoice creation', text: 'unlimited' },
+      { title: 'Commission for creating an invoice is', text: '0.5 USDT' },
+    ],
+  },
+  {
+    underTitle: 'Withdrawal of funds',
+    properties: [
+      { title: 'Commission for withdrawal is', text: '2.5 USDT + 1%' },
+    ],
+  },
+]
+</script>
+
+<style lang="scss" scoped>
+.elements {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title{
+  @include txt-m-b;
+}
+
+.text{
+  @include txt-r-m;
+  color: $clr-grey-500;
+}
+
+.requirements{
+  @include txt-m-b;
+}
+</style>

apps/client/components/verification/property.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="varification-property">
+    <Component
+      :is="resolveComponent(`ui-icon-${icon}`)"
+      class="mr-4"
+      :class="icon === 'SCheck' ? 'text-clr-green-500' : ''"
+    />
+    <span class="varification-property__title">
+
+      {{ title }}
+
+      <span class="varification-property__text">
+        {{ text }}
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: 'SCheck',
+  },
+})
+</script>
+
+<style lang="scss">
+.varification-property {
+
+  color: $clr-grey-500;
+
+  &__title {
+    @include txt-r;
+  }
+
+  &__text {
+    @include txt-r-b;
+  }
+}
+</style>

apps/client/components/verification/we-accept.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <p class="mb-16">
+      <strong> We accept: </strong>
+    </p>
+    <ul class="accept-list">
+      <li
+        v-for="listItem in list"
+        :key="listItem.title"
+      >
+        <span> {{ listItem.title }} </span>
+        <p class="text-clr-grey-500">
+          {{ listItem.underTitle }}
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  list: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss">
+.accept-list{
+  list-style-type: disc;
+  padding: 0 0 0 24px;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+}
+</style>