PROJECT OVERVIEWPROMO WEBSITE
Lighthouse — a promo website with a skills quiz
A promo website for a joint campaign of three companies. Visitors take a test, find out their type — Creator, Organizer, Guide or Seeker — and get bonuses for promoting their services and partner promo codes.
- Role
- Frontend developer
- Timeline
- 2026, September — October
The challenge
Build the landing page, the test, the result and bonus pages from the mockups, make the lighthouse scene feel alive and smooth on any screen, and connect the request form to the API.
What the solution includes
- An eight-question test: the lighthouse beam turns between questions, and objects in the scene open partner tips.
- The result follows the most frequent answer: four types with fields where one could earn.
- A bonus page with a carousel, partner promo codes and a request to a partner's manager.
- A form with field validation, input masks and DaData suggestions, sent to the API through TanStack Vue Query.
- Accessible dialogs: focus stays inside, Escape closes them, and focus returns to the button.
- A separate mobile scene, AVIF and WebP images, and no decorative animation under prefers-reduced-motion.
A commercial team project: the frontend built from a ready design. Screenshots are from a test build; the partners' logos and names are hidden.