Berth - Industrial LNG Landing Page Template

Quick summary

Berth is a single-page landing page template designed for LNG terminal and trading operations. Three animated counters open the page against deep marine slate, then a modular card grid delivers operational metrics, storage specs, and vessel data. The visual identity draws from a coastal industrial palette, and every layout decision moves serious buyers toward one clear action.

Who this template is for

This template is built for organizations operating at the intersection of energy infrastructure and commercial trading. It speaks directly to the professionals who evaluate terminals on data, not imagery.

• National energy utilities negotiating long-term offtake agreements
• Commodity trading desks managing seasonal swing and spot exposure
• Sovereign wealth funds and infrastructure concession evaluators

What problem this template solves

Most energy infrastructure pages bury the numbers behind marketing language. Sophisticated buyers, the kind evaluating regasification capacity or vessel scheduling windows, need scale and proof up front before they engage with commercial terms.

• Generic hero layouts fail to communicate terminal scale and operational credibility
• Burying key metrics below the fold loses high-value prospects before they convert
• No clear separation between prospect types means the wrong call to action reaches the wrong buyer

What you get with this template

You get a fully structured, single-page layout that leads with data and closes with action. Every section is purpose-built for the LNG terminal and trading context described in the brief.

• An animated Data Storytelling header with three live-feel counters and terminal coordinates
• A modular card grid where each card leads with a metric and expands to reveal operational detail
• Two distinct call-to-action paths targeting different buyer stages in the same session

Feature list

This section describes the core functional and visual components delivered with the Berth template.

Animated Data Counter Header

Three oversized animated counters fade up against deep marine slate: total regasification capacity in billion cubic meters per annum (bcma), number of operational carrier berths, and current spot price per MMBtu (metric million British thermal units). Light tabular figures are set at an architectural scale. Beneath the counters, a single line in atmospheric gray displays the terminal coordinates, nothing else.

Stats-First Modular Card Grid

Every card in the grid leads with a number before revealing its context. Metrics include throughput volumes, storage tank count, boil-off recovery rate, vessel turnaround time, and emissions intensity per unit delivered. Each card flips or expands on click to show the operational narrative, infrastructure specs, process diagrams, or contractual flexibility behind the figure.

Persistent Click-Through call to action

A frost-white "Review Capacity & Terms" button anchors to the bottom of the viewport after the third card row. It stays visible as the user scrolls, creating a persistent conversion path to a secure gated portal. No form appears on the page itself.

Secondary In-Card call to action Path

A "Speak With Trading Desk" call to action surfaces inside the vessel scheduling and spot pricing cards specifically. This secondary path targets prospects already in active negotiation, surfacing the right action at the right moment in the scroll.

Nature-Inspired Slate & Sky Visual System

The Slate & Sky color system uses deep marine slate (#2C3E50) for backgrounds, atmospheric gray (#7F8C8D) for body typography, open-sky blue (#5DADE2) for interactive edges and live data pulses, and liquefied frost white (#EBF5FB) reserved for data callouts, card surfaces, and hover states. The palette evokes a satellite photograph of a coastal terminal.

Flip and Expand Card Interactions

Cards are built with a flip-or-expand interaction on click. The front face shows the lead metric. The revealed face carries the operational narrative, which may include infrastructure specs, process diagrams, or notes on contractual flexibility. This rhythm of numeric shock followed by engineering proof repeats across every module.

Page sections overview

Design & branding system

The Berth template uses a Nature-Inspired theme grounded in the Slate & Sky color system. The palette is drawn from the visual language of a coastal LNG terminal at dawn, where industrial geometry softens into ocean light and overcast sky.

• Deep marine slate (#2C3E50) runs all page backgrounds; frost white (#EBF5FB) floats card surfaces above it
• Open-sky blue (#5DADE2) traces every interactive edge, hover state, and live data pulse across the grid
• Typography lives in atmospheric gray (#7F8C8D), keeping body text readable without competing with the lead metrics

Mobile & speed optimization

The modular card grid is structured to reflow cleanly across screen sizes. The persistent call to action bar is designed to remain visible and usable on smaller viewports without obstructing content.

• Card grid columns collapse to a single-column stack on mobile, preserving the metric-first reading order
• The persistent bottom call to action bar adapts its positioning so it does not cover active card content on touch devices

How this template helps you convert

The page is designed specifically for click-through conversion. Every layout decision pushes a qualified prospect toward either the gated commercial terms portal or the trading desk contact path, without asking for anything on the page itself.

1. The animated header front-loads undeniable scale metrics, making the commercial terms feel like the natural next step rather than a sales ask
2. The persistent "Review Capacity & Terms" button stays in view after the third card row, catching decision-ready buyers at the moment the data has made its case
3. The in-card "Speak With Trading Desk" call to action surfaces only inside the vessel scheduling and spot pricing cards, matching the secondary path to the buyer who is already in negotiation

Other information about this template

Berth sits in the Mining & Natural Resources category under the Oil & Gas subcategory, with a niche focus on LNG terminal and trading operations. It is a purpose-built template for a technically sophisticated audience that requires data density and operational proof rather than lifestyle imagery.

• The template style is Card Grid (Modular), meaning sections can be reordered or extended without breaking the visual rhythm
• The header concept is Data Storytelling, a layout approach where the numbers themselves carry the narrative weight
• The creative direction is Stats-First Impact, which means every card module opens with a metric before any explanatory copy appears
• The landing page direction is Click-Through, targeting a single gated conversion action rather than on-page form capture
• The template is category-matched for Oil & Gas infrastructure pages where buyer trust is built through operational transparency

Show more