Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Gantt Chart Application is a web app designed to help users create and manage Gantt diagrams with multiple hierarchical levels. It aims to provide a user-friendly interface for project planning and scheduling, enabling users to visualize tasks over time and their dependencies effectively.

## CORE FEATURES
1. **Multi-Level Hierarchical Tasks**: Users can create tasks with up to three levels of hierarchy, allowing for detailed project breakdowns.
2. **Drag-and-Drop Functionality**: Users can easily rearrange tasks and set dependencies by dragging and dropping elements within the Gantt chart.
3. **Customizable Task Attributes**: Each task can have attributes such as duration, start date, end date, and assigned team members.
4. **Progress Tracking**: Users can update and visualize the progress of each task, providing real-time insights into project status.
5. **Export Options**: Users can export their Gantt charts in various formats (e.g., PDF, PNG) for sharing or reporting purposes.
6. **User Authentication**: Secure user login and registration to save and manage personal projects.

## 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 feature a sidebar for task management and a central Gantt chart area for visualizing tasks. Top navigation will include options for exporting and user settings.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Module**: Implement user authentication with login and registration functionalities.
3. **Build Sidebar Component**: Create a sidebar for task management that includes options to add, edit, and delete tasks.
4. **Develop Gantt Chart Component**: Build the Gantt chart using a suitable library or custom implementation, enabling drag-and-drop capabilities.
5. **Implement Task Management Features**: Add functionalities for adding hierarchical tasks, setting attributes, and tracking progress.
6. **Add Export Functionality**: Implement options to export Gantt charts in various formats.
7. **Testing**: Perform thorough testing to ensure all features work as intended and refine the user experience based on feedback.

## USER EXPERIENCE
Users will begin by logging into the application, where they can view their existing projects or create a new one. The sidebar allows them to manage tasks easily, while the central Gantt chart provides a visual representation of their project timeline. Users can interact with tasks through drag-and-drop, edit attributes directly on the chart, and track progress intuitively. The application will be responsive, ensuring usability across various devices, from desktops to tablets.