Revamp the `Architecture` page

As agreed in [the site structure document](https://docs.google.com/document/d/10Fu7oqDzdM_D6LbexzwX9arh51Tic7AGvkWTQrL6jjQ/edit), revamp the `Development` page such that

- Improve content, formatting, and sectioning
- Replace images with the ones generated using [Antora extensions](https://docs.asciidoctor.org/asciidoctor.js/latest/extend/extensions/ecosystem) (This will enable developers to update images by changing a couple of lines of code instead of needing to open images in an editor, keeping separate JPG and XCF files, etc.)
- Target `2.x`, port to `main`

Start with the linked site structure document, then locate the Development page and review its current content and images. Use the referenced Antora extensions guidance to determine how the images should be generated, and target the 2.x content on main. Done means the page has improved content, formatting, sectioning, and generated replacements for its images.

Written by the indexing model from the issue text.