Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a single-page web app designed to allow users to upload a video file and generate sequential clips of exactly 1 minute and 30 seconds (90 seconds). The focus is on a clean, modern interface that provides a straightforward user experience without the use of AI for selecting clips, ensuring a mathematical cut from the beginning to the end of the video.

## CORE FEATURES
1. **Video Upload Area**: A large, user-friendly drag-and-drop zone for uploading .mp4 video files.
2. **Sequential Clip Generation**: A backend function that processes the uploaded video and splits it into clips of exactly 90 seconds each.
3. **Action Button**: A prominent button labeled 'Generar Clips' that initiates the clip generation process.
4. **Responsive Design**: The layout adjusts seamlessly for various screen sizes, ensuring usability on both desktop and mobile devices.
5. **User Feedback**: Visual indicators (like loading spinners or success messages) to inform users of the upload and processing status.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design features a clean and simple aesthetic with ample white space, focusing on ease of use and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: The layout centers around a large drag-and-drop area positioned prominently in the middle of the page, with the title above and the action button below. The interface is designed to be uncluttered and intuitive.
- **Typography**: Use a sans-serif font for clarity and modernity. Headings should be bold and larger to establish a clear hierarchy, while body text should be regular weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design implementation while maintaining responsiveness.
- **UI Components**: Utilize shadcn/ui to enhance the visual and interactive quality of the app.
- **State Management**: Use React's built-in state management or consider a library like Zustand if global state is necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React application with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Design the Layout**: Create a main component that includes the title, drag-and-drop zone, and action button.
4. **Implement Video Upload**: Use a library like `react-dropzone` to handle file uploads in the drag-and-drop area.
5. **Create Clip Generation Logic**: Set up a function to split the uploaded video into clips of 90 seconds. This requires backend logic that can process video files.
6. **Add User Feedback**: Implement loading indicators and success/error messages to provide feedback to users during the upload and processing stages.
7. **Test Responsiveness**: Ensure the layout works well on different screen sizes by using Tailwind’s responsive design utilities.

## USER EXPERIENCE
Users will be greeted with a clean interface featuring a clear title. They can easily drag and drop their video files into the designated area or click to upload. Upon clicking the 'Generar Clips' button, users will see a loading indicator while their video is processed. Once the clips are generated, they will receive a success message, and the clips will be made available for download or further action. The overall experience is designed to be straightforward and efficient, with minimal distractions.