Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to create a user-friendly cooking recipe calculator. Users can input product details such as name, price, quantity in grams, and model the cost per gram for each ingredient. The application will automatically calculate the total cost of a dish, including VAT and profit margins, providing an efficient way to manage recipe costs.

## CORE FEATURES
1. **Product Entry**: Users can add products with details such as name, price per unit, and quantity in grams.
2. **Cost Calculation**: The app calculates the cost per gram and totals the cost of all ingredients.
3. **VAT and Profit Margin**: Automatically applies a 16% VAT and a 32% profit margin to the total cost.
4. **Fixed Expenses Input**: Allows users to input fixed expenses that will be added to the total cost of the dish.
5. **Summary Display**: Provides a clear summary of costs, including itemized breakdown and total price.
6. **Export Functionality**: Users can export their calculated recipes as a PDF or CSV for easy sharing and reference.

## 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 feature a header with the app title, a central input section for product details, a results section displaying calculated costs, and a footer with export options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context or Redux if state management becomes complex.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**:
   - Header component for the app title.
   - InputForm component to handle product entries and calculations.
   - ResultsDisplay component to show the calculated totals.
   - Footer component for export functionality.
3. **Implement State Management**:
   - Set up context or Redux store to manage product entries and calculations.
4. **Add Calculation Logic**:
   - Implement functions to calculate the cost per gram, total costs, VAT, profit margins, and fixed expenses.
5. **Styling**:
   - Apply Tailwind CSS classes to create a minimalist design according to the specifications.
6. **Testing**: Ensure all functionalities work as expected and conduct user testing for feedback.
7. **Deployment**: Deploy the application to a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with the application by entering product details into the input form, which will dynamically update the calculated costs displayed in the results section. The interface will be intuitive, with clear prompts and a clean layout that makes it easy to track recipe costs. Users will be able to quickly add or modify products, view the updated costs, and export their recipes seamlessly.