Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to track webhook notifications for sales, delivering real-time alerts directly to users' mobile devices whenever a sale occurs. The application will focus on a clean, minimalist design to enhance user experience and ensure quick access to essential information.

## CORE FEATURES
1. **Webhook Integration**: Users can easily set up their webhook URLs to receive notifications for sales.
2. **Real-Time Notifications**: Instant alerts sent to mobile devices whenever a sale is recorded, ensuring users stay updated.
3. **History Log**: A dedicated section displaying past sales notifications for user reference.
4. **User Authentication**: Secure login for users to manage their webhook settings and notification preferences.
5. **Custom Notification Settings**: Users can personalize how and when they receive alerts, including sound and vibration options.

## 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 for navigation, a hero section for key information, a features section, and a footer with contact information and links.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create UI Components**: Develop reusable components using shadcn/ui for buttons, notifications, and cards.
3. **Implement Webhook Functionality**: Set up a backend service to handle webhook calls and notify the frontend.
4. **Integrate Push Notifications**: Use a service like Firebase Cloud Messaging to send real-time notifications to users' devices.
5. **Develop User Authentication**: Implement login and registration features to secure user accounts.
6. **Create Custom Settings Page**: Allow users to manage their notification preferences and webhook settings.
7. **Testing and Debugging**: Conduct thorough testing to ensure smooth functionality and user experience.

## USER EXPERIENCE
Users will interact with the app primarily through a straightforward interface. After logging in, they will set up their webhook and notification preferences. Once configured, they will receive real-time alerts on their mobile devices, which they can review in the history log. The user experience emphasizes simplicity, ensuring that users can quickly understand and navigate the application without overwhelming features.