Что это?
Продающая страница AI-агрегатора WebGPT с интегрированным блогом и кинематографичными scroll-driven анимациями. Bento-сетка фич, dark/light ритм секций и SEO-оптимизированный контент-маркетинг в одном Next.js-приложении.
Landing
WebGPT Landing — Landing из портфолио Паши Вина
Продающая страница AI-агрегатора WebGPT с интегрированным блогом и кинематографичными scroll-driven анимациями. Bento-сетка фич, dark/light ритм секций и SEO-оптимизированный контент-маркетинг в одном Next.js-приложении.
01. КатегорияLanding
02. РольFull-stack, Product
03. Датафев 2026
Какую задачу решает?
Было: безликая лендинг-страница без конверсии → Стало: премиальная посадочная в стиле Apple/Stripe с воронкой через блог и измеримым прогревом аудитории.
Как реализовано?
Реализовано на стеке: Next.js, Tailwind CSS, GSAP, Lenis. Лендинг в стиле Sectional Drama с ритмом тёмных и светлых секций, scroll-driven анимациями и встроенным блогом для SEO-прогрева холодного трафика.
Next.jsTailwind CSSGSAPLenisTypeScriptSupabaseNext.jsTailwind CSSGSAPLenisTypeScriptSupabaseNext.jsTailwind CSSGSAPLenisTypeScriptSupabaseNext.jsTailwind CSSGSAPLenisTypeScriptSupabase
Холодный трафик на AI-сервис конвертируется в подписку только если за первые секунды лендинг успевает рассказать историю и вызвать доверие. Цель — собрать продающую страницу в стиле Apple и Stripe: scroll-driven сценарий, bento-сетка фич и встроенный блог, который греет аудиторию между визитами.
WebGPT Landing
Вызов
Прогрев и доверие
AI-сервисов на рынке десятки — пользователь не понимает, чем один отличается от другого, и уходит с сухого лендинга за 5 секунд.
- — Скучные блочные лендинги не удерживают внимание
- — Нет канала прогрева — посетитель приходит холодным и уходит
- — Сложно объяснить ценность агрегатора нейросетей в двух экранах
Решение
Кинематографичный сторителлинг
Лендинг в стиле Sectional Drama с ритмом тёмных и светлых секций, scroll-driven анимациями и встроенным блогом для SEO-прогрева холодного трафика.
- + GSAP ScrollTrigger + Lenis — плавная подача смыслов по мере скролла
- + Bento-сетка фич с уникальным визуалом на каждой карточке
- + Блог с категориями и авторами — SEO-канал входящего трафика
Архитектура & Стек
Mindmap
NODE.01
Hero & Sections
Главный экран и секции
Next.js · Tailwind v4 · Space Grotesk
NODE.02
Анимации
Scroll-driven сценарий
GSAP · ScrollTrigger · Lenis
COREEngine
NODE.03
Bento Grid
Интерактивные карточки фич
useTilt hook · CSS perspective · lucide-react
NODE.04
Блог-движок
Контент-маркетинг и SEO
App Router · react-markdown · rehype
NODE.01
Hero & Sections
Главный экран и секции
Next.js · Tailwind v4 · Space Grotesk
NODE.02
Анимации
Scroll-driven сценарий
GSAP · ScrollTrigger · Lenis
NODE.03
Bento Grid
Интерактивные карточки фич
useTilt hook · CSS perspective · lucide-react
NODE.04
Блог-движок
Контент-маркетинг и SEO
App Router · react-markdown · rehype
COREEngine
Смоделировано 100 предпринимателями
Бизнес Импакт
0
тяжёлых зависимостей
60fps
плавность скролла
24/7
прогрев через блог