merge pull request #33 from mnenie/dev

feat: still work on welcome

src/pages/Home.vue

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

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

@@ -180,9 +180,39 @@ export default {
   },
   welcome: {
     header: {
-      links: ['About', 'Kanban', 'Members', 'Collaborative', 'Chats', 'Plans'],
+      links: ['About', 'Kanban', 'Members', 'Templates', 'Collaborative', 'Chats'],
       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'
+    },
+    cards: [
+      {
+        title: 'Kanban 🧑‍💻',
+        description:
+          'Organize and visualize your projects with our intuitive Kanban board. Enhance productivity with ease.'
+      },
+      {
+        title: 'Collaborative 👥',
+        description: 'Improve your teamwork!'
+      },
+      {
+        title: 'Members 🌐',
+        description: 'Invite new participants to your projects.'
+      },
+      {
+        title: 'Templates 🔧',
+        description: 'Several starter templates are available to you.'
+      },
+      {
+        title: 'Chats 💬',
+        description: 'Communicate, share, discuss.'
+      }
+    ]
   }
 };

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

@@ -185,9 +185,43 @@ export default {
   },
   welcome: {
     header: {
-      links: ['О нас', 'Канбан', 'Участники', 'Совместная работа', 'Чаты', 'Планы'],
+      links: ['О нас', 'Канбан', 'Участники', 'Шаблоны', 'Совместная работа', 'Чаты'],
       login: 'Войти',
       reg: 'Зарегистрироваться'
-    }
+    },
+    about: {
+      tagline: 'Ваш путь к совершенству',
+      description:
+        'Jenda — это облачная программа для эффективного управления проектами и задачами как в команде, так и индивидуально.',
+      badge: 'Основные функции: Доски задач, Отслеживание в реальном времени',
+      btn: 'Зарегистрироваться'
+    },
+    cards: [
+      {
+        title: 'Канбан 🧑‍💻',
+        description:
+          'Организуйте и визуализируйте свои проекты с помощью нашей интуитивно понятной доски Канбан.'
+      },
+      {
+        title: 'Совместная работа 👥',
+        description: 'Улучшите свою командную работу!'
+      },
+      {
+        title: 'Участники 🌐',
+        description: 'Пригласите новых участников в ваши проекты.'
+      },
+      {
+        title: 'Шаблоны 🔧',
+        description: 'Вам доступны несколько стартовых шаблонов.'
+      },
+      {
+        title: 'Чаты 💬',
+        description: 'Общайтесь, делитесь, обсуждайте.'
+      }
+      // {
+      //   title: 'План 📄',
+      //   description: 'Обновите ваш бесплатный план и воспользуйтесь всеми функциями.'
+      // }
+    ]
   }
 };

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

@@ -179,9 +179,37 @@ export default {
   },
   welcome: {
     header: {
-      links: ['关于我们', '看板', '成员', '协作', '聊天', '计划'],
+      links: ['关于', '看板', '成员', '模板', '协作', '聊天'],
       login: '登录',
       reg: '注册'
-    }
+    },
+    about: {
+      tagline: '通往完美的道路',
+      description: 'Jenda 是一款基于云的程序，用于高效协作和个人项目与任务管理。',
+      badge: '核心功能：任务板、实时跟踪',
+      btn: '注册'
+    },
+    cards: [
+      {
+        title: '看板 🧑‍💻',
+        description: '使用我们直观的看板板来组织和可视化您的项目。'
+      },
+      {
+        title: '协作工作 👥',
+        description: '提高你的团队合作能力！'
+      },
+      {
+        title: '成员 🌐',
+        description: '邀请新成员加入您的项目。'
+      },
+      {
+        title: '模板 🔧',
+        description: '您可以使用多个入门模板。'
+      },
+      {
+        title: '聊天 💬',
+        description: '沟通、分享、讨论。'
+      }
+    ]
   }
 };

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/shared/ui/card/UiCard.vue

@@ -30,4 +30,10 @@ defineSlots<{
   bottom: 6px;
   right: 6px;
 }
+
+:global(html.dark){
+  .card{
+    border: 1px solid var(--zinc-600);
+  }
+}
 </style>

src/widgets/layout/config/headerNavs.ts → src/widgets/layout/config/headerNavs.mock.ts

@@ -4,7 +4,7 @@ export const headerLinks = [
   { id: 0, name: 'About', pagePrefix: 'about' },
   { id: 1, name: 'Kanban', pagePrefix: 'kanban' },
   { id: 2, name: 'Members', pagePrefix: 'members' },
-  { id: 3, name: 'Collaborative', pagePrefix: 'collaborative' },
-  { id: 4, name: 'Chats', pagePrefix: 'chats' },
-  { id: 5, name: 'Plans', pagePrefix: 'plans' }
-] as HeaderNavLink[];
+  { id: 3, name: 'Templates', pagePrefix: 'templates' },
+  { id: 4, name: 'Collaborative', pagePrefix: 'collaborative' },
+  { id: 5, name: 'Chats', pagePrefix: 'chats' }
+] satisfies HeaderNavLink[];

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

@@ -8,7 +8,7 @@ import { redirect } from '@/shared/lib/helpers';
 import { RouteNames } from '@/shared/config/consts';
 import { Globe, Moon, Sun } from 'lucide-vue-next';
 import type { Options } from '@/shared/ui/select/types';
-import { headerLinks } from '../../config/headerNavs';
+import { headerLinks } from '../../config/headerNavs.mock';
 import type { HeaderNavLink } from '../../types';
 
 const isDark = useDark();
@@ -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/config/cards.ts

@@ -0,0 +1,32 @@
+import type { MarketingCard } from '../types';
+
+export const _cards = [
+  {
+    id: 0,
+    pagePrefix: 'kanban',
+    height: '270',
+    width: '800'
+  },
+  {
+    id: 1,
+    pagePrefix: 'collaborative',
+    height: '300',
+    width: '800'
+  },
+  {
+    id: 2,
+    pagePrefix: 'members',
+    width: '500',
+    height: '420'
+  },
+  {
+    id: 3,
+    pagePrefix: 'templates',
+    width: '500'
+  },
+  {
+    id: 4,
+    pagePrefix: 'chats',
+    width: '340'
+  }
+] satisfies MarketingCard[];

src/widgets/welcome/index.ts

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

src/widgets/welcome/types.ts

@@ -0,0 +1,8 @@
+export interface MarketingCard {
+  id: number;
+  title?: string;
+  description?: string;
+  width?: string;
+  height?: string;
+  pagePrefix: string;
+}

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>