[Screenshots] Devstream under 'How it Works See It in Action' section

Current Behavior

Currently, every integration has only two old screenshots of the designer and visualizer in the 'How it Works See It in Action' section.

Desired Behavior

• Add new images and videos from the latest version of the software (MeshMap)
• Add screenshots for Devstream integration.

Acceptance Tests

• Ensure your screenshot represents the use of a few specific integrations.
• The screenshot from the Designer mode should contain a valid design, refer to meshery catalog to use and view published designs.
• Add both Dark Mode and Light Mode screenshots.
• The screenshot should not be a snippet, take the full screenshot of your browser.
• Use Incognito mode on Chrome browser, to ensure your bookmark bar or any other items are not shown in the screenshot/video.

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

Start with the Devstream integration page and the current screenshots in its “How it Works See It in Action” section. Review the latest MeshMap and Devstream experiences, then prepare full-browser screenshots or videos showing a valid design and selected integrations in both dark and light modes. Done means the updated media is added to that section and meets the listed screenshot requirements.