# SferaV - Система управления бизнесом

Красивое приложение для авторизации и управления кабинетами Фулфилмент и Wildberries с современным фиолетовым дизайном.

## ✨ Особенности

- 🎨 **Современный UI/UX** - Фиолетовые градиенты и стеклянный эффект
- 📱 **Адаптивный дизайн** - Отлично работает на всех устройствах
- 🔐 **Многоэтапная авторизация** - Номер телефона → SMS → Выбор кабинета → Данные
- 📞 **Умная маска телефона** - Автоформатирование номера +7 (999) 999-99-99
- 💼 **Два типа кабинетов** - Фулфилмент (ИНН) и Wildberries (API ключ)
- ⚡ **Быстрая навигация** - Плавные переходы между этапами

## 🛠 Технологии

- **Next.js 15** - React фреймворк
- **TypeScript** - Типизация
- **Tailwind CSS 4** - Стилизация
- **shadcn/ui** - UI компоненты
- **react-input-mask** - Маска ввода

## 🚀 Быстрый старт

1. **Установка зависимостей:**
   ```bash
   npm install
   ```

2. **Запуск приложения:**
   ```bash
   npm run dev
   ```

3. **Откройте браузер:**
   ```
   http://localhost:3000
   ```

## 📱 Этапы авторизации

### 1. Ввод номера телефона
- Красивая маска ввода с автоформатированием
- Валидация российских номеров (+7)
- Плавная анимация при вводе

### 2. Подтверждение SMS
- 4 отдельных поля для цифр кода
- Автопереключение между полями
- Возможность вернуться к изменению номера

### 3. Выбор типа кабинета
- Фулфилмент кабинет (складские операции)
- Wildberries кабинет (маркетплейс)
- Интерактивные карточки с описанием

### 4. Ввод данных
- **Фулфилмент:** ИНН организации (10-12 цифр)
- **Wildberries:** API ключ с инструкцией получения

## 🎨 Дизайн

- **Цветовая схема:** Фиолетовые градиенты
- **Эффекты:** Стеклянные поверхности, размытие
- **Анимации:** Плавные переходы и hover эффекты
- **Типографика:** Современные шрифты с хорошей читаемостью

## 📂 Структура проекта

```
src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Глобальные стили
│   ├── layout.tsx         # Основной layout
│   └── page.tsx           # Главная страница
├── components/
│   ├── auth/              # Компоненты авторизации
│   │   ├── auth-flow.tsx      # Основной флоу
│   │   ├── auth-layout.tsx    # Layout для этапов
│   │   ├── phone-step.tsx     # Ввод телефона
│   │   ├── sms-step.tsx       # Ввод SMS
│   │   ├── cabinet-select-step.tsx # Выбор кабинета
│   │   ├── inn-step.tsx       # Ввод ИНН
│   │   └── wb-api-step.tsx    # Ввод API ключа WB
│   └── ui/                # shadcn/ui компоненты
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── phone-input.tsx
│       └── select.tsx
└── lib/
    └── utils.ts           # Утилиты
```

## 🔧 Настройка

### Цвета
Фиолетовая тема настроена в `src/app/globals.css` с использованием CSS переменных oklch.

### Компоненты
Все UI компоненты основаны на shadcn/ui и адаптированы под дизайн системы.

## 📝 Будущие улучшения

- [ ] Интеграция с реальным API для SMS
- [ ] Сохранение состояния в localStorage
- [ ] Темная/светлая темы
- [ ] Интернационализация (i18n)
- [ ] Мобильное приложение
- [ ] Анимации между этапами

## 🤝 Вклад в проект

Приветствуются все улучшения! Создавайте issues и pull requests.

## 📄 Лицензия

MIT License - используйте свободно!

---

Сделано с ❤️ для удобной работы с маркетплейсами