Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a troubleshooting tool for users experiencing issues with FFmpeg integration, specifically addressing error messages related to SharedArrayBuffer and WASM core files. By implementing necessary security headers and loading core files from a CDN, users will have a seamless experience without interruptions.

## CORE FEATURES
1. **Error Detection**: Automatically detects and displays common FFmpeg loading errors, providing users with actionable solutions.
2. **Configuration Suggestions**: Guides users through modifying their Vite configuration to include the necessary security headers for optimal performance.
3. **CDN File Loading**: Implements a function to explicitly load FFmpeg core files from a reliable CDN, ensuring users have the correct versions without relying on local files.
4. **User Documentation**: Provides comprehensive documentation and FAQs to assist users in troubleshooting and understanding the FFmpeg integration process.
5. **Responsive Design**: Ensures that the application is fully responsive, providing a consistent experience across all 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.
- **Layout**: The main layout will feature a top navigation bar for easy access to different sections, a central content area for displaying error messages and solutions, and a footer with contact information and additional resources.
- **Typography**: Use a sans-serif font such as "Roboto" for body text, with larger headings in "Montserrat" to create a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React application with TypeScript using Create React App or Vite.
2. **Install dependencies**: Include Tailwind CSS and shadcn/ui in your project.
3. **Configure Vite**: Modify `vite.config.ts` to add security headers:
   ```typescript
   server: {
     headers: {
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Embedder-Policy': 'require-corp'
     }
   }
   ```
4. **Create the main layout**: Implement the navigation bar, central content area, and footer using Tailwind CSS for styling.
5. **Implement error detection logic**: Create a component that detects loading errors and displays appropriate messages to the user.
6. **Add CDN loading functionality**: In your FFmpeg initialization file, ensure the `load()` function fetches core files from the CDN using `toBlobURL` from `@ffmpeg/util`.
7. **Develop user documentation**: Create a dedicated section with FAQs and troubleshooting tips related to FFmpeg integration.

## USER EXPERIENCE
Users will interact with the application through a straightforward interface where they can easily understand the error messages related to FFmpeg. The application will guide them through fixing the issues with clear instructions and documentation. The responsive design ensures a smooth experience on both desktop and mobile devices, allowing users to access solutions anytime, anywhere.