Add Economy tariff: Telegram/Max bot 10K setup, 1K/mo
This commit is contained in:
neo committed
1 parent
208c167c9c
commit
89fb1a495f
1 file changed
+40
-14
+40
-14
@@ -653,40 +653,50 @@ h1 {
|
||||
|
||||
/* ── PRICING ── */
|
||||
.pricing { border-bottom: 1px solid var(--border); }
|
||||
.price-cards { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
|
||||
.price-card {
|
||||
max-width: 560px; margin: 0 auto;
|
||||
border: 1px solid var(--border-strong); padding: 64px 48px;
|
||||
flex: 1; min-width: 280px; max-width: 380px;
|
||||
border: 1px solid var(--border-strong); padding: 48px 32px;
|
||||
text-align: center; position: relative;
|
||||
transition: all 0.4s var(--ease-out);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.price-card.featured {
|
||||
flex: 1.3; max-width: 420px;
|
||||
}
|
||||
.price-card:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.price-card::before {
|
||||
.price-card.featured::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
||||
height: 2px; background: var(--accent);
|
||||
}
|
||||
.price-card.economy::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
||||
height: 2px; background: var(--blue);
|
||||
}
|
||||
.price-card.economy { border-color: var(--blue-dim); }
|
||||
.price-card.economy:hover { border-color: var(--blue); box-shadow: 0 8px 32px rgba(59,130,246,0.08), 0 0 1px var(--blue); }
|
||||
.price-name {
|
||||
font-size: 0.75rem; text-transform: uppercase;
|
||||
letter-spacing: 0.15em; color: var(--text-dim);
|
||||
font-family: 'IBM Plex Mono', 'SF Mono', monospace; margin-bottom: 24px;
|
||||
}
|
||||
.price-amount {
|
||||
font-size: 4rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||||
font-size: 3.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||||
letter-spacing: -0.04em; margin-bottom: 8px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.price-amount .unit { font-size: 0.25em; color: var(--text-sec); font-weight: 400; }
|
||||
.price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 40px; }
|
||||
.price-features { text-align: left; margin-bottom: 40px; }
|
||||
.price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 32px; line-height: 1.6; }
|
||||
.price-features { text-align: left; margin-bottom: 32px; }
|
||||
.price-features li {
|
||||
padding: 12px 0; border-bottom: 1px solid var(--border);
|
||||
font-size: 0.875rem; color: var(--text-sec);
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
padding: 10px 0; border-bottom: 1px solid var(--border);
|
||||
font-size: 0.8125rem; color: var(--text-sec);
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.price-features li:hover { color: var(--text); }
|
||||
@@ -1181,11 +1191,26 @@ h1 {
|
||||
<section id="pricing" class="pricing">
|
||||
<div class="wrap">
|
||||
<div class="text-center" style="margin-bottom: 48px;">
|
||||
<div class="section-label reveal" style="justify-content:center;">Тариф</div>
|
||||
<h2 class="section-title reveal reveal-delay-1" style="margin:0 auto;">Один тариф. Всё включено.</h2>
|
||||
<div class="section-label reveal" style="justify-content:center;">Тарифы</div>
|
||||
<h2 class="section-title reveal reveal-delay-1" style="margin:0 auto;">Два варианта. Оба работают.</h2>
|
||||
</div>
|
||||
<div class="price-card reveal">
|
||||
<div class="price-name">Настройка под ключ</div>
|
||||
<div class="price-cards">
|
||||
<div class="price-card economy reveal">
|
||||
<div class="price-name">Эконом — бот</div>
|
||||
<div class="price-amount">10 000 <span class="unit">₽</span></div>
|
||||
<div class="price-sub">Настройка один раз.<br>Далее 1 000 ₽/мес за работу бота.</div>
|
||||
<ul class="price-features">
|
||||
<li>Бот в Telegram или Max</li>
|
||||
<li>Ежедневная статистика по вашим метрикам</li>
|
||||
<li>Подключение 1–3 источников данных</li>
|
||||
<li>До 7 ключевых метрик</li>
|
||||
<li>Настройка за 24 часа</li>
|
||||
</ul>
|
||||
<a href="#cta" class="btn btn-outline btn-lg price-cta">Выбрать тариф</a>
|
||||
<div class="price-guarantee">Запустили за 24 часа. Получаете отчёт каждое утро.</div>
|
||||
</div>
|
||||
<div class="price-card featured reveal reveal-delay-1">
|
||||
<div class="price-name">Под ключ — дашборд</div>
|
||||
<div class="price-amount">100 000 <span class="unit">₽</span></div>
|
||||
<div class="price-sub">Единоразово. Поддержка 20 000 ₽/мес после 30 дней.</div>
|
||||
<ul class="price-features">
|
||||
@@ -1200,6 +1225,7 @@ h1 {
|
||||
<div class="price-guarantee">30-дневная гарантия. Если дашборд не устроит — вернём деньги.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── FAQ ── -->
|
||||
@@ -1226,7 +1252,7 @@ h1 {
|
||||
</div>
|
||||
<div class="faq-item reveal">
|
||||
<div class="faq-q">Можно проще? Дешевле?</div>
|
||||
<div class="faq-a"><div class="faq-a-inner">Нет. "Проще" = "не работает". 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
|
||||
<div class="faq-a"><div class="faq-a-inner">Да, есть тариф "Эконом" — бот в Telegram или Max за 10 000 ₽ настройка + 1 000 ₽/мес. Присылает статистику каждый день. Для тех, кто не готов к полному дашборду — отличный старт.</div></div>
|
||||
</div>
|
||||
<div class="faq-item reveal reveal-delay-1">
|
||||
<div class="faq-q">Поддержка после запуска?</div>
|
||||
|
||||
Reference in new issue
Block a user