Home
Templates
Marine & Maritime
Shipbuilding & Repair
Drydock - Proven Marina Landing Page Template
Drydock is a single-column flow landing page built for full-service marinas and boat repair yards. It uses a dark, instrument-panel color system, an infographic boat cross-section header with animated stats, and a case study narrative structure that walks visitors through real repair jobs before presenting a lead-generation form.
by Rocket studio
Drydock is a lead-generation landing page for a full-service marina and repair yard. It opens with an animated boat cross-section infographic, then guides visitors through escalating case study stories before asking them to request an estimate or schedule a haul-out. Every design decision earns trust through evidence before making an ask.
This template is built for marine businesses that need to convert hesitant boat owners into booked repair clients. It speaks directly to the yard's real customers and matches the tone of a working waterfront operation.
Boat owners delay expensive repairs because they do not trust that a yard will finish on time or within budget. A standard service page with a phone number and a short list of services does not address that hesitation. Drydock is structured to close that trust gap before the form ever appears.
You get a fully structured single-column landing page with every section pre-built and logically sequenced. The layout moves from credibility to conversion in a deliberate order, and the visual system is consistent from header to footer.




Theme
Dashboard Pro
Creative direction
Case Study Narrative
Color system
Carbon Fiber
Style
Single Column Flow
Direction
Lead Generation
Page Sections
Animated Infographic Boat Header
Three-act Case Study Sections
Single-stat Interstitial Panels
Dual Conversion Path Form
Sticky Bottom Call to Action Bar
Carbon Fiber Dark Interface System
Can I edit the repair stats shown in the infographic header?
Does the lead form support photo uploads out of the box?
Can I add more case study sections or remove one?
Is the sticky call-to-action bar always visible?
Do I need to use all four colors in the palette?
This section details the core built-in features that make Drydock a focused lead-generation tool for the marine repair market.
The header renders a single boat silhouette in cross-section. Animated data callouts branch from hull, engine, electrical, and rigging zones, each displaying a live-style stat: 847 hulls repaired, an average 11-day turnaround, a 32-point inspection standard, and a 98 percent on-time relaunch rate. Numbers tick upward on page load like a diagnostic readout, replacing conventional hero photography with data-driven visual impact.
Three scroll sections each profile a single repair job as a three-act story. Each case opens with a damage photo and a diagnostic summary card showing scope and severity. A timeline strip tracks milestones from haul-out to sea trial. The finished vessel appears alongside metric cards displaying final cost and turnaround time. The three cases escalate in complexity: gel coat repair, engine rebuild, and complete refit.
Between each case study, a full-width interstitial panel displays one bold performance number. These brief breaks reinforce credibility without breaking the narrative flow. They give skimmers a fast read on yard performance even if they do not read the full case stories.
The page offers two distinct conversion routes. The primary path is a "Get a Repair Estimate" form that collects boat length and type, primary issue via checkboxes, current location status, and a photo upload. The secondary path is a "Schedule a Haul-Out" option for visitors who already know what they need. Both paths are present in the full-width form section at the page base.
After the visitor passes the second scroll section, a sticky bar locks to the bottom of the viewport. It keeps the primary call to action visible without interrupting the case study reading experience. The bar uses signal-flare orange to stay prominent against the dark background.
The entire template uses a four-color palette: deep hull black for primary backgrounds, anti-fouling charcoal for card and panel surfaces, zinc anode silver for body text and secondary labels, and signal-flare orange reserved for calls to action, status indicators, and key metric highlights. The result is a visual system that reads like a center console instrument panel at night.
| Section | Purpose |
|---|---|
| Infographic Header | Display animated boat cross-section with live-style repair stats |
| Case Study One | Profile a gel coat repair job as a three-act narrative |
| Stat Interstitial One | Reinforce credibility with a single bold performance number |
| Case Study Two | Profile a full engine rebuild with timeline and metric cards |
| Stat Interstitial Two | Break narrative with one key yard performance figure |
| Case Study Three | Profile a complete refit as the highest-complexity proof point |
| Stat Interstitial Three | Close the evidence section with a final performance stat |
| Sticky call to action Bar | Keep primary call to action visible after second scroll section |
| Full-Width Lead Form | Capture repair estimate requests and haul-out scheduling |
The visual identity follows a Dashboard Pro theme applied through the Carbon Fiber color system. Every color serves a specific communication role, and no decorative fills dilute the signal clarity.
The single-column flow layout is inherently well-suited for smaller screens because there are no multi-column grids to restack. Every section follows a vertical reading order that translates naturally to mobile viewports.
The page is structured so that every section before the form builds the case for contacting the yard. Conversion is earned, not assumed.
Drydock is built on the Dashboard Pro theme, which provides the underlying component structure for the dark interface, metric cards, timeline strips, and diagnostic-style callout elements used throughout the page.