Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Build a futuristic web application designed for premium real estate, embodying the theme of "Cosmic Luxury & Neo-Modern". This application will serve as an interactive platform for users to discover, buy, and rent luxury properties, featuring a clean and sophisticated design that enhances the visual appeal of stunning real estate listings.

## CORE FEATURES
1. **Hero Section**: A cosmic-themed hero section featuring a floating glass search bar, allowing users to filter properties by type, location, and price range.
2. **Property Listings**: Photo-friendly curated listings displayed in glow-framed cards with an interactive, swipeable multi-photo carousel for each property.
3. **Property Detail Page**: An immersive full-width gallery showcasing high-resolution images, specs matrix, and an interactive map with futuristic styling.
4. **Agent Interaction**: High-impact sticky agent box with direct chat options and a calendar picker for booking private viewings.
5. **Dynamic Data Integration**: Connects to a Supabase dynamic properties table, pre-populated with realistic luxury listings and images.
6. **User-Friendly Navigation**: Frosted glass sticky navbar with clear language toggle and high-converting CTA buttons.

## 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 layout will consist of a sticky navbar at the top, followed by a hero section, property listings in a responsive grid, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but consider using context API or Redux if needed for state management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Navbar Component**: Implement the frosted glass sticky navbar with navigation links and a language toggle.
3. **Develop the Hero Section**: Design the hero section with a cosmic background and floating glass search bar.
4. **Build Property Listing Cards**: Create glow-framed property cards with hover effects and a swipeable carousel for images.
5. **Design the Property Detail Page**: Develop a full-width hero gallery, specs matrix, and interactive map container.
6. **Implement Sticky Agent Box**: Create a sticky agent interaction box with chat options and a booking calendar.
7. **Connect to Supabase**: Set up the backend connection to Supabase and populate with mock data for luxury properties.
8. **Testing and Deployment**: Test the application for responsiveness and functionality, then deploy on a cloud service.

## USER EXPERIENCE
Users will start on the hero section, where they can search for properties using the floating search bar. They can browse through curated listings, interact with property images, and view detailed information on selected properties. The sticky agent box allows for immediate communication, enhancing the overall user experience with seamless navigation and interaction.