Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a modern, minimalist real estate website designed to showcase properties with a clean and straightforward user experience. This web application will highlight property listings, provide information about the agency, and enable potential buyers to easily navigate through essential content without unnecessary clutter.

## CORE FEATURES
1. **Property Listings**: A dedicated page displaying all available properties with high-quality images, brief descriptions, and key details like price, location, and type.
2. **Property Details Page**: An individual page for each property providing in-depth information, additional images, and contact options for inquiries.
3. **About Us**: A page to introduce the real estate agency, its mission, and team members, creating a personal connection with visitors.
4. **Contact Form**: A simple contact page for potential clients to reach out with inquiries, featuring fields for name, email, subject, and message.
5. **Search Functionality**: A search bar enabling users to filter properties by various criteria such as location, price range, and type.
6. **Mobile Responsiveness**: A design that ensures seamless experience across all devices, maintaining usability on smartphones, tablets, and desktops.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple, utilizing ample white space to create a professional appearance with a focus on typography. 
- **Color Mode**: A light theme featuring dark text on light backgrounds to enhance readability and create an inviting atmosphere.
- **Layout**: The main layout will be a single-column structure for property listings and details, with a fixed navigation bar at the top for easy access to different sections of the site.
- **Typography**: Use a sans-serif font such as "Montserrat" for headings and "Roboto" for body text, ensuring clarity and modernity. Maintain a clear hierarchy with larger font sizes for headings and appropriate spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and enhance maintainability.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid development of responsive designs.
- **UI Components**: Utilize shadcn/ui for pre-built components to maintain consistency and save development time.
- **State Management**: Use React Context API for managing global state if needed, particularly for search functionality.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Folder Structure**: Organize components, pages, and styles within the project for maintainability.
3. **Develop the Navigation Bar**: Build a responsive navigation bar that links to all main pages: Home, Properties, About Us, and Contact.
4. **Implement Property Listings Page**: Create a component to fetch and display a list of properties, including images and brief descriptions.
5. **Build the Property Details Page**: Develop a detailed view for each property, integrating a dynamic routing system to handle different property IDs.
6. **Create About Us and Contact Pages**: Design these pages with engaging content and functional forms for user interaction.
7. **Add Search Functionality**: Implement a search bar that filters the property listings based on user input.
8. **Ensure Mobile Responsiveness**: Test and adjust styles to ensure the application is fully responsive across different device sizes.

## USER EXPERIENCE
The website will guide users through a seamless experience from the moment they arrive. Users can quickly navigate the site using the top navigation bar, explore properties using filters, and view detailed pages for each listing. The contact form will be straightforward, encouraging inquiries. The minimalist design will keep users focused on the content, ensuring a pleasant browsing experience that is both efficient and visually appealing.