Berth - Precision Oceanfreight Landing Page Template

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
• 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

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.

1. 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.
2. 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

Show more