152 lines
9.5 KiB
HTML
152 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="kk" 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>
|
||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
|
||
.price-tag {
|
||
display: inline-block; margin-top: var(--kt-ai-space-4);
|
||
font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -0.02em; color: var(--kt-ai-fg);
|
||
}
|
||
.price-tag small { font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-regular); color: var(--kt-ai-fg-muted); }
|
||
|
||
.bouq-table { width: 100%; border-collapse: collapse; margin-top: var(--kt-ai-space-6); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--vibe-card-radius); overflow: hidden; box-shadow: var(--kt-ai-card-shadow); }
|
||
.bouq-table th, .bouq-table td { padding: var(--kt-ai-space-5) var(--kt-ai-space-6); text-align: left; font-size: var(--kt-ai-text-md); }
|
||
.bouq-table th { background: var(--kt-ai-primary-subtle); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.bouq-table tr + tr td { border-top: 1px solid var(--kt-ai-divider); }
|
||
.bouq-table td { color: var(--kt-ai-fg-muted); }
|
||
.bouq-table td:nth-child(3) { font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); white-space: nowrap; }
|
||
@media (max-width: 620px) {
|
||
.bouq-table th, .bouq-table td { padding: var(--kt-ai-space-4) var(--kt-ai-space-4); }
|
||
.bouq-table .col-hide { display: none; }
|
||
}
|
||
</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="#catalog">Каталог</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#bouquets">Букеттер</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#discount">Скидка</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 class="vibe-highlight">сәйкес гүл</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="#catalog">Каталог</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#bouquets">Букеттер бағасы</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Гүлдер каталогы</h2>
|
||
<p>Әр гүлдің түрі, оны кімге сыйлағана болатыны және бір шетесінің бағасы.</p>
|
||
</div>
|
||
<div id="catalog-grid" style="margin-top:var(--kt-ai-space-9)"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="bouquets" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Букеттер бағасы</h2>
|
||
<p>Тәуекелсіз шешім: нақты құрамы мен бағасы белгілі дайын букеттер. Қалаған гүлдеріңізбен арнайы букет жасауға да болады — құны 15–25 гүл санына байланысты 12 000₸–35 000₸ арасында.</p>
|
||
</div>
|
||
<table class="bouq-table">
|
||
<thead>
|
||
<tr><th>Букет</th><th class="col-hide">Құрамы</th><th>Бағасы</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>«Сәлеметсіз бе»</td><td class="col-hide">15 шетес ромашка</td><td>8 500 ₸</td></tr>
|
||
<tr><td>«Ақ жұлдыз»</td><td class="col-hide">25 шетес ақгүл + оранжир</td><td>13 500 ₸</td></tr>
|
||
<tr><td>«Ромашка сыйы»</td><td class="col-hide">7 шетес асаға + 2 роза</td><td>9 800 ₸</td></tr>
|
||
<tr><td>«Күзгі сусамал»</td><td class="col-hide">Хризантема + гортензия, 15 гүл</td><td>16 000 ₸</td></tr>
|
||
<tr><td>«Түнгі гүл»</td><td class="col-hide">Лаванда + альстрөмерия, 12 гүл</td><td>12 500 ₸</td></tr>
|
||
<tr><td>«Жұлдызды тәңірі»</td><td class="col-hide">Тюльпанның жиегі + пион, 20 гүл</td><td>32 000 ₸</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p style="margin-top:var(--kt-ai-space-6); color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm)">Бағалар бір жұмаққа арналған. Арнайы букеттің бағасы сұранысқа сай есептеледі.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="discount" 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">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#receipt"></use></svg></span>
|
||
<h3>20 гүлдан бастап — 5%</h3>
|
||
<p>20 немесе одан көп шетес гүл алсаңыз, жақсартылған баға автоматты түрде қолданылады. Мысалы, 25 ромашқа = 17 000 ₸ емес, 16 150 ₸.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#calendar"></use></svg></span>
|
||
<h3>Туған күн — 10%</h3>
|
||
<p>Туған күн алдындағы 3 күннің және кейінгі 3 күннің ішінде тізімге 10% жеңілдік. Дәлелдеу үшін құжат көрсету жеткилікті.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#trophy"></use></svg></span>
|
||
<h3>Тұрақты сатып алушы — 15%</h3>
|
||
<p>Ай сайын кемінде 2 рет тапсырыс жасаған сатып алушыларға — 15% тұрақты жеңілдік. Статус бірінші рет сатып алғаннан кейін автоматты түрде басталады.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#sparkles"></use></svg></span>
|
||
<h3>Демалыс күндері</h3>
|
||
<p>8 Mart, 8 Gashpard, 7 Qazan және 1 Qarzhan arasynda — барлық букеттерге 10% жеңілдік пен тегін жеткізу.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#package"></use></svg></span>
|
||
<h3>Тегін жеткізу</h3>
|
||
<p>15 000 ₸-тен жоғары тапсырыстарға қала бойынша жеткізу тегін. Аз мөлшерде тапсырыс — 2 000 ₸.</p>
|
||
</article>
|
||
<article class="kt-ai-tile" data-span="2">
|
||
<span class="kt-ai-tile-icon"><svg width="18" height="18" aria-hidden="true"><use href="#help"></use></svg></span>
|
||
<h3>Ескерту</h3>
|
||
<p>Жеңілдіктер бір-бірімен ұштаспайды — ғасына тек ең тиімдісі қолданылады. Арнайы букеттер мен сыйлық сәттер (кесу ағаш, вазалар) жеңілдіктен тыс қалады.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Букетті бірге таңдайық</h2>
|
||
<p>Алматы, Абай даңғылы 25, 2-қабат · Күнделікті 9:00–21:00<br>WhatsApp / Instagram: <a class="kt-ai-link" href="https://wa.me/77001234567">+7 700 123-45-67</a></p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77001234567">WhatsApp-қа жазу</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Гүл әлемі</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Гүлді әлем — әр қашан жаныңда</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|