diff --git a/index.html b/index.html index d214443..28db87e 100644 --- a/index.html +++ b/index.html @@ -12,61 +12,172 @@ a.kt-ai-btn { text-decoration: none; } .step { display: none; } .step.active { display: block; } + + /* Hero — светлый градиент */ .kt-ai-hero { padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%); } + + /* Постеры ролей — Anchor style с картинками */ .role-poster { position: relative; - background: white; - border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); - padding: var(--kt-ai-space-8); - cursor: pointer; - transition: all 0.3s ease; overflow: hidden; - min-height: 280px; + cursor: pointer; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + min-height: 300px; display: flex; flex-direction: column; - box-shadow: 0 1px 3px rgba(0,0,0,0.05); - } - .role-poster:hover { - transform: translateY(-8px); - box-shadow: 0 12px 40px rgba(0,0,0,0.1); - border-color: var(--role-accent, var(--kt-ai-primary)); - } - .role-poster.selected { - outline: 2px solid var(--role-accent, var(--kt-ai-primary)); - box-shadow: 0 12px 40px rgba(0,0,0,0.15); + border: 1px solid transparent; } .role-poster::before { - content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; - background: var(--role-accent, var(--kt-ai-primary)); + content: ''; + position: absolute; + inset: 0; + z-index: 0; + opacity: 0.15; + background-image: var(--poster-pattern); + background-size: cover; + background-position: center; } - .role-icon { - width: 64px; height: 64px; border-radius: var(--kt-ai-radius-xl); - background: var(--role-accent, var(--kt-ai-primary)); - display: flex; align-items: center; justify-content: center; - margin-bottom: var(--kt-ai-space-5); - flex-shrink: 0; + .role-poster > * { + position: relative; + z-index: 1; } - .role-icon svg { width: 32px; height: 32px; color: white; flex-shrink: 0; } - .role-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-3); } - .role-desc { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.6; flex-grow: 1; } - .product-card { cursor: pointer; transition: all 0.3s ease; background: white; border: 1px solid var(--kt-ai-border); } - .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } - .product-card.selected { outline: 2px solid var(--kt-ai-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } - .product-icon { - width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg); - background: var(--kt-ai-primary); - display: flex; align-items: center; justify-content: center; - margin-bottom: var(--kt-ai-space-4); + .role-poster:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: 0 20px 50px -15px rgba(0,0,0,0.25); } - .product-icon svg { width: 24px; height: 24px; color: white; } + .role-poster.selected { + outline: 3px solid var(--poster-color, var(--kt-ai-primary)); + transform: scale(1.02); + } + + /* Фоновая картинка постера */ + .poster-bg { + position: absolute; + inset: 0; + overflow: hidden; + } + .poster-bg img { + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(0.9); + } + .poster-overlay { + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 30%, var(--poster-color, var(--kt-ai-bg)) 90%); + } + + /* Контент постера */ + .poster-content { + position: relative; + z-index: 2; + padding: var(--kt-ai-space-6); + display: flex; + flex-direction: column; + flex-grow: 1; + margin-top: auto; + background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 80%); + } + .poster-badge { + display: inline-flex; + align-items: center; + gap: var(--kt-ai-space-2); + padding: var(--kt-ai-space-2) var(--kt-ai-space-3); + border-radius: var(--kt-ai-radius-full); + font-size: var(--kt-ai-text-xs); + font-weight: var(--kt-ai-weight-medium); + color: white; + background: var(--poster-color, var(--kt-ai-primary)); + align-self: flex-start; + margin-bottom: var(--kt-ai-space-3); + } + .poster-title { + font-size: var(--kt-ai-text-xl); + font-weight: var(--kt-ai-weight-bold); + color: white; + margin-bottom: var(--kt-ai-space-2); + text-shadow: 0 2px 8px rgba(0,0,0,0.3); + } + .poster-desc { + font-size: var(--kt-ai-text-sm); + color: rgba(255,255,255,0.85); + line-height: 1.5; + } + + /* Карточки продуктов */ + .product-card { + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: white; + border: 1px solid var(--kt-ai-border); + border-radius: var(--kt-ai-radius-xl); + overflow: hidden; + } + .product-card:hover { + transform: translateY(-6px); + box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12); + border-color: var(--kt-ai-primary); + } + .product-card.selected { + outline: 2px solid var(--kt-ai-primary); + box-shadow: 0 12px 32px -8px rgba(0,112,214,0.2); + } + .product-header { + height: 120px; + background: var(--product-gradient, var(--kt-ai-primary)); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + } + .product-header::after { + content: ''; + position: absolute; + bottom: -40px; + left: -40px; + width: 120px; + height: 120px; + border-radius: 50%; + background: rgba(255,255,255,0.1); + } + .product-header svg { + width: 40px; + height: 40px; + color: white; + filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); + } + .product-body { + padding: var(--kt-ai-space-5); + } + .product-title { + font-size: var(--kt-ai-text-lg); + font-weight: var(--kt-ai-weight-semibold); + color: var(--kt-ai-fg); + margin-bottom: var(--kt-ai-space-2); + } + .product-desc { + font-size: var(--kt-ai-text-sm); + color: var(--kt-ai-fg-muted); + line-height: 1.5; + } + + /* Промт вывод */ .prompt-output { - background: var(--kt-ai-bg-soft); padding: var(--kt-ai-space-6); border-radius: var(--kt-ai-radius-xl); - font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-sm); white-space: pre-wrap; - border: 1px solid var(--kt-ai-border); max-height: 400px; overflow-y: auto; + background: var(--kt-ai-bg-soft); + padding: var(--kt-ai-space-6); + border-radius: var(--kt-ai-radius-xl); + font-family: var(--kt-ai-font-mono); + font-size: var(--kt-ai-text-sm); + white-space: pre-wrap; + border: 1px solid var(--kt-ai-border); + max-height: 450px; + overflow-y: auto; } @@ -95,45 +206,77 @@

