Image Overlay About Block for React

The drawing is EditorShot in the file, one box with a fixed height. Replace it with an img (or Next.js Image) with a width, height and alt that describe the screenshot, remove aria-hidden and inert from the wrapper, and keep the caption as the figure's figcaption. The caption panel floats over whatever is in the box.

It is the figcaption of the figure, the last child, so assistive technology reads it as the shot's caption. The drawing itself is hidden and inert: it holds no tab stops and no text a reader would hear twice. The heading above the figure is the section's only h2.

A year goes stale, and "Founded in" says little. The strip counts from the first customer instead, and each number is a description list entry with its label under it. The figures are example data; replace FIGURES with your own.

The drawing is shorter and simpler on a phone: the tool rail and the filmstrip are hidden below sm, and the adjustments panel below md. The caption is a card under the shot rather than over it, so nothing covers the picture, and the figures stack one per row. In a right-to-left layout the drawing mirrors and the link's arrow turns around.

The heading and the shot fade up once on load, with CSS transitions, and with reduced motion they appear at once. Nothing else moves; there is no state or script.