П.ВИН
Landing

WebGPT Landing — Landing из портфолио Паши Вина

Продающий лендинг AI-агрегатора WebGPT с кинематографичными скролл-анимациями, bento-сеткой живых демо и встроенным SEO-блогом на категории и авторов.

01. КатегорияLanding
02. РольFull-stack, Product
03. Датафев 2026

Что это?

Продающий лендинг AI-агрегатора WebGPT с кинематографичными скролл-анимациями, bento-сеткой живых демо и встроенным SEO-блогом на категории и авторов.

Какую задачу решает?

Было → Стало: статичная страница с прайсом, которую закрывали за пару секунд → кинематографичный лендинг со скролл-драматургией, который удерживает внимание и конвертит в подписку.

Как реализовано?

Реализовано на стеке: Next.js, TypeScript, Tailwind CSS, GSAP. Собрали страницу в стиле Apple/Stripe со скролл-драматургией и интегрированным SEO-блогом для органики.

Next.jsTypeScriptTailwind CSSGSAPLenisNext.jsTypeScriptTailwind CSSGSAPLenisNext.jsTypeScriptTailwind CSSGSAPLenisNext.jsTypeScriptTailwind CSSGSAPLenis
AI-агрегатор может быть в разы выгоднее набора подписок, но об этом никто не узнает, если лендинг не цепляет с первого экрана. Цель — превратить страницу в кинематографичный опыт: скролл-анимации, живые демо фич и контент-воронка ведут посетителя от любопытства к оплате.
WebGPT Landing
WebGPT Landing — AI-агрегатор может быть в разы выгоднее набора подписок, но об этом никто не узнает, если лендинг не цепляет с первого экрана.

Вызов

Слабая конверсия

AI-агрегатор терялся среди конкурентов — сухая страница не объясняла ценность и не удерживала посетителя.

  • — Посетитель не понимал, зачем платить за WebGPT вместо подписки на каждую нейросеть отдельно
  • — Статичная вёрстка без вау-эффекта — люди уходили в первые секунды
  • — Нет контентной воронки, чтобы забирать органический трафик из поиска

Решение

Кинематографичный лендинг

Собрали страницу в стиле Apple/Stripe со скролл-драматургией и интегрированным SEO-блогом для органики.

  • + GSAP + Lenis: плавный скролл и reveal-анимации ведут посетителя по нарративу
  • + Bento-сетка фич с живыми мини-демо вместо скучных списков
  • + Встроенный блог с категориями и авторами — постоянная воронка из поиска

Архитектура & Стек

Mindmap

[ Mindmap Процессов / v2.0 ]
NODE.01

Hero

первый экран
GSAP · ScrollTrigger

NODE.02

Bento Grid

витрина фич
Tailwind CSS · useTilt

NODE.03

Smooth Scroll

плавность движения
Lenis · GSAP

NODE.04

SEO Blog

контент-воронка
Next.js · react-markdown

COREEngine

Смоделировано 100 предпринимателями

Бизнес Импакт

×2

рост конверсии в подписку

3с→0.8с

быстрее загрузка

24/7

приток трафика из блога

Открыть проект
Следующий кейс

AI Content Aggregator →