Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase a collection of products in a minimalist style, emphasizing quality and aesthetic appeal. The application will be developed using React and Tailwind CSS, featuring high-quality animations and a clean layout, all presented in Spanish.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction featuring a prominent product image, catchy headline, and a call-to-action (CTA) button inviting users to explore more.
2. **Products Showcase**: A section dedicated to displaying products with images, descriptions, and pricing, allowing users to easily browse through the offerings.
3. **Animations**: Smooth and engaging animations for transitions, hover effects, and loading elements to enhance user interaction and experience.
4. **Contact Section**: A simple contact form enabling users to reach out for inquiries, feedback, or support.
5. **Responsive Design**: An adaptive layout that ensures a seamless experience across all devices, from desktops to mobile phones.

## 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 structured layout with a hero section at the top, followed by a grid display of products, and concluding with a contact section at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management or Context API as needed

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it according to the official documentation.

2. **Create the Layout**:
   - Develop the main layout structure using Tailwind CSS classes to ensure responsiveness.
   - Implement the Hero section with a background image, headline, and CTA button styled with the primary color.

3. **Build the Products Showcase**:
   - Create a component that fetches and displays product data.
   - Use Tailwind CSS to style the product cards with images, descriptions, and prices.

4. **Add Animations**:
   - Integrate animation libraries (e.g., Framer Motion) to add smooth transitions and hover effects on components.

5. **Implement the Contact Form**:
   - Develop a simple contact form that collects user information and messages.
   - Ensure form validation and responsive design.

6. **Final Touches**:
   - Test the application across different devices for responsiveness.
   - Optimize performance and ensure all animations function smoothly.

## USER EXPERIENCE
Users will be greeted with an eye-catching hero section, inviting them to explore the products. They can easily navigate through the showcased products, each featuring appealing visuals and concise descriptions. The responsive design ensures that users on mobile and desktop devices have an equally pleasant experience. The contact section provides an easy way for users to reach out, enhancing engagement and customer service.