265 lines
21 KiB
HTML
265 lines
21 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; }
|
||
|
||
.fl-nav { display: flex; gap: 2px; }
|
||
.fl-tab-link { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
|
||
padding: 0 var(--kt-ai-space-5); height: 36px; border-radius: 999px;
|
||
font-size: var(--kt-ai-text-md); color: var(--kt-ai-fg-muted);
|
||
text-decoration: none; transition: background .15s, color .15s; }
|
||
.fl-tab-link .kt-icon { width: 15px; height: 15px; }
|
||
.fl-tab-link:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
|
||
.fl-tab-link.is-active { background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); font-weight: 600; }
|
||
|
||
.fl-flower { width: 112px; height: 112px; border-radius: 14px; flex: 0 0 auto; }
|
||
.fl-palette-1 { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||
.fl-palette-2 { background: linear-gradient(135deg, var(--kt-ai-fg), var(--kt-ai-brand-blue)); }
|
||
.fl-palette-3 { background: linear-gradient(135deg, var(--kt-ai-card-bg), var(--kt-ai-primary-subtle)); }
|
||
.fl-palette-4 { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-card-bg)); }
|
||
.fl-hero-deco .fl-flower { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||
.fl-flower--card { width: 100%; height: 136px; border-radius: 12px; flex: 0 0 auto; }
|
||
.fl-palette-1.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||
.fl-palette-2.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-brand-blue), var(--kt-ai-card-bg)); }
|
||
.fl-palette-3.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-card-bg), var(--kt-ai-primary-subtle)); }
|
||
.fl-palette-4.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-fg-muted)); }
|
||
.fl-panel { display: none; }
|
||
.fl-panel.is-open { display: block; }
|
||
|
||
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-6); }
|
||
|
||
.fl-card { display: flex; flex-direction: column; gap: var(--kt-ai-space-5); padding: var(--kt-ai-space-6); border-radius: var(--vibe-card-radius);
|
||
background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); box-shadow: var(--kt-ai-card-shadow); }
|
||
.fl-card:hover { border-color: var(--kt-ai-card-border-hover); box-shadow: var(--kt-ai-card-shadow-hover); }
|
||
.fl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4); }
|
||
.fl-card h3 { margin: 0; font-size: var(--kt-ai-text-xl); font-weight: 600; }
|
||
.fl-card-desc { margin: 0; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; flex: 1; }
|
||
.fl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4);
|
||
border-top: 1px solid var(--kt-ai-divider); padding-top: var(--kt-ai-space-5); }
|
||
.fl-price { font-size: var(--kt-ai-text-lg); font-weight: 700; }
|
||
.fl-old { color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-sm); text-decoration: line-through; font-weight: 400; margin-left: var(--kt-ai-space-2); }
|
||
|
||
.fl-badges { list-style: none; padding: 0; margin: var(--kt-ai-space-8) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kt-ai-space-7); }
|
||
.fl-badges li { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; }
|
||
.fl-badges .kt-icon { width: 20px; height: 20px; color: var(--kt-ai-fg-muted); margin-top: 2px; flex: 0 0 auto; }
|
||
.fl-badges strong { display: block; font-size: var(--kt-ai-text-md); }
|
||
.fl-badges span { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); line-height: 1.45; }
|
||
|
||
.fl-qa { border-top: 1px solid var(--kt-ai-divider); }
|
||
.fl-qa > div { border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.fl-qa button { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; gap: var(--kt-ai-space-3);
|
||
padding: var(--kt-ai-space-5) 0; cursor: pointer; font-size: var(--kt-ai-text-md); font-weight: 600; box-sizing: border-box; }
|
||
.fl-qa button:focus-visible { outline: 2px solid var(--kt-ai-focus-ring); outline-offset: 2px; border-radius: var(--kt-ai-radius-sm); }
|
||
.fl-qa button .kt-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--kt-ai-fg-muted); transition: transform .2s; }
|
||
.fl-qa[data-open="true"] button .kt-icon { transform: rotate(45deg); color: var(--kt-ai-fg); }
|
||
.fl-qa p { margin: 0; padding: 0 0 var(--kt-ai-space-5); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; display: none; }
|
||
.fl-qa[data-open="true"] p { display: block; }
|
||
|
||
.fl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-8); align-items: start; }
|
||
.fl-tile-emoji { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
|
||
background: var(--kt-ai-primary-subtle); border-radius: 12px; margin-bottom: var(--kt-ai-space-5); }
|
||
.fl-tile-emoji .kt-icon { width: 20px; height: 20px; color: var(--kt-ai-fg); }
|
||
|
||
.fl-hero-deco { display: flex; justify-content: center; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-10); }
|
||
@media (max-width: 640px) {
|
||
.fl-nav { display: none; }
|
||
.fl-badges { grid-template-columns: 1fr; }
|
||
.fl-tiles { grid-template-columns: 1fr; }
|
||
}
|
||
.fl-mobile-tabs { display: none; }
|
||
@media (max-width: 640px) {
|
||
.fl-mobile-tabs { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); margin-bottom: var(--kt-ai-space-8); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Букет.Лаб</strong>
|
||
<nav class="fl-nav" aria-label="Разделы">
|
||
<a class="fl-tab-link is-active" href="#catalog"><svg class="kt-icon" aria-hidden="true"><use href="#catalog"></use></svg>Каталог</a>
|
||
<a class="fl-tab-link" href="#delivery"><svg class="kt-icon" aria-hidden="true"><use href="#package"></use></svg>Доставка</a>
|
||
<a class="fl-tab-link" href="#contacts"><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg>Контакты</a>
|
||
<a class="fl-tab-link" href="#support"><svg class="kt-icon" aria-hidden="true"><use href="#help"></use></svg>Поддержка</a>
|
||
<a class="fl-tab-link" href="#about"><svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg>О нас</a>
|
||
</nav>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="primary" href="tel:+77001234567">+7 (700) 123-45-67</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<span class="kt-ai-chip" style="margin-bottom: var(--kt-ai-space-5)">Свежие цветы каждый день</span>
|
||
<h1>Цветы, которые <span class="vibe-highlight">говорят за вас</span></h1>
|
||
<p class="kt-ai-hero-sub">Составляем букеты и композиции из свежих цветов прямо сегодня. Доставим по городу за 2 часа до двери — с открыткой и упаковкой на выбор.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Выбрать букет</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#delivery">Как проходит доставка</a>
|
||
</div>
|
||
<div class="fl-hero-deco" aria-hidden="true">
|
||
<div class="fl-flower fl-palette-1" style="transform: rotate(-7deg)"></div>
|
||
<div class="fl-flower fl-palette-2"></div>
|
||
<div class="fl-flower fl-palette-3" style="transform: rotate(7deg)"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="kt-ai-wrap">
|
||
<div class="fl-mobile-tabs" role="tablist" aria-label="Разделы (мобильные)"></div>
|
||
|
||
<section id="catalog" class="fl-panel is-open">
|
||
<div class="kt-ai-section">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Каталог букетов</h2>
|
||
<p>Выбирайте по настроию — и мы соберём композицию из свежих цветов. Цены указаны за букет.</p>
|
||
</div>
|
||
<div class="fl-chips" id="fl-chips" role="tablist" aria-label="Категории"></div>
|
||
<div class="kt-ai-grid" data-cols="4" id="fl-catalog-grid" style="margin-top: var(--kt-ai-space-9)"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="delivery" class="fl-panel">
|
||
<div class="kt-ai-section">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Доставка</h2>
|
||
<p>Привезём букет так, чтобы к моменту вручения цветы выглядели как только что из оранжереи.</p>
|
||
</div>
|
||
<ul class="fl-badges" style="margin-bottom: 0">
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg><div><strong>За 2 часа по городу</strong><span>Курьер привезёт букет к точному времени — удобно для сюрпризов.</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#calendar"></use></svg><div><strong>Завтра к 9:00</strong><span>Заявки до 22:00 доставляем на следующий день, с 9 утра.</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#package"></use></svg><div><strong>Заказ от 50 000 ₸ — бесплатно</strong><span>При заказе дешевле доставка стоит 1 500 ₸ по городу.</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg><div><strong>В любой адрес города</strong><span>Дом, офис, больница, школа — дойдём до подъезда даже в выходные.</span></div></li>
|
||
</ul>
|
||
<div class="kt-ai-grid" data-cols="3" style="margin-top: var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile" data-span="2">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg></div>
|
||
<h3>Сюрприз-режим</h3>
|
||
<p>Не хотим раскрывать сюрприз? Курьер не говорит отправителю, не звонит «у кого букет» — и прикладывает открытку с вашим текстом. Мы напишем вам фото букета перед выездом, чтобы вы успели убедиться, что всё красиво.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></div>
|
||
<h3>Гарантия свежести</h3>
|
||
<p>Если цветы поедут не свежими или в повреждённой упаковке — заменим букет бесплатно, фотография ситуации достаточно.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="fl-panel">
|
||
<div class="kt-ai-section">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Контакты</h2>
|
||
<p>Приходите в шоурум за живыми букетами, пишите и звоните в мессенджерах — работаем без выходных.</p>
|
||
</div>
|
||
<ul class="fl-badges" style="margin-bottom: 0">
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg><div><strong>Шоурум</strong><span>Алматы, пр. Абая 42, ТЦ «Грин», 1 этаж, вход со двора</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg><div><strong>Часы работы</strong><span>Ежедневно 9:00–21:00, доставка — с 8:00</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#megaphone"></use></svg><div><strong>Телефон</strong><span>+7 (700) 123-45-67 — звоните с 9:00 до 21:00</span></div></li>
|
||
<li><svg class="kt-icon" aria-hidden="true"><use href="#mail"></use></svg><div><strong>E-mail</strong><span>hello@buket.kz — для оптовых и организационных вопросов</span></div></li>
|
||
</ul>
|
||
<div class="kt-ai-grid" data-cols="3" style="margin-top: var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile" data-span="2">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#chat"></use></svg></div>
|
||
<h3>Напишите нам</h3>
|
||
<p>Нашли ли вы букет в каталоге или хотите что-то по вашему эскизу — напишите в Telegram: @buketlab. Обычно отвечаем за 5–10 минут в рабочее время и приложим фото готовой композиции до отправки.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#building"></use></svg></div>
|
||
<h3>Для бизнеса</h3>
|
||
<p>Регулярные поставки в офис, декор мероприятий, коробки с цветами для клиентов — пришлём смету в течение дня.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="support" class="fl-panel">
|
||
<div class="kt-ai-section">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Поддержка</h2>
|
||
<p>Частые вопросы о заказе, уходе за цветами и возвратах. Не нашли ответ — напишите в поддержку, ответим быстро.</p>
|
||
</div>
|
||
<div style="max-width: 720px">
|
||
<div class="fl-qa" data-open="true">
|
||
<button type="button" data-fl-qa>Как оформить заказ на букет?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||
<p>Выберите букет в каталоге, позвоните по +7 (700) 123-45-67 или напишите в Telegram @buketlab. Укажите адрес, время доставки и текст открытки — менеджер подтвердит заказ и пришлёт фото готового букета перед отправкой.</p>
|
||
</div>
|
||
<div class="fl-qa">
|
||
<button type="button" data-fl-qa>Можно заказать букет по своему эскизу?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||
<p>Да, составим композицию по вашему фото или описанию. Пришлите референс в Telegram — флорист посчитает стоимость и согласует с вами состав до сборки.</p>
|
||
</div>
|
||
<div class="fl-qa">
|
||
<button type="button" data-fl-qa>Сколько стоит доставка?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||
<p>По городу доставка стоит 1 500 ₸, при заказе от 50 000 ₸ — бесплатно. Точное время согласуем с получателем в день доставки.</p>
|
||
</div>
|
||
<div class="fl-qa">
|
||
<button type="button" data-fl-qa>Как долго стоят срезанные цветы?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||
<p>При уходе букет стоит 7–10 дней. Утром срезайте стебельки под углом около пары сантиметров, меняйте воду ежедневно и убирайте листья, оказавшиеся под водой. Мы приложим к упаковке памятку.</p>
|
||
</div>
|
||
<div class="fl-qa">
|
||
<button type="button" data-fl-qa>Букет повредили при доставке — что делать?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||
<p>Сфотографируйте букет и напишите нам в течение 24 часов. Если цветы прибыли не свежими или упаковка повреждена — заменим букет бесплатно.</p>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-cta" style="padding-block: var(--kt-ai-space-10)">
|
||
<h2>Остались вопросы?</h2>
|
||
<p>Поддержка на связи в чате — напишите, поможем выбрать букет, рассчитаем доставку и ответим на любые вопросы.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://t.me/buketlab" target="_blank" rel="noopener">Написать в поддержку</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="fl-panel">
|
||
<div class="kt-ai-section">
|
||
<div class="kt-ai-section-head">
|
||
<h2>О нас</h2>
|
||
<p>«Букет.Лаб» — семейная флористическая мастерская. Мы не «цветочный магазин» в классическом смысле: у нас небольшая команда флористов, оранжерея-партнёр и собственная доставка.</p>
|
||
</div>
|
||
<div class="fl-tiles">
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#sparkles"></use></svg></span>
|
||
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Свежесть</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Цветы приезжают дважды в неделю напрямую от оранжерей: розы, пионы, гортензии, эвкалипт и сезонные новинки. Мы не храним цветы неделями — собираем букеты в тот же день, что вы заказали их.</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#tool"></use></svg></span>
|
||
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Ремесло</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Три флориста с опытом от пяти лет. Каждый букет — не шаблон из витрины, а отдельная композиция: учитываем повод, характер именинника и палитру, которую вы хотите передать.</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#check-circle"></use></svg></span>
|
||
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Сердце</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Более 12 000 букетов за четыре года. Мы знаем: цветы — это про внимание к человеку. Поэтому каждый заказ для нас не просто «букет на адрес», а чей-то праздник.</p>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-cta" style="padding-block: var(--kt-ai-space-10)">
|
||
<h2>Хотите, чтобы цветы сказали то, что у вас на сердце?</h2>
|
||
<p>Покажем, что свежее на этой неделе, соберём букет под ваш повод и доставим вовремя.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Перейти в каталог</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-10)">
|
||
<span>© 2026 Букет.Лаб</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span><a class="kt-ai-link" href="tel:+77001234567">+7 (700) 123-45-67</a> · <a class="kt-ai-link" href="mailto:hello@buket.kz">hello@buket.kz</a> · Алматы, пр. Абая 42</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|