Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for users in Nigeria who are looking to buy cars. The website will serve as a centralized platform where potential buyers can view listings of available cars along with seller details, facilitating a straightforward and effective buying process.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures the essence of the platform, with a clear call-to-action for users to browse available cars.
2. **Car Listings**: A section displaying a grid or list of cars for sale, including essential details like make, model, price, and seller contact information.
3. **Search Functionality**: An intuitive search bar allowing users to filter cars by various criteria such as price range, brand, and model.
4. **Seller Information**: Each listing will include a dedicated section for seller details, enabling buyers to easily contact the seller.
5. **Responsive Design**: The website will be fully responsive, ensuring an optimal experience on both desktop and mobile devices.
6. **Contact Section**: A simple contact form for inquiries, allowing users to get in touch for more information.

## 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 consist of a header, hero section, car listings section, and a footer, with clear navigation to enhance user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for a landing page, but could implement simple state management using React's built-in hooks if necessary.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Components**: Build the main components including Header, Hero, Car Listings, and Footer.
3. **Design Layout**: Integrate the design specifications into the components, ensuring to maintain a minimalist aesthetic.
4. **Implement Car Listings**: Create a mock data file or use a simple API to fetch car listings and display them dynamically in the Car Listings component.
5. **Add Search Functionality**: Implement a search bar that filters car listings based on user input.
6. **Create Contact Form**: Develop a simple contact form for user inquiries.
7. **Test Responsiveness**: Utilize Tailwind CSS classes to ensure the design is responsive across different devices.

## USER EXPERIENCE
Users will be greeted with a clean hero section that prompts them to explore car listings. The car listings will be displayed in an organized manner, allowing users to quickly browse through options. A search bar will enable them to filter results easily, and each listing will provide essential seller information for direct contact. The minimalist design will ensure that the focus remains on the cars available for sale, enhancing user engagement and satisfaction.