Skip to content

Homepage · hero section only

Three heroes, one page

The copy, CTA hierarchy and proof trio are identical in all three, so the only thing under comparison is the artwork and the motion that comes with it. Everything below the hero is untouched; the approved homepage is not changed by any of these files.

The options

Current — photograph (approved 25 September 2026)

The supplied 1880 × 836 photograph, banner placement, static. Warmest and most human of the three, and the only one that shows people.

Open questions it carries: the source file name shows it was generated with ChatGPT, and the dashboard inside the image reads 92% + 12% + 3%. Both are recorded against DR-18 and the hero artwork row of the R2 README.

Open the approved homepage

Option A — Drivetrain

The gear cluster from the approved kit: a large silver wheel, an orange pinion and a small idler, joined by hairline shafts with teal drive joints, plus the corner crop. Each gear is geared to the same scroll and idles at a speed inverse to its size, so the mesh stays believable when the page is still.

Added for this option: an engage sequence on load (the gears settle, the shafts draw from the gear they carry, the joints arrive), a hairline ring on each joint so it reads as a joint rather than a dot, and one pass of light round the wheel rim as the mechanism takes load.

Why it might win: it is the brand's own idea — machinery of transformation — rather than a stock scene, it needs no photography licence or approval, and it is the only option that says something about how the firm works.

What it costs: the gear PNGs are 476 and 525px and render up to 672px, so they soften on 2× screens until the client supplies larger marks (DR-02). The cluster is hidden below 1024px, so phones get the copy alone.

Open option A

Option B — Instrument

The code-built interface panel already used for the flagship product, promoted into the hero: a raised white sheet carrying a governance ring, a financial sparkline, a risk heat strip and a portfolio timeline, with one quiet gear behind it as the brand anchor.

Added for this option: the approved reveal choreography (bars grow, the sparkline draws, the ring sweeps), then a live layer — a slow scan pass across the sheet, a drifting "today" marker, and a gentle lift as the hero scrolls, where the browser supports scroll-driven animation.

Why it might win: it shows the product rather than a stock idea of teamwork, it is drawn in CSS so there is no photograph to licence, no AI-generated people, and every label is a category word or deliberately blank — there is no figure in it that can be wrong.

What it costs: it is abstract. A buyer who wants to see faces will not find them here, and the panel must never be presented as a screenshot; the caption stays data-pe-sample.

Open option B

How to review them

Add ?motion=reduced or ?motion=off to any of the three to see the reduced-motion and no-motion states. Both options are written so that reduced motion gets the finished state instantly at the same layout — never a different composition.

Judge them at 1440 first (where the artwork has the most room), then 1024 (where option A drops its cluster and option B stacks) and 390. The proof strip is included on each page so the hero's bottom edge is judged where it actually sits.

Nothing here is wired into the homepage or into Oracle APEX. Choosing one is a separate step: the hero section is swapped in templates/T01-home/index.page.html and, for APEX, in the Home page regions.