Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based widget generator specifically designed for airport transfer bookings. Users can customize a widget that allows them to configure essential details, such as images, city selection, and style preferences, to seamlessly integrate into their own websites.

## CORE FEATURES
1. **Widget Customization**: Users can configure widget options including images, the city of operation, and visual styles for fonts, colors, and borders.
2. **Campaign Naming**: Users can assign a custom name to their campaign, which will be reflected in the generated link.
3. **Booking Button**: A prominent "Reservar" button allows users to initiate the booking process directly from the widget.
4. **Iframe Code Generation**: Users can generate a code snippet that includes an iframe for easy embedding into HTML.
5. **Self-Configuration**: The widget can be configured and previewed directly within the application interface, allowing for real-time updates.
6. **Responsive Design**: The widget must maintain functionality and aesthetics across various device sizes, ensuring a consistent user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design prioritizes a clean and simple aesthetic, utilizing ample white space to enhance readability and user focus.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and ease of reading.
- **Layout**: 
  - A central configuration area where users can adjust settings, flanked by a live preview of the widget on one side.
  - Clear sections with adequate spacing between each feature to avoid clutter.
- **Typography**: 
  - Primary font: 'Roboto', for its modern and legible characteristics.
  - Headings: Bold with a larger size for emphasis.
  - Body text: Regular weight for clarity, maintaining a consistent hierarchy for headings and text sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface components.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid design adjustments and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context or a state management library like Redux if the application grows in complexity.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create the Main Layout**: Develop the main layout featuring the configuration panel and live preview section, ensuring responsiveness.
3. **Implement Widget Customization Features**: Build components for image upload, city selection dropdown, and style customization options.
4. **Integrate the Booking Button**: Add the "Reservar" button functionality that triggers the booking process, linking it to the relevant API.
5. **Develop Iframe Code Generation**: Create a feature to dynamically generate the iframe code based on user configurations.
6. **Testing & Optimization**: Thoroughly test the application across different devices and screen sizes to ensure seamless user experience.

## USER EXPERIENCE
The user journey begins with accessing the widget generator, where they are greeted with a clean interface. Users can easily navigate through the customization options, adjusting settings while seeing live updates in the preview section. Once satisfied with their configurations, they can name their campaign and generate the iframe code with a single click. The booking process initiated by the "Reservar" button is straightforward, guiding users through airport transfer bookings efficiently. The overall experience emphasizes simplicity and ease of use, making it accessible for users of all technical backgrounds.