Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application allows users to upload videos and generate clips of specified durations using FFmpeg. It enhances user experience by providing clear loading indicators, managing downloads efficiently, and allowing users to easily download generated clips.

## CORE FEATURES
1. **Video Upload:** Users can upload video files to the application for processing.
2. **Loading Indicator:** A spinner or progress bar is displayed while FFmpeg processes the video, and the 'Generate Clips' button is disabled to prevent multiple submissions.
3. **Clip Generation:** Automatically generates clips of 90 seconds from the uploaded video once processing is complete.
4. **Download List:** Displays a clean list of generated clips with download buttons for each clip, utilizing URLs created with `URL.createObjectURL(blob)`.
5. **Reset Functionality:** A 'Start Over' button allows users to clear the current state and upload a new video easily.

## DESIGN SPECIFICATIONS
- **Visual Style:** Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a strong focus on typography.
- **Color Mode:** Light theme with dark text on light backgrounds to enhance readability.
- **Layout:** 
  - Hero section at the top for video upload.
  - Below the upload area, a loading indicator appears during processing.
  - Once processing is complete, a neatly organized list of clips appears with download buttons.
  - A prominent 'Start Over' button is easily accessible.
- **Typography:** Use a sans-serif font like "Roboto" for clarity and modern aesthetics, with a clear hierarchy for headings and body text.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript for a robust application structure.
- **Styling:** Tailwind CSS for utility-first styling to maintain a minimalist design.
- **UI Components:** Utilize `shadcn/ui` for pre-designed components that fit the minimalist style.
- **State Management:** Use React's built-in Context API or Zustand for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for your project.
   - Add `shadcn/ui` for UI components.
   
2. **Create Components:**
   - Develop a `VideoUpload` component for file uploads.
   - Implement a `LoadingIndicator` component to show during video processing.
   - Create a `ClipList` component to display generated clips with download buttons.
   - Build a `ResetButton` component to clear the application state.

3. **Integrate FFmpeg:**
   - Use a library like `ffmpeg.js` to process videos on the client side.
   - Ensure that the loading indicator is displayed while FFmpeg is processing.

4. **Handle Clip Generation:**
   - Implement logic to divide the uploaded video into 90-second clips and store the URLs for downloading.

5. **Styling and Layout:**
   - Apply Tailwind CSS classes to ensure the design is minimalist and responsive.
   - Ensure the layout is user-friendly with clear visual hierarchy.

6. **Testing and Debugging:**
   - Test the application thoroughly across different devices and browsers.
   - Fix any bugs related to video processing and downloading.

## USER EXPERIENCE
Users will initiate their experience by uploading a video through a straightforward upload interface. As the video is processed, they will see a loading indicator, ensuring they understand that the application is working. Upon completion, they will be presented with a list of clips that they can download individually. The interface is designed to be intuitive, minimizing confusion and enhancing the overall user experience, with a quick option to start over if desired.