BlocksFeaturesFeature 03

Feature 03

About this block

Feature 03 is a two-column image grid that pairs product screenshots with short feature titles and descriptions. Each row places a screenshot on one side and descriptive text on the other, alternating alignment for visual rhythm. Built with Next.js Image and shadcn/ui layout utilities, it lazy-loads each screenshot and respects both light and dark mode. The component accepts an array of feature objects with image, title, and description fields.

When to use it

  • Products with distinct UI screens or dashboards where showing the interface is more persuasive than describing it
  • Feature sections that come after a brief overview and need to go deeper on individual capabilities
  • SaaS landing pages where competitors rely on bullet lists and you want a more visual alternative
  • Any page where a sequence of feature explanations benefits from alternating image-text layout

Notes

Use real product screenshots at 1200×800px or similar for crisp rendering. Avoid using placeholder images in production — the visual quality of the screenshots determines the quality of this section.