Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to streamline the process of generating financial plans for users. Upon successful creation of a financial plan, the app automatically sends relevant user data to a specified n8n webhook. The aim is to facilitate seamless data management while ensuring a smooth user experience.

## CORE FEATURES
1. **User Authentication**: Secure login system allowing users to create and manage their financial plans.
2. **Financial Plan Generation**: Users can input their financial details to generate a comprehensive financial plan.
3. **Webhook Integration**: Automatically sends a POST request with user data to the given n8n webhook upon financial plan generation.
4. **Error Handling**: Implements robust error handling for webhook requests, including logging errors and displaying non-blocking toast notifications without interrupting user flow.
5. **Google Sheets Integration**: Ensures that all future user submissions are automatically saved into Google Sheets through n8n for easy data management and analysis.
6. **Responsive Design**: Provides a user-friendly interface that works seamlessly across various devices.

## 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 be a single-column format with a clear flow, including sections for user input, plan generation, and notifications.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux Toolkit (for managing user data and application state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and set up Tailwind CSS.
2. **Create Authentication Module**: Implement user authentication with secure login functionality.
3. **Develop Financial Plan Form**: Create a form component where users can input their financial data.
4. **Implement Webhook Logic**: Use async fetch API to send a POST request to the n8n webhook with the specified payload immediately after the financial plan is generated.
5. **Add Error Handling**: Implement try/catch blocks to handle errors during the webhook request, log errors in the console, and show a non-blocking toast message to the user.
6. **Integrate Google Sheets**: Set up the n8n workflow to automatically save user submissions into Google Sheets.
7. **Design UI Components**: Use Tailwind CSS to create a minimalist and responsive UI that adheres to the design specifications.
8. **Test Application**: Conduct thorough testing to ensure all features work as intended and the user experience is seamless.

## USER EXPERIENCE
Users will first see a clean and simple login interface. After logging in, they will be presented with an input form to generate their financial plan. Upon submission, the app will display a loading state while the financial plan is being processed. If successful, users will receive a confirmation notification; in case of failure, an error message will be shown without disrupting the overall flow. The design ensures that users can navigate easily, with clear calls to action and a focus on their financial planning needs.