214 lines
9.8 KiB
HTML
214 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Midnight. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Полиграф — студия дизайна и разработки</title>
|
||
<meta name="description" content="Проектируем цифровые сервисы и интерфейсы в Алматы и Астане.">
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-grid { margin-top: var(--kt-ai-space-9); }
|
||
.work-item { padding: var(--kt-ai-space-6); }
|
||
.work-item-img {
|
||
aspect-ratio: 4/3;
|
||
background: var(--kt-ai-bg-secondary);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: 16px;
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.work-item-img svg { width: 44px; height: 44px; opacity: 0.35; }
|
||
.work-tags { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.about-stats { display: flex; gap: var(--kt-ai-space-10); margin-top: var(--kt-ai-space-8); flex-wrap: wrap; }
|
||
.stat-value {
|
||
font-size: 2.2rem;
|
||
font-weight: 300;
|
||
color: var(--kt-ai-text);
|
||
display: block;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.stat-label { color: var(--kt-ai-text-secondary); margin-top: 4px; }
|
||
.timeline { margin-top: var(--kt-ai-space-8); }
|
||
.timeline-item {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr;
|
||
gap: var(--kt-ai-space-6);
|
||
padding: var(--kt-ai-space-5) 0;
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
.timeline-year { color: var(--kt-ai-accent); font-variant-numeric: tabular-nums; }
|
||
@media (max-width: 640px) {
|
||
.timeline-item { grid-template-columns: 1fr; gap: var(--kt-ai-space-2); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Полиграф</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О студии</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#work">Работы</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contact">Связаться</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Полиграф — студия цифровых продуктов</h1>
|
||
<p class="kt-ai-hero-sub">Проектируем и разрабатываем интерфейсы, сервисы и ботов для бизнеса в Казахстане. От идеи до запуса.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#work">Смотреть работы</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#contact">Обсудить проект</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>О студии</h2>
|
||
<p>Небольшая команда из дизайнеров и разработчиков. Собираем продукты, которые решают задачу, а не украшают.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg class="kt-ai-icon"><use href="#layers"/></svg>
|
||
</div>
|
||
<h3>Продуктовый дизайн</h3>
|
||
<p>UX-исследования, прототипы, дизайн-системы и вёрстка под реальные сценарии.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg class="kt-ai-icon"><use href="#check-circle"/></svg>
|
||
</div>
|
||
<h3>Веб и API</h3>
|
||
<p>Фронтенд, бэкенд, интеграции, деплой. Чистый код без лишнего.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg class="kt-ai-icon"><use href="#sparkles"/></svg>
|
||
</div>
|
||
<h3>Боты и сервисы</h3>
|
||
<p>Telegram-боты, чат-агенты, сервисы на базе ИИ для процессов компании.</p>
|
||
</article>
|
||
</div>
|
||
<div class="about-stats">
|
||
<div><span class="stat-value">42</span><div class="stat-label">проекта запускено</div></div>
|
||
<div><span class="stat-value">6</span><div class="stat-label">лет в дизайне и коде</div></div>
|
||
<div><span class="stat-value">18</span><div class="stat-label">довольных клиентов</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="work" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Избранные работы</h2>
|
||
<p>Несколько проектов, которыми гордимся.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="2">
|
||
<article class="kt-ai-card work-item">
|
||
<div class="work-item-img">
|
||
<svg class="kt-ai-icon accent"><use href="#dashboard"/></svg>
|
||
</div>
|
||
<h3>Маркетплейс стройматериалов</h3>
|
||
<p>Каталог, заказы, учёт остатков и личный кабинет поставщика.</p>
|
||
<div class="work-tags">
|
||
<span class="kt-ai-chip">Веб-приложение</span>
|
||
<span class="kt-ai-chip">Дизайн</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card work-item">
|
||
<div class="work-item-img">
|
||
<svg class="kt-ai-icon accent"><use href="#user"/></svg>
|
||
</div>
|
||
<h3>Кабинет сотрудника</h3>
|
||
<p>Личный кабинет, заявки, документы и уведомления в одном месте.</p>
|
||
<div class="work-tags">
|
||
<span class="kt-ai-chip">B2B</span>
|
||
<span class="kt-ai-chip">UI/UX</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card work-item">
|
||
<div class="work-item-img">
|
||
<svg class="kt-ai-icon accent"><use href="#chat"/></svg>
|
||
</div>
|
||
<h3>Telegram-бот записи</h3>
|
||
<p>Бот для записи на услуги с напоминаниями и статистикой.</p>
|
||
<div class="work-tags">
|
||
<span class="kt-ai-chip">Бот</span>
|
||
<span class="kt-ai-chip">ИИ</span>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card work-item">
|
||
<div class="work-item-img">
|
||
<svg class="kt-ai-icon accent"><use href="#package"/></svg>
|
||
</div>
|
||
<h3>Учёт склада</h3>
|
||
<p>Живой остаток, заявки на выдачу и история движений по складу.</p>
|
||
<div class="work-tags">
|
||
<span class="kt-ai-chip">Внутренний инструмент</span>
|
||
<span class="kt-ai-chip">Node.js</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="process" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Как мы работаем</h2>
|
||
<p>Коротко и прозрачно, без лишних слоёв.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="4">
|
||
<article class="kt-ai-tile"><h3>01. Бриф</h3><p>Узнаём цель, аудиторию и ограничения.</p></article>
|
||
<article class="kt-ai-tile"><h3>02. Дизайн</h3><p>Прототип и вёрстка, согласование с вами.</p></article>
|
||
<article class="kt-ai-tile"><h3>03. Разработка</h3><p>Собираем продукт и интегрируем данные.</p></article>
|
||
<article class="kt-ai-tile"><h3>04. Запуск</h3><p>Публикуем, подключаем и обучаем команду.</p></article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="experience" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Опыт</h2>
|
||
<p>Ключевые вехи студии.</p>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="timeline-item"><div class="timeline-year">2026</div><div><h3>Запуск внутреннего продукта</h3><p>Внедрили ИИ-ассистента для отдела продаж.</p></div></div>
|
||
<div class="timeline-item"><div class="timeline-year">2024</div><div><h3>Первый крупный B2B</h3><p>Кабинет сотрудника для сети клиник.</p></div></div>
|
||
<div class="timeline-item"><div class="timeline-year">2022</div><div><h3>Студия Полиграф</h3><p>Начали с фриланса и первых сайтов.</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Есть проект? Напишите нам</h2>
|
||
<p>Ответим в течение дня и подскажем, как лучше начать.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="mailto:hello@poligraph.kz">hello@poligraph.kz</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Полиграф</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Алматы · Астана</span>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|