Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application focused on providing detailed information about various agrochemicals. Users will be able to search, filter, and learn about different products, their uses, and safety guidelines. The app aims to serve farmers, researchers, and agricultural professionals, ensuring they have access to critical information.

## CORE FEATURES
1. **Search Functionality**: Users can quickly search for specific agrochemicals using a search bar that supports keyword filtering.
2. **Product Listings**: A comprehensive list of agrochemicals displayed with relevant information such as name, type, and purpose.
3. **Product Details**: Each agrochemical will have a dedicated page detailing its uses, safety information, and dosage recommendations.
4. **User Reviews and Ratings**: Users can submit reviews and ratings for each product, helping others make informed decisions.
5. **Safety Guidelines**: A section dedicated to safety practices when handling agrochemicals, ensuring user safety and compliance.
6. **Contact and Support**: A simple contact form for users to reach out for more information or support regarding the agrochemicals.

## 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 main layout will consist of a top navigation bar, a hero section introducing the app, a grid layout for product listings, and a footer with contact information. Each product detail page will follow a card layout with tabs for different information sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for state management across the application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop the main layout components including Header, Footer, and MainContent sections.
3. **Design and Implement Search Functionality**: Create a search bar component and integrate it with the product listings.
4. **Build Product Listings**: Create a component to fetch and display agrochemical data in a grid layout.
5. **Develop Product Detail Pages**: Create a dynamic route for each product and implement a detail page that includes all relevant information.
6. **Implement User Reviews and Ratings**: Create a form for users to submit their reviews and display them on the product detail pages.
7. **Add Safety Guidelines Section**: Develop a dedicated section accessible from the main menu for safety guidelines.
8. **Testing**: Conduct thorough testing of all features, including user interactions and responsiveness across devices.
9. **Deployment**: Prepare and deploy the application on a suitable hosting platform.

## USER EXPERIENCE
Users will have a seamless experience starting from the landing page, where they can easily navigate through the search functionality. They can view product listings and click on individual products to access detailed information. The interface will be intuitive, with clear calls to action, and all interactions will be responsive, ensuring accessibility on both desktop and mobile devices. Users can submit reviews effortlessly, contributing to a community-driven platform. The overall minimalist design will enhance focus on content, ensuring a smooth user journey.