Berth is a precision ocean freight landing page template built for containerized cargo forwarders. It opens with a live freight quote calculator, then builds a case through a modular card grid of performance stats and head-to-head comparisons. The Engineering Blueprint visual theme and signal amber calls to action make every section feel operational, credible, and ready to convert supply chain decision-makers.
by Rocket studio
Loading preview…
Quick summary
Berth is a single-page, card grid template designed for ocean freight forwarders. It leads with a functional freight quote tool, then moves visitors through performance data and competitive comparisons. The Monochrome Steel color system and Engineering Blueprint theme give the page a precise, industrial authority that resonates with logistics professionals.
Who this template is for
This template is built for ocean freight forwarders who serve serious commercial buyers. It speaks directly to people who evaluate forwarders on data, not on marketing language.
Supply chain managers at mid-market manufacturers handling 20 to 200 TEU (twenty-foot equivalent units) per month
Procurement directors at commodity traders who prioritize reliable transit times over the lowest headline rate
Operations leads at direct-to-consumer brands scaling into international fulfillment for the first time
What problem this template solves
Most freight forwarder pages bury the information buyers actually need. Visitors arrive with a specific lane, container type, and deadline in mind, and they leave when they cannot find a rate or a benchmark fast enough.
Buyers cannot quickly compare your transit times and error rates against industry averages
Generic hero sections and stock imagery fail to signal operational credibility to experienced logistics professionals
There is no fast conversion path for visitors who are still evaluating and not yet ready to call
What you get with this template
This template gives you a complete, launch-ready landing page structured around the decision-making habits of freight buyers. Every section earns its place by surfacing a verifiable argument before asking for action.
A header-level freight quote calculator with origin and destination port dropdowns, a container type selector, and a real-time transit and rate estimate display
A modular card grid that leads every card with an oversized performance number before any supporting copy
Theme
Engineering Blueprint
Creative direction
Stats-First Impact
Color system
Monochrome Steel
Style
Card Grid (Modular)
Direction
Comparison/Versus
Page Sections
Live Freight Quote Calculator
Stats-first Modular Card Grid
Head-to-head Comparison Cards
Dual Conversion Path Design
Engineering Blueprint Visual Theme
Sticky Bottom Call to Action Bar
Related questions
Who is this landing page template designed for?
Does the freight quote calculator show real data?
Can I update the performance numbers in the stat cards?
What is the secondary conversion path in this template?
Is this template suitable for forwarders handling multiple container types?
Two conversion paths: a primary "Get Your Lane Quoted" call to action and a secondary email-gated rate benchmark report download
Feature list
This template is built around six structural capabilities that work together to move a skeptical logistics buyer from first scroll to first contact.
Live Freight Quote Calculator
The header opens with a functional estimator. Visitors select an origin port, a destination port, and a container type (20-foot dry, 40-foot dry, 40-foot high cube, or reefer). Once two ports are entered, estimated transit days and a rate range appear in oversized monospaced type. The tool replaces a traditional hero image entirely.
Stats-First Card Grid
Every card in the modular grid leads with a single large number before any explanatory text follows. Examples like "14 days Shanghai to Los Angeles" or "97.2% on-time delivery" appear as the visual anchor. This format lets buyers scan directly to the data point that matches their current pain.
Head-to-Head Comparison Cards
As visitors scroll deeper, the card grid shifts from internal performance metrics to direct comparisons. Average transit time versus industry average, documentation error rate versus the top five forwarders, and customs clearance speed versus port benchmarks are all presented as self-contained arguments with named trade lanes, dated performance windows, and methodology footnotes.
Dual Conversion Architecture
The primary call to action, "Get Your Lane Quoted," appears inside the header calculator and again in a sticky bottom bar that activates after the visitor has scrolled past 40 percent of the page. The secondary path offers a downloadable rate benchmark report behind a single email field, capturing visitors still in the evaluation stage.
Engineering Blueprint Visual Theme
The page uses a Monochrome Steel color system built on structural charcoal for backgrounds, brushed steel for card borders and secondary surfaces, and technical white for text and data figures. Signal amber is reserved exclusively for interactive elements, calls to action, and live data highlights. The result feels like a ship's technical drawing: precise, purposeful, and undecorated.
Sticky call to action Bottom Bar
After scroll depth passes 40 percent, a persistent bottom bar surfaces the primary call to action. This keeps the conversion path visible without interrupting the data-reading experience that builds confidence earlier in the page.
Page sections overview
Section
Purpose
Header Quote Calculator
Captures intent immediately with port, container, and route inputs
Performance Stats Grid
Leads with outsized numbers to anchor operational credibility
Comparison Benchmark Cards
Shows head-to-head data against industry and competitor averages
Rate Benchmark Download
Secondary email-gated path for visitors still in evaluation mode
Sticky call to action Bar
Keeps primary conversion action visible after 40% scroll depth
Design & branding system
The visual identity follows an Engineering Blueprint theme. Every design decision references the precision and clarity of a ship's technical drawing, not a consumer brand.
Color system: structural charcoal (#1C1F26) for primary backgrounds, brushed steel (#6B7280) for card borders and secondary surfaces, technical white (#EAECEF) for body text and data figures, and signal amber (#D4A017) reserved strictly for interactive elements and calls to action
Typography: monospaced typefaces are used for live data outputs and performance figures, reinforcing the port terminal display aesthetic throughout the page
Mobile & speed optimization
The card grid layout is modular by design, which means it adapts naturally to narrower viewports without losing the visual hierarchy that makes each card readable at a glance.
Cards reflow into single-column stacks on smaller screens, keeping oversized stat numbers prominent and legible
The sticky bottom bar and the header calculator are both designed to remain functional and visible at mobile screen widths
How this template helps you convert
The page is built around the way logistics buyers actually make decisions: they scan for data, they compare, and they act when the evidence is complete.
The freight quote calculator in the header captures intent before the visitor has read a single line of copy, making the page immediately useful and reducing bounce from impatient procurement buyers.
The progression from internal performance stats to head-to-head comparison cards builds a cumulative case, so by the time the sticky call to action bar appears, the visitor has already seen the data that justifies switching forwarders.
Other information about this template
This template is designed specifically for the ocean freight forwarding niche and covers the full scope of containerized cargo services, from vessel space booking and customs clearance to door-to-port and door-to-door delivery across six continents.
The comparison card format supports named trade lanes and dated performance data, giving the page long-term credibility with repeat visitors
The email-gated benchmark report section can support lead nurturing for procurement contacts not yet ready to request a full quote
The template style is Card Grid (Modular), making it straightforward to add, remove, or reorder stat and comparison cards as your performance data changes
This template suits forwarders competing in high-volume trade lanes where buyers routinely evaluate multiple providers before committing to a lane contract
