refactor: chaange figma structure with single package

2026-04-02 23:35:06 +03:00
parent 64ae1d9f5a
commit 1157854f1d
89 changed files with 277 additions and 2333 deletions
--- a/.agents/skills/PROMPT-FOR-RECREATION.md
+++ b/.agents/skills/PROMPT-FOR-RECREATION.md
@@ -0,0 +1,659 @@
+# Полный промт для воссоздания корпоративного сайта SOFTCLICK
+
+## ОБЩАЯ КОНЦЕПЦИЯ
+
+Создай современный корпоративный сайт для российской IT-компании **SOFTCLICK** — интегратора IT-решений, аналогичный по структуре Softline.ru, но в более сдержанных бизнес-тонах. Основная специализация: импортозамещение, переход на российские решения, комплексная автоматизация предприятий.
+
+**Ключевые принципы дизайна:**
+- Лаконичный минималистичный стиль в духе Яндекса/Google
+- БЕЗ использования фотографий людей/офисов — только дизайнерские элементы (иконки, градиенты, геометрия)
+- Цветовая палитра: белый фон, голубой акцент (#2563eb blue-600), серые оттенки
+- Чистая типографика, много воздуха, округлые элементы (rounded-xl, rounded-2xl)
+- Плавные анимации (floating icons, smooth transitions)
+
+---
+
+## ТЕХНИЧЕСКИЙ СТЕК
+
+### Основа:
+- **React 18** + **TypeScript**
+- **Vite** для сборки
+- **Tailwind CSS v4** для стилизации
+- **lucide-react** для иконок
+- БЕЗ React Router — используется простая навигация через state
+
+### Структура проекта:
+```
+/App.tsx — главный компонент с роутингом через state
+/main.tsx — точка входа
+/components/ — все компоненты
+  Header.tsx — шапка с выпадающими меню
+  Hero.tsx — главный баннер
+  Services.tsx — блок услуг
+  Solutions.tsx — отраслевые решения
+  Cases.tsx — кейсы
+  About.tsx — о компании
+  Contact.tsx — форма контактов
+  Footer.tsx — подвал
+  ContactModal.tsx — модальное окно
+  CategoryPage.tsx — универсальный шаблон страниц категорий
+/pages/ — страницы категорий (17 штук)
+/styles/ — глобальные стили и анимации
+```
+
+---
+
+## ДЕТАЛЬНОЕ ОПИСАНИЕ КОМПОНЕНТОВ
+
+### 1. HEADER (Header.tsx)
+
+**Структура:**
+- Фиксированная шапка (fixed top-0) с backdrop-blur-md
+- Логотип: текст "SOFTCLICK" жирным шрифтом (text-2xl font-bold)
+- Навигация (десктоп):
+  - **Решения** (выпадающее меню с 10 категориями)
+  - **Услуги** (выпадающее меню с 7 категориями)
+  - Кейсы (якорь на секцию)
+  - О компании (якорь на секцию)
+  - Контакты (якорь на секцию)
+- Кнопка "Связаться" (синяя, открывает модальное окно)
+- Мобильное меню (гамбургер-меню для экранов < lg)
+
+**Выпадающие меню:**
+
+*Решения:*
+1. Облако
+2. Российское ПО
+3. Кибербезопасность
+4. Решения на базе ИИ
+5. Российские ноутбуки, ПК и серверы
+6. Аппаратные решения
+7. САПР и ГИС
+8. Индустриальные решения
+9. Для госсектора
+10. Решения для бизнеса
+
+*Услуги:*
+1. Консалтинг и проектирование
+2. Поставка и внедрение решений
+3. Управляемые сервисы
+4. Интеграция и разработка
+5. Специализированные услуги по отраслям
+6. Обслуживание и сопровождение
+7. Услуги по подписке
+
+**Стилизация меню:**
+- Появление при наведении (onMouseEnter/onMouseLeave)
+- Белая карточка с тенью (bg-white rounded-xl shadow-xl)
+- Плавная анимация (fade-in slide-in-from-top-2)
+- Ширина меню: w-80
+- При hover пункт меню: bg-blue-50 text-blue-600
+
+---
+
+### 2. HERO SECTION (Hero.tsx)
+
+**Контент:**
+- Заголовок: "IT-решения для роста вашего бизнеса" (text-5xl lg:text-6xl)
+- Подзаголовок: "Проектируем, внедряем и сопровождаем корпоративные IT-системы. Облачная инфраструктура, безопасность, автоматизация процессов."
+- Бейдж: "Надежный партнер с 2021 года" (с синим пульсирующим индикатором)
+- 2 кнопки: "Обсудить проект" (синяя) и "Портфолио" (серая)
+
+**Метрики (3 колонки):**
+- 300+ клиентов
+- 50+ партнерств
+- 95% повторных обращений
+
+**Дизайнерский элемент (справа):**
+Сетка 3x2 из округлых карточек с иконками:
+- Cloud (голубая)
+- Shield (синяя с градиентом, тень)
+- Database (фиолетовая)
+- Code (зеленая)
+- Zap (оранжевая)
+- Users (голубая)
+
+Карточки имеют floating-анимацию (плавное движение вверх-вниз)
+
+---
+
+### 3. SERVICES (Services.tsx)
+
+**6 карточек услуг в сетке (grid md:grid-cols-2 lg:grid-cols-3):**
+
+1. **Облачные решения** (Cloud icon)
+   - Описание: "Миграция и управление инфраструктурой на базе Яндекс.Облако и VK Cloud"
+   - Градиент: from-blue-50 to-cyan-50
+
+2. **Кибербезопасность** (Shield icon)
+   - Описание: "Комплексная защита периметра и данных с решениями Kaspersky"
+   - Градиент: from-violet-50 to-purple-50
+
+3. **Цифровая трансформация** (Cpu icon)
+   - Описание: "Автоматизация процессов на платформах 1С и Галактика"
+   - Градиент: from-emerald-50 to-teal-50
+
+4. **Управление данными** (Database icon)
+   - Описание: "Развертывание и поддержка СУБД Postgres Pro"
+   - Градиент: from-orange-50 to-amber-50
+
+5. **Серверная инфраструктура** (Server icon)
+   - Описание: "Поставка и настройка оборудования Kraftway"
+   - Градиент: from-pink-50 to-rose-50
+
+6. **Системная интеграция** (Settings icon)
+   - Описание: "Построение корпоративной ИТ-архитектуры на Astra Linux"
+   - Градиент: from-indigo-50 to-blue-50
+
+**Структура карточки:**
+- Верхняя часть: градиентный фон (h-48) с плавающей иконкой в белом квадрате
+- Нижняя часть: название, описание, ссылка "Подробнее →"
+- Hover-эффект: поднятие тени (hover:shadow-xl)
+
+---
+
+### 4. SOLUTIONS (Solutions.tsx)
+
+**6 отраслевых решений (grid md:grid-cols-2 lg:grid-cols-3):**
+
+1. Корпоративный сектор (Building2) — 1200+ проектов
+2. Ритейл и e-commerce (ShoppingCart) — 850+ проектов
+3. Производство (Factory) — 650+ проектов
+4. Здравоохранение (Heart) — 420+ проектов
+5. Образование (GraduationCap) — 380+ проектов
+6. Государственный сектор (Landmark) — 500+ проектов
+
+**Структура карточки:**
+- Иконка в синем градиентном квадрате (bg-gradient-to-br from-blue-500 to-blue-600)
+- Название и описание
+- Количество проектов (в нижней части, выделено синим цветом)
+
+---
+
+### 5. CASES (Cases.tsx)
+
+**3 кейса в сетке (grid lg:grid-cols-3):**
+
+1. **Миграция в Яндекс.Облако** (Cloud icon, голубой градиент)
+   - Клиент: Торговая сеть
+   - Описание: Перенос 500+ серверов с нулевым простоем
+   - Результат: −40% TCO
+
+2. **Внедрение 1С:ERP** (Cpu icon, зеленый градиент)
+   - Клиент: Производственный холдинг
+   - Описание: Автоматизация для 15 предприятий
+   - Результат: +25% эффективность
+
+3. **Защита периметра Kaspersky** (Shield icon, фиолетовый градиент)
+   - Клиент: Финансовая группа
+   - Описание: Многоуровневая система защиты
+   - Результат: 99.9% uptime
+
+**Структура карточки:**
+- Верх: градиентный фон с крупной иконкой и бейджем категории
+- Низ: компания, заголовок, описание, результат
+- Кнопка "Все кейсы" под карточками
+
+---
+
+### 6. ABOUT (About.tsx)
+
+**Заголовок с анимацией:**
+"Сотрудничаем с [название вендора]" — где название вендора циклически меняется каждые 4.5 секунды с fade-эффектом.
+
+**56 российских вендоров для ротации:**
+Яндекс.Облако, VK Cloud, MTC Web Services, Сбер Облако, Kaspersky, Positive Technologies, UserGate, Astra Linux, РедСофт, Альт Линукс, Postgres Pro, Tarantool, Мой Офис, Р7-Офис, 1С, Галактика, Kraftway, Aquarius, Эльбрус, Битрикс24, Код Безопасности, Zabbix, Nginx, Selectel, Лаборатория Эльбрус, Basealt, МойОфис Почта, Видеомост, Jazz Telecom, Р-Видео, СКБ Контур, ЕТИС, Кодикс, Тензор, Infowatch, SearchInform, Гарда, Аладдин Р.Д., С-Терра, DeviceLock, КриптоПро, Базальт СПО, Аскон, НаноСофт, Directum, Open Yard, ТруКонф, Yadro, Depo, Eltex, Qtech, D-Link
+
+**6 ключевых преимуществ (grid md:grid-cols-2 lg:grid-cols-3):**
+1. Поставка оборудования (Package icon, синий)
+2. Официальное партнерство (Award icon, зеленый)
+3. Сертифицированные специалисты (CheckCircle2 icon, фиолетовый)
+4. Оперативный отклик (Zap icon, оранжевый)
+5. Выделенная команда (Users icon, голубой)
+6. Быстрый старт (Rocket icon, розовый)
+
+---
+
+### 7. CONTACT (Contact.tsx)
+
+**Форма обратной связи в белой карточке:**
+
+Поля:
+- Имя (обязательное)
+- Компания
+- Email (обязательное)
+- Телефон (обязательное)
+- Сообщение (textarea, 4 строки)
+
+Кнопка: "Отправить заявку" (синяя)
+
+**Контактная информация снизу (в строку):**
+- Телефон: +7 (495) 123-45-67
+- Email: info@softclick.ru
+- Адрес: Москва, Пресненская наб., 12
+- Часы: Пн-Пт 9:00–18:00
+
+---
+
+### 8. FOOTER (Footer.tsx)
+
+**4 колонки:**
+
+1. **Логотип и соцсети:**
+   - Логотип SOFTCLICK
+   - Описание компании
+   - Иконки соцсетей: Telegram, VK, Habr, VK Video
+
+2. **Решения:**
+   - Облачные решения
+   - Кибербезопасность
+   - Цифровая трансформация
+   - Управление данными
+
+3. **Компания:**
+   - О нас
+   - Карьера
+   - Новости
+   - Партнерам
+
+4. **Контакты:**
+   - Телефон с часами работы
+   - Email
+   - Адрес
+
+**Подвал:**
+- © 2025 SOFTCLICK. Все права защищены.
+- Ссылки: Политика конфиденциальности, Условия использования
+
+**Стилизация:**
+- Темный фон (bg-gray-900), светлый текст (text-gray-400)
+- Ссылки hover: text-blue-400
+
+---
+
+### 9. CONTACT MODAL (ContactModal.tsx)
+
+**Модальное окно с расширенной формой:**
+
+Открывается по кнопкам "Связаться" и "Обсудить проект"
+
+**Поля формы:**
+1. Имя (обязательное)
+2. Компания
+3. Email (обязательное)
+4. Телефон (обязательное)
+5. **Какую задачу решаете?** (select с опциями):
+   - 🔥 Всё горит, нужна помощь! (selected по умолчанию)
+   - Модернизация инфраструктуры
+   - Замена импортного ПО на российское
+   - Расширение мощностей
+   - Создание новой инфраструктуры
+   - Повышение безопасности
+   - Автоматизация процессов
+   - Миграция в облако
+   - Резервирование и восстановление
+   - Соответствие требованиям регуляторов
+   - Другое
+6. **Сроки реализации** (select):
+   - Еще вчера (selected по умолчанию)
+   - Срочно (до 1 месяца)
+   - 1-3 месяца
+   - 3-6 месяцев
+   - 6-12 месяцев
+   - Более 12 месяцев
+   - На стадии планирования
+7. Комментарий к задаче (textarea)
+8. **Предпочитаемое время для встречи в ВКС:**
+   - Вариант 1 (datetime-local)
+   - Вариант 2 (datetime-local)
+   - Подсказка: "Мы отправим вам приглашение в ВКС на один из выбранных слотов"
+
+**Технические детали:**
+- Рендерится через createPortal(modalContent, document.body)
+- При открытии блокирует скролл страницы
+- Закрытие по клику на оверлей или крестик
+- z-index: 9999
+- Backdrop: bg-black/60 backdrop-blur-sm
+
+---
+
+### 10. CATEGORY PAGE (CategoryPage.tsx)
+
+**Универсальный шаблон для всех страниц категорий**
+
+**Hero-секция:**
+- Кнопка "Назад к главной" (ArrowLeft icon)
+- Бейдж "Каталог решений"
+- Заголовок категории (text-5xl lg:text-6xl)
+- Описание категории
+- Декоративный элемент справа (на xl-экранах)
+
+**Сетка вендоров (grid md:grid-cols-2 lg:grid-cols-3):**
+
+Каждая карточка вендора:
+- Название вендора (text-2xl, hover:text-blue-600)
+- Описание
+- Список продуктов/решений (если есть) в синих бейджах (bg-blue-50)
+- Кнопка "Узнать больше" внизу
+
+---
+
+## СТРАНИЦЫ КАТЕГОРИЙ
+
+### РЕШЕНИЯ (10 страниц):
+
+**1. CloudPage — Облачные решения**
+Вендоры: Яндекс.Облако, VK Cloud, Cloud.ru, SberCloud, МТС Cloud, Selectel
+Продукты: Compute Cloud, Object Storage, Kubernetes, DataLens, ML Platform, CDN и т.д.
+
+**2. RussianSoftwarePage — Российское ПО**
+Вендоры: МойОфис, 1С, Галактика, Р7-Офис, Postgres Pro, Astra Linux, РедСофт, BaseALT, ELMA
+Продукты: Офисные пакеты, ERP, СУБД, ОС
+
+**3. CybersecurityPage — Кибербезопасность**
+Вендоры: Касперский, Positive Technologies, InfoWatch, SearchInform, Гарда, DeviceLock, КриптоПро, Код Безопасности, Аладдин Р.Д.
+Продукты: Endpoint Security, DLP, WAF, VPN, Firewall, ЭЦП
+
+**4. AISolutionsPage — Решения на базе ИИ**
+Вендоры: Яндекс.Облако ML, SberCloud AI, VK Cloud ML, GigaChat, Kandinsky, YandexGPT
+Продукты: ML Platform, NLP, Computer Vision, Speech Recognition
+
+**5. RussianHardwarePage — Российские ноутбуки, ПК и серверы**
+Вендоры: Kraftway, Aquarius, Эльбрус, Байкал Электроникс, ИВК, DEPO, Yadro
+Продукты: Рабочие станции, серверы, ноутбуки
+
+**6. HardwareSolutionsPage — Аппаратные решения**
+Вендоры: Huawei, Cisco (для России), Eltex, Qtech, D-Link, МикроТик, SNR
+Продукты: Коммутаторы, маршрутизаторы, СХД, серверное оборудование
+
+**7. CADandGISPage — САПР и ГИС**
+Вендоры: Аскон (КОМПАС-3D), НаноСофт (nanoCAD), ГеоС, Panorama, ИндорСофт, Топоматик
+Продукты: KOMPAS-3D, nanoCAD, ГИС Панорама
+
+**8. IndustrialSolutionsPage — Индустриальные решения**
+Вендоры: SCADA системы (Trace Mode, MasterSCADA), АСУ ТП, IIoT платформы
+Продукты: Системы мониторинга, управления производством
+
+**9. GovernmentPage — Для госсектора**
+Вендоры: Astra Linux SE, Мой Офис Госы, КриптоПро, Postgres Pro Certified, Континент
+Продукты: Защищенные ОС, офисное ПО для госорганов
+
+**10. BusinessPage — Решения для бизнеса**
+Вендоры: Битрикс24, ELMA365, Comindware, Directum, СКБ Контур
+Продукты: CRM, BPM, ECM, электронная отчетность
+
+---
+
+### УСЛУГИ (7 страниц):
+
+**1. ConsultingPage — Консалтинг и проектирование**
+Услуги: IT-стратегия, Миграция на российское ПО, Оптимизация инфраструктуры, Проектирование ЦОД, Импортозамещение, Бизнес-анализ
+
+**2. ImplementationPage — Поставка и внедрение решений**
+Услуги: Поставка оборудования, Внедрение ПО, Настройка и интеграция, Пусконаладка, Обучение пользователей, Приемка систем
+
+**3. ManagedServicesPage — Управляемые сервисы**
+Услуги: Мониторинг 24/7, Управление инфраструктурой, Backup as a Service, DRaaS, Patch Management, SOC
+
+**4. IntegrationPage — Интеграция и разработка**
+Услуги: Системная интеграция, Кастомная разработка, API-интеграция, Миграция данных, DevOps, CI/CD
+
+**5. SpecializedServicesPage — Специализированные услуги по отраслям**
+Услуги по отраслям: Производство, Ритейл, Финансы, Госсектор, Медицина, Телеком
+
+**6. SupportPage — Обслуживание и сопровождение**
+Услуги: Техподдержка L1-L3, SLA гарантии, Плановое обслуживание, Инцидент-менеджмент, Change Management
+
+**7. SubscriptionPage — Услуги по подписке**
+Услуги: Cloud Subscriptions, Software Subscriptions, Hardware as a Service, Managed Services по подписке
+
+---
+
+## СТИЛИ И АНИМАЦИИ
+
+### globals.css
+
+**CSS-переменные:**
+```css
+:root {
+  --background: #ffffff;
+  --foreground: oklch(0.145 0 0);
+  --primary: #030213;
+  --border: rgba(0, 0, 0, 0.1);
+  --radius: 0.625rem;
+}
+```
+
+**Базовая типографика:**
+- h1: text-2xl, font-weight: 500
+- h2: text-xl, font-weight: 500
+- p, input, button: text-base, font-weight: 400
+
+### animations.css
+
+**Float-анимация для иконок:**
+```css
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+.animate-float { animation: float 3s ease-in-out infinite; }
+.animate-float-delay-1 { animation-delay: 0.5s; }
+.animate-float-delay-2 { animation-delay: 1s; }
+.animate-float-delay-3 { animation-delay: 1.5s; }
+.animate-float-delay-4 { animation-delay: 2s; }
+.animate-float-delay-5 { animation-delay: 2.5s; }
+```
+
+---
+
+## НАВИГАЦИЯ И РОУТИНГ
+
+### App.tsx — State-based роутинг
+
+**Логика навигации:**
+- Используется useState для хранения текущей страницы (currentPage)
+- При клике на пункт меню вызывается handleNavigate(page, section?)
+- Если передана section — скроллит к якорю на главной странице
+- Если не на главной — сначала переходит на главную, затем скроллит (через pendingScroll)
+- При переходе между страницами — скролл наверх
+
+**Страницы:**
+- home (HomePage) — главная
+- cloud, russian-software, cybersecurity, ai-solutions, russian-hardware, hardware-solutions, cad-gis, industrial-solutions, government, business — 10 страниц решений
+- consulting, implementation, managed-services, integration, specialized-services, support, subscription — 7 страниц услуг
+
+---
+
+## КОНФИГУРАЦИЯ СБОРКИ
+
+### package.json
+```json
+{
+  "name": "softclick-corporate-website",
+  "engines": {
+    "node": ">=18.0.0 <22.0.0"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.344.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vite": "^5.1.4"
+  }
+}
+```
+
+### vite.config.ts
+```ts
+export default defineConfig({
+  build: {
+    outDir: 'build', // ВАЖНО: папка build для Netlify
+  }
+});
+```
+
+### netlify.toml
+```toml
+[build]
+  command = "npm run build"
+  publish = "build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[build.environment]
+  NODE_VERSION = "18"
+```
+
+---
+
+## ВАЖНЫЕ ДЕТАЛИ
+
+1. **Дата основания:** Везде указывать "с 2021 года"
+
+2. **Метрики компании:**
+   - 300+ клиентов
+   - 50+ партнерств
+   - 95% повторных обращений
+
+3. **Цвета:**
+   - Основной акцент: #2563eb (blue-600)
+   - Фон: белый (#ffffff)
+   - Текст: серый (gray-600, gray-700, gray-900)
+   - Градиенты: использовать Tailwind-классы (from-blue-500 to-blue-600)
+
+4. **Скругления:**
+   - Карточки: rounded-2xl, rounded-3xl
+   - Кнопки: rounded-lg, rounded-xl
+   - Инпуты: rounded-xl
+
+5. **Тени:**
+   - Карточки: border border-gray-100, hover:shadow-xl
+   - Модальное окно: shadow-2xl
+
+6. **Иконки:**
+   - Размер: w-5 h-5 для мелких, w-12 h-12 для крупных
+   - Цвет: соответствует тематике секции
+
+7. **Отступы:**
+   - Максимальная ширина контейнера: max-w-[1600px]
+   - Горизонтальные отступы: px-6 xl:px-12 2xl:px-16
+   - Вертикальные отступы секций: py-20, py-24
+
+8. **Responsive:**
+   - Мобильная версия: стековые блоки
+   - Десктоп: сетки grid md:grid-cols-2 lg:grid-cols-3
+
+9. **Hover-эффекты:**
+   - Кнопки: hover:bg-blue-700, hover:shadow-lg
+   - Карточки: hover:border-blue-200, hover:shadow-xl
+   - Ссылки: hover:text-blue-600
+   - Иконки: group-hover:scale-110, group-hover:translate-x-1
+
+10. **Контактная информация:**
+    - Телефон: +7 (495) 123-45-67
+    - Email: info@softclick.ru
+    - Адрес: Москва, Пресненская наб., 12
+    - Время работы: Пн-Пт 9:00–18:00
+
+---
+
+## ФАЙЛОВАЯ СТРУКТУРА (полный список)
+
+```
+/
+├── App.tsx (главный компонент с роутингом)
+├── main.tsx (точка входа)
+├── index.html
+├── package.json
+├── vite.config.ts
+├── netlify.toml
+├── tsconfig.json
+├── postcss.config.js
+├── components/
+│   ├── Header.tsx
+│   ├── Hero.tsx
+│   ├── Services.tsx
+│   ├── Solutions.tsx
+│   ├── Cases.tsx
+│   ├── About.tsx
+│   ├── Contact.tsx
+│   ├── Footer.tsx
+│   ├── ContactModal.tsx
+│   └── CategoryPage.tsx
+├── pages/
+│   ├── HomePage.tsx
+│   ├── CloudPage.tsx
+│   ├── RussianSoftwarePage.tsx
+│   ├── CybersecurityPage.tsx
+│   ├── AISolutionsPage.tsx
+│   ├── RussianHardwarePage.tsx
+│   ├── HardwareSolutionsPage.tsx
+│   ├── CADandGISPage.tsx
+│   ├── IndustrialSolutionsPage.tsx
+│   ├── GovernmentPage.tsx
+│   ├── BusinessPage.tsx
+│   ├── ConsultingPage.tsx
+│   ├── ImplementationPage.tsx
+│   ├── ManagedServicesPage.tsx
+│   ├── IntegrationPage.tsx
+│   ├── SpecializedServicesPage.tsx
+│   ├── SupportPage.tsx
+│   └── SubscriptionPage.tsx
+└── styles/
+    ├── globals.css
+    └── animations.css
+```
+
+---
+
+## ИТОГОВЫЕ ТРЕБОВАНИЯ К РЕЗУЛЬТАТУ
+
+1. Полностью рабочий SPA на React + TypeScript
+2. Адаптивная верстка под все экраны
+3. Плавные анимации и transitions
+4. Минималистичный дизайн БЕЗ фотографий
+5. Все компоненты должны быть функциональными (useState, useEffect)
+6. Корректная навигация между всеми страницами
+7. Работающие выпадающие меню
+8. Функциональное модальное окно
+9. Якорная навигация к секциям на главной странице
+10. Готовность к деплою на Netlify (build в папку build)
+
+---
+
+## ПРИМЕР КОДА КАРТОЧКИ ВЕНДОРА
+
+```tsx
+<div className="bg-white rounded-2xl p-8 hover:shadow-lg transition-all border border-gray-100 group">
+  <h3 className="text-2xl text-gray-900 group-hover:text-blue-600 transition-colors">
+    Яндекс.Облако
+  </h3>
+  <p className="text-gray-600 mt-4">
+    Полный спектр облачных сервисов: вычисления, хранение данных, машинное обучение
+  </p>
+  <div className="mt-4 flex flex-wrap gap-2">
+    <span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm">
+      Compute Cloud
+    </span>
+    <span className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm">
+      Object Storage
+    </span>
+  </div>
+  <button className="mt-6 w-full py-3 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-600 hover:text-white transition-all">
+    Узнать больше
+  </button>
+</div>
+```
+
+---
+
+Этот промт содержит все необходимые данные для точного воссоздания сайта SOFTCLICK. Следуй ему последовательно, создавая каждый компонент с указанными стилями и структурой.