Revamp VSCode extension docs

[Dilhasha]

Description

With the deprecation of the architecture view, its usage in the documentation must be updated to use the Ballerina Visualizer instead.

• Landing page(https://ballerina.io) - balllerina in action
• VSCode extension (https://ballerina.io/learn/vs-code-extension)
• Architecture View (https://ballerina.io/learn/vs-code-extension/design-the-application/explore-the-architecture-view)
• Design the architecture view (https://ballerina.io/learn/vs-code-extension/design-the-application/design-using-the-architecture-view)
• Introduce a new section for the Visualizer in the learn page (landing page)
  - [ ] Add page: Visualize the application - Update the GIFs and the content
  - [ ] Add page: Design the application - Update the GIFs and the content
  - [ ] Add page: Data mapper - Update the GIFs and the content
• Update the GIFs and content in the HTTP and GraphQL API Designer pages
• Update the GIFs in the integration tutorials

Version

No response

[Dilhasha]

Landing page and VSCode extension page were updated with the following PRs.

#9773
#9784

[azinneera]

• Introduce a new section for the Visualizer in the learn page (landing page)
  • Add page: Visualize the application - Update the GIFs and the content
  • Add page: Design the application - Update the GIFs and the content
  • Add page: Data mapper - Update the GIFs and the content[ ] Update the GIFs and content in the HTTP and GraphQL API Designer pages[ ] Update the GIFs in the integration tutorials

The above tasks are blocked on the bugs found in the Visualizer: https://github.com/wso2/ballerina-vscode/issues?q=is%3Aissue%20state%3Aopen%20author%3Aazinneera%20label%3APriority%2FHighest