Выберите роль — мы подберем подходящие сервисы

-
-
-
Предприниматель
-
Создаю бизнес-инструменты для роста и автоматизации
+
+
Предприниматель
+
+
+
Бизнес
+
Предприниматель
+
Создаю бизнес-инструменты для роста и автоматизации
+
-
-
-
IT-специалист
-
Разрабатываю решения для коллег и клиентов
+
+
IT-специалист
+
+
+
Технологии
+
IT-специалист
+
Разрабатываю решения для коллег и клиентов
+
-
-
-
HR
-
Подбираю таланты и развиваю команду
+
+
HR
+
+
+
Люди
+
HR
+
Подбираю таланты и развиваю команду
+
-
-
-
Маркетолог
-
Продвигаю продукты и создаю контент
+
+
Маркетолог
+
+
+
Контент
+
Маркетолог
+
Продвигаю продукты и создаю контент
+
-
-
-
Студент
-
Учусь и создаю проекты для портфолио
+
+
Студент
+
+
+
Обучение
+
Студент
+
Учусь и создаю проекты для портфолио
+
-
-
-
Creator
-
Создаю контент для соцсетей и блогов
+
+
Creator
+
+
+
Творчество
+
Creator
+
Создаю контент для соцсетей и блогов
+
-
-
-
Просто хочу попробовать
-
Любопытно создать свой первый AI-сервис
+
+
Новичок
+
+
+
Начало
+
Просто хочу попробовать
+
Любопытно создать свой первый AI-сервис
+
-
-
-
Своя идея
-
Хочу создать уникальный продукт с нуля
+
+
Своя идея
+
+
+
Уникально
+
Своя идея
+
Хочу создать уникальный продукт с нуля
+
@@ -144,60 +287,60 @@

8 готовых AI-решений под вашу задачу

-
-
-
-

AI Trip Planner

-

Персональный маршрут путешествия по бюджету, интересам и типу отдыха

+
+
+
+

AI Trip Planner

+

Персональный маршрут путешествия по бюджету, интересам и типу отдыха

-
-
-
-

Smart Budget

-

Анализ бюджета: доходы, расходы, прогноз и рекомендации

+
+
+
+

Smart Budget

+

Анализ бюджета: доходы, расходы, прогноз и рекомендации

-
-
-
-

AI Learning Coach

-

План обучения: язык, программирование, любой навык

+
+
+
+

AI Learning Coach

+

План обучения: язык, программирование, любой навык

-
-
-
-

HR Candidate Matcher

-

Сопоставление резюме и вакансии: % соответствия, риски, вопросы

+
+
+
+

HR Candidate Matcher

+

Сопоставление резюме и вакансии: % соответствия, риски, вопросы

-
-
-
-

AI Content Studio

-

Контент-план, идеи, Reels, посты для соцсетей

+
+
+
+

AI Content Studio

+

Контент-план, идеи, Reels, посты для соцсетей

-
-
-
-

Business Idea Analyzer

-

Анализ бизнес-идеи: аудитория, риски, монетизация

+
+
+
+

Business Idea Analyzer

+

Анализ бизнес-идеи: аудитория, риски, монетизация

-
-
-
-

Event Planner

-

Программа мероприятия, расписание, маршрут участника

+
+
+
+

Event Planner

+

Программа мероприятия, расписание, маршрут участника

-
-
-
-

Smart Task Planner

-

Приоритизация задач, планирование расписания

+
+
+
+

Smart Task Planner

+

Приоритизация задач, планирование расписания