Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application focused on agricultural products. It enables users to browse products, view detailed information, add items to their cart, and place orders. The application aims to provide a simple and efficient shopping experience for users interested in agriculture-related items.

## CORE FEATURES
1. **Home Page**
   - The main page showcasing available agricultural products and providing navigation to different sections of the site.

2. **Product Details**
   - A dedicated section for each product displaying essential information such as product name, image, category, price, available quantity, and a detailed description.

3. **Cart**
   - A user-friendly cart interface that allows customers to view selected products, modify quantities, remove items, and see the total price.

4. **Order Section**
   - A streamlined process for placing orders that includes an overview of selected products, quantities, total amounts, delivery details, and order status.

## 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:** The layout consists of a top navigation bar, a hero section on the Home Page, product grids for product listings, and responsive modal components for the Cart and Order sections.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Redux or Context API (as needed)

## IMPLEMENTATION STEPS
1. **Set Up Project Environment:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Integrate the shadcn/ui component library.

2. **Create Core Components:**
   - Develop the Home Page component with a product listing section and navigation.
   - Build the Product Details component to display detailed information for each product.
   - Implement the Cart component to manage selected products and quantities.
   - Create the Order Section component to handle order placements.

3. **Routing Setup:**
   - Use React Router to manage navigation between Home, Product Details, Cart, and Order sections.

4. **State Management:**
   - Set up Redux or Context API for managing the application state, including user cart and order information.

5. **Styling Implementation:**
   - Apply Tailwind CSS classes to all components, ensuring adherence to the specified design specifications.

6. **Testing:**
   - Conduct thorough testing of all functionalities, including product selection, cart management, and order placement.

## USER EXPERIENCE
Users will start on the Home Page, where they can explore products. Clicking on a product will lead them to the Product Details page, allowing them to view more information and add items to their cart. The Cart section enables users to adjust their selections before proceeding to the Order section, which presents a clear overview of their purchase and allows them to finalize their order seamlessly. The application is designed to be responsive, ensuring a smooth experience across devices.