Coverage first
The map and service area answer the first practical question before the user has to read a wall of company copy.
Back to Work
Romorquage Mont Rapido
A mobile-first service site for a Montréal towing company. It puts the coverage area, available services, equipment, and direct phone action in the order a stranded driver is likely to need them.
Next.jsTailwind CSSSupabaseGoogle Maps APIFramer Motion
Overview
The Challenge
A towing-site visit often begins on a phone, under time pressure, and with very little patience for navigation. The first screen has to answer three practical questions: do you cover this area, can you handle this vehicle, and how do I reach dispatch?
Romorquage Mont Rapido needed a modern, mobile-first landing page that would establish the service clearly, show their equipment and available work, and keep the phone action within easy reach — while highlighting their coverage area with an interactive map.
The result is a focused Next.js site with service detail, coverage context, business proof, and repeated direct-contact points. The interface is intentionally simple because the user's situation is not.
Timeline
2 weeks
Role
Full-Stack Developer & Designer
Tech Stack
- • Next.js 14
- • Tailwind CSS
- • Supabase
- • Google Maps API
- • Framer Motion
Deliverables
- • Landing Page Design
- • Interactive Map Integration
- • Mobile-First UI
- • Contact Forms
Roadside journey
Four decisions between a stranded driver and help.
The experience is designed for urgency. It reduces a service business to the information a driver needs right now, then makes the next action unmistakable on a small screen.
Service selection
Breakdown, accident, transport, and recovery options are named in plain language so the request starts with useful context.
Operational proof
Equipment, reviews, and direct answers establish credibility for a decision users often make under stress.
One-tap contact
The primary phone action stays easy to reach throughout the mobile journey instead of hiding at the bottom of the page.
Services
Services shown before the call
The page explains what the team can tow and shows the equipment behind the service before asking the visitor to contact dispatch.
Trust Signals
Proof near the decision
Reviews, testimonials, and transparency help stressed customers feel confident they're choosing the right service.
Key Features
Designed for Mobile-First Experience
Fast loading, intuitive navigation, and optimized for users in stressful roadside situations.
Delivery architecture
A fast service surface with no wasted motion.
The implementation prioritizes discoverability, mobile response, location context, and dependable lead capture—the technical requirements that matter most for a local emergency service.
Next.js delivery
Server-rendered page structure gives service content a fast first load and a strong base for local search discovery.
Map integration
Coverage context is embedded into the conversion path rather than treated as a separate contact-page detail.
Supabase capture
Contact submissions become structured requests while direct calling remains available for urgent situations.
Responsive system
Touch targets, type scale, imagery, and sticky actions are tuned for drivers using the site from a phone.
Delivered scope
A shorter path from search to dispatch
A focused sequence from service fit and coverage to the direct phone action.
Mobile-first
Primary layout
Mapped
Coverage context
One tap
Phone action
FR + EN
Locale support
Engineering Challenges
The hard parts I solved
Mobile-first landing for stranded drivers
Solution · Kept the first screen light, avoided a JavaScript-heavy hero, and tested the contact path at narrow breakpoints and under constrained network conditions.
Outcome · The phone action stays available early in the journey without waiting for the visitor to explore the whole site.
Real-time location-mapping integration
Solution · Location context is presented inside the service journey so the visitor can understand coverage without navigating to a separate contact page.
Outcome · Coverage becomes part of the decision path instead of a line of copy in the footer.
Bilingual (FR + EN) without doubling the codebase
Solution · Next.js i18n routing with translation files per locale, locale detected from browser then user-overrideable. URL prefixes (/fr, /en) for shareability. Locale-aware metadata so social shares feel native per language.
Outcome · French and English share one set of components while retaining locale-specific routes and metadata.
Need a fast, mobile-first site?
I take on senior contract work for high-performance landing pages, real-time integrations, and i18n-ready sites.