Lampa Guide — Full Redesign
Context
Lampa Guide — Jekyll-сайт с инструкциями по настройке медиаплеера Lampa. Аудитория: 30+ россияне, настраивают Lampa на телевизор, читают инструкцию с телефона. Не гики — нужна максимальная простота и доверие.
Текущее состояние: тёмная тема, 2200 строк CSS с дублированием, Milligram framework, Roboto шрифт, Yandex RTB реклама, VK OpenAPI — типичный перегруженный “AI slop” дизайн.
Design Direction
Editorial Paper — светлый, бумажный, утилитарный. Как хорошая инструкция: красиво, но главное — понятно.
Design System
Typography
- Заголовки: Literata (Google Fonts), weight 700
- Текст: DM Sans (Google Fonts), weights 400/500/600
- Загрузка:
display=swap, только нужные weights
Colors
| Token | Value | Usage |
|---|---|---|
--bg |
#f5f0e8 |
Основной фон (бумага) |
--bg-surface |
#fffbf5 |
Шапка, карточки, поверхности |
--bg-elevated |
#ffffff |
Модалки, выделенные блоки |
--text |
#1a1a1a |
Заголовки, основной текст |
--text-secondary |
#555555 |
Описания, параграфы |
--text-muted |
#999999 |
Подсказки, мета-информация |
--accent |
#b45309 |
Кнопки, ссылки, CTA |
--accent-hover |
#92400e |
Hover состояния акцента |
--accent-light |
#fef3c7 |
Фон уведомлений, подсветка |
--border |
#e8e0d0 |
Границы карточек, разделители |
--border-light |
#f0ebe3 |
Тонкие разделители |
Spacing
Базовая единица 8px. Используем rem:
--space-1: 0.25rem (4px)--space-2: 0.5rem (8px)--space-3: 0.75rem (12px)--space-4: 1rem (16px)--space-6: 1.5rem (24px)--space-8: 2rem (32px)--space-12: 3rem (48px)--space-16: 4rem (64px)
Border Radius
--radius-sm: 4px--radius-md: 6px--radius-lg: 10px
Navigation
6 пунктов в шапке:
- Главная (
/) - FAQ (
/faq) - Плагины (
/plugins) - Руководства (
/guides) — страница Стабильность вливается сюда - Контакты (
/contacts) - Telegram — акцентная кнопка (amber), ведёт на
https://t.me/+0iNJ8wLZretiOThi
VPN Дымка убирается из навигации, остаётся в CTA-блоках на страницах.
Мобильная навигация: бургер-меню, те же 6 пунктов.
Page Structure
Layout (default.html)
header (sticky)
nav: logo | links | telegram-btn
main.container
<h1 id="replace-blancvpn-with-dymka-vpn">Replace BlancVPN with Dymka VPN</h1>
<h2 id="context">Context</h2>
<p>The project previously promoted BlancVPN (via referral link <code class="language-plaintext highlighter-rouge">getblancvpn.deals/?ref=yahor</code>). Now there is an in-house VPN service called “Dymka” (Дымка), distributed through Telegram bot <code class="language-plaintext highlighter-rouge">@dymkavpn_bot</code>. All BlancVPN references must be replaced.</p>
<h2 id="dymka-key-messaging">Dymka Key Messaging</h2>
<ul>
<li><strong>Brand:</strong> Дымка — VPN для России без боли</li>
<li><strong>USP:</strong> Smart routing — Gosuslugi, Avito, Wildberries work without disabling VPN</li>
<li><strong>Price:</strong> Free while spots are available (бесплатно, пока есть места)</li>
<li><strong>Link:</strong> <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
</ul>
<h2 id="approach">Approach</h2>
<p><strong>Approach B: Replace text + simplify promo blocks.</strong> All BlancVPN references replaced with Dymka. Large promo blocks (pricing, guarantees) rewritten to match Dymka’s current offering.</p>
<h2 id="changes-by-file">Changes by File</h2>
<h3 id="1-_layoutsdefaulthtml-line-100">1. <code class="language-plaintext highlighter-rouge">_layouts/default.html</code> (line ~100)</h3>
<ul>
<li>Navigation link: <code class="language-plaintext highlighter-rouge">getblancvpn.deals/?ref=yahor</code> → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: <code class="language-plaintext highlighter-rouge">🔒 VPN</code> → <code class="language-plaintext highlighter-rouge">🌫 Дымка VPN</code></li>
</ul>
<h3 id="2-indexhtml-lines-103-105">2. <code class="language-plaintext highlighter-rouge">index.html</code> (lines ~103-105)</h3>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “проверенный VPN-сервис” → “VPN-сервис Дымка”</li>
</ul>
<h3 id="3-stabilityhtml--multiple-locations">3. <code class="language-plaintext highlighter-rouge">stability.html</code> — multiple locations</h3>
<p><strong>“Мгновенное решение” block (line ~324):</strong></p>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “Подключите VPN за 2 минуты” → “Подключите Дымку — бесплатно, пока есть места”</li>
</ul>
<p><strong>Emergency CTA button (line ~374):</strong></p>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “Включить VPN сейчас - работает за 60 секунд” → “Подключить Дымку — бесплатно”</li>
</ul>
<p><strong>FAQ “Почему бесплатные VPN не подходят?” (lines ~398-407):</strong>
Replace entire block content:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h3></span>🤔 Чем Дымка лучше обычных VPN?<span class="nt"></h3></span>
<span class="nt"><p></span>Дымка использует умный роутинг — сама определяет, какой трафик направить через VPN, а какой нет:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Госуслуги, Авито, Wildberries работают без отключения VPN<span class="nt"></li></span>
<span class="nt"><li></span>Не нужно постоянно включать и выключать<span class="nt"></li></span>
<span class="nt"><li></span>Подключил и забыл<span class="nt"></li></span>
<span class="nt"><li></span>Никаких ограничений скорости и трафика<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><strong></span>Итог:<span class="nt"></strong></span> Дымка — VPN, который не мешает повседневным сервисам.<span class="nt"></p></span>
</code></pre></div></div>
<p><strong>FAQ “Сколько стоит” (lines ~422-433):</strong>
Replace the entire pricing comparison block. Remove the old cost tiers (200-500₽/month etc.) since Dymka is free:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h3></span>💰 Сколько стоит стабильная работа?<span class="nt"></h3></span>
<span class="nt"><p></span>С Дымкой — бесплатно, пока есть места. Подключение занимает 2 минуты через Telegram-бот.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Попробуйте:<span class="nt"></strong></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>Дымка — бесплатно, пока есть места<span class="nt"></a></p></span>
</code></pre></div></div>
<p><strong>Generic VPN text in conclusions (lines ~446-456):</strong>
Leave generic — these mention “VPN” as a concept, not BlancVPN. No changes needed.</p>
<p><strong>Final CTA block (lines ~463-490):</strong>
Replace entirely:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-content"</span><span class="nt">></span>
<span class="nt"><h3></span>🚀 Обеспечьте стабильную работу Lampa прямо сейчас<span class="nt"></h3></span>
<span class="nt"><p></span>Не ждите, пока заблокируют именно вас.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-offers"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cta-main-offer"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-badge"</span><span class="nt">></span>Рекомендуем<span class="nt"></div></span>
<span class="nt"><h4></span>Дымка — VPN для России без боли<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offer-features"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Госуслуги, Авито, Wildberries работают<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Умный роутинг — подключил и забыл<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"offer-feature"</span><span class="nt">></span>✅ Бесплатно, пока есть места<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://t.me/dymkavpn_bot"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span> <span class="na">class=</span><span class="s">"cta-button-main"</span><span class="nt">></span>
Подключить Дымку →
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Remove old pricing elements (<code class="language-plaintext highlighter-rouge">.price-old</code>, <code class="language-plaintext highlighter-rouge">.price-new</code>, <code class="language-plaintext highlighter-rouge">.price-period</code>).</p>
<h3 id="4-pluginshtml--two-locations">4. <code class="language-plaintext highlighter-rouge">plugins.html</code> — two locations</h3>
<p><strong>Geo-warning block (lines ~67-73):</strong></p>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “надёжный VPN-сервис” → “VPN-сервис Дымка”</li>
<li>Features: “✓ Обход блокировок” (keep), “✓ Быстрое подключение” → “✓ Госуслуги и Авито работают”, “✓ Безопасность” → “✓ Бесплатно”</li>
</ul>
<p><strong>Security info card (line ~94):</strong></p>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “надёжный VPN-сервис” → “VPN-сервис Дымка”</li>
</ul>
<h3 id="5-_layoutspluginhtml-lines-49-55">5. <code class="language-plaintext highlighter-rouge">_layouts/plugin.html</code> (lines ~49-55)</h3>
<ul>
<li>Same changes as plugins.html geo-warning block</li>
</ul>
<h3 id="6-guideshtml--three-links-with-specific-replacement-text">6. <code class="language-plaintext highlighter-rouge">guides.html</code> — three links with specific replacement text</h3>
<p><strong>Line ~428:</strong> “VPN для обхода ограничений” → “VPN-сервис Дымка для обхода ограничений”
<strong>Line ~467:</strong> “надёжный VPN с политикой “no-logs”” → “VPN-сервис Дымка”
<strong>Line ~481:</strong> “проверенный VPN-сервис” → “VPN-сервис Дымка”</p>
<p>All URLs → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></p>
<h3 id="7-faqhtml-line-636">7. <code class="language-plaintext highlighter-rouge">faq.html</code> (line ~636)</h3>
<ul>
<li>URL → <code class="language-plaintext highlighter-rouge">https://t.me/dymkavpn_bot</code></li>
<li>Text: “VPN-сервисами” → “VPN-сервисом Дымка”</li>
</ul>
<h2 id="out-of-scope">Out of Scope</h2>
<ul>
<li>Web landing page for Dymka (deferred — Telegram blocked in RF)</li>
<li>Changes to VPN infrastructure or bot code</li>
<li>CSS class renaming (<code class="language-plaintext highlighter-rouge">.vpn-offer-card</code>, <code class="language-plaintext highlighter-rouge">.vpn-link</code> etc. — generic names, still valid)</li>
<li>Orphaned CSS rules for removed elements (<code class="language-plaintext highlighter-rouge">.vpn-offer-price</code>, <code class="language-plaintext highlighter-rouge">.vpn-guarantee</code>) — cosmetic, can clean up later</li>
<li><code class="language-plaintext highlighter-rouge">styles.css</code> VPN-related styles — generic, no BlancVPN references</li>
<li><code class="language-plaintext highlighter-rouge">contacts.html</code> line 80 — generic VPN mention, no BlancVPN reference</li>
<li><code class="language-plaintext highlighter-rouge">_plugins/*.html</code> YAML front-matter — generic VPN mentions, no BlancVPN reference</li>
<li>SEO/meta keywords — no BlancVPN references present</li>
</ul>
footer
links: privacy, terms, contacts
copyright
Удалить из layout:
- Yandex RTB блоки (3 шт)
- VK OpenAPI script
- Milligram CSS подключение
- Normalize.css подключение
Оставить:
- GTM (noscript + script)
- Jekyll SEO tag
- Favicon/manifest ссылки
Страницы (контент сохраняется as-is)
- index.html — hero, VPN CTA, Telegram CTA, Proxy CTA, описание, шаги, поддержка
- faq.html — hero, FAQ items с schema.org разметкой
- plugins.html — hero, категории, каталог плагинов из коллекции
_plugins/ - guides.html — hero, руководства + содержимое stability.html
- contacts.html — контактная информация
- privacy.html / terms.html — юридические страницы
- stability.html — остаётся как отдельная страница, убирается только из навигации (на неё ведут прямые ссылки из index.html)
Компоненты (CSS-классы)
.hero— секция-герой (заголовок + описание + теги).card— универсальная карточка (плагины, FAQ, поддержка, шаги).step— пошаговая карточка с номером.cta— промо-блок (VPN, Telegram, Proxy).nav-page— внутренняя навигация по странице.btn/.btn-outline— кнопки.badge— статус плагина (Активен/Неактивен).notice— уведомление/предупреждение.code— inline code блок.grid-2/.grid-3/.grid-4— grid-раскладки
Code Simplification
CSS Target: ~400-500 строк (с 2200)
Структура файла:
- Reset (~20 строк)
- CSS Variables (~30 строк)
- Base typography (~30 строк)
- Layout: header, main, footer (~60 строк)
- Navigation + burger (~60 строк)
- Components: card, step, cta, hero, badge, notice (~150 строк)
- Utilities: grid, spacing, buttons (~50 строк)
- Responsive (~50 строк)
HTML Simplification
- Убрать все inline
style=""атрибуты - Убрать лишние wrapper-div’ы
- Убрать emoji из CSS-классов (оставить только в контенте)
- Единообразная структура карточек
JS Simplification
navigation.js — упростить бургер-логику. Текущий код избыточен (40+ строк на простой toggle). Целевой: ~15 строк.
What Does NOT Change
- Весь текстовый контент (ни слова не меняется)
- Все URL: внутренние (
/faq,/plugins, etc.) и внешние (GitHub, Telegram, VPN) - Все якоря (
#step1,#basic,#technical, etc.) - Schema.org разметка (HowTo, FAQPage, Question/Answer)
- Jekyll:
_config.yml, front matter, Liquid templates, коллекция_plugins/ - GTM tracking
- Файлы:
_redirects,CNAME,robots.txt,icons/ - Индивидуальные страницы плагинов (
_plugins/*.html)