refactor: chaange figma structure with single package
This commit is contained in:
Zotov Ivan Yuryevich
239
.agents/skills/FILES-OVERVIEW.md
Normal file
239
.agents/skills/FILES-OVERVIEW.md
Normal file
@@ -0,0 +1,239 @@
|
||||
# 📁 Обзор файлов проекта
|
||||
|
||||
> **Обновление структуры:** документы по деплою перенесены в **`scripts/docs/`**; промпты и гайды для агентов — в **`.agents/skills/`** (этот каталог). Исходный код приложения — в **`src/`**.
|
||||
|
||||
## 🚀 НАЧНИТЕ С ЭТОГО ФАЙЛА
|
||||
**→ START-HERE.md** - Быстрый старт для деплоя на Netlify
|
||||
|
||||
---
|
||||
|
||||
## 📖 Документация по деплою (в порядке важности)
|
||||
|
||||
### Обязательно прочитать:
|
||||
1. **COMMIT-AND-DEPLOY.md** - Пошаговая инструкция коммита и деплоя
|
||||
2. **NETLIFY-FIX.md** - Решение проблем с Netlify
|
||||
3. **NODE-VERSION-FIX.md** - Информация о Node.js v18
|
||||
|
||||
### Дополнительная информация:
|
||||
4. **DEPLOYMENT.md** - Полная инструкция по всем платформам
|
||||
5. **DEPLOY-QUICK.md** - Быстрая шпаргалка
|
||||
6. **PLATFORMS.md** - Детальное сравнение платформ
|
||||
7. **DEPLOYMENT-CHECKLIST.md** - Чеклист для деплоя
|
||||
|
||||
### История изменений:
|
||||
8. **LATEST-FIXES.md** - Последние исправления (Node.js v18)
|
||||
9. **FIXES-SUMMARY.md** - Полная сводка всех исправлений
|
||||
|
||||
### Специфичные платформы:
|
||||
10. **deploy-yandex-cloud.md** - Яндекс.Облако
|
||||
11. **deploy-traditional-hosting.md** - Timeweb, Beget, Reg.ru
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Конфигурационные файлы
|
||||
|
||||
### Главные конфигурации:
|
||||
- **package.json** - Зависимости и скрипты
|
||||
- Содержит `engines` для Node.js 18
|
||||
- **vite.config.ts** - Конфигурация Vite
|
||||
- `outDir: 'build'` - выходная папка
|
||||
- **tsconfig.json** - TypeScript конфигурация
|
||||
|
||||
### Деплой конфигурации:
|
||||
- **.nvmrc** - Фиксация Node.js 18 (для Netlify)
|
||||
- **netlify.toml** - Настройки Netlify
|
||||
- `publish = "build"`
|
||||
- `NODE_VERSION = "18"`
|
||||
- **vercel.json** - Настройки Vercel (опционально)
|
||||
- **.htaccess** - Для Apache хостинга
|
||||
- **.gitignore** - Исключения для Git
|
||||
|
||||
### Стили и сборка:
|
||||
- **postcss.config.js** - PostCSS конфигурация
|
||||
- **tailwind.config.js** - Tailwind CSS v4 конфигурация
|
||||
- **/styles/globals.css** - Глобальные стили
|
||||
- **/styles/animations.css** - Анимации
|
||||
|
||||
---
|
||||
|
||||
## 🛠 Скрипты и утилиты
|
||||
|
||||
### Скрипты проверки:
|
||||
- **check-build.sh** - Проверка сборки (Linux/Mac)
|
||||
- **check-build.bat** - Проверка сборки (Windows)
|
||||
- Проверяют Node.js версию
|
||||
- Собирают проект
|
||||
- Показывают output директорию
|
||||
|
||||
### Скрипты деплоя:
|
||||
- **deploy.sh** - Полуавтоматический деплой (Linux/Mac)
|
||||
- **deploy.bat** - Полуавтоматический деплой (Windows)
|
||||
|
||||
---
|
||||
|
||||
## 📱 Исходный код приложения
|
||||
|
||||
### Корневые файлы:
|
||||
- **App.tsx** - Главный компонент с роутингом
|
||||
- **main.tsx** - Точка входа приложения
|
||||
- **index.html** - HTML шаблон
|
||||
|
||||
### Компоненты:
|
||||
- **/components/Header.tsx** - Шапка с навигацией
|
||||
- **/components/Footer.tsx** - Подвал сайта
|
||||
- **/components/Hero.tsx** - Hero-секция с метриками
|
||||
- **/components/About.tsx** - О компании
|
||||
- **/components/Services.tsx** - Услуги
|
||||
- **/components/Solutions.tsx** - Решения
|
||||
- **/components/Cases.tsx** - Кейсы
|
||||
- **/components/Contact.tsx** - Контакты
|
||||
- **/components/ContactModal.tsx** - Модальное окно
|
||||
- **/components/CategoryPage.tsx** - Шаблон страницы категории
|
||||
- **/components/ui/** - UI компоненты (shadcn/ui)
|
||||
|
||||
### Страницы:
|
||||
- **/pages/HomePage.tsx** - Главная страница
|
||||
- **/pages/RussianSoftwarePage.tsx** - Российское ПО
|
||||
- **/pages/RussianHardwarePage.tsx** - Российское оборудование
|
||||
- **/pages/CloudPage.tsx** - Облачные решения
|
||||
- **/pages/CybersecurityPage.tsx** - Кибербезопасность
|
||||
- **/pages/BusinessPage.tsx** - Бизнес-приложения
|
||||
- **/pages/AISolutionsPage.tsx** - AI решения
|
||||
- **/pages/CADandGISPage.tsx** - CAD/GIS системы
|
||||
- **/pages/IndustrialSolutionsPage.tsx** - Промышленные решения
|
||||
- **/pages/HardwareSolutionsPage.tsx** - Оборудование
|
||||
- **/pages/GovernmentPage.tsx** - Госсектор
|
||||
- **/pages/ConsultingPage.tsx** - Консалтинг
|
||||
- **/pages/IntegrationPage.tsx** - Интеграция
|
||||
- **/pages/ImplementationPage.tsx** - Внедрение
|
||||
- **/pages/SupportPage.tsx** - Поддержка
|
||||
- **/pages/ManagedServicesPage.tsx** - Управляемые услуги
|
||||
- **/pages/SubscriptionPage.tsx** - Подписки
|
||||
- **/pages/SpecializedServicesPage.tsx** - Спец. услуги
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Статические ресурсы
|
||||
|
||||
### Public файлы:
|
||||
- **/public/favicon.svg** - Иконка сайта (буква "S")
|
||||
|
||||
---
|
||||
|
||||
## 📚 Дополнительные файлы
|
||||
|
||||
- **README.md** - Основной README проекта
|
||||
- **Attributions.md** - Лицензии и атрибуты
|
||||
- **guidelines/Guidelines.md** - Руководство по разработке
|
||||
|
||||
---
|
||||
|
||||
## 🗂 Структура проекта
|
||||
|
||||
```
|
||||
/
|
||||
├── 🚀 START-HERE.md ← НАЧНИТЕ ОТСЮДА
|
||||
├── 📖 Документация по деплою
|
||||
│ ├── COMMIT-AND-DEPLOY.md
|
||||
│ ├── NETLIFY-FIX.md
|
||||
│ ├── NODE-VERSION-FIX.md
|
||||
│ ├── DEPLOYMENT.md
|
||||
│ ├── DEPLOY-QUICK.md
|
||||
│ ├── PLATFORMS.md
|
||||
│ ├── DEPLOYMENT-CHECKLIST.md
|
||||
│ ├── LATEST-FIXES.md
|
||||
│ ├── FIXES-SUMMARY.md
|
||||
│ ├── deploy-yandex-cloud.md
|
||||
│ └── deploy-traditional-hosting.md
|
||||
├── 🔧 Конфигурации
|
||||
│ ├── .nvmrc
|
||||
│ ├── .gitignore
|
||||
│ ├── package.json
|
||||
│ ├── vite.config.ts
|
||||
│ ├── tsconfig.json
|
||||
│ ├── netlify.toml
|
||||
│ ├── postcss.config.js
|
||||
│ ├── tailwind.config.js
|
||||
│ ├── .htaccess
|
||||
│ └── vercel.json
|
||||
├── 🛠 Скрипты
|
||||
│ ├── check-build.sh
|
||||
│ ├── check-build.bat
|
||||
│ ├── deploy.sh
|
||||
│ └── deploy.bat
|
||||
├── 📱 Исходный код
|
||||
│ ├── App.tsx
|
||||
│ ├── main.tsx
|
||||
│ ├── index.html
|
||||
│ ├── /components/ (React компоненты)
|
||||
│ ├── /pages/ (Страницы)
|
||||
│ ├── /styles/ (Стили)
|
||||
│ └── /public/ (Статические файлы)
|
||||
└── 📚 Прочее
|
||||
├── README.md
|
||||
├── Attributions.md
|
||||
└── guidelines/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Какой файл читать?
|
||||
|
||||
### Хочу быстро задеплоить на Netlify:
|
||||
→ **START-HERE.md**
|
||||
|
||||
### Netlify выдаёт ошибку:
|
||||
→ **NETLIFY-FIX.md**
|
||||
|
||||
### Проблемы с Node.js версией:
|
||||
→ **NODE-VERSION-FIX.md**
|
||||
|
||||
### Хочу сравнить платформы:
|
||||
→ **PLATFORMS.md**
|
||||
|
||||
### Нужна полная инструкция:
|
||||
→ **DEPLOYMENT.md**
|
||||
|
||||
### Хочу задеплоить на Яндекс.Облако:
|
||||
→ **deploy-yandex-cloud.md**
|
||||
|
||||
### Что было исправлено:
|
||||
→ **LATEST-FIXES.md** или **FIXES-SUMMARY.md**
|
||||
|
||||
---
|
||||
|
||||
## 📋 NPM Scripts
|
||||
|
||||
```bash
|
||||
npm run dev # Запуск dev-сервера (http://localhost:5173)
|
||||
npm run build # Сборка для продакшена (→ build/)
|
||||
npm run preview # Предпросмотр продакшен-сборки
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✨ Особенности проекта
|
||||
|
||||
- ✅ **React 18** + **TypeScript**
|
||||
- ✅ **Vite 5** для быстрой сборки
|
||||
- ✅ **Tailwind CSS v4** для стилизации
|
||||
- ✅ **React Router** для навигации
|
||||
- ✅ **Lucide Icons** для иконок
|
||||
- ✅ **shadcn/ui** компоненты
|
||||
- ✅ **Responsive дизайн**
|
||||
- ✅ **Российские аналоги** зарубежных решений
|
||||
- ✅ **Минималистичный дизайн** без фотографий
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Полезные ссылки
|
||||
|
||||
- Vite: https://vitejs.dev
|
||||
- React: https://react.dev
|
||||
- Tailwind CSS: https://tailwindcss.com
|
||||
- Netlify: https://netlify.com
|
||||
- Node.js: https://nodejs.org
|
||||
|
||||
---
|
||||
|
||||
Этот файл создан для быстрой навигации по проекту. Начните с **START-HERE.md**! 🚀
|
||||
659
.agents/skills/PROMPT-FOR-RECREATION.md
Normal file
659
.agents/skills/PROMPT-FOR-RECREATION.md
Normal file
@@ -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. Следуй ему последовательно, создавая каждый компонент с указанными стилями и структурой.
|
||||
120
.agents/skills/START-HERE.md
Normal file
120
.agents/skills/START-HERE.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 🚀 НАЧНИТЕ ОТСЮДА
|
||||
|
||||
> **Актуальная структура репозитория:** сборка в **`dist/`** (стандарт Vite). Документация по деплою — в **`scripts/docs/`**. Скрипты — в **`scripts/`**. Точка входа приложения — корневой **`index.html`** и **`src/main.tsx`**.
|
||||
|
||||
## Проект готов к деплою на Netlify!
|
||||
|
||||
Все проблемы исправлены:
|
||||
- ✅ Node.js зафиксирован на версии 18 LTS
|
||||
- ✅ Vite настроен на сборку в папку `dist`
|
||||
- ✅ Netlify настроен на публикацию из `dist`
|
||||
- ✅ Все конфигурации обновлены
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Быстрый старт
|
||||
|
||||
### 1. Закоммитьте изменения
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Fix: Pin Node.js to v18 and configure build output"
|
||||
git push origin main
|
||||
```
|
||||
|
||||
### 2. Деплой на Netlify
|
||||
|
||||
После пуша:
|
||||
1. Зайдите на https://app.netlify.com
|
||||
2. Откройте ваш сайт
|
||||
3. Дождитесь автоматического деплоя (~2-3 минуты)
|
||||
4. Готово! ✅
|
||||
|
||||
---
|
||||
|
||||
## 📖 Документация
|
||||
|
||||
### Для быстрого решения проблем:
|
||||
- **COMMIT-AND-DEPLOY.md** - пошаговая инструкция по деплою
|
||||
- **NETLIFY-FIX.md** - решение проблем с Netlify
|
||||
- **NODE-VERSION-FIX.md** - информация о Node.js версии
|
||||
|
||||
### Полная информация:
|
||||
- **DEPLOYMENT.md** - все способы деплоя
|
||||
- **PLATFORMS.md** - сравнение платформ
|
||||
- **DEPLOY-QUICK.md** - быстрая шпаргалка
|
||||
|
||||
### История изменений:
|
||||
- **LATEST-FIXES.md** - последние исправления
|
||||
- **FIXES-SUMMARY.md** - полная сводка всех исправлений
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Проверка перед коммитом (опционально)
|
||||
|
||||
```bash
|
||||
# Проверьте версию Node.js
|
||||
node -v # Должно быть v18.x.x
|
||||
|
||||
# Если нет, установите:
|
||||
nvm install 18
|
||||
nvm use 18
|
||||
|
||||
# Запустите скрипт проверки сборки
|
||||
chmod +x check-build.sh
|
||||
./check-build.sh
|
||||
|
||||
# Должно показать:
|
||||
# ✅ Node.js версия совместима
|
||||
# ✅ BUILD OUTPUT: build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ❓ Что дальше?
|
||||
|
||||
После успешного деплоя на Netlify:
|
||||
|
||||
### Базовые настройки:
|
||||
- [ ] Проверьте что сайт работает
|
||||
- [ ] Настройте кастомный домен (если нужно)
|
||||
- [ ] SSL сертификат (Netlify настроит автоматически)
|
||||
|
||||
### Дополнительные возможности:
|
||||
- [ ] Подключите Yandex.Metrika или Google Analytics
|
||||
- [ ] Настройте форму обратной связи
|
||||
- [ ] Добавьте favicon (уже есть в `/public/favicon.svg`)
|
||||
- [ ] Настройте redirects для старых URL (если нужно)
|
||||
|
||||
---
|
||||
|
||||
## 🆘 Проблемы с Netlify?
|
||||
|
||||
### Вариант 1: Используйте Cloudflare Pages
|
||||
```
|
||||
1. https://pages.cloudflare.com
|
||||
2. Build: npm run build
|
||||
3. Output: build
|
||||
4. Environment: NODE_VERSION = 18
|
||||
```
|
||||
|
||||
### Вариант 2: GitHub Pages
|
||||
Создайте файл `.github/workflows/deploy.yml` (см. документацию)
|
||||
|
||||
---
|
||||
|
||||
## ✅ Быстрая команда для деплоя
|
||||
|
||||
```bash
|
||||
# Всё в одной команде
|
||||
git add . && \
|
||||
git commit -m "Fix deployment config" && \
|
||||
git push && \
|
||||
echo "✅ Pushed! Check Netlify for deploy status."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Удачи с деплоем!** 🎉
|
||||
|
||||
Если возникнут вопросы - см. файл **COMMIT-AND-DEPLOY.md** для детальных инструкций.
|
||||
61
.agents/skills/guidelines/Guidelines.md
Normal file
61
.agents/skills/guidelines/Guidelines.md
Normal file
@@ -0,0 +1,61 @@
|
||||
**Add your own guidelines here**
|
||||
<!--
|
||||
|
||||
System Guidelines
|
||||
|
||||
Use this file to provide the AI with rules and guidelines you want it to follow.
|
||||
This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs
|
||||
|
||||
TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need
|
||||
|
||||
# General guidelines
|
||||
|
||||
Any general rules you want the AI to follow.
|
||||
For example:
|
||||
|
||||
* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
|
||||
* Refactor code as you go to keep code clean
|
||||
* Keep file sizes small and put helper functions and components in their own files.
|
||||
|
||||
--------------
|
||||
|
||||
# Design system guidelines
|
||||
Rules for how the AI should make generations look like your company's design system
|
||||
|
||||
Additionally, if you select a design system to use in the prompt box, you can reference
|
||||
your design system's components, tokens, variables and components.
|
||||
For example:
|
||||
|
||||
* Use a base font-size of 14px
|
||||
* Date formats should always be in the format “Jun 10”
|
||||
* The bottom toolbar should only ever have a maximum of 4 items
|
||||
* Never use the floating action button with the bottom toolbar
|
||||
* Chips should always come in sets of 3 or more
|
||||
* Don't use a dropdown if there are 2 or fewer options
|
||||
|
||||
You can also create sub sections and add more specific details
|
||||
For example:
|
||||
|
||||
|
||||
## Button
|
||||
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
|
||||
users through the application. It provides visual feedback and clear affordances to enhance user experience.
|
||||
|
||||
### Usage
|
||||
Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
|
||||
or initiating processes. They communicate interactivity and should have clear, action-oriented labels.
|
||||
|
||||
### Variants
|
||||
* Primary Button
|
||||
* Purpose : Used for the main action in a section or page
|
||||
* Visual Style : Bold, filled with the primary brand color
|
||||
* Usage : One primary button per section to guide users toward the most important action
|
||||
* Secondary Button
|
||||
* Purpose : Used for alternative or supporting actions
|
||||
* Visual Style : Outlined with the primary color, transparent background
|
||||
* Usage : Can appear alongside a primary button for less important actions
|
||||
* Tertiary Button
|
||||
* Purpose : Used for the least important actions
|
||||
* Visual Style : Text-only with no border, using primary color
|
||||
* Usage : For actions that should be available but not emphasized
|
||||
-->
|
||||
Reference in New Issue
Block a user