Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application for an online pharmacy specializing in weight loss, pain medication, anti-anxiety, and sleep aid products. The main purpose of the application is to provide users with a seamless shopping experience, allowing them to browse products, access information, and make purchases with ease while ensuring compliance with regulatory standards.

## CORE FEATURES
1. **Product Catalog**: A comprehensive listing of available medications, categorized by type (weight loss, pain relief, anti-anxiety, sleep aids) with detailed descriptions, pricing, and images.
2. **Search and Filter Functionality**: Users can easily search for specific products or filter results based on categories, price range, and other relevant attributes.
3. **Shopping Cart**: An intuitive shopping cart feature that allows users to add products, view their selections, and proceed to checkout seamlessly.
4. **User Authentication**: Secure user registration and login functionality enabling users to create accounts, track orders, and manage personal information.
5. **Checkout Process**: A streamlined checkout process that includes payment integration and an option for prescription upload, ensuring compliance and safety.
6. **Contact and Support**: A dedicated section for customer support, including FAQs, live chat, and contact forms for user inquiries.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean, simple layout with ample white space to enhance readability and user focus.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast for readability and a pleasant browsing experience.
- **Layout**: The main layout will utilize a grid system for the product catalog, with a fixed header for navigation and a footer containing legal information and links to privacy policies.
- **Typography**: Use of modern sans-serif fonts for headings (e.g., Montserrat or Roboto) and a clean, legible body font (e.g., Open Sans) to maintain a professional appearance and enhance user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iterations and responsive layouts.
- **UI Components**: Leveraging shadcn/ui for consistent and accessible UI components across the application.
- **State Management**: Consider using React Context API or a state management library like Redux for managing application state effectively, especially for cart and user authentication.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Layout Components**: Develop the main layout components including Header, Footer, and Main Container following the minimalist design principles.
3. **Build Product Catalog**: Implement the product catalog page using a grid layout, fetching product data from a mock API or local JSON file.
4. **Implement Search and Filter**: Add search and filter functionality to enhance product discoverability.
5. **Develop User Authentication**: Set up user authentication with registration, login, and account management features using context or a state management library.
6. **Set Up Shopping Cart**: Implement the shopping cart feature, allowing users to add, remove, and view products before checkout.
7. **Create Checkout Process**: Design and implement a user-friendly checkout process with payment integration and prescription upload options.
8. **Integrate Support Features**: Create a dedicated support section with FAQs, contact forms, and live chat functionality.

## USER EXPERIENCE
The application will prioritize user interactions that are straightforward and intuitive. Users will be able to effortlessly navigate through the product catalog, search for specific medications, add items to their cart, and complete purchases with minimal steps. The checkout process will guide users clearly through each phase, ensuring they feel secure and informed. Responsive design will ensure optimal usability across devices, from desktops to mobile phones, enhancing accessibility and engagement.