M4

import React from 'react'; import ArchitectureDiagram from './ArchitectureDiagram'; const Explanation = () => { return ( <section className="explanation-section"> <div className="container"> <div className="section-header fade-in"> <h2>Powerful features in action</h2> <p>See how m4 simplifies complex database interactions with intuitive interfaces</p> </div> {/* Dashboard Overview */} <div className="explanation-grid fade-in"> <div className="explanation-text"> <h3>Real-time MIMIC Database Dashboard</h3> <p>Monitor your database connections and query performance in real-time. The dashboard provides instant insights into MIMIC-IV records, active researcher connections, and system performance metrics.</p> <ul className="explanation-features"> <li>Live connection monitoring</li> <li>Query performance analytics</li> <li>Database health indicators</li> <li>User activity tracking</li> </ul> </div> <div className="screenshot-container"> <img src="/m4/banner2.png" alt="Dashboard Overview" /> </div> </div> {/* Data Visualization */} <div className="explanation-grid fade-in"> <div className="explanation-text"> <h3>Advanced Data Visualization</h3> <p>Transform complex medical data into clear, actionable insights with built-in visualization tools. Generate publication-ready charts and graphs directly from your queries.</p> <ul className="explanation-features"> <li>Interactive charts and graphs</li> <li>Statistical analysis tools</li> <li>Export to multiple formats</li> <li>Publication-ready visualizations</li> </ul> </div> <div className="screenshot-container"> <img src="/m4/banner3.png" alt="Advanced Data Visualization" /> </div> </div> </div> {/* Architecture Diagram */} <ArchitectureDiagram /> </section> ); }; export default Explanation;