Docs: Add screenshots of each component in docs

[jmejiamu]

Title: Add screenshots of each component in docs

Summary:
This pull request adds images for each component in the documentation to make the sample code more understandable.

Details:
Adding images for each component improve the clarity and comprehensibility of the documentation.

Implementation:

• Added images illustrating each component to the relevant sections of the documentation.
• Updated the markdown files to include the added images next to the corresponding sample code.
• Ensure the images looks great in dark or light background.
• Added images in the static dir.