initial

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="footer-info-block">
+    <div class="footer-info-block__left">
+      <UiIconAskForDiscountFilled class="footer-info-block__icon" />
+      <div>
+        <h3 class="footer-info-block__title">
+          {{ title }}
+        </h3>
+        <p class="footer-info-block__text">
+          {{ text }}
+        </p>
+      </div>
+    </div>
+
+    <div class="footer-info-block__right">
+      <UiButton
+        color="secondary"
+        right-icon="s-chevron-right"
+      >
+        {{ action }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  text: { type: String, required: true },
+  action: { type: String, required: true },
+})
+</script>
+
+<style lang="scss">
+.footer-info-block {
+  display: flex;
+
+  &__title {
+    color: $clr-grey-600;
+    margin-bottom: 8px;
+  }
+
+  &__text {
+    color: $clr-grey-500;
+    width: 512px;
+  }
+
+  &__icon {
+    color: $clr-market-500 !important;
+    margin-right: 32px;
+    padding: 9px;
+    box-sizing: content-box;
+  }
+
+  &__left {
+    display: flex;
+    flex: 1;
+
+    border-bottom-left-radius: 12px;
+    border-top-left-radius: 12px;
+
+    background-color: $clr-grey-200;
+    padding: 24px 20px;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-bottom-right-radius: 12px;
+    border-top-right-radius: 12px;
+    background-color: $clr-grey-300;
+
+    width: 286px;
+  }
+}
+</style>