Copperline Plumbing & Heating — Corporate Plumbing Home Page for Divi 5

The layout opens with a 50/50 split hero on a white section that scales from 96px vertical padding on desktop to 44px on phone. The left column carries the full conversion stack: a 14px trust badge in IBM Plex Sans at 1px letter-spacing establishes credentials before the visitor reaches the headline, then a 56px H1 with a 1.08em line-height and textWrap: balance prevents orphaned words at any breakpoint (42px on tablet, 34px on phone). An 18px body paragraph at 1.6em closes the argument in one sentence, and a flex row groups a filled navy CTA (#1c4a94, "Book a plumber") alongside a ghost call button so phone and digital booking share equal visual weight without stacking. The right column places a bordered info card (#f2f5fa background, 1px #d3dbe8 border, 6px radius, 32px padding) with four divider-separated rows covering emergencies, arrival time, pricing model, and guarantee, giving a scanning visitor all the decision-critical facts before reading a word of paragraph copy.

Directly below, a slim social proof bar (32px vertical padding, bottom-border-only) runs full width in #f2f5fa. The left side stacks five Font Awesome solid star icons, a 22px bold rating figure, and a plain-text source line. The right side places three icon-plus-label trust badges that are right-aligned on desktop and shift to left-aligned on phone. It reads as a data row rather than a marketing claim. The services section that follows uses a single centred column (max-width 880px) anchored by a 2px navy rule before five icon-headed service rows, each holding a 24px Font Awesome icon, a 20px H3 at 1.25em line-height, and a 16px/1.6em supporting sentence, all separated by 1px light dividers.

The second half shifts from building trust to converting it. A two-column section pairs a four-item accordion (bottom-border-only dividers, no radius, white background, first item open by default) against a 4:5-aspect-ratio portrait image of copper pipe work set to cover. A CSS grid stats block renders four editorial figures at 64px weight-300 with -2px letter-spacing, switching from a 4-column grid on desktop to 2 columns on tablet and phone, with the 1px gaps drawn against a #d3dbe8 wrapper rather than as borders on each cell so the lines stay crisp at every scale. Three testimonial cards built from native divi/group modules (not a carousel) hold 19px quotes, 56px square avatar images, and name-plus-job attribution arranged as one card in the first row and two side by side in the second.

The page closes with a full-bleed background image section (120px padding, scaling to 56px on phone) that contains a max-520px left-aligned card in #f2f5fa with a divider and the same primary blue booking button from the hero. The background image is set to cover at center-center, framing the card without competing with it. IBM Plex Sans is used at every size throughout, a single-typeface consistency that reads as considered rather than sparse.