BlocksFeaturesFeature 06

Feature 06

About this block

Feature 06 is a numbered step-by-step process section that explains how a product works in four sequential stages. Each step displays a number badge, a step title, and a short description. An optional product screenshot sits alongside the steps to reinforce the explanation visually. Built with shadcn/ui and Tailwind CSS, it uses a responsive two-column grid that collapses gracefully on mobile.

When to use it

  • Products with a clear onboarding flow or setup process that benefits from a numbered walkthrough
  • Landing pages that need to answer 'how does it work?' after the hero section
  • SaaS tools with a distinct install-configure-use workflow that reduces perceived complexity
  • Any page where breaking the product down into steps makes it feel more approachable to new visitors

Notes

Keep each step description to one sentence. The numbered badge draws the eye — let the number do the structural work and keep the copy tight.