Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that serves as an interactive digital immune system, designed to visualize and manage an autonomous chaos engineering and self-healing platform. The application will allow users to interact with a dynamic interface that represents neural synapses and nodes, focusing on the technical architecture and execution flow of the system.

## CORE FEATURES
1. **Interactive Neural Synapse Visualization**: Users can click on nodes representing different components of the system, providing a visual representation of the architecture and flow.
2. **Real-time Monitoring Dashboard**: Displays metrics related to system performance, attack detection, and recovery times, with visual graphs and statistics.
3. **Dynamic Flow Diagrams**: Showcases the autonomous control loop of the system, illustrating the inject-observe-detect-classify-recover process.
4. **Detailed Technical Breakdown**: Users can access comprehensive descriptions of each component, including ML models, observability tools, and recovery mechanisms.
5. **User Engagement Features**: Allow users to simulate attacks and observe system responses, enhancing understanding of chaos engineering principles.
6. **Documentation and Resources Section**: Provides access to technical documents, FAQs, and tutorials on chaos engineering and self-healing platforms.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a top navigation bar, an interactive central area for the neural synapse visualization, and a sidebar for additional information and metrics. The footer will contain links to documentation and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (depending on complexity requirements)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript and install dependencies like Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create the main layout structure with components for the navigation bar, interactive area, sidebar, and footer.
3. **Implement Neural Synapse Visualization**: Develop the interactive visualization component that allows clicking on nodes to show details about each system component.
4. **Build Dashboard**: Create the monitoring dashboard component to display real-time metrics and graphs.
5. **Integrate State Management**: Set up Redux or Context API for managing application state, particularly for the dashboard metrics and user interactions.
6. **Add Documentation Section**: Include a static or dynamic section for technical documents, FAQs, and tutorials, linking to relevant resources.
7. **Testing and Optimization**: Conduct user testing to gather feedback and optimize performance, ensuring a smooth user experience across devices.

## USER EXPERIENCE
Users will be greeted with a clean and intuitive interface upon entering the application. They can interact with the neural synapse visualization to explore different components of the autonomous chaos engineering system. The real-time monitoring dashboard will provide insights into system performance, while detailed breakdowns will enhance understanding of technical elements. Users can simulate attacks and see how the system responds, fostering an interactive learning environment. The application will be fully responsive, ensuring seamless usability on both desktop and mobile devices.