initial

apps/client/components/page/info-block.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="info-block">
+    <div class="d-flex justify-content-between mb-16">
+      <p class="info-block__title">
+        {{ title }}
+      </p>
+      <UiBadge v-if="badge" type="marketing">
+        {{ badge }}
+      </UiBadge>
+    </div>
+
+    <slot name="info" />
+
+    <span class="info-block__text">{{ text }}</span>
+
+    <UiButton
+      class="info-block__action"
+      type="outlined"
+      :href="link"
+      right-icon="s-chevron-right"
+      size="small"
+    >
+      {{ action }}
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+  badge: {
+    type: String,
+  },
+  action: {
+    type: String,
+    required: true,
+  },
+  link: {
+    type: String,
+  },
+})
+</script>
+
+<style lang="scss">
+.info-block {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 270px;
+  min-height: 179px;
+  border-radius: 12px;
+  padding: 16px;
+
+  background-color: $clr-grey-100;
+
+  &__title {
+    @include txt-m-sb;
+  }
+
+  &__text {
+    @include txt-s;
+    margin-bottom: 16px;
+    color: $clr-grey-500;
+  }
+
+  &__action {
+    margin-top: auto;
+    align-self: flex-start;
+  }
+}
+
+.info-block-addInfo {
+  @include txt-s;
+  margin-bottom: 16px;
+
+  &__title {
+    margin-bottom: 4px;
+    color: $clr-grey-500;
+  }
+
+  &__sum {
+    @include txt-m-sb;
+  }
+
+  &__text {
+    @include txt-r;
+    color: $clr-grey-400;
+  }
+}
+</style>