Bearing is a modular card grid landing page built for marine navigation equipment service providers. It presents a gyrocompass workshop's full service lifecycle, from OEM spare parts supply to calibration records and compliance documentation, in a structured, no-frills layout. The Monochrome Steel palette and exploded-view header make technical credibility visible at a glance.
by Rocket studio
Loading preview…
Quick summary
Bearing is a single-page, card grid template designed for navigation equipment workshops serving commercial shipping. It moves visitors through procurement, service, and compliance in a logical row-by-row sequence. The layout is purely functional, the palette is steel and graphite, and every conversion path points toward technical documentation rather than soft marketing.
Who this template is for
This template is built for marine navigation equipment businesses that serve working vessels on tight schedules. It speaks the language of fleet operations, not consumer marketing.
Fleet superintendents managing spare parts sourcing for aging bulk carriers
Ship captains and port state control (PSC) inspection teams needing certified service records
Procurement officers at offshore supply companies sourcing navigation spares under time pressure
What problem this template solves
Most service providers in this niche use generic web pages that fail to communicate technical depth. Fleet operators need to verify certification standards and turnaround times before they pick up the phone. A poorly structured page loses that trust in seconds.
Visitors cannot find IMO resolution references or maker-model compatibility data quickly enough
Service credentials and calibration records are buried or absent, undermining confidence before contact
No clear conversion path exists between arriving on the page and downloading a service catalog or spare parts list
What you get with this template
You get a fully structured single-page layout organized around the real workflow of a navigation equipment service business. Every section serves a specific operational purpose, and every card earns its place.
A three-row card grid covering procurement, service interventions, and compliance documentation
A gated email capture form for the service catalog, with progressive optional fields for vessel name and fleet size
Ungated secondary calls to action on individual cards, including spare parts lists, survey quote requests, and calibration templates
Theme
Service Utility
Creative direction
Timeline Progression
Color system
Monochrome Steel
Style
Card Grid (Modular)
Direction
Content/Resource
Page Sections
Exploded View Gyrocompass Header
Three-row Timeline Card Grid
Progressive Email Capture Form
Ungated Card-level PDF Links
Compliance Documentation Cards
Monochrome Steel Color System
Related questions
Who is this landing page template designed for?
Can I use this template without a design background?
What are the secondary calls to action on each card?
Does the template include the actual PDF documents?
How does the email capture form work?
Feature list
This section details the built-in layout components and design decisions that make Bearing functional for its specific audience.
Exploded View Hero Header
The header features a technical illustration of a marine gyrocompass disassembled into its core components: rotor assembly, spider element, follow-up system, binnacle housing, and sensitive element. Each part floats in precise spatial relationship, labeled with thin signal amber leader lines. The composition is flat monochrome with subtle dimensional shading, rendered like a service manual diagram.
Timeline Progression Card Grid
Scrolling moves the visitor through three distinct rows that mirror an instrument's service lifecycle. Row one covers procurement and supply. Row two presents service intervention cards, each stamped with average turnaround time and certification standard. Row three surfaces compliance and documentation cards. The sequence creates a narrative without a single line of prose.
Gated Service Catalog Download
The primary call to action is a single-field email capture that expands progressively to reveal optional vessel name and fleet size fields. The gate sits at the end of a page that has already proven technical depth, so the exchange feels earned rather than forced.
Ungated Card-Level calls to action
Each service card carries its own secondary conversion path. Visitors can access spare parts lists, request a survey quote, or download a calibration template as ungated PDFs. These touchpoints build trust before the main email gate.
Monochrome Steel Visual System
The color palette uses mill-finish aluminum, machined graphite, and deep bulkhead gray as base tones. Signal amber is applied exclusively to actionable elements and status indicators. The result reads cleanly under any viewing condition without decorative distraction.
Compliance and Documentation Cards
The third card row provides downloadable type-approval certificates, calibration records, and references to IMO performance standards. These cards serve visitors who arrive with a specific document or regulation number in mind, delivering the answer before asking for anything in return.
Page sections overview
Section
Purpose
Hero Header
Exploded gyrocompass illustration with component labels
Procurement Supply Row
Equipment catalog cards and OEM parts availability
Service Intervention Row
Repair and calibration cards with turnaround times
Compliance Documentation Row
Downloadable certificates and IMO standard references
Catalog Download Gate
Email capture form with progressive optional fields
Design & branding system
The visual identity follows a Service Utility theme built on a Monochrome Steel color system. Every tone is chosen for legibility and authority, not aesthetic warmth.
Base palette: mill-finish aluminum (#D2D5DA), machined graphite (#3B3F45), and deep bulkhead gray (#1C1F24) form all structural surfaces
Accent rule: signal amber (#E8A317) appears only on buttons, status indicators, and leader lines, never as decoration
Illustration style: flat monochrome with subtle dimensional shading, referencing engineering blueprints and service manual diagrams
Mobile & speed optimization
The card grid layout is modular by design, which makes it straightforward to reflow for smaller viewports. Rows stack vertically on mobile without losing the timeline logic.
Card components are self-contained units that resize independently without breaking the row sequence
The progressive disclosure form keeps the mobile interaction minimal until the user opts into additional fields
No lifestyle photography or heavy image assets are included; the hero illustration uses flat vector-style rendering suited to fast loading
How this template helps you convert
Bearing earns conversions by delivering technical proof before requesting anything from the visitor. The page is structured so that trust accumulates naturally as the visitor scrolls.
Ungated card-level PDFs give fleet operators immediate value, spare parts lists and calibration templates are accessible without friction, establishing credibility early in the session.
The gated service catalog download sits after three full rows of technical content, so by the time visitors reach the email form, they have already confirmed the provider's depth and are motivated to exchange contact details for the full library.
Other information about this template
Bearing is purpose-built for the marine navigation equipment service sector and reflects the operational realities of gyrocompass workshops, radar repair facilities, and ECDIS installation teams. It is not a general maritime template adapted for this niche, the brief, the layout logic, and the conversion architecture are all designed around how fleet operators actually evaluate service providers.
The template name "Bearing" references both a compass bearing and a physical bearing component, reinforcing the workshop identity at every level
Template style is Card Grid (Modular), meaning individual cards can be updated or reordered without redesigning the full page
The content direction is a Resource hub, making the page useful as a reference destination that operators return to, not just a one-time visit
The header concept (Exploded View) and timeline creative direction are both defined in the intersection match for Marine Equipment and Supply, making this template highly aligned with its niche
