Preview image. Unlock full-res
Three-step process section as a colorful bento, purple and yellow steps on top and a wide green step below, each with a numbered badge and UI mockup.
Summary
A three-step "how it works" section built as a color-blocked bento: two square steps (purple, yellow) on the top row and one wide green step spanning the bottom, each tagged with a numbered "Step" badge and a small product mockup. The saturated color blocking is the signature.
Visual description
A centered headline "Get your customised link in just 3 easy steps" carries a small green "Get Started" sticker over one word. Below sits a bento of three solid-color rounded cards. Step 1 (purple): "Sign up & manage your profile information" with a white profile-link mockup card showing a handle, a qlnk.app URL, avatars, and Share/Views counts. Step 2 (yellow): "Manage links & customise your profile as per your style" with an "Update Your Branding" mockup listing Custom Theme, Font Styling, and Button Style controls plus avatar thumbnails. Step 3 (green, full-width bottom): "Share, monitor & plan" with a dark "Get Start for free" button and a cluster of mockup cards (a photo card, a dark branding card, a notification card). Each card has a small white "Step N" pill in its corner.
Key takeaway
Color-blocking each step in its own saturated card so the sequence reads at a glance without arrows or connectors. The asymmetric bento (two squares plus one wide tile) gives the final step extra weight and room for its CTA. Numbered "Step" pills keep the order explicit while the colors carry the energy.
Reuse notes
Ideal for a playful consumer or creator product explaining onboarding in three to four moves. The bright blocks need legible (usually dark) text and benefit from a real mini-mockup per step. The format reads as friendly and informal, so it is a poor fit for enterprise or finance tone; reserve the wide bottom tile for the step that carries the CTA.
