Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based dashboard for managing AI infrastructure within a gigafactory. It allows users to deploy and monitor machine learning models, manage resources, and handle billing in a clean and minimalist interface focused on efficiency and clarity.

## CORE FEATURES
1. **Dashboard**: A central hub displaying key metrics, system health, and quick access to core functionalities.
2. **Infrastructure Deployment**: Users can deploy AI instances and manage resource allocation, including GPU, RAM, and storage.
3. **Machine Learning Management**: Interface for uploading, training, and fine-tuning large language models (LLMs).
4. **Billing**: Overview of usage, costs, and payment options for deployed resources.
5. **Deployment Cycle Popup**: Upon clicking "Deploy Instance," a modal showcases the deployment process with steps and a progress bar.
6. **Custom Configuration**: An interactive screen that prompts users to configure their instances with specific hardware options.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist; the design emphasizes simplicity, utilizing ample white space to create a clean look that directs focus to the content.
- **Color Mode**: Light theme featuring dark text on light backgrounds, ensuring maximum readability and a refreshing aesthetic.
- **Layout**: 
  - A top navigation bar containing the main navigation links.
  - A side panel for detailed features like Infrastructure, ML Management, and Billing.
  - Main content area divided into sections for each feature, using cards and lists to present information clearly.
- **Typography**: 
  - Primary font: `Inter` for its readability and modern appearance.
  - Headings: Bold with larger sizes for clear hierarchy.
  - Body text: Regular weight to maintain simplicity and focus on content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for responsive, utility-first styling that allows rapid development and customization.
- **UI Components**: Utilize `shadcn/ui` for pre-built components that maintain design consistency and enhance functionality.
- **State Management**: Use React's Context API or Zustand for managing application state across different components.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any other necessary libraries.
3. **Create Core Components**: Develop reusable components for the dashboard, infrastructure, and billing sections.
4. **Design Layout Structure**: Implement the layout using Tailwind CSS, ensuring responsiveness for mobile viewing.
5. **Implement Features**:
   - **Dashboard**: Use charts and cards to display metrics.
   - **Infrastructure**: Create forms for GPU, RAM, and storage selection. Implement the "Deploy Instance" button with associated popup.
   - **ML Management**: Build interfaces for uploading and managing models.
   - **Billing**: Design a clear overview of costs and usage.
6. **Testing**: Ensure each feature works seamlessly across devices and browsers.
7. **Deployment**: Prepare the application for deployment on a web server.

## USER EXPERIENCE
Users will navigate through a clean interface where actions such as deploying an instance or configuring resources are straightforward. Upon initiating the deployment, a modal will appear, detailing each step with a progress bar, enhancing transparency. The responsive design ensures that users can access the dashboard effectively on mobile devices, maintaining functionality and ease of use. The minimalist aesthetic promotes a focus on productivity, allowing users to manage AI resources efficiently.