feat(components): figure page

src/components/accordion.vue

@@ -6,7 +6,7 @@ const showForm = ref<boolean>(false);
 <template>
   <section class="block">
     <div class="header" @click="showForm = !showForm">
-      <h2 class="title">{{ title }}</h2>
+      <h2>{{ title }}</h2>
       <button class="button">
         <IconClose v-if="showForm"/>
         <IconOpen v-else/>
@@ -18,7 +18,7 @@ const showForm = ref<boolean>(false);
   </section>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .block {
   display: flex;
   flex-direction: column;
@@ -35,11 +35,6 @@ const showForm = ref<boolean>(false);
   padding: 8px 0;
 }
 
-.title {
-  font-size: 1.04rem;
-  font-weight: 500;
-}
-
 .button {
   color: var(--icon-color);
 }

src/components/grid/container.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="grid">
+    <slot/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+}
+</style>

src/components/grid/element.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const {title, isActive = false} = defineProps<{ title?: string, isActive?: boolean }>();
+
+</script>
+
+<template>
+  <button class="block" :class="{'block_active': isActive}">
+    <div class="picture"></div>
+    <div v-if="title" class="title">{{ title }}</div>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.block {
+  font-family: 'Formular', sans-serif;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  row-gap: 8px;
+  width: 100%;
+  height: 200px;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #fae9ef;
+  color: #67122c;
+  padding: 16px;
+  font-size: 17px;
+  transition: background-color 0.2s, transform 0.2s;
+
+  &_active {
+    background-color: #fdd2e2;
+  }
+
+  &:hover {
+    background-color: #fdd2e2;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.picture {
+  width: 48px;
+  height: 48px;
+  margin: 8px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.title {
+  margin-top: 8px;
+  width: 100%;
+  text-align: left;
+}
+</style>