Что это?
Продающая landing page для AI-агрегатора WebGPT с бento-grid фичами, scroll-driven анимациями и встроенным блогом. Конвертирует посетителей через визуальный сторителлинг в стиле Apple/Stripe.
Landing
WebGPT — Landing из портфолио Паши Вина
Продающая landing page для AI-агрегатора WebGPT с бento-grid фичами, scroll-driven анимациями и встроенным блогом. Конвертирует посетителей через визуальный сторителлинг в стиле Apple/Stripe.
01. КатегорияLanding
02. РольFull-stack, Product
03. Датафев 2026
Какую задачу решает?
Пустой домен → полноценная продающая страница с блогом, анимациями и конверсионными блоками
Как реализовано?
Реализовано на стеке: Next.js, Tailwind CSS, GSAP, Lenis. Тёмно-светлый ритм секций с GSAP-анимациями, bento-grid фичами и встроенным блогом создаёт премиальное первое впечатление.
Next.jsTailwind CSSGSAPLenisTypeScriptNext.jsTailwind CSSGSAPLenisTypeScriptNext.jsTailwind CSSGSAPLenisTypeScriptNext.jsTailwind CSSGSAPLenisTypeScript
AI-агрегатор — сложный продукт, который теряет пользователя в первые секунды, если страница не захватывает внимание мгновенно. Цель — создать лендинг уровня Apple/Stripe: тёмно-светлый ритм секций, кинематографичные анимации и bento-grid объясняют продукт быстрее любого текста.
WebGPT
Вызов
Продать AI-продукт
AI-агрегатору нужна страница, которая объясняет ценность за секунды и удерживает внимание скептичной аудитории.
- — Сложный продукт — нужно донести ценность до того, как пользователь закроет вкладку
- — Конкуренция высокая — визуальный уровень должен соответствовать топовым SaaS
- — SEO и контент-маркетинг требуют встроенного блога с категориями и авторами
Решение
Sectional Drama
Тёмно-светлый ритм секций с GSAP-анимациями, bento-grid фичами и встроенным блогом создаёт премиальное первое впечатление.
- + Bento-grid с уникальными визуалами на каждой карточке — мини-чат, волновая форма, код
- + GSAP ScrollTrigger + Lenis smooth scroll — кинематографичные scroll-driven анимации
- + Полноценный блог с категориями, авторами и markdown-рендерингом прямо на лендинге
Архитектура & Стек
Mindmap
NODE.01
UI Layer
Верстка и стили
Next.js · Tailwind CSS v4 · CSS Animations
NODE.02
Animation Engine
Scroll и движение
GSAP · ScrollTrigger · Lenis
COREEngine
NODE.03
Blog System
Контент и SEO
Next.js App Router · react-markdown · remark-gfm
NODE.04
Design System
Визуальный язык
Space Grotesk · Inter · lucide-react · clsx
NODE.01
UI Layer
Верстка и стили
Next.js · Tailwind CSS v4 · CSS Animations
NODE.02
Animation Engine
Scroll и движение
GSAP · ScrollTrigger · Lenis
NODE.03
Blog System
Контент и SEO
Next.js App Router · react-markdown · remark-gfm
NODE.04
Design System
Визуальный язык
Space Grotesk · Inter · lucide-react · clsx
COREEngine
Смоделировано 100 предпринимателями
Бизнес Импакт
3в1
лендинг блог политики
0
внешних CMS зависимостей
<1с
время до интерактивности