diff --git a/.gitignore b/.gitignore index 7b8da95..3d8f13e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,42 +1,80 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - # dependencies -/node_modules +/node_modules/ +/.pnpm-store/ +/.npm/ /.pnp .pnp.* + +# package managers .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases +!.yarn/sdks !.yarn/versions -# testing -/coverage - -# next.js +# build output /.next/ /out/ +/build/ +/dist/ -# production -/build +# caches +/.turbo/ +/.cache/ +/.swc/ +.eslintcache +*.tsbuildinfo -# misc -.DS_Store -*.pem +# testing +/coverage/ -# debug +# logs npm-debug.log* yarn-debug.log* yarn-error.log* +lerna-debug.log* .pnpm-debug.log* +pnpm-debug.log* -# env files (can opt-in for committing if needed) -.env* +# env files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local +.env*.local !.env.example -# vercel -.vercel +# deployment / hosting +.vercel/ -# typescript -*.tsbuildinfo +# payload cms +/.payload/ +# /uploads/ +# /media/ +# /public/uploads/ +# /public/media/ +payload.db* +*.sqlite +*.sqlite3 +*.db-wal +*.db-shm +*.sqlite-journal + +# editor / OS +.DS_Store +Thumbs.db +.idea/ +.vscode/ +*.swp +*.swo +*~ + +# secrets / local certs +*.pem +*.key +*.crt + +# generated by next next-env.d.ts diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md deleted file mode 100644 index cc1c8b2..0000000 --- a/ARCHITECTURE.md +++ /dev/null @@ -1,47 +0,0 @@ -src/ -├── app/ -│ ├── layout.tsx # Root layout с провайдерами -│ ├── page.tsx # Главная страница -│ └── globals.css # Глобальные стили + CSS переменные -│ -├── widgets/ # Композитные секции -│ ├── header.tsx -│ ├── hero-section.tsx -│ ├── features-section.tsx -│ ├── stats-section.tsx -│ ├── how-it-works-section.tsx -│ ├── comparison-section.tsx -│ ├── gallery-section.tsx -│ ├── social-proof-section.tsx -│ ├── team-section.tsx -│ ├── pricing-section.tsx -│ ├── faq-section.tsx -│ ├── cta-section.tsx -│ └── footer.tsx -│ -├── features/ # Переиспользуемые блоки -│ ├── section-container.tsx -│ ├── section-header.tsx -│ ├── gradient-background.tsx -│ ├── feature-card.tsx -│ ├── testimonial-card.tsx -│ ├── pricing-card.tsx -│ ├── stat-card.tsx -│ ├── step-card.tsx -│ ├── team-member-card.tsx -│ ├── comparison-item.tsx -│ ├── portfolio-item.tsx -│ └── logo-cloud.tsx -│ -└── shared/ # Общий код -├── ui/ # shadcn/ui компоненты -│ ├── button.tsx -│ ├── card.tsx -│ ├── input.tsx -│ └── ... (50+ компонентов) -├── hooks/ -│ ├── use-in-view.ts -│ ├── use-scroll-animation.ts -│ └── theme-provider.tsx -└── lib/ -└── utils.ts diff --git a/CONVENTIONS.md b/CONVENTIONS.md deleted file mode 100644 index fea6017..0000000 --- a/CONVENTIONS.md +++ /dev/null @@ -1,62 +0,0 @@ -# 📐 Coding Conventions - -## Именование - -- **Компоненты:** PascalCase (`Button.tsx`) -- **Утилиты:** kebab-case (`format-date.ts`) -- **Хуки:** camelCase с use (`useInView.ts`) - -```typescript -const userName = "John"; -const MAX_RETRIES = 3; -``` - -## Структура компонента - -```typescript -"use client"; - -import { Button } from "@/shared/ui/button"; - -interface MyComponentProps { - title: string; -} - -export function MyComponent({ title }: MyComponentProps) { - return
{title}
; -} -``` - -## TypeScript - -Всегда типизируйте props: - -```typescript -interface ButtonProps { - children: React.ReactNode; - variant?: "primary" | "secondary"; -} -``` - -## Импорты - -Порядок: React → Внешние → Наши (@/...) - -```typescript -import { useState } from "react"; -import { motion } from "framer-motion"; -import { Button } from "@/shared/ui/button"; -``` - -**ВСЕГДА используйте @/ для абсолютных импортов.** - -## Стилизация - -Порядок Tailwind: Layout → Sizing → Spacing → Typography → Colors - -Условные классы через cn(): - -```typescript -import { cn } from '@/shared/lib/utils'; - - - ); -} -``` - -## Анимации - -### Fade in + Slide up - -```typescript - - Content - -``` diff --git a/TEMPLATE_README.md b/TEMPLATE_README.md deleted file mode 100644 index b2869b3..0000000 --- a/TEMPLATE_README.md +++ /dev/null @@ -1,787 +0,0 @@ -# 🚀 Универсальный шаблон лендинга TaskFlow - -Это профессиональный шаблон продающей страницы (лендинга), созданный по методологии **Feature-Sliced Design (FSD)**. Шаблон легко адаптируется под любой продукт, услугу или бизнес. - -## 📋 Содержание - -- [Архитектура](#архитектура) -- [Структура проекта](#структура-проекта) -- [Компоненты](#компоненты) -- [Секции лендинга](#секции-лендинга) -- [Как изменять шаблон](#как-изменять-шаблон) -- [Стилизация](#стилизация) -- [Анимации](#анимации) - ---- - -## 🏗️ Архитектура - -Проект построен по **FSD (Feature-Sliced Design)** - современной методологии архитектуры фронтенд-приложений: - -``` -src/ -├── app/ # Слой приложения (глобальные настройки) -├── widgets/ # Композитные секции лендинга -├── features/ # Переиспользуемые блоки -└── shared/ # Общий код (UI-kit, хуки, утилиты) -``` - -### Принципы FSD: - -- **Слоистая архитектура**: от общего (shared) к специфичному (app) -- **Изолированность**: каждый компонент независим -- **Переиспользование**: компоненты можно легко использовать в других проектах -- **Понятность**: структура ясна для ИИ и разработчиков - ---- - -## 📁 Структура проекта - -### Детальная структура: - -``` -src/ -├── app/ -│ ├── layout.tsx # Root layout с провайдерами -│ ├── page.tsx # Главная страница (композиция widgets) -│ └── globals.css # Глобальные стили + CSS переменные -│ -├── widgets/ # 🎯 КОМПОЗИТНЫЕ СЕКЦИИ ЛЕНДИНГА -│ ├── header.tsx # Header с навигацией -│ ├── hero-section.tsx # Главная секция -│ ├── features-section.tsx # Секция возможностей -│ ├── stats-section.tsx # Статистика/достижения -│ ├── how-it-works-section.tsx# Как это работает -│ ├── comparison-section.tsx # Сравнение до/после -│ ├── gallery-section.tsx # Галерея/портфолио -│ ├── social-proof-section.tsx# Отзывы и логотипы -│ ├── team-section.tsx # Команда -│ ├── pricing-section.tsx # Тарифы -│ ├── faq-section.tsx # Частые вопросы -│ ├── cta-section.tsx # Призыв к действию -│ └── footer.tsx # Подвал сайта -│ -├── features/ # 🧩 ПЕРЕИСПОЛЬЗУЕМЫЕ БЛОКИ -│ ├── section-container.tsx # Обертка для секций -│ ├── section-header.tsx # Заголовок секции -│ ├── gradient-background.tsx # Градиентный фон -│ ├── feature-card.tsx # Карточка фичи -│ ├── testimonial-card.tsx # Карточка отзыва -│ ├── pricing-card.tsx # Карточка тарифа -│ ├── stat-card.tsx # Карточка статистики -│ ├── step-card.tsx # Карточка шага -│ ├── team-member-card.tsx # Карточка члена команды -│ ├── comparison-item.tsx # Элемент сравнения -│ ├── portfolio-item.tsx # Элемент портфолио -│ └── logo-cloud.tsx # Облако логотипов -│ -└── shared/ # 🔧 ОБЩИЙ КОД - ├── ui/ # shadcn/ui компоненты - │ ├── button.tsx - │ ├── card.tsx - │ ├── input.tsx - │ └── ... (50+ компонентов) - ├── hooks/ - │ ├── use-in-view.ts # Хук для viewport detection - │ ├── use-scroll-animation.ts # Хук для scroll анимаций - │ └── theme-provider.tsx # Провайдер темы - └── lib/ - └── utils.ts # Утилиты -``` - ---- - -## 🧩 Компоненты - -### Features (переиспользуемые блоки) - -#### 1. **SectionContainer** - -Универсальная обертка для всех секций. - -**Props:** - -```typescript -{ - children: ReactNode; - className?: string; - variant?: 'default' | 'narrow' | 'wide'; // Ширина контейнера - background?: 'default' | 'muted' | 'gradient'; // Фон секции - withPadding?: boolean; // Отступы сверху/снизу - id?: string; // Для якорей навигации -} -``` - -**Где используется:** Во всех секциях - ---- - -#### 2. **SectionHeader** - -Заголовок секции с subtitle и description. - -**Props:** - -```typescript -{ - title: string; // Основной заголовок - subtitle?: string; // Надзаголовок - description?: string; // Описание - align?: 'left' | 'center' | 'right'; // Выравнивание - withGradient?: boolean; // Gradient на заголовке -} -``` - -**Где используется:** Features, Stats, Team, Pricing и др. - ---- - -#### 3. **FeatureCard** - -Карточка возможности/преимущества. - -**Props:** - -```typescript -{ - icon: LucideIcon; // Иконка - title: string; // Название - description: string; // Описание - variant?: 'default' | 'bordered' | 'filled'; - link?: { href: string, label: string }; // Опциональная ссылка -} -``` - -**Где используется:** Features Section - ---- - -#### 4. **PricingCard** - -Карточка тарифного плана. - -**Props:** - -```typescript -{ - name: string; // Название плана - price: number | 'custom'; // Цена в рублях - period?: 'month' | 'year'; // Период оплаты - description: string; - features: Array<{ // Список возможностей - text: string; - included: boolean; - }>; - ctaLabel: string; // Текст кнопки - ctaHref: string; - popular?: boolean; // Популярный план -} -``` - -**Где используется:** Pricing Section - ---- - -#### 5. **StatCard** - -Карточка статистики с анимированным счетчиком. - -**Props:** - -```typescript -{ - value: string | number; // Значение - label: string; // Подпись - icon?: LucideIcon; - animated?: boolean; // Анимация счетчика - trend?: { // Тренд вверх/вниз - value: number; - direction: 'up' | 'down'; - }; -} -``` - -**Где используется:** Stats Section - ---- - -#### 6. **TestimonialCard** - -Карточка отзыва клиента. - -**Props:** - -```typescript -{ - content: string; // Текст отзыва - author: { - name: string; - role: string; - company?: string; - avatar?: string; - }; - rating?: number; // Рейтинг 1-5 - variant?: 'card' | 'quote'; // Стиль отображения -} -``` - -**Где используется:** Social Proof Section - ---- - -### Другие компоненты - -- **StepCard** - для How It Works -- **TeamMemberCard** - для Team -- **ComparisonItem** - для Comparison -- **PortfolioItem** - для Gallery -- **LogoCloud** - для логотипов клиентов - ---- - -## 🎨 Секции лендинга - -### 1. **Header** (`widgets/header.tsx`) - -- Sticky навигация с backdrop blur -- Мобильное меню (Sheet) -- Переключатель темы -- Smooth scroll к секциям - -**Как изменить:** - -```typescript -// Измените навигацию в массиве: -const navigation = [ - { name: "Ваш пункт", href: "#section-id" }, - // ... -]; -``` - ---- - -### 2. **Hero Section** (`widgets/hero-section.tsx`) - -Главная секция с заголовком и CTA. - -**Что изменить:** - -- Заголовок: `"Управляйте проектами быстрее и проще"` -- Описание: `"Все инструменты для командной работы..."` -- Кнопки CTA -- Hero изображение (замените placeholder) - ---- - -### 3. **Features Section** (`widgets/features-section.tsx`) - -6 карточек с возможностями. - -**Как изменить:** - -```typescript -const features = [ - { - icon: Zap, // Иконка из lucide-react - title: "Ваша фича", - description: "Описание...", - }, - // ... добавьте или удалите фичи -]; -``` - ---- - -### 4. **Stats Section** (`widgets/stats-section.tsx`) - -4 карточки со статистикой. - -**Как изменить:** - -```typescript -const stats = [ - { - value: "10000+", // Число или строка - label: "Ваш показатель", - icon: Users, - animated: true, // Анимация счетчика - }, - // ... -]; -``` - ---- - -### 5. **How It Works** (`widgets/how-it-works-section.tsx`) - -4 шага с описанием процесса. - -**Как изменить:** - -```typescript -const steps = [ - { - number: 1, - title: "Шаг 1", - description: "Описание...", - icon: YourIcon, - }, - // ... -]; -``` - ---- - -### 6. **Comparison Section** (`widgets/comparison-section.tsx`) - -Сравнение "до/после" (3 элемента). - -**Как изменить:** - -```typescript -const comparisons = [ - { - before: { - title: "Старый способ", - description: "...", - }, - after: { - title: "Новый способ", - description: "...", - }, - }, - // ... -]; -``` - ---- - -### 7. **Gallery Section** (`widgets/gallery-section.tsx`) - -6-8 примеров работ/скриншотов. - -**Как изменить:** - -- Замените `/api/placeholder/600/400` на реальные изображения -- Измените категории и описания - ---- - -### 8. **Social Proof** (`widgets/social-proof-section.tsx`) - -Отзывы клиентов + логотипы компаний. - -**Как изменить:** - -```typescript -const testimonials = [ - { - content: "Текст отзыва...", - author: { - name: "Имя", - role: "Должность", - company: "Компания", - avatar: "/path/to/avatar.jpg", - }, - rating: 5, - }, - // ... -]; - -const logos = [ - { name: "Company", src: "/path/to/logo.png" }, - // ... -]; -``` - ---- - -### 9. **Team Section** (`widgets/team-section.tsx`) - -Карточки членов команды. - -**Как изменить:** - -```typescript -const team = [ - { - name: "Имя", - role: "Должность", - bio: "Краткая биография", - image: "/path/to/photo.jpg", - socials: [ - { platform: "linkedin", url: "#" }, - { platform: "github", url: "#" }, - ], - }, - // ... -]; -``` - ---- - -### 10. **Pricing Section** (`widgets/pricing-section.tsx`) - -3 тарифных плана. - -**Как изменить:** - -```typescript -const pricingPlans = [ - { - name: "Название", - price: 2900, // В рублях - period: "month", // или "year" - description: "Описание плана", - features: [ - { text: "Возможность 1", included: true }, - { text: "Возможность 2", included: false }, - ], - ctaLabel: "Купить", - ctaHref: "#", - popular: true, // Показать badge "Популярный" - }, - // ... -]; -``` - ---- - -### 11. **FAQ Section** (`widgets/faq-section.tsx`) - -8 частых вопросов с ответами. - -**Как изменить:** - -```typescript -const faqs = [ - { - question: "Ваш вопрос?", - answer: "Подробный ответ...", - }, - // ... -]; -``` - ---- - -### 12. **CTA Section** (`widgets/cta-section.tsx`) - -Финальный призыв к действию. - -**Что изменить:** - -- Заголовок -- Описание -- Текст на кнопке -- Форма подписки (email input) - ---- - -### 13. **Footer** (`widgets/footer.tsx`) - -Подвал с ссылками и соцсетями. - -**Как изменить:** - -```typescript -const footerLinks = { - product: { - title: "Ваша категория", - links: [ - { name: "Ссылка", href: "#" }, - // ... - ], - }, - // ... добавьте колонки -}; - -const socialLinks = [ - { name: "GitHub", icon: Github, href: "#" }, - // ... -]; -``` - ---- - -## 🎨 Стилизация - -### CSS Переменные - -Все цвета настраиваются в `src/app/globals.css`: - -```css -:root { - /* Градиенты для лендинга */ - --gradient-from: oklch(0.67 0.24 252); /* Синий */ - --gradient-via: oklch(0.62 0.23 295); /* Фиолетовый */ - --gradient-to: oklch(0.72 0.19 345); /* Розовый */ - - /* Акцентный цвет */ - --feature-accent: oklch(0.65 0.21 165); /* Бирюзовый */ - - /* Spacing */ - --section-padding-y: 5rem; - --section-padding-y-lg: 8rem; -} -``` - -### Utility классы - -Три готовых класса для градиентов: - -```css -.text-gradient /* Градиентный текст */ -/* Градиентный текст */ -/* Градиентный текст */ -/* Градиентный текст */ -.bg-gradient-primary /* Градиентный фон */ -.border-gradient; /* Градиентная рамка */ -``` - -**Использование:** - -```tsx -

