Horizonte Card
Three themes of care, in one continuous page.
I revisited a card landing page from my earlier frontend work with designers. The reconstruction connects a portrait, a full-width statement, three selectable themes and a sample form within a single reading sequence.
Previous frontend work, reconstructed
One responsive page with a depth carousel, six fictional selectors, confirmation and help dialogs, and sequenced entrance motion
Where this started
The earlier site introduced card benefits through a short campaign page. It linked a portrait-led opening to an audience statement, three slides, a contact form, a closing composition and a footer. That sequence is the basis of this reconstruction.
The task was to retain the short page’s pacing and carousel behavior while replacing its historical product copy, reference images and lead collection. The rebuilt version needed to demonstrate the interface without presenting a service offer.
My part
- Frontend & interaction
- I implemented the earlier frontend in collaboration with designers. The original visual design was collaborative work, not my sole authorship.
- Reconstruction
- I recreated the sequence using the shared Horizonte. identity, generated portraits and card illustrations drawn in code. The interactions use fixed examples and stay within the page.
Decisions
Retain the reading sequence
I kept the six main sections and the large typographic break between portrait and carousel. A new reflection on everyday care replaces the historical audience figure.
Center the selected theme
The middle of three cards is selected initially. Adjacent cards recede in depth, retaining the reference’s responsive view counts. Arrows, direct selection, keyboard input and swipe expose the same choices.
Pair illustration with photography
Two illustrated cards overlap a generated portrait. Both carry the existing Horizonte. wordmark; neither includes payment-network branding, account numbers or a working payment function.
Turn the form into a local test
Six selectors preserve the form’s field count while replacing personal details with fictional options. Required-field checks lead to a local dialog, with reset and focus return for another attempt. No request is sent.
Sequence the entrances around reading
The copy enters ahead of its action. One reveal contains the photograph and backing layer, and each card remains a single motion unit. Reduced-motion and no-JavaScript fallbacks expose the content for reading.
Looking back
This reconstruction let me work on continuity at a small scale: a portrait leads into a statement, the carousel invites exploration, and the form supplies a clear stopping point. The interaction details matter throughout that sequence.
Project note
This case reconstructs earlier frontend work I implemented in collaboration with designers. The replacement identity, generated fictional portraits and new copy are adapted for the portfolio. It offers no card, credit, insurance, medical care or family assistance, and claims neither audience results nor sole authorship of the original design.