Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as an integrator between a website and Proxmox, providing users with a streamlined interface to manage their Proxmox environments. The app features user authentication followed by a dashboard that allows users to interact with various Proxmox functionalities, all presented with a clean and modern aesthetic.

## CORE FEATURES
1. **User Authentication**: A secure login page that allows users to access their Proxmox account. The design is futuristic and visually appealing, primarily using blue and white colors.
2. **Proxmox Dashboard**: After logging in, users will be greeted with a dashboard displaying an overview of their Proxmox environment, including key metrics and status updates.
3. **Virtual Machine Management**: Users can view, create, and manage virtual machines directly from the dashboard, facilitating efficient resource management.
4. **Network Configuration**: A section dedicated to managing network settings and configurations within Proxmox, ensuring users can easily handle their networking needs.
5. **User Notifications**: Real-time notifications for critical updates or alerts related to the Proxmox environment, keeping users informed about their systems.
6. **Settings and Preferences**: A user-friendly section for managing personal settings, including theme preferences and account details.

## 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 centered login form on the landing page, followed by a grid-style dashboard layout for the Proxmox management features, ensuring easy navigation and accessibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for rapid UI development and responsiveness.
- **UI Components**: shadcn/ui for consistent and reusable components.
- **State Management**: Use React Context API or Zustand for lightweight state management across the application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui to style the application.
3. **Create Authentication Flow**: Implement the login page using a form that captures username and password, handling authentication securely.
4. **Develop Dashboard Layout**: Create a responsive dashboard layout with sections for virtual machine management, networking, and notifications.
5. **Implement Proxmox Interactions**: Build out the functionality that connects to the Proxmox API for managing resources and retrieving data.
6. **Style Components**: Use Tailwind CSS to apply the design specifications, ensuring a minimalist aesthetic and responsiveness.
7. **Testing**: Conduct thorough testing for user experience and functionality, including edge cases for authentication and Proxmox interactions.
8. **Deployment**: Prepare the application for deployment on a suitable hosting platform (e.g., Vercel, Netlify) with proper environment variable management for Proxmox integration.

## USER EXPERIENCE
Users will first encounter a sleek login page that invites them to enter their credentials. Upon successful login, they will be directed to a visually organized dashboard featuring key functionalities such as virtual machine management and network configuration. The minimalist design ensures that users can focus on their tasks without distractions, while responsive design principles guarantee a smooth experience across devices. Notifications will keep users informed, ensuring they can react promptly to any important updates.