Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
FlexiHogar is a modern web application designed for a subscription-based housing platform aimed at young adults. It provides an intuitive and navigable interface that allows users to access their first home without hefty initial deposits or massive guarantees. The platform emphasizes affordability, certainty, and flexibility in housing options, making it accessible for young renters.

## CORE FEATURES
1. **Ahorro Simulator**: A dedicated section that visually demonstrates the savings achievable without large deposits or guarantees, enhancing user confidence in affordability.
2. **Transparent Monthly Payment Panel**: A clear and concise summary of a single monthly payment that includes rent and basic utilities (electricity, water, internet), ensuring users have predictable expenses with no hidden fees.
3. **Digital Tools for Flexibility**: Features such as a real-time energy consumption monitor and adaptable contract options, along with 24/7 support for incident management, empowering users with independence in their living arrangements.
4. **User-Friendly Navigation**: Intuitive design elements and interactive buttons that allow seamless exploration of the platform’s features and benefits.
5. **High-Quality Visuals**: Inclusion of high-resolution images that showcase properties and lifestyle benefits, appealing directly to the young audience.

## 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**: A single-page layout divided into sections: Hero, Features, Testimonials, and Contact, with a clear visual hierarchy and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand for state management (optional, depending on complexity)

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and install required dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Design the main layout with sections for the Hero, Features, Testimonials, and Contact areas, ensuring responsiveness for different screen sizes.
3. **Implement Core Features**:
   - Develop the Ahorro Simulator with input fields to calculate potential savings.
   - Create the Transparent Monthly Payment Panel that aggregates rent and utility costs.
   - Integrate digital tools for flexibility, including the energy consumption monitor.
4. **Add High-Quality Visuals**: Source and integrate high-resolution images that resonate with the target audience.
5. **Enhance User Experience**: Focus on creating intuitive navigation and interactive elements, ensuring smooth transitions between sections.
6. **Testing**: Conduct thorough testing across different devices and browsers to ensure functionality and responsiveness.

## USER EXPERIENCE
Users will start on the Hero section, where they are introduced to FlexiHogar's value proposition. They can easily navigate to the Features section to explore the savings simulator and monthly payment transparency. Interactive buttons will guide them through the digital tools offered. The design will prioritize ease of use and clarity, ensuring that young adults feel confident and informed about their housing choices. The experience will be further enhanced by responsive design, making it accessible on both desktop and mobile devices.