feat: add about section

src/pages/Home.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { HeaderWelcome } from '@/widgets/layout';
+import { AboutSection } from '@/widgets/welcome';
 </script>
 
 <template>
- <HeaderWelcome />
-</template>
+  <HeaderWelcome />
+  <div style="padding-top: 152px">
+    <AboutSection />
+  </div>
+</template>

src/shared/lib/i18n/locales/en-US.ts

@@ -183,6 +183,13 @@ export default {
       links: ['About', 'Kanban', 'Members', 'Collaborative', 'Chats', 'Plans'],
       login: 'Log In',
       reg: 'Get started'
+    },
+    about: {
+      tagline: 'Your path to perfection',
+      description:
+        'Jenda is a cloud-based program for efficient collaborative and individual project and task management.',
+      badge: 'Core: Task Boards, Real-Time Tracking',
+      btn: 'Get started'
     }
   }
 };

src/shared/lib/i18n/locales/ru-RU.ts

@@ -188,6 +188,13 @@ export default {
       links: ['О нас', 'Канбан', 'Участники', 'Совместная работа', 'Чаты', 'Планы'],
       login: 'Войти',
       reg: 'Зарегистрироваться'
+    },
+    about: {
+      tagline: 'Ваш путь к совершенству',
+      description:
+        'Jenda — это облачная программа для эффективного управления проектами и задачами как в команде, так и индивидуально.',
+      badge: 'Основные функции: Доски задач, Отслеживание в реальном времени',
+      btn: 'Зарегистрироваться'
     }
   }
 };

src/shared/lib/i18n/locales/zh-CN.ts

@@ -182,6 +182,12 @@ export default {
       links: ['关于我们', '看板', '成员', '协作', '聊天', '计划'],
       login: '登录',
       reg: '注册'
+    },
+    about: {
+      tagline: '通往完美的道路',
+      description: 'Jenda 是一款基于云的程序，用于高效协作和个人项目与任务管理。',
+      badge: '核心功能：任务板、实时跟踪',
+      btn: '注册'
     }
   }
 };

src/shared/ui/button/UiButton.vue

@@ -132,7 +132,7 @@ withDefaults(
 
 :global(html.dark) {
   .default {
-    background-color: var(--zinc-200);
+    background-color: var(--zinc-100);
     color: var(--zinc-950);
 
     @include on-hover {

src/widgets/layout/ui/header/HeaderWelcome.vue

@@ -180,9 +180,9 @@ const links = computed(() => {
 
 :global(html.dark) {
   .box {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
+    background-color: #313131;
     border-color: var(--zinc-600);
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    box-shadow: 0 3px 2px 0 rgb(0 0 0 / 0.05);
   }
   .separator {
     background-color: var(--zinc-600);

src/widgets/welcome/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/widgets/welcome/ui/AboutSection.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useDark } from '@vueuse/core';
+import { UiButton } from '@/shared/ui';
+import { ArrowRight } from 'lucide-vue-next';
+import { RouteNames } from '@/shared/config/consts';
+
+const isDark = useDark();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <section :class="$style.container">
+    <div :class="$style.badge">
+      <span style="margin-right: 3px">✨</span>
+      <span class="text-sm">{{ t('welcome.about.badge') }}</span>
+      <ArrowRight :size="14" />
+    </div>
+    <h1>{{ t('welcome.about.tagline') }}</h1>
+    <p class="text-lg">
+      {{ t('welcome.about.description') }}
+    </p>
+    <div :class="$style.btns">
+      <UiButton @click="$router.push({ name: RouteNames.registration })">
+        {{ t('welcome.about.btn') }}
+      </UiButton>
+      <UiButton variant="outline" :class="$style.btn_git">
+        <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
+        GitHub
+      </UiButton>
+    </div>
+  </section>
+</template>
+
+<style module lang="scss">
+.container {
+  display: flex;
+  margin: 0 auto;
+  max-width: 980px;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0 16px;
+
+  & > h1 {
+    margin-bottom: 2px;
+    text-align: center;
+    font-size: 72px;
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: -0.05em;
+  }
+
+  & > p {
+    max-width: 600px;
+    text-align: center;
+    color: var(--zinc-500);
+  }
+
+  .badge {
+    background-color: var(--zinc-100);
+    padding: 2px 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    border-radius: 8px;
+    color: var(--zinc-500);
+  }
+
+  .btns {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: 12px 0;
+
+    .btn_git {
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+:global(html.dark) {
+  .container {
+    .badge {
+      background-color: var(--zinc-600);
+      color: var(--zinc-300);
+    }
+    & > p {
+      color: var(--zinc-300);
+    }
+    // & > h1{
+    //   color: var(--zinc-200);
+    // }
+  }
+}
+</style>

src/widgets/welcome/ui/index.ts

@@ -0,0 +1,3 @@
+import AboutSection from './AboutSection.vue';
+
+export { AboutSection };

yarn.lock

@@ -7344,4 +7344,4 @@ zhead@^2.2.4:
 zod@^3.22.4, zod@^3.23.8:
   version "3.23.8"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
-  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==