Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an upgrade to an existing web application focused on a productivity tool that features a focus timer with motivational pop-ups and alarm functionalities. The main purpose is to enhance user experience by improving responsiveness, adding intuitive controls, and ensuring robust security features.

## CORE FEATURES
1. **Responsive Design**: Ensure the application displays correctly on mobile, tablet, and desktop viewports, providing a seamless experience across all devices.
2. **Motivational Pop-up**: Implement a motivational pop-up that appears once per session using incognito mode, and confirm it does not reappear upon refreshing the page.
3. **Alarm Customization**: Increase the volume of the focus timer alarm and replace it with a sound resembling a standard physical timer clock alarm given above for reference or even use.
4. **Swipe Gestures**: Integrate mobile swipe gestures for easier navigation and interaction.
5. **One-Time Login**: Introduce a "one-time login" feature that allows users to stay logged in without repeated sign-ins.
6. **Security Audit**: Address and fix the "forgot password" functionality, ensuring it sends emails correctly and resolves any security-related issues.

## 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 centered header, a prominent hero section for the timer, features displayed in a grid format, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing global state (if required)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Implement Responsive Design**: Use CSS media queries and Tailwind utility classes to ensure the application is responsive across all devices.
3. **Motivational Pop-up Logic**: Create a state management solution to control the visibility of the motivational pop-up based on session tracking.
4. **Alarm Sound Customization**: Replace the current alarm sound with a new audio file, adjusting volume levels as specified.
5. **Mobile Gestures**: Implement swipe gestures using a library like `react-swipeable` to enhance mobile usability.
6. **One-Time Login Feature**: Modify the authentication flow to allow for a persistent login state using local storage or session management.
7. **Fix "Forgot Password" Feature**: Debug the existing functionality to ensure email notifications are sent correctly and address any security feature limitations.
8. **Conduct Security Audit**: Review the application's security features, modify where necessary, and implement best practices to secure user data.

## USER EXPERIENCE
Users will experience a smooth and engaging interface that reacts promptly to their interactions. The responsive design will allow for easy navigation regardless of the device used. The motivational pop-up will provide timely encouragement, enhancing productivity. The upgraded alarm sound will ensure users are alerted effectively, and the one-time login feature will simplify user sessions, making the application more user-friendly.