Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to showcase and sell vacation homes and experiences in Portugal. It features an interactive map that highlights major cities, allowing users to explore various Airbnb listings and experiences. Users can easily navigate through the content, providing a seamless experience from discovery to booking.

## CORE FEATURES
1. **Interactive Map**: A large, interactive map of Portugal displaying major cities (Lisbon, Porto, Albufeira, etc.) with hover effects that reveal images and links to specific listings.
2. **City Listings**: When users click on city dots, they are redirected to a dedicated section showcasing all available Airbnb properties and experiences in that city.
3. **Filter Options**: Users can filter the listings by category (Airbnb or experiences), making it easy to find what they're looking for.
4. **Image Slider**: Each city listing features a sliding gallery of images that showcase the properties and experiences available.
5. **Booking Integration**: Direct links to the main website for booking and payment, ensuring a smooth transaction process.
6. **About Us Section**: A brief introduction to SoFeelings, explaining the company's mission and services.

## 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 features a hero section with the interactive map, followed by the about us section, and listings arranged in a grid format with filters at the top.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API or Redux for handling application state if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Design the Layout**: Create the main layout structure with a hero section, map, and content sections using Tailwind CSS for styling.
3. **Implement the Interactive Map**: Use a mapping library (like Leaflet or Google Maps API) to create an interactive map with city markers.
4. **Create City Listing Components**: Develop components for city listings that include image sliders and links to Airbnb and experience pages.
5. **Add Filtering Logic**: Implement filtering functionality to allow users to switch between Airbnb listings and experiences.
6. **Integrate Booking Links**: Ensure that each listing links to the main website for booking and payment processing.
7. **Testing**: Test the application across different devices and browsers to ensure responsiveness and functionality.

## USER EXPERIENCE
Users will first see a clean hero section featuring the interactive map. As they hover over city dots, an image slider will appear, showing enticing visuals of listings. Clicking on a dot will lead them to a dedicated section with a filtered view of properties and experiences. The layout will be intuitive, guiding users effortlessly from exploration to booking, while the clean design enhances the overall experience.