Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an interactive web application designed as an "Intelligent Musical Instruments Advisor." It allows users to search for musical instruments based on their preferences using a clean, responsive interface. The application utilizes mock data to simulate search results without a backend, providing a seamless user experience.

## CORE FEATURES
1. **Search Panel**: A visually appealing form where users can input or select instrument characteristics such as type, color, brand, style, and desired accessories, culminating in a primary action button to initiate the search.
  
2. **Results Display**: Upon searching, the application presents two card-style results. The primary option highlights the best choice, while the secondary option offers an economical alternative, both with relevant details such as price and local availability.

3. **Mock Data Simulation**: The application utilizes an integrated mock data file to simulate search results based on user input, ensuring a realistic and engaging user experience.

4. **Smooth Animations**: Incorporation of fade-in animations for results to enhance visual appeal and user engagement.

5. **Loading States**: A brief simulated loading state to give users feedback while the application processes their search, improving perceived performance.

6. **Responsive Design**: The application is designed with a mobile-first approach, ensuring optimal functionality 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.
- **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**: A single-column layout for the search panel at the top, followed by a two-column layout for the results display, optimizing space and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for reusable components.
- **State Management**: React's built-in state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Mock Data**: Develop a robust mock data file containing a variety of musical instruments with attributes such as type, brand, color, style, and price.
3. **Build Search Panel Component**: Design the search form component with inputs for instrument type, color selection, brand, style, and accessories, including the primary search button.
4. **Implement Results Display Component**: Create a results component that handles displaying the two cards based on user input, ensuring the primary card is visually distinct.
5. **Add Animations**: Implement fade-in animations for the results display to enhance user experience.
6. **Simulate Loading State**: Introduce a loading state that simulates processing time before displaying results.
7. **Ensure Responsiveness**: Test and adjust styles to ensure the application is fully responsive, focusing on mobile-first design principles.

## USER EXPERIENCE
Users will interact with the search panel to input their preferences for musical instruments. Upon clicking the "Buscar mi Instrumento Ideal" button, a loading animation will display briefly before transitioning to the results screen, showcasing two cards with the recommended choices. Each card will provide essential information, and users can easily navigate back to the search panel to refine their query if needed. The design will ensure a smooth, engaging experience that encourages exploration and interaction.