Route is a dark-dashboard landing page template built for mobile optometry route optimisation platforms. It features an animated SVG map hero, interactive before-and-after route cards, a cancellation re-sequencing demo, and a testimonials grid. The design is driven by a deep slate and sky blue palette that feels like a GPS interface proving its value in real time.
by Rocket studio
Loading preview…
Quick summary
Route is a single-page, card-grid landing page template for domiciliary optometry route optimisation software. It opens with a live-metrics hero, moves through interactive flip cards and a cancellation demo, and closes on a dual-path call to action covering app download and a 14-day free trial. The layout is mobile-first, data-dense, and built for field clinicians.
Who this template is for
This template is designed for teams building or marketing a mobile route optimisation tool aimed at the domiciliary eye care sector. It speaks directly to the clinicians and coordinators who plan patient visits on the road.
Independent mobile optometrists running one-to-three-person home-visit practices
Optical franchise managers dispatching teams of three to twelve field clinicians
National Health Service domiciliary care coordinators managing vulnerable-patient time windows and drive-time constraints
What problem this template solves
Planning a day of scattered home visits without a purpose-built tool is slow, error-prone, and expensive. Field clinicians lose hours every week to manual diary juggling, inefficient routing, and last-minute cancellation chaos.
No clear way to visualise a full day of patient stops as one optimised drive sequence
Manual re-scheduling after a cancellation wastes valuable clinical time mid-route
Generic mapping tools cannot account for patient time windows or rural loop constraints
What you get with this template
You get a fully structured, interactive landing page with six distinct content sections and a clear conversion path to app download or free trial signup. Every section earns the visitor's trust before asking them to commit.
An animated SVG hero dashboard with fourteen patient pins, a pulsing route line, and three live metric cards
Three interactive explorer cards covering before-and-after route toggle, cancellation re-sequencing demo, and a testimonials grid with mileage reductions
A dual-path call-to-action block with App Store and Google Play badges, an email handoff field, and a 14-day free trial secondary option
Theme
Startup Velocity
Creative direction
Interactive Explorer
Color system
Slate & Sky
Style
Card Grid (Modular)
Direction
App Download
Page Sections
Animated SVG Route Map Hero
Before-and-after Route Toggle
Cancellation Re-sequencing Demo
Testimonials Grid with Mileage Data
Dual-path App Download Block
Card Grid Modular Layout
Related questions
Who is this landing page template designed for?
Does the template include real interactive route mapping?
Is the layout optimised for mobile devices?
Can I use this template for a free trial signup flow as well as an app download?
What makes this template different from a standard software landing page?
Feature list
This template comes with several purpose-built components that go beyond a static layout.
Animated SVG Route Map Hero
The hero section renders fourteen patient pins scattered across a city map. A pulsing route line draws itself in optimised sequence, while three oversized metric cards count up to "14 visits," "47 miles saved," and "2h 12m recovered." The animation is built with SVG draw techniques and counter animation using requestAnimationFrame for smooth rendering.
Before-and-After Route Toggle Card
A flip card lets visitors switch between a chaotic zigzag route and a clean optimised loop on a miniature embedded map. The interaction is immediate and visceral. It shows the core value of the platform without a single line of explanatory text.
Cancellation Re-sequencing Demo
A dedicated card simulates a patient cancellation at 11 a.m. and animates the system re-ordering the afternoon route in under two seconds. This demo is the single most persuasive element on the page for any field clinician who has faced this exact situation.
Testimonials Grid with Mileage Data
A card grid stacks domiciliary optometrist quotes alongside specific weekly mileage and time reductions. Quotes are grounded in real UK locations such as London boroughs, Leeds, and Manchester. Social proof is shown as data, not generic praise.
Dual-Path App Download Block
The call-to-action section pairs App Store and Google Play download badges with a single email field labelled "Or text me the link." A secondary button offers "See Your Routes Free for 14 Days" for visitors who need more convincing before committing.
Card Grid Modular Layout
The entire page is structured as a modular card grid. Each section is a self-contained card that can be flipped, expanded, or filtered. The layout scales naturally from a large desktop dashboard view down to a single-column mobile stack.
Page sections overview
Section
Purpose
Hero Metrics Dashboard
Displays animated route map with live-counting metric cards to prove value immediately
Before-and-After Toggle
Flip card comparing chaotic versus optimised route on a miniature map
Cancellation Demo Card
Simulates mid-day patient cancellation and shows 2-second re-sequencing animation
Testimonials Grid
Stacks clinician quotes with specific mileage and time savings from UK practices
App Download Block
Presents App Store and Google Play badges, email handoff field, and free trial path
Footer Row
Single linear row with minimal links following Pattern 1 layout
Design & branding system
The visual identity is built on a Startup Velocity theme using a Slate and Sky colour system. Every colour choice is intentional and functional, not decorative.
Deep dashboard slate (#1E293B) dominates background and card surfaces; sky blue (#38BDF8) drives all interactive elements, route lines, and primary buttons
Clinical instrument gray (#64748B) handles body text, secondary labels, and supporting copy
Confirmation green (#34D399) appears only when the system proves it saved something, applied exclusively to time and mileage callouts to keep its meaning sharp
Mobile & speed optimization
The template is designed mobile-first because the primary user is a clinician tapping their phone at 7:45 a.m. before leaving the house. Every interaction is thumb-friendly and every animation is hardware-accelerated.
Lazy loading is applied to all below-the-fold sections to keep initial load fast on mobile connections
All animations use CSS transforms only and requestAnimationFrame counters, avoiding layout-triggering properties that slow down older devices
The card grid collapses to a single-column stack on small screens, keeping every interactive element accessible without horizontal scrolling
How this template helps you convert
The page is structured so that visitors interact with the core value proposition before they ever see a call-to-action button. By the time they reach the download prompt, the tool has already solved their problem three times.
The animated hero dashboard quantifies the outcome in seconds, turning an abstract software promise into concrete numbers that feel like a personal result.
The interactive before-and-after card and cancellation demo let visitors experience the optimisation logic themselves, removing doubt about whether the tool actually works for their route type.
The dual-path call-to-action block removes commitment friction by offering both an immediate app download and a no-pressure 14-day free trial, matching the visitor's readiness level.
Other information about this template
This template is part of a broader set of Startup Velocity themed designs built for mobile-first software products in specialist professional sectors.
The typography stack uses Plus Jakarta Sans for all headings and DM Sans for body copy, combining dashboard clarity with comfortable long-form readability
UK localisation is built into the copy layer, including miles as the distance unit, GBP references, and place names from London boroughs, Leeds, and Manchester
The template style is Card Grid Modular, meaning individual sections can be reordered or removed without breaking the overall layout hierarchy
Ping dot animations on the map and blob morphing transitions add motion depth without relying on video or heavy asset files
