Заставка для промо-страницы забега: крупная афиша поверх видеофона, которая через пару секунд уезжает вверх. За ней снизу по очереди поднимаются названия городов с числом участников и фото у нижнего края.
При наведении на город строка вытягивается и под названием проявляется дата забега. Надписи масштабируются по размеру контейнера, поэтому заставка одинаково выглядит в любом блоке.
Скопируйте эти файлы в components/night-race-preloader/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { NightRaceIntro } from "@/components/night-race-preloader/night-race-preloader";
export default function Page() {
return (
<div className="h-[980px] w-full">
<NightRaceIntro duration={2500} cta="найди свой забег" />
</div>
);
}duration?Сколько миллисекунд держится заставка
Тип number·По умолчанию 2500
video?Видео на фоне афиши
Тип string·По умолчанию "/web-components/_video/video-artist.mp4"
image?Фото внизу страницы со списком
Тип string·По умолчанию "/web-components/_photos/shockwave-2.webp"
cta?Призыв под списком городов
Тип string·По умолчанию "найди свой забег"
cities?Города: название, число участников и дата
Тип NightRaceCity[]·По умолчанию NIGHT_RACE_CITIES
accentColor?Цвет надписей афиши и списка
Тип string·По умолчанию #66d9e8
background?Цвет фона
Тип string·По умолчанию #000000
className?Дополнительные классы корневого блока
Тип string