Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
AgroCalculator is a web application designed to assist farmers in determining the commercial dosage of agricultural products based on the concentration of active ingredients, concentration in ppm, and crop wetting. This tool aims to simplify the calculation process, ensuring that farmers can apply the correct amount of product for optimal results.

## CORE FEATURES
1. **Dosage Calculator**: An interactive tool where users input the concentration of the active ingredient, ppm values, and crop wetting factors to receive the precise dosage required for application.
2. **User Registration/Login**: Farmers can create accounts to save their dosage calculations and access them later, enhancing user experience and efficiency.
3. **Educational Resources**: A section that provides information on best practices for product application, ensuring users understand the importance of accurate dosing.
4. **Contact Support**: A feature for users to reach out for assistance or more information about the tool or agricultural practices.
5. **Responsive Design**: The application will be fully responsive, allowing users to access it on various devices, including smartphones and tablets.

## 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 will consist of a header with the application name, a prominent hero section with a call-to-action to use the dosage calculator, followed by sections detailing core features, user testimonials, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or any state management solution as needed for handling user sessions and saved calculations.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Components**: Build components for the header, hero section, dosage calculator, educational resources, testimonials, and footer.
3. **Implement Routing**: Set up routing for user registration/login and the main calculator interface using React Router.
4. **Add State Management**: Implement state management for user sessions and saved calculations using React Context API.
5. **Design Layout**: Apply Tailwind CSS styles to align with the minimalist design specifications, ensuring responsiveness across devices.
6. **Testing**: Conduct usability testing to ensure that the dosage calculator functions correctly and the user experience is smooth.

## USER EXPERIENCE
Users will start by landing on the hero section, where they can quickly access the dosage calculator. The interface will guide them to input the required values intuitively. Once calculated, users will have the option to save their results after logging in. The app will provide educational resources to help users understand the importance of correct dosing. Feedback options will be available for users to contact support for any inquiries, ensuring a responsive and helpful environment. The overall experience will be streamlined, focusing on simplicity and efficiency to meet the needs of farmers.