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. Установка зависимостей:

   npm install
   

2. Запуск приложения:

   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 - используйте свободно!

---

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