Preview image. Unlock full-res
Dark feature section with vertical tab navigation on the left and a teal-backed salary insights tool mockup on the right.
Summary
A dark total-rewards explainer pairing a vertical tab list with a live product mockup of the Salary Insights calculator on a teal panel.
Visual description
Charcoal background with centered white headline "Your total rewards strategy starts here"; the word "rewards" is circled in a hand-drawn light-green line. Subcopy below promises insights, experts, and software in one place. A hand-drawn green arrow curves from the top-right toward the headline. Left column acts as vertical tabs: "Salary insights" is active inside a lighter gray box with lightbulb icon, descriptive copy, and a white "Learn More" link with arrow. Below, separated by thin rules, sit inactive rows for "Benefits packages" (heart icon) and "Equity compensation" (coin icon). Right column shows a rounded teal backdrop holding a white "Salary Insights Tool" card with dropdowns for Senior Developer in Spain, a teal Calculate button, and a three-column output of Low, Benchmark, and High salary figures in EUR. Hand-drawn green globe wireframe and faint white scribbles decorate the teal panel.
Key takeaway
Vertical tabs with inline descriptions sell each module before click, while the opposite mockup proves the active tab immediately. Teal product card on dark charcoal creates a clear focal hierarchy without extra chrome.
Reuse notes
Ideal for multi-module platforms where one hero feature needs a UI proof (calculators, dashboards, configurators). Requires a real screenshot or faithful mockup for the right panel. Hand-drawn accents tie back to Oyster's playful brand; skip them on strictly corporate pages.
