Sundrop Solar — Corporate Solar Solar Panels Page for Divi 5

The hero opens on a full-bleed photograph of rooftop solar panels, with a 72% dark navy overlay (applied as a gradient at both stops, rgba(20,32,59,0.72)) that pulls the headline forward without burying the image behind it. A left-aligned breadcrumb sits above the H1 in small-caps Poppins, then the title steps from 56px on desktop to 32px on phone across three explicit Divi breakpoints. The lead text is constrained to a 600px maximum width to keep the line length comfortable on wide monitors. Vertical padding follows the same three-step scaling: 120px on desktop, 88px on tablet, 64px on phone, so the proportions hold at every size without manual overrides.

The process section arranges four steps (Capture, Convert, Use, Sell) inside a CSS grid: four columns on desktop, two on tablet, one on phone. Each column is anchored by a 48px burnt-orange circle (color #c2410c) holding the step number, followed by a horizontal rule in warm cream (#ecdcc0) that visually connects the steps across the row on desktop. That rule is explicitly disabled on phone via Divi's built-in breakpoint setting, so the steps read as a clean vertical list rather than a broken inline layout. A centered button below the grid carries the visitor toward an estimate. The following section brings the buy-vs-lease decision into focus with two side-by-side cards: the lease card sits on warm parchment (#fdf0d8) and lists drawbacks using grey X icons; the buy card inverts to deep navy (#1b2a4a) with ivory check icons, making the recommended path unmistakably clear. Both cards share the same 8px border-radius, 1px border, and hard 4px vertical box shadow that recurs on every button throughout the layout.

Three case-study rows alternate image and text in a 50/50 split, each photo locked to a 4:3 aspect ratio with object-fit cover so any replacement fills the frame without distortion. The second row reverses its image position on mobile using Divi's column order property, breaking the visual repetition without any extra CSS. Each story follows a tight template: a numbered label (01, 02, 03), an H3 project title, two to three sentences of outcome-focused detail, and a short underlined link.

The FAQ occupies a warm amber section (#fdf0d8) that distinguishes it from the surrounding ivory panels. Six questions spread across two equal columns, each entry introduced by a 2px navy top border rather than a full horizontal rule. The heading block occupies a wider left column and pairs with an outline-style ghost button on the right. The page closes with a solid burnt-orange CTA band that places the headline and primary button side by side on desktop, stacking gracefully to a single column on phone. The four-colour palette (ivory, amber, navy, orange) stays consistent across all six sections, producing a warm, considered feel well matched to a high-value rooftop purchase.