Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as an online store for selling gourmet products from Extremadura. It will feature a user-friendly interface that allows customers to browse a curated catalog of products, add items to a shopping cart, and complete their purchases through a streamlined checkout process.

## CORE FEATURES
1. **Product Catalog**: A visually appealing catalog displaying 6 gourmet products, each with an image, name, description, and price.
2. **Shopping Cart**: A cart feature that allows users to view selected items, adjust quantities, and remove products.
3. **Checkout Form**: A simple and efficient checkout form that collects user information and payment details for processing orders.
4. **Responsive Design**: Ensure the application is fully responsive, providing an optimal user experience across various devices (desktops, tablets, and smartphones).
5. **Premium Aesthetic**: Emphasize a premium and artisanal feel through minimalist design and high-quality imagery.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and a 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 and body text/UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A simple vertical layout with a header for navigation, followed by the product catalog, shopping cart summary, and checkout form, ensuring a logical flow for the user.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent and stylish components.
- **State Management**: React Context API for managing cart state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React application with TypeScript using create-react-app.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other necessary libraries.
3. **Configure Tailwind CSS**: Set up Tailwind CSS for styling according to the design specifications.
4. **Create Components**: Build individual components for the product catalog, cart, and checkout form.
5. **Implement State Management**: Use React Context API to manage cart state and pass data between components.
6. **Design Layout**: Structure the layout using Tailwind CSS classes to ensure responsiveness and adherence to the minimalist style.
7. **Test Functionality**: Thoroughly test all features, including adding products to the cart, adjusting quantities, and completing the checkout process.
8. **Deploy Application**: Prepare for deployment using Vercel or another hosting service, ensuring all assets are optimized for performance.

## USER EXPERIENCE
Users will land on a clean and welcoming homepage that showcases the gourmet products. They can easily navigate the catalog, view details of each product, and add items to their cart. The shopping cart will provide a clear summary of selected items, and the checkout process will be straightforward, encouraging users to complete their purchases with minimal friction. Ensuring the application is responsive will enhance accessibility and usability on all devices, making shopping enjoyable and efficient.