Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to help users register and manage their various escape room projects. It allows users to describe each project, organize details by individual rooms, and keep track of materials and documentation. The application will be responsive and compatible with both iOS and Android devices.

## CORE FEATURES
1. **Project Overview**: A section to enter the project's name and general description.
2. **Project Structure**: A detailed section divided into four subsections for each room (Sala 1, Sala 2, Sala 3, Sala 4), with further subsections for files and programs, documentation, materials, and expenses.
3. **Material List**: A comprehensive list of all materials utilized in the projects, including total costs.
4. **Documentation Upload**: A dedicated section for users to upload and manage all project-related documentation.
5. **Responsive Design**: The application will be fully responsive, ensuring usability across various devices.

## 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 top navigation bar, followed by a hero section for project creation, with a sidebar for navigation to different project structures and materials.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing project data and user inputs)

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and Redux.
2. **Create Component Structure**: Develop components for Project Overview, Project Structure, Material List, and Documentation Upload.
3. **Implement Navigation**: Set up a responsive top navigation bar and sidebar for easy access to different sections.
4. **Design Layout**: Utilize Tailwind CSS to create a minimalist design, focusing on spacing, typography, and color usage.
5. **State Management**: Integrate Redux to handle state for projects, including adding, editing, and deleting materials and documentation.
6. **Responsive Testing**: Ensure that the application is fully responsive on various screen sizes, particularly for mobile devices.

## USER EXPERIENCE
Users will start by entering their project name in the Project Overview section. They can then navigate to the Project Structure to add details about each room. The Material List allows users to input all materials used, and the documentation section provides a straightforward way to upload files. The intuitive layout and design ensure that users can easily navigate and manage their projects without any confusion. 

This minimalist approach focuses on usability and clarity, making the application accessible for all users, whether they are tech-savvy or not.