Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to implement a complete authentication setup using Clerk for user management. The main purpose is to provide a straightforward and secure method for users to register, log in, and manage their accounts with a focus on enhancing user experience through a minimalist design.

## CORE FEATURES
1. **User Registration**: Allow users to create new accounts with email and password or social login options.
2. **User Login**: Secure login functionality with options for password recovery and two-factor authentication.
3. **Account Management**: Users can update their profile information, change passwords, and manage authentication settings.
4. **Session Management**: Automatic session handling to maintain user login state across different sessions and devices.
5. **Responsive Design**: Ensure optimal usability on both desktop and mobile devices, focusing on accessibility and user-friendly navigation.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design should prioritize clean lines and ample white space, creating a serene user interface that minimizes distractions.
- **Color Mode**: Light theme featuring a minimal color palette with dark text on light backgrounds, ensuring high readability.
- **Layout**: Use a centered layout with a prominent header for navigation and a main content area for forms and user interactions. Incorporate ample padding and margins for a spacious feel.
- **Typography**: Utilize a clean sans-serif font such as "Roboto" or "Arial" for body text, with larger font sizes for headings to establish a clear hierarchy. Ensure consistent line spacing for enhanced readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid design adjustments and responsive features.
- **UI Components**: Use shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context or a state management library like Zustand for managing user sessions and authentication state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Install Clerk SDK**: Install the Clerk SDK to handle authentication features and connect it with the stored secret keys.
3. **Create Authentication Pages**:
   - **Registration Page**: Design a form to capture user information and integrate Clerk's registration methods.
   - **Login Page**: Implement a login form that utilizes Clerk’s login functionalities.
   - **Account Management Page**: Provide options for users to change their profiles and settings.
4. **Implement Routing**: Set up React Router to navigate between authentication pages and ensure protected routes for account management.
5. **Responsive Design**: Apply Tailwind utility classes to ensure that all components work seamlessly across various device sizes.
6. **Testing**: Thoroughly test user flows for registration, login, and account management to ensure a smooth user experience.

## USER EXPERIENCE
Users will experience a streamlined flow starting from the landing page, where they can easily navigate to registration or login forms. Upon successful login, they will be directed to their account management dashboard, where they can view and modify their profile information. The interface will feel modern and uncluttered, allowing users to focus on their tasks without unnecessary distractions. Responsive design will ensure that the application is accessible and functional on both desktop and mobile devices, providing an inclusive experience for all users.