Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to facilitate user sign-ups and logins while securely sending user details to a Telegram bot for monitoring and notifications. The application will capture essential information such as phone numbers and passwords during sign-up and login processes, ensuring a seamless user experience.

## CORE FEATURES
1. **User Sign-Up**: A form where users can enter their phone number, password, and confirm their password. Upon submission, the details are sent to a specified Telegram chat via a bot.
2. **User Login**: A login form that allows users to enter their phone number and password. Similar to the sign-up process, the details are sent to Telegram for verification and monitoring.
3. **Telegram Integration**: A backend service that handles sending user data to a Telegram bot using the bot token and chat ID provided during setup.
4. **Responsive Design**: The application will be fully responsive, ensuring an optimal user experience across devices.
5. **Minimalist UI**: A clean and simple design that emphasizes usability and clarity, with plenty of white space and a minimal color palette.

## 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, a sign-up section, a login section, and a footer. Each section will be clearly defined with ample spacing and a consistent design theme.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context for managing user authentication state

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Telegram Bot**: Set up a new Telegram bot to obtain the bot token and chat ID for sending notifications.
3. **Build UI Components**: 
   - Create a Sign-Up component with fields for phone number, password, and confirm password.
   - Create a Login component with fields for phone number and password.
4. **Integrate Telegram API**: Implement a backend service (using Node.js or similar) to handle the HTTP requests for sending data to the Telegram bot.
5. **Manage State**: Use React Context to maintain the authentication state of the user across the application.
6. **Test Responsiveness**: Ensure that the application is responsive and that all elements are displayed correctly on various screen sizes.
7. **Deploy Application**: Deploy the application on a suitable platform (e.g., Vercel, Netlify) and ensure that the Telegram integration works in the live environment.

## USER EXPERIENCE
Users will experience a straightforward interaction flow starting from the sign-up or login page. Upon entering their details and submitting the forms, users will receive immediate feedback, and their information will be sent to the Telegram bot for monitoring. The minimalist design ensures that users can focus on the input fields without distractions, enhancing the overall usability and experience of the application.