helloworldapp / index.html
madstuntman11's picture
use this images
27a7086 verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leanq AI - Presentation</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
leanq: {
green: '#00C853', // Яркий зеленый из концепции
dark: '#111111', // Глубокий черный
gray: '#F5F5F7', // Светлый фон для блоков
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body {
background-color: #E5E5E5;
-webkit-font-smoothing: antialiased;
}
/* Класс слайда: фиксированный размер 16:9 как у Smartway */
.slide {
width: 1000px;
height: 562.5px; /* 16:9 Aspect Ratio */
background: white;
margin: 40px auto;
position: relative;
overflow: hidden;
padding: 40px 60px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.slide-footer {
position: absolute;
bottom: 30px;
left: 60px;
right: 60px;
border-top: 1px solid #E5E7EB;
padding-top: 15px;
display: flex;
justify-content: space-between;
color: #9CA3AF;
font-size: 12px;
}
/* Стили для скроллбара, чтобы не мешал */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- Слайд 1: Титульный -->
<div class="slide justify-center">
<div class="mb-8">
<!-- Логотип текстом, если нет картинки, или замените на img -->
<div class="text-5xl font-extrabold tracking-tighter">
Leanq<span class="text-leanq-green">></span>Al
</div>
</div>
<h1 class="text-6xl font-extrabold text-leanq-dark leading-tight mb-6">
Использование AI <br>
<span class="text-leanq-green">под контролем</span>
</h1>
<p class="text-2xl text-gray-600 max-w-2xl leading-relaxed">
Единый доступ к 400+ нейросетям для команд через Telegram. Управляемо, безопасно, эффективно.
</p>
<div class="slide-footer">
<span>Leanq AI Presentation 2025</span>
<span>1</span>
</div>
</div>
<!-- Слайд 2: Проблема в цифрах (Крючок) -->
<div class="slide justify-center">
<div class="flex flex-col items-start justify-center h-full">
<div class="text-[180px] font-extrabold text-leanq-dark leading-none -ml-2">
30%
</div>
<h2 class="text-4xl font-bold text-gray-800 mt-4">
времени теряют IT-команды <br>из-за хаоса в использовании нейросетей*
</h2>
<p class="mt-auto text-sm text-gray-400 absolute bottom-8">
*по данным опросов среди компаний, использующих разрозненные подписки на ChatGPT, DALL-E и Claude без централизованного управления.
</p>
</div>
<div class="slide-footer" style="border:none;">
<span></span>
<span>2</span>
</div>
</div>
<!-- Слайд 3: О компании -->
<div class="slide">
<h3 class="text-3xl font-bold text-leanq-dark mb-10">8 лет создаем AI-решения, которые работают для бизнеса</h3>
<div class="grid grid-cols-3 gap-6 mb-10">
<div class="bg-leanq-gray p-6 rounded-xl">
<div class="text-4xl font-bold text-leanq-green mb-2">8 лет</div>
<div class="text-gray-600 font-medium">в AI-интеграциях</div>
</div>
<div class="bg-leanq-gray p-6 rounded-xl">
<div class="text-4xl font-bold text-leanq-green mb-2">7+</div>
<div class="text-gray-600 font-medium">отраслей</div>
</div>
<div class="bg-leanq-gray p-6 rounded-xl">
<div class="text-4xl font-bold text-leanq-green mb-2">1500+ ч</div>
<div class="text-gray-600 font-medium">экономии/мес у клиентов</div>
</div>
</div>
<div class="flex gap-10">
<div class="w-2/3 text-gray-700 text-lg leading-relaxed">
<p class="mb-4">Leanq AI — мы прошли путь от сложных, кастомных AI-проектов до создания собственных сервисов, основанных на реальных потребностях команд.</p>
<p>Мы понимаем AI изнутри: от архитектуры моделей до интеграции. Это позволяет нам предлагать не просто "доступ к чату", а технологически выверенное решение.</p>
</div>
</div>
<!-- Место для логотипов клиентов -->
<div class="mt-auto mb-8">
<p class="text-sm text-gray-400 mb-4 uppercase tracking-wider font-semibold">Нам доверяют</p>
<img src="https://huggingface.co/spaces/madstuntman11/helloworldapp/resolve/main/images/slide3_clients.png" alt="Clients: tango vk LUK cisco Gelato" class="h-12 opacity-60 grayscale object-contain object-left">
</div>
<div class="slide-footer">
<span>О компании</span>
<span>3</span>
</div>
</div>
<!-- Слайд 4: Проблема (Хаос) -->
<div class="slide">
<h2 class="text-4xl font-bold text-leanq-dark mb-12 max-w-3xl">AI — это мощно. <br>Но его внедрение в командах — это хаос.</h2>
<div class="grid grid-cols-3 gap-8">
<div class="flex flex-col">
<div class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h4 class="text-xl font-bold mb-2">Неконтролируемые расходы</h4>
<p class="text-gray-600">Сотрудники используют личные карты для оплаты. Бизнес не видит общей картины трат.</p>
</div>
<div class="flex flex-col">
<div class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
</div>
<h4 class="text-xl font-bold mb-2">Риски безопасности</h4>
<p class="text-gray-600">Корпоративные данные "утекают" в незащищенные сервисы через личные аккаунты без контроля.</p>
</div>
<div class="flex flex-col">
<div class="w-12 h-12 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h4 class="text-xl font-bold mb-2">Потеря времени</h4>
<p class="text-gray-600">Лучшие практики и промпты теряются в личных чатах. Команда не обменивается опытом.</p>
</div>
</div>
<div class="slide-footer">
<span>Проблема</span>
<span>4</span>
</div>
</div>
<!-- Слайд 5: Решение (Leanq AI) -->
<div class="slide justify-center items-center text-center bg-leanq-dark text-white">
<div class="mb-6">
<span class="bg-leanq-green text-white px-4 py-1 rounded-full text-sm font-bold tracking-wide">РЕШЕНИЕ</span>
</div>
<h2 class="text-5xl font-extrabold mb-8 leading-tight">
Мы превращаем AI-хаос <br>в управляемый бизнес-процесс
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Leanq AI — это единая платформа, которая дает вашей команде доступ к 400+ нейросетям через привычный
<span class="text-leanq-green font-bold">Telegram</span> (или другие мессенджеры), а вам — полный контроль над расходами, безопасностью и эффективностью.
</p>
<div class="slide-footer border-gray-700">
<span class="text-gray-500">Leanq AI</span>
<span class="text-gray-500">5</span>
</div>
</div>
<!-- Слайд 6: Ценность 1 (Доступность) -->
<div class="slide">
<div class="flex h-full gap-10 items-center">
<div class="w-1/2">
<div class="uppercase text-leanq-green font-bold tracking-wider mb-2">Ценность №1</div>
<h2 class="text-4xl font-bold text-leanq-dark mb-6">Мгновенная доступность и простота</h2>
<p class="text-xl text-gray-600 mb-8">Работайте с AI так же просто, как пишете коллеге.</p>
<ul class="space-y-6">
<li class="flex items-start">
<svg class="w-6 h-6 text-leanq-green mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-lg text-gray-800 font-medium">Доступ без VPN с любого устройства</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-leanq-green mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-lg text-gray-800 font-medium">Никаких новых логинов и паролей</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-leanq-green mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-lg text-gray-800 font-medium">Бесшовный контекст: файлы, картинки, ссылки</span>
</li>
</ul>
</div>
<div class="w-1/2 h-full bg-gray-100 rounded-xl overflow-hidden border border-gray-200 flex items-center justify-center relative">
<img src="https://huggingface.co/spaces/madstuntman11/helloworldapp/resolve/main/images/slide6_chat.png" alt="Telegram Chat Interface" class="absolute inset-0 w-full h-full object-cover object-top">
<span class="bg-white/80 backdrop-blur px-4 py-2 rounded text-sm absolute z-10" style="display:none;">Скриншот чата Telegram</span>
</div>
</div>
<div class="slide-footer">
<span>Доступность</span>
<span>6</span>
</div>
</div>
<!-- Слайд 7: Нулевая кривая обучения (НОВЫЙ) -->
<div class="slide">
<h2 class="text-4xl font-bold text-leanq-dark mb-2">Нулевая кривая обучения</h2>
<p class="text-xl text-gray-500 mb-10">Мы не заставляем сотрудников переучиваться. Мы приходим туда, где они уже работают.</p>
<div class="grid grid-cols-3 gap-6 h-full">
<div class="bg-leanq-gray p-8 rounded-xl border-t-4 border-leanq-green">
<h3 class="text-xl font-bold mb-4">1. Привычная среда</h3>
<p class="text-gray-600">Сотрудникам не нужно осваивать новый интерфейс. Общение с AI происходит в привычном мессенджере — так же естественно, как переписка с коллегой.</p>
</div>
<div class="bg-leanq-gray p-8 rounded-xl border-t-4 border-leanq-green">
<h3 class="text-xl font-bold mb-4">2. Мгновенный онбординг</h3>
<p class="text-gray-600">Время от приглашения до первого результата — <strong class="text-leanq-dark">1 минута</strong>. Никаких тренингов. Сотрудник просто открывает чат и пишет задачу.</p>
</div>
<div class="bg-leanq-gray p-8 rounded-xl border-t-4 border-leanq-green">
<h3 class="text-xl font-bold mb-4">3. Высокий Adoption Rate</h3>
<p class="text-gray-600">Главная проблема внедрения — саботаж. Здесь барьер отсутствует. <strong class="text-leanq-dark">9 из 10</strong> сотрудников начинают использовать AI ежедневно.</p>
</div>
</div>
<div class="mt-8 text-center">
<p class="text-2xl font-bold text-leanq-dark italic">«Лучший инструмент — это тот, который не нужно учиться использовать»</p>
</div>
<div class="slide-footer">
<span>Внедрение</span>
<span>7</span>
</div>
</div>
<!-- Слайд 8: Ценность 2 (Контроль) -->
<div class="slide">
<div class="flex h-full gap-10">
<div class="w-1/2">
<div class="uppercase text-leanq-green font-bold tracking-wider mb-2">Ценность №2</div>
<h2 class="text-4xl font-bold text-leanq-dark mb-6">Полный контроль и прозрачность</h2>
<p class="text-xl text-gray-600 mb-8">Вы точно знаете, как команда использует AI.</p>
<div class="space-y-6">
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h4 class="font-bold text-lg">Единый счет (Pay-As-You-Go)</h4>
<p class="text-gray-500 text-sm">Оплата только по факту использования.</p>
</div>
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h4 class="font-bold text-lg">Управление доступом</h4>
<p class="text-gray-500 text-sm">Гибкая настройка моделей для сотрудников.</p>
</div>
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h4 class="font-bold text-lg">Детальная бизнес-аналитика</h4>
<p class="text-gray-500 text-sm">Кто, как и для каких задач использует AI.</p>
</div>
</div>
</div>
<div class="w-1/2 bg-gray-50 rounded-xl border border-gray-200 overflow-hidden shadow-inner relative">
<img src="https://huggingface.co/spaces/madstuntman11/helloworldapp/resolve/main/images/slide8_analytics.png" alt="Analytics Dashboard" class="absolute inset-0 w-full h-full object-contain p-4">
</div>
</div>
<div class="slide-footer">
<span>Безопасность</span>
<span>8</span>
</div>
</div>
<!-- Слайд 9: Ценность 3 (Результат) -->
<div class="slide">
<div class="flex h-full gap-10 items-center">
<div class="w-1/2 order-2">
<div class="uppercase text-leanq-green font-bold tracking-wider mb-2">Ценность №3</div>
<h2 class="text-4xl font-bold text-leanq-dark mb-6">Не просто текст, а готовый результат</h2>
<p class="text-xl text-gray-600 mb-8">От идеи до финального документа за минуты, прямо в Telegram.</p>
<ul class="space-y-4">
<li class="bg-leanq-gray p-4 rounded-lg">
<strong class="block text-lg text-leanq-dark">Готовые документы</strong>
<span class="text-gray-600">Результат сразу в PDF или Docx для редактирования.</span>
</li>
<li class="bg-leanq-gray p-4 rounded-lg">
<strong class="block text-lg text-leanq-dark">Интерактивная аналитика</strong>
<span class="text-gray-600">"Живые" HTML-таблицы с поиском и графики.</span>
</li>
<li class="bg-leanq-gray p-4 rounded-lg">
<strong class="block text-lg text-leanq-dark">Брендированный креатив</strong>
<span class="text-gray-600">Изображения (ReCraft) в палитре вашего бренда.</span>
</li>
</ul>
</div>
<div class="w-1/2 h-full bg-white border border-gray-200 rounded-xl shadow-lg relative order-1 overflow-hidden">
<img src="https://huggingface.co/spaces/madstuntman11/helloworldapp/resolve/main/images/slide9_doc.png" alt="Generated Document Preview" class="absolute inset-0 w-full h-full object-cover object-top">
</div>
</div>
<div class="slide-footer">
<span>Продуктивность</span>
<span>9</span>
</div>
</div>
<!-- Слайд 10: Майндмэпы (НОВЫЙ) -->
<div class="slide">
<div class="flex h-full gap-8">
<div class="w-1/3 flex flex-col justify-center">
<span class="text-leanq-green font-bold tracking-wider text-sm mb-2">BETA ФУНКЦИЯ</span>
<h2 class="text-3xl font-bold text-leanq-dark mb-4">Структурируем хаос идей</h2>
<p class="text-gray-600 mb-6 text-sm">Превращаем длинные диалоги с нейросетями и сложные рассуждения в наглядные Mind Maps в один клик.</p>
<div class="space-y-4">
<div class="border-l-2 border-red-400 pl-4 py-1">
<h5 class="font-bold text-sm">Проблема</h5>
<p class="text-xs text-gray-500">Когнитивная перегрузка и потеря контекста в длинных переписках. "Цифровой склероз".</p>
</div>
<div class="border-l-2 border-leanq-green pl-4 py-1">
<h5 class="font-bold text-sm">Решение</h5>
<p class="text-xs text-gray-500">Визуализация связей, Zoom-out взгляд на задачу, экспорт в XMind/PDF.</p>
</div>
</div>
</div>
<div class="w-2/3 bg-gray-50 border border-gray-200 rounded-xl relative overflow-hidden flex items-center justify-center">
<img src="https://huggingface.co/spaces/madstuntman11/helloworldapp/resolve/main/images/slide10_mindmap.png" alt="Mind Map Example" class="absolute inset-0 w-full h-full object-contain">
<p class="absolute bottom-2 right-4 text-xs text-gray-400 bg-white/80 px-2 py-1 rounded">Пример генерации структуры стратегии</p>
</div>
</div>
<div class="slide-footer">
<span>Визуализация</span>
<span>10</span>
</div>
</div>
<!-- Слайд 11: Возможности (Список) -->
<div class="slide">
<h2 class="text-4xl font-bold text-leanq-dark mb-10">Ключевые возможности платформы</h2>
<div class="grid grid-cols-2 gap-6">
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-md transition bg-white">
<div class="text-3xl mb-3">🤖</div>
<h3 class="text-xl font-bold mb-2">400+ LLM моделей</h3>
<p class="text-gray-600">Единый доступ к лучшим моделям мира (GPT-4, Claude 3.5, Gemini и др.) в одном окне.</p>
</div>
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-md transition bg-white">
<div class="text-3xl mb-3">💬</div>
<h3 class="text-xl font-bold mb-2">Контекстный режим</h3>
<p class="text-gray-600">Параллельные чат-сессии. AI помнит нить разговора, но вы можете легко переключать темы.</p>
</div>
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-md transition bg-white">
<div class="text-3xl mb-3">📝</div>
<h3 class="text-xl font-bold mb-2">Форматирование</h3>
<p class="text-gray-600">Красивый вывод кода с подсветкой, списков, Markdown-заголовков прямо в Telegram.</p>
</div>
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-md transition bg-white">
<div class="text-3xl mb-3">🛡️</div>
<h3 class="text-xl font-bold mb-2">Администрирование</h3>
<p class="text-gray-600">Управление ролями, лимитами и доступами для каждого сотрудника.</p>
</div>
</div>
<div class="slide-footer">
<span>Функционал</span>
<span>11</span>
</div>
</div>
<!-- Слайд 12: Кейс Вектор -->
<div class="slide">
<div class="bg-blue-50 text-blue-800 px-3 py-1 inline-block rounded text-xs font-bold mb-4 w-max">КЕЙС: КОНСАЛТИНГ</div>
<h2 class="text-3xl font-bold text-leanq-dark mb-6">Результаты "Вектор" с Leanq AI</h2>
<div class="flex gap-8">
<div class="w-2/3">
<div class="flex gap-4 mb-8">
<div class="bg-leanq-green text-white p-4 rounded-xl flex-1">
<div class="text-3xl font-bold mb-1">30%</div>
<div class="text-sm opacity-90">Экономия времени на отчетах</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-xl flex-1">
<div class="text-3xl font-bold mb-1">x10</div>
<div class="text-sm opacity-90">Ускорение анализа данных</div>
</div>
</div>
<div class="mb-6">
<span class="text-xs font-bold text-gray-500 uppercase">Инструменты:</span>
<div class="flex gap-2 mt-2 flex-wrap">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Анализ PDF</span>
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Генерация документов</span>
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Web-search</span>
</div>
</div>
<blockquote class="border-l-4 border-leanq-green pl-4 italic text-gray-600 text-sm">
"Leanq AI освободил нашу команду от часов рутинной работы. Анализ объемных PDF-отчетов, выжимки из десятков веб-страниц — все это теперь делаем за минуты."
</blockquote>
</div>
<div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
<div class="w-24 h-24 rounded-full bg-gray-200 mb-4 overflow-hidden">
<img src="http://static.photos/office/200x200/1" class="w-full h-full object-cover" alt="Employee">
<div class="text-center">
<div class="font-bold text-gray-900">Оксана Николаевна Н.</div>
<div class="text-xs text-gray-500">Консалтинговая компания "Вектор"</div>
</div>
</div>
</div>
<div class="slide-footer">
<span>Кейсы</span>
<span>12</span>
</div>
</div>
<!-- Слайд 13: Кейс Топливо -->
<div class="slide">
<div class="bg-orange-50 text-orange-800 px-3 py-1 inline-block rounded text-xs font-bold mb-4 w-max">КЕЙС: ТОПЛИВНАЯ ОТРАСЛЬ</div>
<h2 class="text-3xl font-bold text-leanq-dark mb-6">Результаты Топливной компании</h2>
<div class="flex gap-8">
<div class="w-2/3">
<div class="flex gap-4 mb-8">
<div class="bg-leanq-green text-white p-4 rounded-xl flex-1">
<div class="text-3xl font-bold mb-1">x5</div>
<div class="text-sm opacity-90">Быстрее анализ договоров</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-xl flex-1">
<div class="text-3xl font-bold mb-1">100%</div>
<div class="text-sm opacity-90">Контроль в закрытом контуре</div>
</div>
</div>
<div class="mb-6">
<span class="text-xs font-bold text-gray-500 uppercase">Инструменты:</span>
<div class="flex gap-2 mt-2 flex-wrap">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Безопасность</span>
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Работа с файлами</span>
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Аналитика</span>
</div>
</div>
<blockquote class="border-l-4 border-orange-500 pl-4 italic text-gray-600 text-sm">
"Безопасность и контроль стоят на первом месте. Вся работа идет в закрытом контуре внутри Telegram. Это тот уровень управляемого AI, который нужен серьезному бизнесу."
</blockquote>
</div>
<div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
<div class="w-24 h-24 rounded-full bg-gray-200 mb-4 overflow-hidden">
<img src="http://static.photos/industry/200x200/2" class="w-full h-full object-cover" alt="Employee">
<div class="text-center">
<div class="font-bold text-gray-900">Анатолий К.</div>
<div class="text-xs text-gray-500">Руководитель IT-департамента</div>
</div>
</div>
</div>
<div class="slide-footer">
<span>Кейсы</span>
<span>13</span>
</div>
</div>
<!-- Слайд 14: Кейс Архитектура -->
<div class="slide">
<div class="bg-purple-50 text-purple-800 px-3 py-1 inline-block rounded text-xs font-bold mb-4 w-max">КЕЙС: АРХИТЕКТУРА</div>
<h2 class="text-3xl font-bold text-leanq-dark mb-6">Результаты Архитектурного бюро</h2>
<div class="flex gap-8">
<div class="w-2/3">
<div class="flex gap-4 mb-8">
<div class="bg-leanq-green text-white p-4 rounded-xl flex-1">
<div class="text-2xl font-bold mb-1">Креатив</div>
<div class="text-sm opacity-90">Ускорение процесса от идеи</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-xl flex-1">
<div class="text-2xl font-bold mb-1">Качество</div>
<div class="text-sm opacity-90">Улучшение описаний проектов</div>
</div>
</div>
<div class="mb-6">
<span class="text-xs font-bold text-gray-500 uppercase">Инструменты:</span>
<div class="flex gap-2 mt-2 flex-wrap">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">ReCraft Image Gen</span>
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">Брейншторм</span>
</div>
</div>
<blockquote class="border-l-4 border-purple-500 pl-4 italic text-gray-600 text-sm">
"Продукт помогает преодолеть творческий ступор – как в генерации изображений, так и в написании убедительных описаний к проектам."
</blockquote>
</div>
<div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
<div class="w-24 h-24 rounded-full bg-gray-200 mb-4 overflow-hidden">
<img src="http://static.photos/architecture/200x200/3" class="w-full h-full object-cover" alt="Employee">
<div class="text-center">
<div class="font-bold text-gray-900">Артак М.</div>
<div class="text-xs text-gray-500">Ведущий архитектор</div>
</div>
</div>
</div>
<div class="slide-footer">
<span>Кейсы</span>
<span>14</span>
</div>
</div>
<!-- Слайд 15: Роудмэп -->
<div class="slide">
<h2 class="text-4xl font-bold text-leanq-dark mb-12">Leanq AI постоянно развивается</h2>
<div class="relative border-l-4 border-leanq-green ml-6 py-4 space-y-12">
<!-- Точка 1 -->
<div class="relative pl-8">
<div class="absolute -left-[13px] top-0 w-6 h-6 bg-white border-4 border-leanq-green rounded-full"></div>
<h3 class="text-xl font-bold text-leanq-dark mb-1">До середины декабря 2025</h3>
<ul class="list-disc list-inside text-gray-600 space-y-2 mt-2">
<li>Встроенный поиск по вашей базе знаний (RAG)</li>
<li>AI-ассистент для промптов (авто-улучшение)</li>
<li>Генерация Mind Maps (Release)</li>
</ul>
</div>
<!-- Точка 2 -->
<div class="relative pl-8 opacity-70">
<div class="absolute -left-[13px] top-0 w-6 h-6 bg-gray-200 border-4 border-gray-400 rounded-full"></div>
<h3 class="text-xl font-bold text-gray-700 mb-1">1 квартал 2026</h3>
<ul class="list-disc list-inside text-gray-600 space-y-2 mt-2">
<li>Голосовой ввод и вывод в реальном времени</li>
<li>Автоматическое создание саммари (Meeting notes) по сессии</li>
<li>Ссылки на источники в ответах AI</li>
</ul>
</div>
</div>
<div class="slide-footer">
<span>Планы развития</span>
<span>15</span>
</div>
</div>
<!-- Слайд 16: Тарифы -->
<div class="slide">
<h2 class="text-4xl font-bold text-leanq-dark mb-8 text-center">Прозрачные тарифы для бизнеса</h2>
<div class="flex gap-6 justify-center items-start">
<!-- Card 1 -->
<div class="w-1/2 bg-white border border-gray-200 rounded-2xl shadow-lg p-8 hover:border-leanq-green transition cursor-default relative">
<div class="text-xl font-bold text-gray-900 mb-2">Бизнес</div>
<div class="text-4xl font-extrabold text-leanq-green mb-6">1 830 ₽ <span class="text-sm font-normal text-gray-400">/ мес за юзера</span></div>
<ul class="space-y-3 text-gray-600 text-sm mb-8">
<li class="flex">✅ Полный доступ ко всем LLM моделям</li>
<li class="flex">✅ Работа с документами, RAG (до 75%)</li>
<li class="flex">✅ Вся аналитика, базовая поддержка</li>
</ul>
</div>
<!-- Card 2 -->
<div class="w-1/2 bg-leanq-dark text-white rounded-2xl shadow-lg p-8 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-leanq-green text-xs font-bold px-3 py-1 rounded-bl-lg">50+ пользователей</div>
<div class="text-xl font-bold mb-2">Enterprise</div>
<div class="text-4xl font-extrabold mb-6">Индивидуально</div>
<ul class="space-y-3 text-gray-300 text-sm mb-8">
<li class="flex">🌟 Все возможности "Бизнес"</li>
<li class="flex">🌟 Глубокая интеграция с базой знаний (RAG > 92%)</li>
<li class="flex">🌟 Приоритетная поддержка 24/7</li>
</ul>
</div>
</div>
<div class="mt-8 bg-gray-100 p-4 rounded-xl text-center border border-gray-200">
<p class="text-gray-600 font-medium">
<span class="text-leanq-dark font-bold">Оплата токенов:</span> Вы платите только за то, что используете. <br>
<span class="text-xs text-gray-500">Токены оплачиваются отдельно по себестоимости от AI-вендоров без наших наценок.</span>
</p>
</div>
<div class="slide-footer">
<span>Стоимость</span>
<span>16</span>
</div>
</div>
<!-- Слайд 17: Спецпредложение (Founders Deal) -->
<div class="slide">
<div class="border-4 border-leanq-green rounded-3xl p-10 h-full relative overflow-hidden">
<div class="absolute top-0 right-0 bg-leanq-green text-white font-bold px-6 py-2 rounded-bl-2xl uppercase tracking-widest">Special</div>
<h2 class="text-5xl font-extrabold text-leanq-dark mb-2">Founders Deal</h2>
<p class="text-xl text-gray-500 mb-8">Станьте нашим ключевым партнером</p>
<div class="bg-red-50 text-red-600 inline-block px-4 py-2 rounded-lg font-bold text-sm mb-8 animate-pulse">
⏳ Только до 16 декабря 2025 (команды от 25 чел)
</div>
<div class="grid grid-cols-2 gap-y-6 gap-x-10">
<div class="flex items-start">
<span class="text-2xl mr-3">🤝</span>
<div>
<h4 class="font-bold text-lg">Прямой доступ к фаундерам</h4>
<p class="text-sm text-gray-600">Выделенный чат. Влияйте на roadmap продукта.</p>
</div>
</div>
<div class="flex items-start">
<span class="text-2xl mr-3">🎁</span>
<div>
<h4 class="font-bold text-lg">Новые фичи — бесплатно</h4>
<p class="text-sm text-gray-600">Все новые модули в течение года без доплат.</p>
</div>
</div>
<div class="flex items-start">
<span class="text-2xl mr-3">🏷️</span>
<div>
<h4 class="font-bold text-lg">Лучшие условия навсегда</h4>
<p class="text-sm text-gray-600">Гарантированная скидка 20% на продление.</p>
</div>
</div>
<div class="flex items-start">
<span class="text-2xl mr-3">🎓</span>
<div>
<h4 class="font-bold text-lg">Бесплатный онбординг</h4>
<p class="text-sm text-gray-600">Личное обучение вашей команды.</p>
</div>
</div>
</div>
</div>
<div class="slide-footer">
<span>Предложение</span>
<span>17</span>
</div>
</div>
<!-- Слайд 18: CTA -->
<div class="slide justify-center items-center text-center">
<h2 class="text-6xl font-extrabold text-leanq-dark mb-6">Готовы усилить<br>вашу команду?</h2>
<p class="text-2xl text-gray-500 mb-12 max-w-2xl">
Давайте на 30-минутной встрече обсудим, как Leanq AI решит именно ваши задачи.
</p>
<a href="mailto:[email protected]" class="bg-leanq-green hover:bg-green-600 text-white text-2xl font-bold py-5 px-12 rounded-full shadow-xl transition transform hover:-translate-y-1 mb-8 inline-block">
Запланировать демо-встречу
</a>
<div class="flex gap-8 text-gray-600 text-lg font-medium">
<span>✉️ [email protected]</span>
<span>📞 +7 936 314 2321</span>
</div>
<div class="slide-footer">
<span>Контакты</span>
<span>18</span>
</div>
</div>
</body>
</html>