Добавлены новые зависимости, обновлены стили и улучшена структура проекта. Обновлен README с описанием функционала и технологий. Реализована анимация и адаптивный дизайн. Настроена авторизация с использованием Apollo Client.

2025-07-16 18:00:41 +03:00
parent d260749bc9
commit 823ef9a28c
69 changed files with 15539 additions and 210 deletions
--- a/README.md
+++ b/README.md
@ -1,36 +1,122 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# SferaV - Система управления бизнесом

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

-First, run the development server:
+## ✨ Особенности

-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- 🎨 **Современный 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           # Утилиты
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## 🔧 Настройка

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### Цвета
+Фиолетовая тема настроена в `src/app/globals.css` с использованием CSS переменных oklch.

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### Компоненты
+Все UI компоненты основаны на shadcn/ui и адаптированы под дизайн системы.

-## Learn More
+## 📝 Будущие улучшения

-To learn more about Next.js, take a look at the following resources:
+- [ ] Интеграция с реальным API для SMS
+- [ ] Сохранение состояния в localStorage
+- [ ] Темная/светлая темы
+- [ ] Интернационализация (i18n)
+- [ ] Мобильное приложение
+- [ ] Анимации между этапами

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 🤝 Вклад в проект

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+Приветствуются все улучшения! Создавайте issues и pull requests.

-## Deploy on Vercel
+## 📄 Лицензия

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+MIT License - используйте свободно!

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+---
+
+Сделано с ❤️ для удобной работы с маркетплейсами