Case study
A bilingual travel-agency site built from scratch, with a full internal admin panel
Outcome: Live at santacruz.od.ua · 26+ pages · every form lands as a real lead (email via Resend and the admin panel inbox)
Santa-Cruz sells package vacations, but nothing on the site actually completes a transaction. The product truth driving every design decision: a manager calls the visitor back within two hours and closes the sale over the phone. So every conversion point — the tour-request form, price-drop alerts, booking cards — is designed to end in a phone call or a direct message, not an online payment. The brand voice leans into 25+ years in business with self-aware warmth rather than stiff corporate trust signals (the recurring mascot is a woolly mammoth: "we've known tourism since the last millennium").
Before Google Maps — established and personal, never corporate and self-service. Every visual decision reads as a person you call, not a booking platform.
— Brand voice
The site began as a Base44 prototype. Base44's built-in email only worked for registered, logged-in users — and requiring a first-time visitor to create an account just to ask about a tour would have killed the two-minute lead form the whole funnel depends on. Rather than bend the product around that platform limit, the build moved onto a fully owned stack — React + Supabase on Cloudflare Pages — with transactional email wired directly through Resend and no login wall in front of it. That single call is what unlocked everything below: every form on the site (tour requests, newsletter, price alerts) now works for an anonymous visitor in one submit, and the site has grown to 26+ pages — including 8 destination pages and 5 SEO articles — all served from santacruz.od.ua, purchased and wired up as part of the move.
A lot of the site's surface looks like typical travel-site chrome — a weather widget, a chat bubble, a subscribe form — but underneath, every one of those is wired to a live external service instead of hardcoded content:
Built and documented as a real design system: a warm navy-and-sunshine-yellow palette with amber as a supporting accent, a Lora (serif headings) + Montserrat (geometric sans body) pairing chosen for Ukrainian Cyrillic coverage, pill-shaped interactive elements throughout, and 24px-radius cards. One rule ties it together: sunshine yellow fills only the single primary action per view — its rarity is what makes it read as "click here."
A live contrast audit found amber, teal and the semantic success/error colors all fail WCAG AA as text on light backgrounds (1.7–3.5:1) despite looking fine as fills and icons. Each got a darkened -text token variant clearing 4.5:1+, applied across 17 live instances sitewide.
Depth comes from motion, not shadow. Every button lifts 2px on hover and compresses to 97% on press — a single global CSS rule, not opt-in per component — instead of a hover-shadow escalation pattern.
The motion system had to hold up against Emil Kowalski's design-engineering principles — purpose, easing, physicality, interruptibility, performance, accessibility, cohesion. Here's what it took to get there:
A single-page internal tool (Supabase-authenticated, role-gated) that lets non-technical staff run the entire site without touching code, and edit its actual content — site text and images included, not just structured records: Hot Deals CRUD, a Tour Requests inbox, an Image Manager for site photos, Memory Gallery moderation, newsletter and price-alert subscriber lists, per-country visa info, calculator pricing rules, header/hero text overrides, and a Blog CMS. New tour requests and subscriptions land directly in the admin panel's Tour Requests inbox and subscriber lists, with the owner notified by email.
See the finished site in production.