лояльность: карта скидок (10 визитов, −10% на 5-й, офисы, приведите друга)

This commit is contained in:
NAssem 2026-09-23 10:10:30 +00:00
parent 991563f370
commit 5c472e9a29

View File

@ -31,6 +31,12 @@
} }
.kt-ai-card .kt-ai-chip { margin-bottom: 10px; } .kt-ai-card .kt-ai-chip { margin-bottom: 10px; }
#lead-ok { color: var(--kt-ai-primary); font-weight: 500; margin: 0; } #lead-ok { color: var(--kt-ai-primary); font-weight: 500; margin: 0; }
.loyalty-head { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; }
.loyalty-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--kt-ai-space-4); margin: var(--kt-ai-space-7) 0 var(--kt-ai-space-5); }
.loyalty-stamp { width: 48px; height: 48px; border-radius: 50%; border: 1.5px dashed var(--kt-ai-border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.loyalty-stamp-done { border-style: solid; border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); }
.loyalty-gift { border-style: solid; border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); }
.loyalty-note { margin: 0 0 var(--kt-ai-space-4); font-size: 13px; color: var(--kt-ai-fg-muted); }
</style> </style>
</head> </head>
<body> <body>
@ -41,6 +47,7 @@
<span class="kt-ai-spacer"></span> <span class="kt-ai-spacer"></span>
<a class="kt-ai-btn" data-variant="ghost" href="#services">Услуги</a> <a class="kt-ai-btn" data-variant="ghost" href="#services">Услуги</a>
<a class="kt-ai-btn" data-variant="ghost" href="#prices">Цены</a> <a class="kt-ai-btn" data-variant="ghost" href="#prices">Цены</a>
<a class="kt-ai-btn" data-variant="ghost" href="#loyalty">Скидки</a>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Заказать уборку</a> <a class="kt-ai-btn" data-variant="primary" href="#contacts">Заказать уборку</a>
</div> </div>
</header> </header>
@ -135,6 +142,48 @@
</div> </div>
</section> </section>
<section id="loyalty" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Карта скидок</h2>
<p>Копите визиты — получайте бесплатную уборку и повышенную скидку.</p>
</div>
<article class="kt-ai-card loyalty-card" style="margin-top:var(--kt-ai-space-9)">
<div class="loyalty-head">
<strong>ЧистоДом · карта лояльности</strong>
<span class="kt-ai-chip">10 визитов — 11-й бесплатно</span>
</div>
<div class="loyalty-stamps" aria-label="Штампы за визиты">
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
<span class="loyalty-stamp"></span>
<span class="loyalty-stamp"></span>
<span class="loyalty-stamp"></span>
<span class="loyalty-stamp"></span>
<svg class="loyalty-stamp loyalty-gift" aria-hidden="true"><use href="#sparkles"></use></svg>
</div>
<p class="loyalty-note">На 5-м визите — дополнительно −10% к счёту. Штампы действуют 12 месяцев.</p>
</article>
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile">
<h3>−10% на 5-й визит</h3>
<p>Постоянным клиентам с первого месяца. Аккумулируется на каждый следующий 5-й визит.</p>
</article>
<article class="kt-ai-tile">
<h3>Офисы от 3 месяцев</h3>
<p>Абонемент на регулярное обслуживание: −15% к каждой уборке, фиксированная смета.</p>
</article>
<article class="kt-ai-tile">
<h3>Приведи друга</h3>
<p>Вам и новому клиенту — −200 ₸ с первой заявки. Без лимита по количеству.</p>
</article>
</div>
</div>
</section>
<section id="how" class="kt-ai-section" data-divider="true"> <section id="how" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<div class="kt-ai-section-head"> <div class="kt-ai-section-head">
@ -210,6 +259,7 @@
<a class="kt-ai-link" href="tel:+77001234567">+7 700 123-45-67</a> <a class="kt-ai-link" href="tel:+77001234567">+7 700 123-45-67</a>
</footer> </footer>
<script src="design-system/icons/kt-ai-icons.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>