Разработал анимированный лендинг для благотворительного фонда, предоставляющего бесплатные курсы переквалификации для ветеранов, военнослужащих, семей военных и ВПЛ в Украине.
Особенности:
— Вступительная анимация с кубической сеткой (fade-in + stagger)
— Интерактивный видеоплеер с «занавесочной» анимацией открытия
— Секция курсов с hover-эффектами: текст размывается, появляется превью курса
— Контактная форма с валидацией международного номера телефона
— Модальное окно заявки с экраном успешной отправки
— FAQ-аккордеон
— Полная двуязычность (English / Українська) — кастомный i18n через React Context
— Адаптивный дизайн (mobile-first)
Секции: Hero, Для кого, Как это работает, Курсы, Видео, Форма заявки, FAQ, Footer
Стек: Next.js 16, React 19, Tailwind CSS v4, Motion (Framer Motion), Radix UI, shadcn/ui, Sonner
Дизайн: тёмная палитра (#203236), жёлтый акцент (#FFD700), шрифты Onest + Geologica
Вёрстка pixel-perfect по Figma-макету.
#Landing #NextJS #React #TailwindCSS #Animation #FramerMotion #Responsive #Figma #Frontend #Вёрстка #Ukraine #Veterans
Особенности:
— Вступительная анимация с кубической сеткой (fade-in + stagger)
— Интерактивный видеоплеер с «занавесочной» анимацией открытия
— Секция курсов с hover-эффектами: текст размывается, появляется превью курса
— Контактная форма с валидацией международного номера телефона
— Модальное окно заявки с экраном успешной отправки
— FAQ-аккордеон
— Полная двуязычность (English / Українська) — кастомный i18n через React Context
— Адаптивный дизайн (mobile-first)
Секции: Hero, Для кого, Как это работает, Курсы, Видео, Форма заявки, FAQ, Footer
Стек: Next.js 16, React 19, Tailwind CSS v4, Motion (Framer Motion), Radix UI, shadcn/ui, Sonner
Дизайн: тёмная палитра (#203236), жёлтый акцент (#FFD700), шрифты Onest + Geologica
Вёрстка pixel-perfect по Figma-макету.
#Landing #NextJS #React #TailwindCSS #Animation #FramerMotion #Responsive #Figma #Frontend #Вёрстка #Ukraine #Veterans