Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that serves as a comprehensive platform for exploring tourist attractions in the Serra Gaúcha region of Rio Grande do Sul, Brazil. Users will have the ability to navigate through various cities, filter attractions by cost (free and paid), and sort them based on user ratings. The application will enhance the user experience by providing a clean interface for easy exploration and discovery of local attractions.

## CORE FEATURES
1. **City Navigation**: Users can select a city to view all its tourist attractions with clear divisions for each location.
2. **Attraction Filtering**: Options to filter attractions based on cost (free vs. paid) and sort by user ratings from highest to lowest.
3. **Search Functionality**: A search bar allowing users to find specific attractions quickly based on their interests.
4. **Attraction Details**: Each attraction will have a dedicated page that includes descriptions, images, visitor ratings, and costs.
5. **User Ratings and Reviews**: Users can submit their own ratings and reviews to share experiences with other visitors.
6. **Responsive Design**: The application will ensure a smooth experience across devices, adapting layouts for desktops, tablets, and mobile phones.

## 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 will feature a header with navigation, a hero section highlighting popular attractions, followed by a grid or list view of attractions with filtering options on the sidebar.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (based on preference)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS.
2. **Create Core Components**: Develop core UI components such as Header, AttractionCard, FilterSidebar, and SearchBar.
3. **Implement Routing**: Set up React Router to manage navigation between different city views and attraction detail pages.
4. **Data Management**: Create a mock data structure for attractions and implement state management to handle user interactions and filtering.
5. **Integrate User Ratings and Reviews**: Develop functionality for users to submit and display ratings and reviews for each attraction.
6. **Responsive Design**: Use Tailwind CSS to ensure that all components are responsive and provide a good user experience on various devices.
7. **Testing**: Conduct testing for functionality and usability across different browsers and devices before launch.

## USER EXPERIENCE
Key user interactions will include selecting a city from the navigation menu, using the filter sidebar to view free or paid attractions, and utilizing the search bar to quickly find specific locations. Users will be able to click on individual attractions to view more details including images, descriptions, and other users' reviews, facilitating informed decisions on what to visit in the Serra Gaúcha region. The overall experience will be intuitive, allowing users to easily explore and enjoy the rich offerings of the area.