Ruta is a dark immersive masonry landing page built for Colombia solo travel guides. It pairs cinematic visuals with practical, priced experience cards, a floating itinerary builder, and a three-step booking form. Designed for digital nomads, career-break travelers, and solo adventurers, Ruta turns browsing into confident trip planning with one scroll.
by Rocket studio
Loading preview…
Quick summary
Ruta is a single-page Colombia solo travel guide template built on a masonry grid layout. It opens with a macro close-up header and unfolds as a curated collection of pinned experiences, each card showing cost, duration, difficulty, and Spanish requirements. A floating gold call to action anchors the booking flow throughout the scroll.
Who this template is for
Ruta is designed for travel businesses, independent guides, and content-driven booking services targeting solo travelers heading to Colombia. It speaks directly to the visitor who already knows they want to go but needs a trusted structure to plan around.
Solo travel consultants and itinerary services offering Colombia trip planning
Digital nomad lifestyle brands running Colombia-based booking or experience curation
Independent guides and finca hosts wanting a high-converting, visually rich landing page
What problem this template solves
Most travel landing pages feel like brochures. They show beautiful photos but leave the visitor with no clear next step and no sense of what a trip actually costs or requires. Ruta fixes that by blending aspiration and logistics in the same scroll.
Visitors can see real experiences with prices, durations, and difficulty levels before committing
The page removes decision paralysis by offering both a full itinerary builder and single-excursion booking paths
The three-step form reduces friction by collecting only what is needed: dates, travel style, and a WhatsApp contact
What you get with this template
Ruta delivers a complete, ready-to-customize landing page that looks editorial and functions as a booking tool. Every section has a defined purpose, and the visual system is fully specified so customization stays consistent.
A masonry grid of experience cards with hover states, traveler quotes, and practical travel details
A floating "Build My Solo Itinerary" button in waypoint gold that persists throughout the scroll
A three-step itinerary form covering calendar date selection, travel style toggles, and WhatsApp contact capture
Theme
Dark Immersive
Creative direction
Curated Collection
Color system
Alpine Fresh
Style
Masonry/Pinterest
Direction
Booking/Scheduling
Page Sections
Macro Close-up Hero Header
Masonry Experience Card Grid
Floating Itinerary Builder Call to Action
Three-step Booking Form
Per-card Reservation Flow
Dark Immersive Alpine Color System
Related questions
Can I add or remove experience cards from the masonry grid?
Does the three-step form connect to WhatsApp automatically?
Can I use this template for a destination other than Colombia?
Is the floating call to action button visible on mobile screens?
What does the travel style selector in the form actually do?
Feature list
Ruta includes a focused set of built-in components drawn directly from the template brief. Each one serves a specific function in the booking and discovery flow.
Macro Close-Up Hero Header
The header opens with a tightly cropped, high-resolution still of a hand holding a tinto against emerald mountain ridges at golden hour. A single headline materializes after a short delay in glacial white: "You don't need a group. You need a plan." The intimacy of the image creates immediate emotional connection.
Masonry Experience Card Grid
Cards vary in height and width across the grid. Some are image-dominant, while others are text-heavy with practical details including cost, duration, difficulty rating, and a "Spanish required: yes/no" indicator. Hovering a card lifts it slightly and reveals a one-line traveler quote beneath.
Floating Itinerary Builder call to action
A waypoint gold button labeled "Build My Solo Itinerary" follows the visitor down the page. It is always visible and always actionable, so the booking path is never more than one tap away regardless of scroll position.
Three-Step Booking Form
The form opens in three clean steps. Step one is a calendar picker for arrival date and trip length. Step two is a travel style selector with tactile toggles covering adventure, culture, nightlife, nature, and a combined "all of it" option. Step three collects a WhatsApp number with a 24-hour response promise.
Per-Card Reservation Flow
Each experience card carries its own "Reserve This Day" button. Tapping it opens a slot picker similar to a scheduling tool, letting visitors book individual excursions without going through the full itinerary form.
Dark Immersive Visual System
The entire page is built on the Alpine Fresh color system: deep jungle night for backgrounds, páramo mist and glacial stream for card surfaces, and waypoint gold reserved exclusively for calls to action, pins, and interactive markers.
Page sections overview
Section
Purpose
Hero Header
Opens with intimacy and sets the solo travel tone
Masonry Card Grid
Displays priced, detailed experience cards in a browsable layout
Experience Card Detail
Shows cost, duration, difficulty, and Spanish requirement per card
Card Hover State
Reveals a traveler quote and lifts the card on interaction
Floating call to action Button
Keeps the itinerary builder reachable at all scroll positions
Itinerary Builder Form
Collects dates, travel style, and WhatsApp contact in three steps
Reserve This Day
Opens a slot picker for single-excursion direct booking
Design & branding system
The template uses a Dark Immersive theme built on the Alpine Fresh color palette. Every color decision has a specific role, and the system is tight enough that swapping your own photos does not break the visual hierarchy.
Backgrounds use deep jungle night (#0F1A12), card surfaces use páramo mist (#A8BFA1) and glacial stream (#D6EAE0), and waypoint gold (#D4A843) is reserved strictly for calls to action and interactive markers
The layout follows a masonry grid structure that alternates between large image cards and text-heavy detail cards, creating a mood board rhythm as the visitor scrolls
Typography is set in glacial white for headlines and mist tones for body text, maintaining contrast and readability across the dark background
Mobile & speed optimization
The masonry grid and floating call to action are built to work on touch screens. Card interactions, toggle selectors, and the slot picker are all designed with mobile tap targets in mind.
The three-step form is touch-friendly, with calendar pickers and toggle buttons sized for thumb navigation on small screens
Card heights and widths reflow naturally for narrower viewports while preserving the alternating rhythm between image and text cards
The floating gold button maintains its fixed scroll position on mobile so the primary booking action is never buried below the fold
How this template helps you convert
Ruta is structured to move a curious visitor toward a booking without pressure. The page earns the click by showing enough specific, real information that the only remaining friction is choosing.
The masonry grid builds desire progressively. Each scroll reveals another priced, detailed experience, making the destination feel tangible and planned rather than abstract and risky.
Two booking paths reduce drop-off. Visitors who want a full custom route use the floating form. Visitors who already know what they want tap a card and reserve a single day directly, cutting the path to conversion in half.
Other information about this template
Ruta is a single landing page template categorized under Travel and Hospitality, specifically built for the Colombia travel niche. It is well suited to services targeting solo travelers who want a guided but independent experience.
The template is designed for the Colombia solo travel guide niche and fits naturally into a broader travel booking or experience curation business
The WhatsApp contact field in step three of the form supports direct, personal follow-up, which works especially well for boutique tour operators and independent guides
The visual brief references locations across Colombia including Bogotá, Boyacá, Salento, Nuquí, and Cali, giving the template strong geographic specificity for Colombia-focused travel content
This template pairs well with tools like Calendly for slot-based booking and WhatsApp Business for itinerary delivery, though any equivalent scheduling or messaging tool can be connected
