Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Home Bell App is a web application designed for testing purposes, allowing hosts to generate QR codes that guests can scan to initiate video calls for entry approval. The app facilitates seamless communication and enhances security for hosts, while collecting valuable feedback to improve its functionality and design.

## CORE FEATURES
1. **Tester Details Form**: Users provide their name, mobile number, email, role, and device name through a straightforward input form.
2. **Testing Experience Survey**: Collects feedback on the testing frequency, user role during testing, overall experience rating (1-10), and likelihood to recommend the app.
3. **Core Features Evaluation**: Users rate specific features like QR code generation, video call smoothness, host approval ease, and app performance on a linear scale (1-5).
4. **Improvement Inputs**: Allows users to check any issues faced during testing and provide detailed feedback or suggestions for improvement.
5. **Confirmation Message**: Displays a thank you message after submission, reinforcing the importance of the feedback.

## 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-column layout that guides the user through the form sections, with ample spacing between each section to enhance readability and user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context for managing form state and feedback submission.

## IMPLEMENTATION STEPS
1. **Set Up React Application**: Initialize a new React application using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create Components**: Build components for each section of the feedback form (e.g., TesterDetails, TestingExperience, CoreFeatures, ImprovementInputs).
4. **Implement Form Logic**: Use React Context to manage form state and handle submissions.
5. **Style Components**: Apply Tailwind CSS classes to ensure a minimalist design that aligns with the specified design specifications.
6. **Add Confirmation Message**: Create a confirmation component that displays after successful form submission, thanking users for their feedback.
7. **Test Functionality**: Ensure all components function correctly and the user experience flows smoothly from start to finish.

## USER EXPERIENCE
Users will start by filling out their details in a structured form, with each section clearly defined and easy to navigate. After completing the feedback sections, they will submit their responses and receive an immediate confirmation message. The app is designed to be responsive, ensuring a seamless experience across different devices. With a focus on usability, the minimalist design enhances interaction, allowing testers to provide valuable insights effectively.