Update integrations

[vishesh92]

This PR adds new entries in Integrations page and also some new features around it. When you click on the image for an integration, it will now open a modal with a description.

Also refactored the code to generate the integration entries using a JSON object.

[Copilot]

Pull Request Overview

This PR refactors the Integrations page to drive content from a JSON configuration and introduces a modal dialog for detailed integration descriptions.

• Introduces SimpleMarkdown for basic markdown rendering and modal functionality for integration items.
• Replaces hardcoded tab content with dynamic rendering using integrationConfig.
• Adds dynamic style injection for hover effects and updates CSS for responsive images.

Reviewed Changes

Copilot reviewed 2 out of 7 changed files in this pull request and generated 3 comments.

File	Description
src/pages/integrations.js	Added JSON-driven integration rendering, modal logic, markdown parser, and inline style injection
src/css/custom.css	Extended styles for .tab-box img and added .box-linbit color

Comments suppressed due to low confidence (2)

src/pages/integrations.js:1

• Missing import of React; add import React from 'react'; at the top to ensure React.useState and React.useEffect work correctly.

import React from 'react';

src/pages/integrations.js:542

• [nitpick] The key 'stack console' contains a space and is inconsistent with other identifiers; consider using a hyphenated or camelCase key for reliability.

        },

[Copilot]

[nitpick] Injecting large CSS blocks via JavaScript can complicate maintenance and cause flash-of-unstyled-content; consider moving these styles into your external CSS file.

[Copilot]

The product name 'Vmware NSX' has incorrect casing; it should be 'VMware NSX' to match official branding.

Suggested change

	title: "Vmware NSX",
	title: "VMware NSX",

[Copilot]

The modal overlay lacks ARIA roles (e.g., role="dialog", aria-modal="true") and focus management; consider using an accessible modal component or enhancing keyboard and screen-reader support.

Suggested change

	<div className="modal-overlay" onClick={closeModal} style={{
	position: 'fixed',
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	backgroundColor: 'rgba(0, 0, 0, 0.5)',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	zIndex: 1000
	}}>
	<div className="modal-content" onClick={(e) => e.stopPropagation()} style={{
	backgroundColor: 'white',
	padding: '2rem',
	borderRadius: '8px',
	maxWidth: '600px',
	width: '90%',
	maxHeight: '80vh',
	overflowY: 'auto',
	boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
	}}>
	<div
	className="modal-overlay"
	onClick={closeModal}
	style={{
	position: 'fixed',
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	backgroundColor: 'rgba(0, 0, 0, 0.5)',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	zIndex: 1000
	}}
	>
	<div
	className="modal-content"
	role="dialog"
	aria-modal="true"
	aria-labelledby="modal-title"
	tabIndex="-1"
	ref={modalRef}
	onClick={(e) => e.stopPropagation()}
	style={{
	backgroundColor: 'white',
	padding: '2rem',
	borderRadius: '8px',
	maxWidth: '600px',
	width: '90%',
	maxHeight: '80vh',
	overflowY: 'auto',
	boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
	}}
	>