Заголовок с градиентом

-``` - ---- - -## ✨ Анимации - -### Framer Motion паттерны - -#### 1. Fade-in + Slide-up (для заголовков) - -```typescript -initial={{ opacity: 0, y: 20 }} -whileInView={{ opacity: 1, y: 0 }} -viewport={{ once: true }} -transition={{ duration: 0.5 }} -``` - -#### 2. Stagger (для списков) - -```typescript -// Используйте готовые варианты из shared/hooks/use-scroll-animation.ts -import { - staggerContainer, - staggerItem, -} from "@/shared/hooks/use-scroll-animation"; - - - {items.map((item) => ( - - {/* content */} - - ))} -; -``` - -#### 3. Hover эффекты - -```typescript -whileHover={{ y: -5, scale: 1.02 }} -transition={{ type: "spring", stiffness: 300 }} -``` - -#### 4. Анимированный счетчик (StatCard) - -Автоматически анимирует числовые значения при появлении в viewport. - ---- - -## 🔧 Как изменять шаблон - -### Быстрый старт - -1. **Изменить брендинг:** - - - Замените "TaskFlow" на название вашего продукта - - Обновите логотип в `Header` и `Footer` - - Измените цвета в `globals.css` - -2. **Изменить контент:** - - - Откройте нужный widget в `src/widgets/` - - Найдите массив с данными (features, testimonials, etc.) - - Замените текст и изображения - -3. **Добавить/удалить секции:** - - ```typescript - // src/app/page.tsx - export default function Home() { - return ( - <> -
-
- - {/* Добавьте или удалите секции здесь */} - -
-