diff --git a/public/icons/collaborative.svg b/public/icons/collaborative.svg new file mode 100644 index 00000000..cacc60ea --- /dev/null +++ b/public/icons/collaborative.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/github-d.png b/public/icons/github-d.png new file mode 100644 index 00000000..4bb2db90 Binary files /dev/null and b/public/icons/github-d.png differ diff --git a/public/icons/github.png b/public/icons/github.png new file mode 100644 index 00000000..9490ffc6 Binary files /dev/null and b/public/icons/github.png differ diff --git a/public/kanban-d.png b/public/kanban-d.png new file mode 100644 index 00000000..03e24670 Binary files /dev/null and b/public/kanban-d.png differ diff --git a/public/kanban.png b/public/kanban.png new file mode 100644 index 00000000..536e95f4 Binary files /dev/null and b/public/kanban.png differ diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 516bff06..d935721a 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -1,7 +1,12 @@ \ No newline at end of file + +
+ + +
+ diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts index 6a9ef3d7..d16160b7 100644 --- a/src/shared/lib/i18n/locales/en-US.ts +++ b/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.' + } + ] } }; diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts index d60b0298..f2ec27c3 100644 --- a/src/shared/lib/i18n/locales/ru-RU.ts +++ b/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: 'Обновите ваш бесплатный план и воспользуйтесь всеми функциями.' + // } + ] } }; diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts index 7c1326cd..69bcb277 100644 --- a/src/shared/lib/i18n/locales/zh-CN.ts +++ b/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: '沟通、分享、讨论。' + } + ] } }; diff --git a/src/shared/ui/button/UiButton.vue b/src/shared/ui/button/UiButton.vue index aab3df0f..d6d19315 100644 --- a/src/shared/ui/button/UiButton.vue +++ b/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 { diff --git a/src/shared/ui/card/UiCard.vue b/src/shared/ui/card/UiCard.vue index f7dc58f5..1f72f8ad 100644 --- a/src/shared/ui/card/UiCard.vue +++ b/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); + } +} diff --git a/src/widgets/layout/config/headerNavs.ts b/src/widgets/layout/config/headerNavs.mock.ts similarity index 53% rename from src/widgets/layout/config/headerNavs.ts rename to src/widgets/layout/config/headerNavs.mock.ts index 52440d22..38421072 100644 --- a/src/widgets/layout/config/headerNavs.ts +++ b/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[]; diff --git a/src/widgets/layout/ui/header/HeaderWelcome.vue b/src/widgets/layout/ui/header/HeaderWelcome.vue index 909f35b0..b00c82d5 100644 --- a/src/widgets/layout/ui/header/HeaderWelcome.vue +++ b/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); diff --git a/src/widgets/welcome/config/cards.ts b/src/widgets/welcome/config/cards.ts new file mode 100644 index 00000000..1eec9e8a --- /dev/null +++ b/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[]; diff --git a/src/widgets/welcome/index.ts b/src/widgets/welcome/index.ts new file mode 100644 index 00000000..5ecdd1f3 --- /dev/null +++ b/src/widgets/welcome/index.ts @@ -0,0 +1 @@ +export * from './ui'; diff --git a/src/widgets/welcome/types.ts b/src/widgets/welcome/types.ts new file mode 100644 index 00000000..6aee4d10 --- /dev/null +++ b/src/widgets/welcome/types.ts @@ -0,0 +1,8 @@ +export interface MarketingCard { + id: number; + title?: string; + description?: string; + width?: string; + height?: string; + pagePrefix: string; +} diff --git a/src/widgets/welcome/ui/AboutSection.vue b/src/widgets/welcome/ui/AboutSection.vue new file mode 100644 index 00000000..a5b80d13 --- /dev/null +++ b/src/widgets/welcome/ui/AboutSection.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/widgets/welcome/ui/MarketingCards.vue b/src/widgets/welcome/ui/MarketingCards.vue new file mode 100644 index 00000000..c942c94c --- /dev/null +++ b/src/widgets/welcome/ui/MarketingCards.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/src/widgets/welcome/ui/index.ts b/src/widgets/welcome/ui/index.ts new file mode 100644 index 00000000..c92bf212 --- /dev/null +++ b/src/widgets/welcome/ui/index.ts @@ -0,0 +1,4 @@ +import AboutSection from './AboutSection.vue'; +import MarketingCards from './MarketingCards.vue'; + +export { AboutSection, MarketingCards };