Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for user authentication, featuring a full login page and sign-in page. The application will provide a seamless experience for users to create accounts, verify their identities via OTP, recover forgotten passwords, and manage account access securely. The focus is on a clean, minimalist interface that prioritizes user experience and engagement.

## CORE FEATURES
1. **Login Page**: A simple and intuitive login interface for existing users to access their accounts securely.
2. **Sign-In Page**: A registration form allowing new users to create accounts, including email verification.
3. **Account Verification**: An OTP verification system that sends a one-time password to the user's email upon registration and during account recovery.
4. **Password Recovery**: A comprehensive "Forgot Password" feature that enables users to reset their passwords through a secure email link.
5. **Account Creation Timestamp**: Display the date and time when the account was created for user reference.
6. **Responsive Design**: Ensure the application is mobile-friendly and adapts to different screen sizes.

## 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 layout will consist of a centered form for login and sign-in pages, with clearly defined sections for input fields, buttons, and error messages. Each page will include a simple header and footer for branding and navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for styling.
   - Include shadcn/ui for UI components.
  
2. **Create Authentication Pages**:
   - Develop the Login and Sign-In pages using functional components.
   - Implement form handling for user input and validation.

3. **Implement OTP Verification**:
   - Set up backend logic to send OTPs via email during account creation and password recovery.
   - Create a component to handle OTP input and verification.

4. **Password Recovery Functionality**:
   - Develop the "Forgot Password" feature to initiate the password reset process.
   - Create a secure link that users can use to reset their passwords.

5. **Display Account Creation Timestamp**:
   - Store the account creation time in the database and display it in the user profile section.

6. **Responsive Design**:
   - Ensure all components are responsive and optimized for different devices using Tailwind CSS utilities.

7. **Testing**:
   - Thoroughly test the authentication flow, including edge cases for form inputs and error handling.

## USER EXPERIENCE
Users will engage with a straightforward login or sign-in process. Upon entering their credentials or signing up, they will receive an email verification containing an OTP. The interface will provide clear prompts for password recovery, guiding users through each step seamlessly. The minimal design ensures that users can focus on the task at hand without distractions, and the responsive layout allows for easy access on any device.