Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a foreign exchange calculator for a currency exchange company in India. The application will provide live currency rates and perform calculations involving markups and GST according to Indian GST law. The primary focus will be on delivering a user-friendly interface with real-time data updates.

## CORE FEATURES
1. **Live Currency Rates**: Display real-time exchange rates for various currency pairs.
2. **Markup Calculation**: Allow users to input a base rate and automatically calculate the final rate after adding a 1-point markup.
3. **GST Calculation**: Automatically calculate and display GST based on the final calculated rate, adhering to Indian GST laws.
4. **User Input Fields**: Provide input fields for users to enter the amount they wish to convert, select currency pairs, and view results.
5. **Responsive Design**: Ensure the application is fully responsive for optimal viewing on both desktop and mobile devices.
6. **Simple User Interface**: A clean and intuitive UI that minimizes user effort and maximizes clarity and usability.

## 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 header with the company logo and title, a central calculation section with input fields, and a results display area. The footer will include contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for UI elements.
- **State Management**: Use React's built-in state management or a simple context API if needed.

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Initialize a React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Layout Structure**: Build the main layout including header, calculation section, results area, and footer.
3. **Implement Live Currency Rate API**: Integrate an API that provides live currency rates and set up a function to fetch these rates.
4. **Develop Calculation Logic**: Create functions that handle markup and GST calculations based on user input.
5. **Connect UI to Logic**: Link input fields to state management, ensuring user inputs trigger the calculation logic correctly.
6. **Style the Application**: Use Tailwind CSS to apply the specified design specifications, ensuring the application is visually appealing and adheres to the minimalist aesthetic.
7. **Test Responsiveness**: Ensure the application functions properly on various devices and screen sizes.

## USER EXPERIENCE
Users will land on a clean page featuring the foreign exchange calculator. They will be able to select currency pairs, enter amounts, and view real-time rates. Upon inputting their data, the application will display the calculated conversion amount, including the markup and GST, all in a simple and intuitive interface. The layout will remain responsive, providing a seamless experience on both desktop and mobile devices, enhancing user engagement and satisfaction.