Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for an e-commerce platform specifically targeting Eid celebrations. It offers customers a selection of premium Eid combo packages, allowing them to choose from three curated options for a seamless shopping experience. The main purpose is to facilitate easy ordering with a stress-free checkout process.

## CORE FEATURES
1. **Eid Combo Packages**: Display three distinct premium package options with detailed descriptions and prices, allowing users to compare and select their preferred package.
2. **Easy Order Placement**: A streamlined checkout process that minimizes user efforts, enabling quick and hassle-free order placements.
3. **Responsive Design**: The application will adapt to various screen sizes, ensuring a consistent and user-friendly experience on mobile and desktop devices.
4. **Secure Payment Options**: Integration of secure payment gateways to facilitate safe transactions, ensuring customer confidence while ordering.
5. **User Reviews and Ratings**: Allow customers to leave feedback and ratings for products, enhancing trust and aiding new customers in their purchasing decisions.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring a clean and simple layout with ample white space to enhance readability and focus on product offerings.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A grid layout for product displays, with a prominent header showcasing the Eid collection, followed by sections for each package. The footer includes contact information and social media links.
- **Typography**: Use a sans-serif font for a modern look, with larger headings for product names and smaller text for descriptions and pricing to create a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, allowing for efficient and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built responsive components that fit within the minimalist aesthetic.
- **State Management**: Use React Context API or Zustand for state management, ensuring a smooth user experience without unnecessary re-renders.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application with TypeScript support.
2. **Install Tailwind CSS**: Follow the official Tailwind CSS documentation to integrate it into the application for styling.
3. **Create Core Components**: Develop reusable components such as Header, ProductCard, and Footer.
4. **Build Layout Structure**: Implement the grid layout for displaying the Eid combo packages using Tailwind CSS classes.
5. **Integrate Payment Gateway**: Choose and integrate a payment solution (e.g., Stripe or PayPal) to handle transactions securely.
6. **Implement User Reviews**: Create a section for user feedback on products, incorporating form elements for submitting reviews.
7. **Test Responsiveness**: Ensure the application works seamlessly across different devices and screen sizes by conducting thorough testing.
8. **Deploy the Application**: Use platforms like Vercel or Netlify for deployment, ensuring the application is accessible to users.

## USER EXPERIENCE
The user journey begins with a clean landing page showcasing the Eid combo packages. Users can easily navigate through the offerings, view detailed descriptions, and select their desired package. The checkout process is straightforward, requiring minimal information to place an order. After purchasing, users can leave reviews, contributing to a community-driven feedback system that enhances the shopping experience for future customers. The overall design emphasizes simplicity, making the application easy to use for all demographics.