Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as an e-commerce platform for a motorcycle and accessories store. It will be developed in Spanish, focusing on providing users with a seamless shopping experience through features such as a shopping cart, coupon usage, and a contact form. The application will emphasize a minimalist design that highlights the products effectively.

## CORE FEATURES
1. **Shopping Cart**: Allows users to add, remove, and update quantities of products before proceeding to checkout.
2. **Coupon System**: Users can enter discount codes at checkout to receive promotions.
3. **Product Listings**: Display a variety of motorcycles and accessories with images, descriptions, and prices.
4. **Contact Form**: A simple form for customers to reach out for inquiries, featuring fields for name, email, and message.
5. **User Authentication (optional)**: Allow users to create accounts, log in, and view order history.
6. **Responsive Design**: Ensures the application is mobile-friendly and accessible across various devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on products.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a color palette of blacks, grays, yellows, and whites for accents.
- **Layout**: A grid-based layout for product listings, with a fixed navigation bar at the top for easy access to different sections, including Home, Shop, and Contact. The layout will also include a prominent hero section to showcase featured products or promotions.
- **Typography**: Use modern sans-serif fonts for a contemporary feel; headings will use a larger font size for hierarchy, while body text will be clear and legible.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components to enhance design consistency.
- **State Management**: Use React Context API or a state management library like Redux if necessary for managing cart state and user authentication.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Include Tailwind CSS and shadcn/ui in the project. Set up the Tailwind configuration.
3. **Create Layout**: Build the main layout structure, including the navigation bar and footer.
4. **Develop Core Features**:
    - Implement the shopping cart functionality, including adding/removing products and calculating totals.
    - Create the product listings page with filter and sort options.
    - Develop the coupon system to validate and apply discounts.
    - Build the contact form with form validation.
5. **Implement Responsive Design**: Ensure all components adapt well to different screen sizes using Tailwind's responsive utilities.
6. **Testing and Debugging**: Test the application for usability and fix any bugs that arise.

## USER EXPERIENCE
Users will land on a visually appealing hero section featuring the latest promotions or featured products. They can easily navigate through the store using the top navigation bar, browse products in an organized grid, and add items to their cart. The checkout process will be straightforward, allowing users to apply coupons for discounts. The contact form will be easily accessible for support inquiries. The entire experience will be optimized for mobile and desktop users, ensuring a positive interaction with the application.