Simple and trustworthy web form for collecting bank refund details.
Generated Prompt
```markdown ## APPLICATION OVERVIEW This application is a web form designed to facilitate the collection of bank refund details for international users seeking refunds via bank transfer. The application prioritizes clarity and user trust, ensuring a straightforward and compliant experience for users across various countries. ## CORE FEATURES 1. **Recipient Full Name Field**: A required input field for users to enter their full name, ensuring accurate identification for the refund process. 2. **Country Selector**: A dropdown menu allowing users to select their bank's country, providing a clear and straightforward method for country identification. 3. **City Input Field**: A text box specifically for users making non-EU bank transfers, enabling them to enter the relevant city for their bank. 4. **Primary Action Button**: A clearly labeled button for users to proceed with the submission of their refund details, ensuring an intuitive flow. 5. **Single-Column Layout**: A linear arrangement of form fields to enhance clarity and ease of completion, guiding users through the process step by step. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design features a clean and simple aesthetic with ample white space, a minimal color palette, and a strong focus on typography to ensure readability and user comfort. - **Color Mode**: Light theme with dark text on light backgrounds to promote contrast and enhance readability. - **Layout**: A single-column layout that guides users through each step in a linear fashion, minimizing distractions and simplifying the completion of the form. - **Typography**: Use San Francisco (SF Pro) typography for all text elements, ensuring a modern and professional look. Maintain a clear hierarchy with larger font sizes for headings and smaller sizes for labels and input fields. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a scalable and type-safe web application. - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design implementations while maintaining consistency. - **UI Components**: Utilize shadcn/ui for standard form components to ensure best UX practices are followed. - **State Management**: Not required for this implementation since the focus is on a simple form without complex state interactions. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Create a new React project using Create React App with TypeScript support. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project by running the appropriate npm install commands. 3. **Create Form Component**: Develop a functional form component that includes input fields for the recipient's full name, country selector, and city input. 4. **Style the Form**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring ample white space and a clean layout. 5. **Implement Accessibility**: Ensure all form elements are accessible, with appropriate labels and ARIA roles where necessary. 6. **Test Responsiveness**: Verify that the form is responsive across various devices, adjusting styles as needed to maintain usability. ## USER EXPERIENCE Users will interact with the form in a clear and straightforward manner. Upon accessing the application, they will see a single-column layout that prompts them to enter their full name first. After that, they will select their bank's country from a dropdown, followed by entering their city if applicable. The primary action button will be prominently displayed to encourage users to proceed, ensuring that the flow feels natural and unencumbered. The overall experience is designed to be user-friendly, with a focus on clarity and ease of completion, making it suitable for an international audience. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
