Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a mini pharmacy for students living in dormitories, providing easy access to essential medications when they are sick. The app allows users to quickly find and order necessary medicines, ensuring convenience and timely access to healthcare products.

## CORE FEATURES
1. **Product Catalog**: A searchable list of available medications, including descriptions, prices, and dosage information.
2. **Shopping Cart**: A feature that allows users to add items, review their selections, and modify quantities before checkout.
3. **User Registration/Login**: Secure authentication for users to create accounts, manage their profiles, and view order history.
4. **Order Processing**: A streamlined checkout process that enables users to complete purchases using various payment methods.
5. **Delivery Options**: Selection of delivery methods, including standard and express delivery, with tracking options.
6. **Contact Support**: An easy-to-use contact form for users to reach out for assistance or inquiries regarding their orders.

## 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 consist of a top navigation bar, a prominent hero section for promotions, a grid layout for the product catalog, and a footer with contact information and links.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: 
   - Build the navigation bar component.
   - Develop the hero section showcasing the mini pharmacy's mission and featured products.
   - Create the product catalog component using a grid layout.
   - Implement the shopping cart functionality with add/remove features.
3. **Set Up Routing**: Use React Router to manage navigation between the home page, product catalog, and user account sections.
4. **Implement Authentication**: Set up user registration and login using a secure method (e.g., JWT).
5. **Integrate Payment Processing**: Use a payment gateway API to handle transactions securely.
6. **Deploy the Application**: Choose a hosting service to deploy the application (e.g., Vercel, Netlify).

## USER EXPERIENCE
> > > > > Users will have a straightforward experience, starting with the homepage that displays the hero section and product listings. They can easily search for medications, add items to their cart, and proceed to checkout. The app will provide feedback during interactions, such as confirming added items and processing orders, ensuring a smooth and engaging user journey. Responsive design principles will be applied to ensure accessibility on various devices.`code``code`