Ряд карточек-этапов, закреплённый в центре экрана на время длинной прокрутки. Каждая карточка отвечает за свой отрезок пути: её картинка опускается сверху, текст поднимается снизу, оба проявляются, а квадратный номер вырастает из точки.
Под картинками тянется фирменная линия прогресса: сначала она проявляется по высоте, затем растёт вправо, пока не пройдёт все этапы. На узких экранах вместо сцены показывается простой вертикальный список с линией слева.
Скопируйте эти файлы в components/scroll-reveal-cards/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ScrollRevealCards } from "@/components/scroll-reveal-cards/scroll-reveal-cards";
const ITEMS = [
{ bgSrc: "/images/step-1.svg", title: "Идея", desc: "Собираем требования и формулируем задачу." },
{ bgSrc: "/images/step-2.svg", title: "Дизайн", desc: "Рисуем интерфейс и проверяем гипотезы." },
{ bgSrc: "/images/step-3.svg", title: "Запуск", desc: "Выпускаем продукт и собираем отзывы." },
];
export function Roadmap() {
return <ScrollRevealCards items={ITEMS} cardHeight={260} scrollLength={600} />;
}itemsЭтапы: картинка, её классы, заголовок и описание
Тип ScrollRevealCardItem[]
cardHeight?Высота картинки карточки в пикселях
Тип number·По умолчанию 240
gap?Расстояние между карточками в пикселях
Тип number·По умолчанию 80
scrollLength?Длина прокрутки сцены в vh
Тип number·По умолчанию 900