Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Company Details Integration Application

## APPLICATION OVERVIEW
This web application is designed to seamlessly connect to Companies House, enabling users to input a company name and automatically retrieve essential company details, including registration number, year-end, and filing due date. The application focuses on delivering a straightforward user experience through a minimalist interface, ensuring quick access to crucial information.

## CORE FEATURES
1. **Company Name Input**: A user-friendly text input field where users can enter the name of the company they wish to query.
2. **Automatic Data Retrieval**: Once the company name is submitted, the application automatically fetches and populates company details from Companies House.
3. **Display Company Information**: A dedicated section displays the retrieved information, including registration number, year-end, and filing due date, in a clear and concise manner.
4. **Error Handling**: Informative messages that guide users in case the company name is invalid or data retrieval fails, ensuring a smooth user experience.
5. **Responsive Design**: The application will adapt to various screen sizes, maintaining functionality and aesthetics on both desktop and mobile devices.
6. **Minimalist Aesthetic**: The entire interface is designed to be clean and simple, emphasizing ease of use and readability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, ample white space, and a limited color palette that enhances usability and readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure optimal contrast and legibility.
- **Layout**: A single-column layout that centers around the company name input field at the top, followed by the populated company details below. Each section is separated by generous spacing to maintain clarity and focus.
- **Typography**: Use a sans-serif font, such as Inter or Roboto, for a modern look. Headings should be bold and larger, with body text in a standard size for easy reading. Ensure a clear hierarchy with appropriate font weights and sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type-checking and improved development speed.
- **Styling**: Utilize Tailwind CSS for rapid styling and maintaining a consistent design language.
- **UI Components**: Implement shadcn/ui for ready-to-use components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management for simplicity, unless a more complex state management solution is warranted by future feature expansions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Components**: Develop the main components, including:
   - CompanyInput: for the user to input the company name.
   - CompanyDetails: to display the fetched company information.
4. **Integrate API**: Implement the connection to Companies House API to retrieve company details based on user input.
5. **Handle Errors**: Create error handling mechanisms to display appropriate messages for invalid entries or API failures.
6. **Style Components**: Use Tailwind CSS classes to style the components according to the minimalist design specifications.
7. **Implement Responsiveness**: Ensure that all components are responsive by utilizing Tailwind’s built-in responsive utility classes.

## USER EXPERIENCE
Users will interact with the application by typing a company name into the input field. Upon submission, the application will fetch and display relevant company details in a clean and organized format. If an error occurs, the user will receive clear feedback to guide them in correcting their input. The responsive design ensures that users have a consistent experience on any device, enhancing usability and satisfaction.