Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that allows users to easily compare fuel prices across France. The app will feature a user-friendly interface that includes geolocation capabilities to help users find the nearest fuel stations with the best prices, all while displaying the logos of various fuel providers.

## CORE FEATURES
1. **Geolocation Integration**: Allows users to find their current location and display nearby fuel stations automatically.
2. **Price Comparison**: Users can view and compare the prices of fuel at different stations in their vicinity.
3. **Provider Logos Display**: The app will feature logos of fuel providers for better brand recognition and a more visually appealing interface.
4. **User-Friendly Interface**: A clean and intuitive design that makes it easy for users to navigate and understand the information.
5. **Search Functionality**: Users can search for specific fuel types or stations based on their preferences.
6. **Favorites List**: Users can save their preferred stations for quick access in the future.

## 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 featuring a hero section at the top, followed by a map view for geolocation, price comparison section, and a footer with contact information and links.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Build the Layout**: Create the main layout structure including the header, hero section, map component, and footer.
3. **Implement Geolocation**: Use the Geolocation API to fetch and display the user’s current location on the map.
4. **Fetch Fuel Price Data**: Integrate with an API that provides fuel pricing information based on location.
5. **Develop the Price Comparison Feature**: Create a component to display and compare prices of different fuel types at nearby stations.
6. **Add User Interaction Features**: Implement search functionality and favorites list for users to manage their preferred fuel stations.
7. **Testing**: Conduct usability testing to ensure the app is intuitive and performs well on various devices.

## USER EXPERIENCE
Users will start on the home page where they can see their current location on a map. They can easily view nearby fuel stations and their prices. The clean interface allows users to quickly compare prices and click on provider logos for more details. Users can search for specific fuel types and add stations to their favorites for quick access later, ensuring a smooth and efficient experience throughout the application.