Landing page of the educational platform for veterans - retraining courses
Developed an animated landing page for a charitable foundation that provides free retraining courses for veterans, military personnel, military families, and internally displaced persons in Ukraine.
Features:
— Introductory animation with a cubic grid (fade-in + stagger)
— Interactive video player with "curtain" opening animation
— Course section with hover effects: text blurs, course preview appears
— Contact form with international phone number validation
— Modal application window with a successful submission screen
— FAQ accordion
— Full bilingualism (English / Ukrainian) — custom i18n through React Context
— Responsive design (mobile-first)
Sections: Hero, For whom, How it works, Courses, Video, Application form, FAQ, Footer
Stack: Next.js 16, React 19, Tailwind CSS v4, Motion (Framer Motion), Radix UI, shadcn/ui, Sonner
Design: dark palette (#203236), yellow accent (#FFD700), fonts Onest + Geologica
Pixel-perfect layout according to Figma mockup.
#Landing #NextJS #React #TailwindCSS #Animation #FramerMotion #Responsive #Figma #Frontend #Layout #Ukraine #Veterans
Features:
— Introductory animation with a cubic grid (fade-in + stagger)
— Interactive video player with "curtain" opening animation
— Course section with hover effects: text blurs, course preview appears
— Contact form with international phone number validation
— Modal application window with a successful submission screen
— FAQ accordion
— Full bilingualism (English / Ukrainian) — custom i18n through React Context
— Responsive design (mobile-first)
Sections: Hero, For whom, How it works, Courses, Video, Application form, FAQ, Footer
Stack: Next.js 16, React 19, Tailwind CSS v4, Motion (Framer Motion), Radix UI, shadcn/ui, Sonner
Design: dark palette (#203236), yellow accent (#FFD700), fonts Onest + Geologica
Pixel-perfect layout according to Figma mockup.
#Landing #NextJS #React #TailwindCSS #Animation #FramerMotion #Responsive #Figma #Frontend #Layout #Ukraine #Veterans