Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as a platform for users to consult a list of pharmacies on duty across Spain, filtered by province. Users can click on each pharmacy to view detailed information, while pharmacy owners can create accounts to add additional details about their establishments for an annual fee of €10.

## CORE FEATURES
1. **Pharmacy Listings**: A searchable and filterable list of pharmacies categorized by provinces, allowing users to find pharmacies easily.
2. **Pharmacy Detail View**: Clicking on a pharmacy will display a comprehensive profile, including contact information, services offered, and operation hours.
3. **Owner Registration**: Pharmacy owners can register and create accounts to manage their pharmacy listings.
4. **Account Management**: Owners can log in to update their pharmacy information and pay the annual fee.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience on both desktop and mobile devices.
6. **Admin Dashboard**: A simple admin interface to manage user accounts and pharmacy listings.

## 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 top navigation bar, a hero section for the search functionality, a grid layout for pharmacy listings, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (as needed for user authentication and state management)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Start a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Basic Components**: Develop the main components including Header, Footer, PharmacyCard, and PharmacyDetail components.
3. **Implement Routing**: Use React Router for navigation between the listings and detail views.
4. **Build Listings Feature**: Create a pharmacy listing page that fetches data from an API or a mock data file and displays it in a grid format.
5. **Detail View Functionality**: Implement the detail view to show the complete information of a selected pharmacy.
6. **User Authentication**: Set up user registration and login functionalities for pharmacy owners using context or Redux for state management.
7. **Payment Integration**: Implement a simple payment process for the annual fee using a payment gateway like Stripe.
8. **Testing and Deployment**: Conduct thorough testing for responsiveness and functionality, then deploy the application using platforms like Vercel or Netlify.

## USER EXPERIENCE
Users will have an intuitive experience starting from the landing page where they can search pharmacies by province. The layout will be clean, with easy navigation to view detailed information about each pharmacy. Pharmacy owners will find the registration and account management straightforward, allowing them to update their listings efficiently. The overall design will prioritize usability, ensuring that users can quickly find the information they need without unnecessary complications.