ilyas1/index.html
Ilyas_Dussenov 4d57b1e7f8 v1
2026-06-01 05:06:03 +00:00

194 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Мониторинг соцстабильности — Самрук-Казына</title>
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
.hero{background:var(--ink);color:var(--white)}
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
.hero .badge{display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan);padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:20px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px}
.btn:hover{background:#1be5ff}
.btn-secondary{display:inline-block;background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.3);padding:12px 26px;border-radius:8px;font-weight:700;text-decoration:none;font-size:17px;margin-left:12px}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan)}
.section{background:var(--white)}
.section-alt{background:var(--gray-100)}
.section h2{font-size:36px;font-weight:700;margin-bottom:16px}
.section .subtitle{color:var(--gray-500);font-size:18px;margin-bottom:48px;max-width:600px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px;transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.card .emoji{font-size:40px;margin-bottom:16px;display:block}
.card h3{font-size:22px;font-weight:700;margin-bottom:12px}
.card p{color:var(--gray-500);font-size:16px}
.timeline{display:flex;flex-direction:column;gap:32px;margin-top:32px}
.timeline-item{display:flex;gap:24px;align-items:flex-start}
.timeline-num{background:var(--cyan);color:var(--ink);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex-shrink:0}
.timeline-content h3{margin-bottom:6px}
.timeline-content p{color:var(--gray-500)}
.schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.schedule-card{background:var(--gray-100);border-radius:16px;padding:32px;text-align:center}
.schedule-card .icon{font-size:36px;margin-bottom:12px}
.schedule-card .time{font-size:28px;font-weight:800;color:var(--ink);margin-bottom:4px}
.schedule-card .label{color:var(--gray-500);font-size:14px}
.form-section{background:var(--ink);color:var(--white)}
.form-section h2{color:var(--white)}
.form-section .subtitle{color:#9aa3b2}
.form-row{display:flex;gap:12px;max-width:500px;flex-wrap:wrap}
.form-row input{flex:1;min-width:200px;padding:14px 18px;border-radius:8px;border:none;font-size:16px;outline:none}
.form-row input:focus{box-shadow:0 0 0 2px var(--cyan)}
.footer{background:var(--gray-100);text-align:center;padding:32px 24px;font-size:14px;color:var(--gray-500)}
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}.btn-secondary{margin-left:0;margin-top:12px}.form-row{flex-direction:column}}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<div class="badge">Группа компаний Самрук-Казына</div>
<h1>Автоматический мониторинг<br>социальной стабильности</h1>
<p>Сбор данных из открытых источников, генерация ежедневных, еженедельных и ежемесячных отчётов. Автоматическая отправка по расписанию и по вашему запросу за любой период.</p>
<a class="btn" href="#demo">Запросить демо</a>
<a class="btn-secondary" href="#how">Как это работает</a>
</div>
</section>
<section id="features" class="section">
<div class="container">
<h2>Возможности платформы</h2>
<p class="subtitle">Полная автоматизация сбора, анализа и рассылки отчётности по социальной стабильности</p>
<div class="cards">
<div class="card">
<span class="emoji">🔍</span>
<h3>Сбор из открытых источников</h3>
<p>Мониторинг новостей, соцсетей, госорганов и всего информационного поля в реальном времени</p>
</div>
<div class="card">
<span class="emoji">📊</span>
<h3>Данные по компаниям</h3>
<p>Статистика по каждой компании группы. Обращения, публикации, динамика показателей</p>
</div>
<div class="card">
<span class="emoji">📋</span>
<h3>Автоотчёты</h3>
<p>Ежедневные, еженедельные и ежемесячные отчёты формируются автоматически без участия человека</p>
</div>
<div class="card">
<span class="emoji">🔔</span>
<h3>Напоминания</h3>
<p>Автоматические уведомления о необходимости направления документов и сроках сдачи</p>
</div>
<div class="card">
<span class="emoji"></span>
<h3>Отправка по расписанию</h3>
<p>Отчёты уходят строго в 8:30 и 16:00 каждый день. Ничего не забывается</p>
</div>
<div class="card">
<span class="emoji">📈</span>
<h3>Динамика и статистика</h3>
<p>Графики, тренды и сравнительная аналитика по выбранному периоду — весь срез в одном окне</p>
</div>
</div>
</div>
</section>
<section id="how" class="section section-alt">
<div class="container">
<h2>Как это работает</h2>
<p class="subtitle">Система автоматизирует весь цикл — от сбора данных до готового отчёта</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-num">1</div>
<div class="timeline-content">
<h3>Сбор информации</h3>
<p>Система непрерывно сканирует открытые источники: новостные порталы, социальные сети, сайты госорганов, публичные реестры. Данные агрегируются по каждой компании группы Самрук-Казына.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-num">2</div>
<div class="timeline-content">
<h3>Анализ и систематизация</h3>
<p>Информация классифицируется по категориям: обращения граждан, публикации в СМИ, официальные данные компаний, иная значимая информация. Формируется единая база данных.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-num">3</div>
<div class="timeline-content">
<h3>Генерация отчётов</h3>
<p>На основе собранных данных система автоматически готовит ежедневные, еженедельные и ежемесячные сводки. Также доступен отчёт за любой выбранный период по запросу.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-num">4</div>
<div class="timeline-content">
<h3>Рассылка и напоминания</h3>
<p>Отчёты автоматически направляются заинтересованным лицам дважды в день: в 8:30 утра и в 16:00. Система также напоминает о необходимости предоставления документов.</p>
</div>
</div>
</div>
</div>
</section>
<section id="schedule" class="section">
<div class="container">
<h2>Расписание отчётности</h2>
<p class="subtitle">Жёсткий график доставки без опозданий</p>
<div class="schedule">
<div class="schedule-card">
<div class="icon">🌅</div>
<div class="time">8:30</div>
<div class="label">Утренний отчёт — ежедневно</div>
</div>
<div class="schedule-card">
<div class="icon">🌇</div>
<div class="time">16:00</div>
<div class="label">Дневной отчёт — ежедневно</div>
</div>
<div class="schedule-card">
<div class="icon">📅</div>
<div class="time">Пн, 9:00</div>
<div class="label">Недельная сводка</div>
</div>
<div class="schedule-card">
<div class="icon">📆</div>
<div class="time">1-е число, 9:00</div>
<div class="label">Месячный отчёт</div>
</div>
<div class="schedule-card">
<div class="icon">🔍</div>
<div class="time">По запросу</div>
<div class="label">Отчёт за любой выбранный период</div>
</div>
<div class="schedule-card">
<div class="icon">🔔</div>
<div class="time">По триггеру</div>
<div class="label">Напоминания о документах</div>
</div>
</div>
</div>
</section>
<section id="demo" class="form-section">
<div class="container">
<h2>Запросить демо-доступ</h2>
<p class="subtitle">Оставьте заявку — покажем, как платформа работает в реальном времени с данными вашей группы компаний</p>
<form class="form-row" action="https://formspree.io/f/example" method="POST">
<input type="email" name="email" placeholder="Ваш email" required>
<button type="submit" class="btn">Отправить заявку</button>
</form>
</div>
</section>
<footer class="footer">
© 2026 Платформа мониторинга социальной стабильности. Группа компаний Самрук-Казына.
</footer>
</body>
</html>