# 🚀 Универсальный шаблон лендинга 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
```