Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a simple and intuitive input field where they can specify the amount of fake rob. The application will focus on delivering a clean user experience with a minimalist design that encourages user engagement and ease of use.

## CORE FEATURES
1. **User Input Field**: A straightforward input field allowing users to enter the desired amount of fake rob with real-time validation and feedback.
2. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across devices from desktops to mobile phones.
3. **Live Preview**: Users can see a dynamic preview of their input, helping them confirm their choices before submission.
4. **Submission Button**: A clear and accessible button that allows users to submit their input easily.
5. **Success/Error Notifications**: Visual feedback that informs users of the success or failure of their input submission.
6. **Contact Section**: A simple form for users to reach out for support or provide feedback on the application.

## 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 feature a centered input field in the hero section, with notifications and submission components placed below. The contact section will be positioned at the bottom.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - Build the InputField component with validation logic.
   - Create a SubmissionButton component styled with Tailwind CSS.
   - Implement notification components for success and error messages.
4. **Implement State Management**: Use React's state hooks or Context API to manage user input and notifications.
5. **Design Layout**: Structure the layout using Tailwind CSS for responsiveness and ensure all components are properly aligned and styled.
6. **Testing**: Conduct user testing to gather feedback on the usability and functionality of the application.
7. **Deployment**: Deploy the application using a service like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will land on a clean page with a prominent input field where they can type in the amount of fake rob. As they enter their input, they will see a live preview of their input. Upon clicking the submission button, they will receive immediate feedback on whether their submission was successful or if an error occurred. The contact section allows them to ask questions or provide feedback, enhancing user interaction with the application. The overall experience is designed to be straightforward and intuitive, ensuring users can navigate easily.