feat(markup): добавлены иконки для GitHub, Telegram и VK; добавлен компонент PersonCard для отображения информации о пользователях на странице "О приложении"

components/Base/SideBar/index.vue

@@ -97,7 +97,7 @@
           >
             <BaseSideBarElement
               type="alert-circle"
-              text="О программе"
+              text="О приложении"
               :color="useRouter().currentRoute.value.path === '/about' ? '#FF4646' : '#EDE8D8'"
             />
           </NuxtLink>

components/PersonCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="flex flex-col justify-center items-center">
+        <img :src="`/${$props.avatar}`" alt="avatar" height="200" width="200" class="rounded-full mb-3">
+        <p class="text-xl font-semibold" v-text="$props.name" />
+        <p class="text-2xl mb-2" v-text="$props.nickname" />
+        <div class="flex justify-between px-8 w-full">
+            <div v-if="$props.vk" @click="openURL($props.vk)">
+                <IVk height="36" width="36" class="hover:text-blue-300 duration-150" />
+            </div>
+            <div v-if="$props.tg" @click="openURL($props.tg)">
+                <ITg height="36" width="36" class="hover:text-[#29a0dc] duration-150" />
+            </div>
+            <div v-if="$props.github" @click="openURL($props.github)">
+                <IGithub height="36" width="36" class="hover:text-black hover:text-opacity-50 duration-150" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Browser } from '@capacitor/browser'
+
+defineProps<{
+    name: string
+    nickname: string
+    avatar: string
+    github: string
+    vk: string
+    tg: string
+}>()
+
+async function openURL(url: string) {
+    await Browser.open({ url })
+}
+</script>

composables/useOTA.ts

@@ -68,5 +68,6 @@ export async function useOTA() {
   return {
     needsUpdate,
     getDescription,
+    latestUpdate,
   }
 }

pages/about.vue

@@ -1,11 +1,41 @@
 <template>
-    <div>
-        Раздел в разработке
+    <div class="flex flex-col justify-between items-center h-full py-2">
+        <div />
+        <div class="flex flex-col gap-4">
+            <p class="text-center text-2xl text-semibold">Создано выпускниками колледжа</p>
+            <div class="flex gap-4">
+                <PersonCard 
+                    name="Вадим Морозов"
+                    nickname="@horanchikk"
+                    avatar="vadim.png"
+                    github="https://github.com/horanchikk"
+                    vk="https://vk.com/kohima"
+                    tg="https://t.me/horanchikk"
+                />
+                <PersonCard 
+                    name="Никита Фомин"
+                    nickname="@ethosa"
+                    avatar="nikita.png"
+                    github="https://github.com/ethosa"
+                    vk="https://vk.com/akihayase"
+                    tg="https://t.me/ethosa"
+                />
+            </div>
+            <p class="text-center text-2xl text-semibold">с 💖</p>
+        </div>
+        <div class="flex justify-center opacity-50">
+            Версия приложения - {{ update.latestUpdate.value.version }}
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+const update = await useOTA()
 
+definePageMeta({
+  name: 'О приложении',
+  middleware: ['user-only'],
+})
 </script>
 
 <style scoped>