73 lines
3.6 KiB
HTML
73 lines
3.6 KiB
HTML
<!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-glow: #00E5FFAA; /* полупрозрачный для свечения */
|
||
--white: #FFFFFF;
|
||
--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 */
|
||
.hero{background:var(--ink);color:var(--white);text-align:center;padding:120px 24px}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px;text-shadow:0 0 10px var(--cyan-glow)}
|
||
.hero p{font-size:20px;color:#9aa3b2;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;box-shadow:0 0 8px var(--cyan-glow)}
|
||
/* Sections */
|
||
.section{padding:80px 24px;background:var(--gray-100)}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px;color:var(--ink)}
|
||
.card{background:#fff;border:2px solid var(--cyan);border-radius:16px;padding:24px;display:flex;gap:20px;align-items:center;box-shadow:0 0 12px var(--cyan-glow)}
|
||
.card img{width:120px;height:auto;border-radius:8px}
|
||
.card .info{flex:1}
|
||
.card .info h3{margin:0 0 8px;font-size:22px;color:var(--ink)}
|
||
.card .info p{margin:0;color:#333}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section{padding:48px 20px}.card{flex-direction:column;align-items:flex-start}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>ИИ‑агент аналитики покупок</h1>
|
||
<p>Умный анализ покупок и персональные рекомендации в реальном времени.</p>
|
||
<a class="btn" href="#examples">Посмотреть примеры</a>
|
||
</div>
|
||
</section>
|
||
<!-- Примеры рекомендаций -->
|
||
<section id="examples" class="section">
|
||
<div class="container">
|
||
<h2>Примеры рекомендаций</h2>
|
||
<div class="card">
|
||
<img src="https://picsum.photos/seed/coffee/120/120" alt="Кофе">
|
||
<div class="info">
|
||
<h3>Кофе «Арома»</h3>
|
||
<p>Пользователь покупал кофе и печенье. Мы рекомендуем добавить к заказу ароматный десерт «Шоколадный кекс» со скидкой 15%.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="https://picsum.photos/seed/headphones/120/120" alt="Наушники">
|
||
<div class="info">
|
||
<h3>Беспроводные наушники</h3>
|
||
<p>После покупки наушников клиент часто слушает подкасты. Рекомендуем подписку на сервис аудио‑контента со стартовой неделей бесплатно.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="https://picsum.photos/seed/shoes/120/120" alt="Кроссовки">
|
||
<div class="info">
|
||
<h3>Спортивные кроссовки</h3>
|
||
<p>Пользователь активно занимается спортом. Предлагаем купить спортивные носки и защитный налокотник со скидкой 10%.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
</html>
|