Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
BrandedLivingCollection is a web application designed to enhance the experience of browsing and viewing properties. Its primary purpose is to offer users a seamless platform for exploring real estate listings with features that prioritize simplicity and efficiency.

## CORE FEATURES
1. **Top Scroll Navigation**: Every time the user navigates to a new page, the view resets to the top, ensuring a consistent and user-friendly browsing experience.
2. **Detailed Image Viewing**: Users can click on property images to view them in greater detail, mimicking the interactive experience found on popular real estate websites.
3. **Logo Replacement**: The platform's branding will be updated throughout the application, replacing all instances of “HPR” and “HotelPrivateResidence” with “BrandedLivingCollection.”
4. **Synchronized Search Filters**: The search bar filter options will be synchronized with the brand selections available in the admin panel CMS for a cohesive user experience.
5. **Responsive Design**: The application will be fully responsive, ensuring an optimal experience on both desktop and mobile devices.
6. **White Space Utilization**: Ample white space will be incorporated to keep the interface clean and promote readability.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design will adhere to a minimalist aesthetic, prioritizing a clean and simple interface with a focus on functionality and ease of use.
- **Color Mode**: The light theme will utilize dark text on light backgrounds to enhance readability and maintain user comfort.
- **Layout**: A grid layout will be employed for property listings, with a central content area for images and details, complemented by a sidebar for search filters. Navigation elements will be positioned at the top of the page for easy access.
- **Typography**: Use sans-serif fonts such as Open Sans or Roboto for body text, ensuring clarity and modernity. Headings will utilize bold weights to establish a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application development and type safety.
- **Styling**: Tailwind CSS will be used for rapid styling and responsive design implementation.
- **UI Components**: Utilize shadcn/ui components for consistency and ease of use across the application.
- **State Management**: Redux or Context API can be integrated for efficient state management if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize the React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Logo and Branding Update**: Replace all instances of the old logo and platform names in the codebase with the new branding.
3. **Implement Top Scroll Navigation**: Create a custom hook to ensure every page load resets the scroll position to the top.
4. **Develop Image Viewing Feature**: Implement a modal component that displays enlarged images when a user clicks on a property image.
5. **Synchronized Search Filters**: Connect the frontend search bar to the CMS backend to dynamically populate filter options based on admin settings.
6. **Responsive Design**: Utilize Tailwind CSS classes to ensure all components adapt gracefully to different screen sizes.
7. **Testing and Optimization**: Conduct thorough testing to ensure all features work seamlessly and optimize performance for speed and responsiveness.

## USER EXPERIENCE
Users will enjoy a streamlined experience starting from the homepage where they can quickly navigate through property listings. Clicking on a property image will open a detailed view in a modal, allowing users to inspect images closely. The synchronized search filters will empower users to refine their searches intuitively. Overall, the application aims to provide a clean, distraction-free environment that enhances property exploration and discovery.