Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern web application designed for real estate listings, focusing on a clean and aesthetic interface. The application aims to provide users with a photo-friendly experience, allowing them to easily browse, search, and interact with property listings in a visually appealing format.

## CORE FEATURES
1. **Header & Navigation**: A minimalist sticky navbar that transitions from transparent to solid on scroll, featuring a brand logo, navigation links (Rent, Buy, New Projects, Contact), a language toggle, and a '+ List Property' button.

2. **Hero Section & Floating Search Bar**: A full-width background image with a floating search capsule that includes options for property type, price range, location, and a minimalist search button.

3. **Curated Property Feed**: A responsive grid layout that showcases property cards with an interactive image carousel, minimalist tags, and essential property details such as price, title, location, and key specs.

4. **Property Detail View**: A magazine-style layout featuring a multi-photo gallery, a detailed property summary, an amenities checklist, and an embedded interactive map.

5. **High-Converting Sticky Agent Card**: A card featuring the agent's profile with direct action buttons for communication and a tour scheduling form, designed to remain accessible during browsing.

6. **Backend & Supabase Integration**: Dynamic fetching of property listings from a Supabase database, including sample mock data that enhances the initial display.

## 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 consists of a sticky header, a full-width hero section, a responsive property grid, and a detailed property view page, ensuring a seamless transition and user-friendly experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API or Zustand (if necessary for prop drilling or state management)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Header Component**: Implement the sticky navbar with navigation links, language toggle, and the '+ List Property' button.
3. **Build the Hero Section**: Design the full-width hero area with a search bar overlay using rounded styles and clear input fields.
4. **Develop the Property Feed**: Construct a responsive grid layout for property cards that supports image carousels and displays key property specifications.
5. **Design the Property Detail View**: Create a multi-photo gallery with clear summaries, amenities, and an embedded map for each listing.
6. **Integrate Supabase**: Set up the Supabase connection to fetch and display property listings dynamically, using mock data for initial development.
7. **Implement Sticky Agent Card**: Add the sticky agent card functionality to facilitate quick contact and scheduling options.
8. **Conduct responsive design testing**: Ensure the application is optimized for mobile devices, focusing on usability and accessibility.

## USER EXPERIENCE
Users will experience a seamless journey from searching for properties to viewing details. The floating search bar and sticky navigation enhance accessibility, while the responsive design ensures that users can easily navigate on any device. Interactions such as swiping through image carousels and contacting agents are designed to be intuitive and engaging, fostering a user-friendly environment.