231 lines
14 KiB
HTML
231 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Зерно — кофейня</title>
|
||
<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">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
|
||
.menu-photo {
|
||
position: relative;
|
||
margin-top: var(--kt-ai-space-6);
|
||
border-radius: var(--kt-ai-radius-lg, 12px);
|
||
overflow: hidden;
|
||
border: 1px solid var(--kt-ai-border);
|
||
background: var(--kt-ai-bg-soft);
|
||
}
|
||
.menu-photo img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 16 / 9;
|
||
object-fit: cover;
|
||
}
|
||
.menu-photo figcaption {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 50%;
|
||
transform: translate(-50%, 50%);
|
||
font-size: 0.8rem;
|
||
color: var(--kt-ai-fg-muted);
|
||
}
|
||
|
||
.menu-list { display: grid; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); }
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--kt-ai-space-3);
|
||
}
|
||
.menu-item .name { font-weight: 500; }
|
||
.menu-item .lead {
|
||
flex: 1;
|
||
border-bottom: 1px dotted var(--kt-ai-border);
|
||
transform: translateY(-4px);
|
||
}
|
||
.menu-item .price { white-space: nowrap; }
|
||
.menu-cat {
|
||
margin-top: var(--kt-ai-space-7);
|
||
text-transform: uppercase;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.08em;
|
||
color: var(--kt-ai-fg-muted);
|
||
}
|
||
|
||
.cta-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--kt-ai-space-3);
|
||
margin-top: var(--kt-ai-space-6);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Зерно<span style="color:var(--kt-ai-fg-faint)"> — кофейня</span></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="#menu">Меню</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener">Instagram</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Как нас найти</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Кофе, за которым <span style="background:var(--kt-ai-primary-subtle);padding:0 0.4em;border-radius:6px">возвращаются</span></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="#menu">Смотреть меню</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#contacts">Как нас найти</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">
|
||
<h3>Своя обжарка каждые две недели</h3>
|
||
<p>Работаем с тремя фермами в Эфиопии, Колумбии и Бразилии. Зерно доживает на полке не дольше месяца.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Выпечка каждое утро</h3>
|
||
<p>Крендель, чизкейк и круассан пекут в 7:00. К обеду обычно заканчивается — успейте.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Тихие места и розетки</h3>
|
||
<p>18 мест за большими столами. Работать на ноутбуке удобно: Wi-Fi быстрый, розетки у каждого места.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Берём с собой</h3>
|
||
<p>Своя керамика для зала, плотные стаканы для дороги. Кофе на вылет — 2–3 минуты.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="menu" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Меню</h2>
|
||
<p>Коротко и без лишнего. Цены в тенге.</p>
|
||
</div>
|
||
|
||
<figure class="menu-photo">
|
||
<img src="https://images.unsplash.com/photo-1442550528053-c431ecb55509?w=1400&q=70&auto=format&fit=crop" alt="Чашка кофе на барной стойке кофейни" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22400%22></svg>'">
|
||
<figcaption>Фото главного напитка дня</figcaption>
|
||
</figure>
|
||
|
||
<div class="menu-list">
|
||
<div class="menu-cat">Классика</div>
|
||
<div class="menu-item"><span class="name">Эспрессо</span><span class="lead"></span><span class="price">900 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Американо</span><span class="lead"></span><span class="price">1 100 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Капучино</span><span class="lead"></span><span class="price">1 400 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Флэт уайт</span><span class="lead"></span><span class="price">1 500 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Раф лаванда</span><span class="lead"></span><span class="price">1 600 ₸</span></div>
|
||
|
||
<div class="menu-cat">Сезон</div>
|
||
<div class="menu-item"><span class="name">Какао на кокосовом молоке</span><span class="lead"></span><span class="price">1 500 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Матча латте</span><span class="lead"></span><span class="price">1 700 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Лимонад с мятой и огурцом</span><span class="lead"></span><span class="price">1 300 ₸</span></div>
|
||
|
||
<div class="menu-cat">Выпечка</div>
|
||
<div class="menu-item"><span class="name">Крендель с сыром</span><span class="lead"></span><span class="price">1 200 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Чизкейк</span><span class="lead"></span><span class="price">1 400 ₸</span></div>
|
||
<div class="menu-item"><span class="name">Круассан миндальный</span><span class="lead"></span><span class="price">1 300 ₸</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="gallery" 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="3" style="margin-top:var(--kt-ai-space-8)">
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?w=600&q=70&auto=format&fit=crop" alt="Эспрессо" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Эспрессо · 900 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?w=600&q=70&auto=format&fit=crop" alt="Американо" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Американо · 1 100 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1534778101976-62847782c213?w=600&q=70&auto=format&fit=crop" alt="Капучино" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Капучино · 1 400 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=600&q=70&auto=format&fit=crop" alt="Флэт уайт" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Флэт уайт · 1 500 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1541167760496-1628856ab772?w=600&q=70&auto=format&fit=crop" alt="Раф лаванда" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Раф лаванда · 1 600 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1530018607912-eff2daa1bac4?w=600&q=70&auto=format&fit=crop" alt="Какао на кокосовом молоке" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Какао · 1 500 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1515823064-d6e0c04616a7?w=600&q=70&auto=format&fit=crop" alt="Матча латте" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Матча латте · 1 700 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1437418747212-8d9709afab22?w=600&q=70&auto=format&fit=crop" alt="Лимонад с мятой и огурцом" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Лимонад · 1 300 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=600&q=70&auto=format&fit=crop" alt="Крендель с сыром" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Крендель с сыром · 1 200 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1524351199678-941a58a3df50?w=600&q=70&auto=format&fit=crop" alt="Чизкейк" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Чизкейк · 1 400 ₸</figcaption>
|
||
</figure>
|
||
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||
<img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=600&q=70&auto=format&fit=crop" alt="Круассан миндальный" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||
<figcaption>Круассан · 1 300 ₸</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Заходите на чашку</h2>
|
||
<p>Алматы, ул. Абылай хана, 42. Ежедневно с 8:00 до 22:00.</p>
|
||
<div class="cta-row">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="tel:+87772063000">Позвонить 8 777 206 30 00</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener">Instagram</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Зерно</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>
|
||
<a href="tel:+87772063000" style="color:var(--kt-ai-fg-muted);text-decoration:none">8 777 206 30 00</a>
|
||
<span style="color:var(--kt-ai-fg-muted)"> · </span>
|
||
<a href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener" style="color:var(--kt-ai-fg-muted);text-decoration:none">Instagram</a>
|
||
</span>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|