Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a premium student housing marketplace specifically for international students attending private universities in Spain. The platform aims to facilitate connections between students and potential roommates through an engaging and modern user interface, combining elements of a traditional property listing site with a more interactive experience reminiscent of dating apps.

## CORE FEATURES
1. **Landing Page**: An engaging hero section that introduces the platform with a catchy headline and a university selection dropdown, leading to a prominent call-to-action (CTA) button.
2. **Progressive Onboarding**: A full-screen questionnaire wizard that allows users to express their preferences through sliders and clickable options, enhancing user engagement without requiring immediate registration.
3. **Login Wall**: An authentication modal that appears after users select their preferences, displaying a success message and prompting them to register via Google or Apple.
4. **Results Dashboard**: A split-screen layout showcasing available properties with a map and property grid, featuring high-quality images, prices, and utility icons to facilitate quick decision-making.
5. **Property Detail View**: A dedicated section for detailed property information, including a gallery, roommate compatibility scores, and a secure booking button, ensuring a smooth user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a clean white/light gray background complemented by a premium primary color (deep electric blue or emerald green) and vibrant accents for interactive elements.
- **Layout**: 
  - Hero section with a full-width image and centered text.
  - Progressive onboarding displayed as a full-screen modal with a clear progress bar.
  - Results dashboard with a split-screen layout (desktop) and a stacked list view (mobile).
- **Typography**: Use modern, sans-serif fonts for headings and body text to maintain a clean and readable interface.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for modern UI components
- **State Management**: React's Context API or Zustand for global state management

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and other necessary dependencies.
2. **Create the Landing Page**: Develop a hero section with the specified headline, dropdown for university selection, and CTA button. Ensure the design aligns with the visual specifications.
3. **Implement the Progressive Onboarding**: Create a full-screen wizard component that transitions smoothly between steps (preferences about heat, dinner time, and house vibe) with interactive elements.
4. **Develop the Login Wall**: Create an auth modal that displays after onboarding, including a loading spinner and buttons for Google and Apple login.
5. **Build the Results Dashboard**: Implement the split-screen layout displaying property cards with images, prices, and badges. Ensure responsiveness for mobile views.
6. **Design the Property Detail View**: Create a detailed view for each property, including an image gallery, roommate compatibility section, and a sticky booking button.

## USER EXPERIENCE
Users will first land on a visually appealing page that establishes trust and encourages them to find their ideal roommates. The onboarding process is designed to be intuitive and engaging, allowing users to express preferences without feeling overwhelmed. After completing the onboarding, users will be prompted to log in before receiving tailored property recommendations, enhancing the overall user experience by ensuring relevant matches. The results dashboard and property detail views provide a seamless flow for users to explore options and facilitate quick decision-making, leading to high conversion rates.

This prompt is structured to guide the development of a minimalist light application that resonates with the user's vision while ensuring a robust user experience.