Berth is a stats-first landing page template built for liquefied natural gas terminal and trading operations. It opens with three animated data counters, then unfolds a modular card grid where every metric leads before its story follows. The design runs on a Slate & Sky palette, and the page drives qualified prospects toward gated commercial terms with two focused call-to-action paths.
by Rocket studio
Loading preview…
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.
Theme
Nature-Inspired
Creative direction
Stats-First Impact
Color system
Slate & Sky
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Animated Data Counter Header
Stats-first Modular Card Grid
Persistent Click-through Call to Action Bar
Secondary In-card Trading Desk Call to Action
Nature-inspired Slate & Sky Color System
Flip and Expand Card Interactions
Related questions
Does this template include a contact form?
Can I update the counter values and card metrics with my own data?
What is the purpose of having two separate call-to-action paths?
Is the modular card grid flexible enough for more or fewer metric cards?
Who is this landing page template designed for?
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
Section
Purpose
Animated Counter Header
Opens with three live-feel data metrics and terminal coordinates
Card Grid Row 1
Delivers first set of operational metrics with flip interactions
Card Grid Row 2
Continues metric storytelling with storage and recovery data
Card Grid Row 3
Completes the grid with vessel and emissions figures
Persistent call to action Bar
Anchors "Review Capacity & Terms" after the third card row
Vessel Scheduling Card
Surfaces secondary trading desk call to action for active negotiators
Spot Pricing Card
Displays live-feel spot price data with in-card secondary call to action
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.
The animated header front-loads undeniable scale metrics, making the commercial terms feel like the natural next step rather than a sales ask
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
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
