Preview image. Unlock full-res
Light three-column how-it-works row where each step is a white card topped by a vivid pink-to-orange gradient illustration.
Summary
A three-card process row on a light grey field, each card pairing a bright magenta-orange gradient thumbnail with a numbered step label and one line of copy.
Visual description
A left-aligned dark heading "Get started with Typebot" sits above three equal white cards on a light grey background. Each card has a rounded gradient image at the top blending hot pink, magenta and orange, with a small product detail inside: an orange "Sign up" button with a cursor in step one, a dark editor canvas fragment in step two, and an orange "Publish" button with a cursor and glow in step three. Below each image is a bold "STEP 1/2/3" label and two lines of dark body copy describing account setup, picking a template, and publishing.
Key takeaway
The repeated bright gradient thumbnails give an otherwise plain step row energy and a clear visual rhythm. Dropping a tiny piece of the actual product UI (a button, the editor) into each gradient tile previews the tool without full screenshots.
Reuse notes
Strong for onboarding or "how it works" sections where three crisp steps tell the whole story. The vivid gradients carry the section, so the thumbnails need to stay consistent in tone. Pairs well above a sign-up CTA.
