admin/softclick-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
softclick-landing/.agents/skills/PROMPT-FOR-RECREATION.md
Zotov Ivan Yuryevich cee424f759 refactor: delete all deploy related files
2026-04-02 23:59:04 +03:00

28 KiB
Raw Permalink Blame History

Полный промт для воссоздания корпоративного сайта 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-переменные:

: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-анимация для иконок:

@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

{
  "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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // Сборка по умолчанию в dist/ (стандарт Vite)
});

ВАЖНЫЕ ДЕТАЛИ

  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

ФАЙЛОВАЯ СТРУКТУРА (полный список)

/
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── public/
│   └── favicon.svg
└── src/
    ├── App.tsx (главный компонент с роутингом)
    ├── main.tsx (точка входа)
    ├── 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. Продакшен-сборка в каталог dist/ (стандарт Vite)

ПРИМЕР КОДА КАРТОЧКИ ВЕНДОРА

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