73 lines
2.0 KiB
Markdown
73 lines
2.0 KiB
Markdown
# 🚀 Универсальный шаблон лендинга TaskFlow
|
||
|
||
Профессиональный шаблон продающей страницы по методологии **Feature-Sliced Design (FSD)**.
|
||
|
||
## 📋 Архитектура
|
||
|
||
Проект построен по **FSD**:
|
||
|
||
```
|
||
src/
|
||
├── app/ # Слой приложения
|
||
├── widgets/ # Композитные секции
|
||
├── features/ # Переиспользуемые блоки
|
||
└── shared/ # Общий код (UI-kit, хуки)
|
||
```
|
||
|
||
**Принципы:** Слоистая архитектура, изолированность, переиспользование.
|
||
|
||
## 🛠 Технологии
|
||
|
||
- **Next.js 14** - React framework
|
||
- **TypeScript** - Type safety
|
||
- **Tailwind CSS 4** - Utility-first CSS
|
||
- **Framer Motion** - Анимации
|
||
- **shadcn/ui** - UI компоненты
|
||
|
||
## 📁 Структура
|
||
|
||
```
|
||
src/
|
||
├── app/ # layout.tsx, page.tsx, globals.css
|
||
├── widgets/ # header, hero-section, features-section
|
||
├── features/ # section-container, feature-card
|
||
└── shared/ # ui/, hooks/, lib/
|
||
```
|
||
|
||
## 🧩 Паттерны компонентов
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { Button } from "@/shared/ui/button";
|
||
|
||
export function MyFeature() {
|
||
return (
|
||
<section className="py-20">
|
||
<Button>Action</Button>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Правила:** 'use client' для клиентских, @/ alias для импортов, PascalCase, Named exports.
|
||
|
||
## 🎨 Стилизация
|
||
|
||
Tailwind CSS 4 с CSS переменными в `globals.css`.
|
||
|
||
## 📦 Импорты
|
||
|
||
**ВСЕГДА используйте @/ alias:** `import { Button } from '@/shared/ui/button';`
|
||
|
||
## 🎬 Анимации
|
||
|
||
Framer Motion: `initial={{ opacity: 0, y: 20 }}` → `whileInView={{ opacity: 1, y: 0 }}`
|
||
|
||
## 🚀 Команды
|
||
|
||
```bash
|
||
pnpm dev # Запуск dev сервера
|
||
pnpm build # Production build
|
||
```
|