Главная страница и страница тарифов

Структура главной страницы

Лендинг ИИ-сервиса обычно строится по типовой структуре из шести блоков, идущих сверху вниз:

1. Hero — крупный заголовок, описание, кнопка «Начать бесплатно»
2. Как это работает — 3 шага в иконках с подписями
3. Возможности — 4-6 ключевых функций сервиса
4. Демо или скриншоты — что пользователь получит (тут обычно картинка интерфейса)
5. Социальное доказательство — отзывы, цифры, логотипы клиентов (если есть)
6. Финальный CTA — повтор кнопки и ссылка на тарифы

Каждый блок мы делаем отдельным React-компонентом, и это даёт гибкость: можно менять порядок блоков, скрывать ненужные и добавлять варианты для A/B-тестов.

Промпт для главной

Создай главную страницу сервиса «ИИ-генератор постов для Telegram».

Структура:
1. Hero: заголовок «10 постов в стиле твоего канала за 30 секунд», подзаголовок «ИИ генерирует посты, которые звучат как ты — анализирует последние 30 публикаций и сохраняет голос», кнопка «Начать бесплатно» ведёт на /signup
2. Как работает: 3 шага «Подключи канал → ИИ анализирует стиль → Получи 10 постов на выбор»
3. Возможности: 4 карточки «Сохраняет твой голос», «10 постов за раз», «Разные форматы (длинные, короткие, новости)», «Безопасность — данные не передаются третьим»
4. Демо: блок с заглушкой картинки 16:9
5. Социальное доказательство: «Подходит каналам от 1к до 100к подписчиков»
6. Финальный CTA: «Попробуй 5 постов бесплатно», кнопка ведёт на /signup

Стиль: тёмная тема, акцент бирюзовый. Используй компоненты shadcn/ui. Все тексты на русском.
Адаптивность: mobile, планшет, десктоп. На mobile карточки в одну колонку.

Что получится

Claude Code создаст файл src/app/page.tsx с полной страницей, а каждый блок вынесет в отдельный компонент в папке src/components/landing/:

• Hero.tsx
• HowItWorks.tsx
• Features.tsx
• DemoPreview.tsx
• SocialProof.tsx
• FinalCTA.tsx

Все они переиспользуемые. Если позже понадобится отдельная посадочная страница под маркетплейсы, вы возьмёте те же компоненты и просто поменяете тексты.

Страница тарифов

Следующий шаг — страница тарифов в файле src/app/pricing/page.tsx. Промпт для неё:

Создай страницу /pricing с двумя тарифами:

1. Free — 0 ₽
- 5 постов в месяц
- Базовый анализ стиля канала
- Один канал
- Кнопка «Начать бесплатно»

2. Pro — 990 ₽/мес
- 200 постов в месяц
- Глубокий анализ стиля
- До 5 каналов
- История генераций
- Приоритетная поддержка
- Кнопка «Купить Pro»

Pro выделен бирюзовой рамкой с плашкой «Рекомендуем».
Под тарифами — блок FAQ из 4 вопросов: «Можно ли менять тариф?», «Деньги вернёте?», «Можно через юр.лицо?», «Карта блокируется?».
Стиль такой же как на главной (тёмная тема, бирюзовый акцент).

Связь между страницами

Кнопки «Начать бесплатно» с главной и тарифов ведут на /signup (страница регистрации, которую сделаем на уроке 23). Кнопка «Купить Pro» — пока тоже на /signup, потом подключим к ней эквайринг.

Header добавим со ссылками: «Тарифы» → /pricing, «Вход» → /login (тоже сделаем на уроке 23).

Адаптивность

Tailwind управляет адаптивностью через префиксы вроде md:grid-cols-3 или sm:text-xl. Claude Code это понимает и сразу делает страницы, которые корректно смотрятся на мобильном. После генерации стоит открыть DevTools в браузере (F12), переключиться в режим «Mobile» и проверить, что вёрстка не ломается. Если что-то выглядит криво, достаточно сказать агенту, например: «На mobile блок features ломается, исправь» — и он поправит.

Дизайн без дизайнера

Чтобы страницы выглядели лучше дефолтных шаблонов, помогают два простых приёма. Первый — палитра: возьмите 2-3 цвета (фон, текст, акцент) на coolors.co и передайте их Claude Code, например «используй палитру #0a0a0a, #fafafa, #14b8a6 на всём сайте». Второй — типографика: подключите Google Fonts (для ИИ-сервисов хорошо смотрятся Inter, Manrope, Public Sans), и агент сам пропишет их в проект.

Что в следующем уроке

Страницы готовы, но без регистрации они бесполезны. На уроке 23 подключаем Auth.js v5 и Postgres: базу данных и магическую авторизацию по email.