Новый сайт дизайн+верстка

Сделать современный, премиальный, быстрый сайт для сервиса @BuyDomain_BOT (покупка и управление доменами через Telegram), который:

• повышает доверие,

• объясняет ценность за 20–40 секунд,

• ведёт в Telegram (основная конверсия),

• помогает SEO (структура страниц + будущие sitelinks),

• корректно отображается в Google сниппете и соцсетях.

2) Технологии и ограничения

• Только HTML + CSS + JS (без WordPress/React/Vue и т.д.).

• Можно Tailwind? — нет, нужен свой CSS (или очень лёгкий мини-фреймворк по согласованию, но предпочтительно чистый).

• Код должен быть легко переносим на любой хостинг (Nginx/Apache).

• Никаких тяжёлых библиотек без необходимости.

• Максимум скорости: LCP/CLS/INP в зелёной зоне (Core Web Vitals).

3) Структура сайта (обязательно)

Сделать сайт не как одна огромная “простыня”, а как лендинг + несколько внутренних страниц, чтобы Google мог дать sitelinks.

Минимальный набор страниц:

1. / — Главная (лендинг)

2. /pricing/ — Цены и зоны (примерные, без привязки к конкретным цифрам, но с “от …” и примерами)

3. /features/ — Все возможности бота (подробно, списками)

4. /api/ — API для разработчиков (условия доступа, краткая документация)

5. /faq/ — FAQ (структурированный)

6. /support/ — Поддержка + контакты (Telegram)

7. /legal/terms/ — Условия использования

8. /legal/privacy/ — Политика конфиденциальности

Важно: ссылки на эти страницы должны быть в хедере и футере. Это поможет Google выбрать sitelinks.

4) Дизайн / стиль

• Стиль: премиум-тех (как Stripe / Linear / Vercel по ощущению).

• Цвета: фирменные (синий/фиолетовый градиент допустим), но не “кислотно”.

• Тёмная тема — желательно, но можно как “переключатель” (опционально).

• Анимации: лёгкие (fade/slide), без перегруза.

• Много воздуха, аккуратная типографика, мягкие тени.

5) Ключевые смыслы (обязательные блоки контента)

На главной должны быть блоки с понятной выгодой:

Hero (первый экран)

• Заголовок (вариант):
  «Покупка и управление доменами прямо в Telegram»

• Подзаголовок:
  «Проверка домена, регистрация, DNS/NS, Cloudflare, SSL и редиректы — в одном боте. Оплата криптовалютой.»

• Кнопки:

  • Запустить @BuyDomain_BOT (главный CTA)

  • «Посмотреть возможности»

Блок “Что умеет бот” (коротко карточками)

Обязательно перечислить:

• Покупка доменов в 1–2 клика

• Управление DNS записями (A, AAAA, CNAME, MX, TXT и т.д.)

• Управление NS (смена nameserver)

• Интеграция с Cloudflare (подключение зоны/управление)

• Бесплатный SSL / управление SSL

• Редиректы (301/302, www/non-www, URL forwarding)

• Массовые операции (bulk)

• API для разработчиков

• Асинхронная обработка (ничего не “зависает”)

• Оплата криптой (включая оплату через CryptoBot/инвойсы — если актуально)

• Без лишних данных / без KYC (если ты это точно хочешь на сайте — можно аккуратно, без триггерных формулировок)

“Как это работает” (3–4 шага)

• Проверка домена → выбор зоны → оплата → домен готов → управление.

“Почему безопасно”

• Регистрация у ICANN-аккредитованных регистраторов (если правда)

• Защита аккаунта/контроля домена (например: блокировка трансфера)

• Прозрачная оплата

• Поддержка 24/7 (если есть)

“Цены” (превью на главной + ссылка на /pricing/)

• Таблица/карточки (примерные цены и популярные зоны)

• Отдельный блок “Доп. услуги”: SSL / DNS / Transfer / API

“API”

• Коротко: зачем, кому, как получить доступ

• Ссылка на страницу /api/

FAQ (5–8 вопросов)

• На главной кратко + кнопка “все вопросы”

Финальный CTA

• “Запустить бота” / “Перейти в Telegram”

6) SEO требования (жёстко)

На каждой странице:

• Уникальный <title> (до ~60 символов)

• Уникальный <meta name="description">

• Один <h1> на страницу

• Каноникал:
  <link rel="canonical" href="https://buydomainbot.com/...">

• OpenGraph + Twitter cards (как у тебя, но корректно и уникально при необходимости)

Разметка Schema.org (обязательно)

Вставить JSON-LD:

• Organization

• WebSite (+ SearchAction если будет поиск по сайту — можно не делать)

• BreadcrumbList на внутренних страницах

• FAQPage на /faq/ и FAQ блоке на главной

Техническое:

• sitemap.xml с перечислением всех страниц

• robots.txt (разрешить индексацию)

• Чистые URL без параметров

7) Навигация и UX (важно под sitelinks)

• Хедер: Главная / Возможности / Цены / API / FAQ / Поддержка

• Везде одинаковая структура

• Футер: дубли ссылок + legal страницы

• Кнопка “Запустить” всегда видна (sticky можно)

8) Производительность

• Google PageSpeed 90+ на мобиле.

• Изображения: WebP/AVIF, lazyload

• JS минимум, без тяжёлых анимаций

• Шрифты: системные или 1–2 варианта, preload

9) Адаптив и совместимость

• Mobile-first

• Chrome/Firefox/Safari/Edge

• Корректно на 360px ширине

10) Интерактив (JS)

• FAQ accordion

• Плавный скролл по якорям

• Переключатель языка (опционально) — RU/EN (если хочешь)

• “Копировать ссылку на бота” (опционально)

• Мини-демо “как работает бот” (чат-симуляция) — красиво, но легко

11) Аналитика

• Подключить Google tag (gtag.js) как у тебя

• События:

  • click_telegram_start (клик по всем CTA)

  • click_pricing

  • click_api

  • scroll_50 / scroll_90 (опционально)

12) Что должен сдать разработчик

• Папку проекта:

  • /index.html

  • /pricing/index.html

  • /features/index.html

  • /api/index.html

  • /faq/index.html

  • /support/index.html

  • /legal/terms/index.html

  • /legal/privacy/index.html