Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to facilitate user account management and enable communication through a contact form. Users will be able to create accounts, log in, and send messages via email, ensuring a streamlined user experience focused on simplicity and functionality.

## CORE FEATURES
1. **User Authentication**: Users can register, log in, and manage their accounts securely.
2. **Contact Form**: A functional contact form that sends user messages to fishabboud@gmail.com upon submission.
3. **Responsive Design**: The application is fully responsive, providing a seamless experience across devices.
4. **Fabicon Integration**: A custom fabicon to enhance brand identity and improve user experience.
5. **Minimalist UI**: A clean and simple interface that emphasizes usability and minimizes distractions.

## 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: A single-page layout featuring a hero section, user login area, contact form, and footer. The hero section introduces the app, while the contact form is prominently displayed for easy access.

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

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React app with TypeScript using Create React App or a similar template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Components**:
   - HeroSection: Introduces the app's purpose.
   - LoginForm: Handles user authentication.
   - ContactForm: Captures user messages and sends them to the specified email address.
4. **Implement Routing**: Use React Router for navigation if needed, but keep it simple since this is a web app.
5. **Set Up Email Sending**: Use a service like EmailJS or a backend solution to handle the sending of emails from the contact form.
6. **Design Components**: Apply the minimalist design principles using Tailwind CSS classes, ensuring adherence to the specified color and typography.
7. **Test Responsiveness**: Ensure the application works well on various devices and screen sizes.
8. **Deploy the Application**: Choose a hosting solution (e.g., Vercel, Netlify) to deploy the web app and make it live.

## USER EXPERIENCE
Users will experience a straightforward journey from landing on the application to logging in and using the contact form. The login process is simple, and once authenticated, users can easily navigate to the contact form. The minimalist design ensures that users focus on the essential functions without unnecessary distractions, providing a seamless interaction flow.