Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project will be a web application designed for managing an e-commerce platform that supports both Arabic and French languages. The main purpose is to provide an admin panel for adding products and adjusting website settings, including color changes, while ensuring a clean and user-friendly experience.

## CORE FEATURES
1. **Multilingual Support**: Users can switch between Arabic and French languages seamlessly, ensuring accessibility for a wider audience.
2. **Admin Panel**: A secure interface for administrators to add, edit, and delete products, as well as manage categories and inventory.
3. **Color Customization**: Admins can change the primary color of the website through the settings panel, allowing for brand consistency.
4. **Product Management**: Features for uploading product images, descriptions, prices, and stock levels.
5. **User Authentication**: Secure login for admin users to access the admin panel and manage products.
6. **Responsive Design**: The application will be fully responsive, ensuring a smooth experience on both desktop and mobile devices.

## 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 layout will feature a top navigation bar for easy access to the admin panel, a sidebar for navigation links (products, categories, settings), and a main content area for managing product details and settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state across the application.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Multilingual Support**: Integrate a library such as i18next for handling translations between Arabic and French.
3. **Create Admin Authentication**: Set up a secure authentication system to protect the admin panel using JWT or similar.
4. **Build Admin Panel Layout**: Design the overall layout including the navigation bar and sidebar using Tailwind CSS.
5. **Develop Product Management Features**: Create CRUD functionalities for products including forms for adding and editing product details.
6. **Implement Color Customization**: Develop a settings page where admins can change the primary color of the website, updating the state dynamically.
7. **Ensure Responsiveness**: Use Tailwind's responsive utilities to ensure the application looks great on all devices.
8. **Testing**: Conduct thorough testing including functional tests for all features and user acceptance testing for the admin panel.

## USER EXPERIENCE
Users will interact with a clean, minimalist interface that focuses on usability. Admins will log in to a secure dashboard where they can easily navigate between product management and settings. The multilingual toggle will allow seamless switching between languages, enhancing accessibility. Color customization will provide a quick way to adjust branding, ensuring the application meets the business's aesthetic needs. The responsive design will ensure that all features are accessible on both desktop and mobile devices, providing a consistent experience across platforms.