660 lines
28 KiB
Markdown
660 lines
28 KiB
Markdown
# Полный промт для воссоздания корпоративного сайта 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. Следуй ему последовательно, создавая каждый компонент с указанными стилями и структурой.
|