Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The **School Food Delivery** web application is a modern, mobile-friendly platform designed for students to order food in advance and collect it at school. It aims to simplify the food ordering process, providing students with an easy way to select meals, pay, and choose convenient collection points.

## CORE FEATURES
1. **Home Page**
   - Displays available food options and restaurants, highlights popular meals and current promotions, and features a prominent "Order Now" button for easy access.

2. **Food Menu**
   - Lists food items with images, names, descriptions, and prices organized into categories such as burgers, rice, drinks, and snacks, allowing students to add items to their cart.

3. **Advance Ordering**
   - Enables students to place orders the night before and select their preferred collection date and time.

4. **School Delivery Points**
   - Allows students to choose designated collection points within the school, ensuring clarity on where to pick up their orders.

5. **Payment Options**
   - Supports various payment methods, including QR payments and mobile payments like MoneyMoji, with clear status updates on payment after ordering.

6. **Discount & Rewards System**
   - Implements a points system for students to earn rewards with their orders, allowing accumulated points to unlock discounts and showing the current points balance.

## 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 consists of a header with the logo and navigation, a hero section showcasing featured meals, a grid layout for the food menu, and clear sections for ordering, payment, and rewards.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and shadcn/ui for styling and UI components.

2. **Create the Main Components**
   - Develop the Home Page component with navigation and hero section.
   - Create the Food Menu component to display food items in a grid format.
   - Implement the Advance Ordering component to allow date and time selection.
   - Build the School Delivery Points component to choose collection locations.

3. **Integrate Payment System**
   - Implement payment methods, ensuring secure transactions and status updates.

4. **Set Up Discount & Rewards System**
   - Develop the logic for accumulating points and displaying rewards.

5. **Testing and Optimization**
   - Conduct thorough testing of all functionalities, ensuring responsiveness and user experience across devices.

6. **Deployment**
   - Deploy the application to a suitable hosting platform, ensuring it's accessible for students.

## USER EXPERIENCE
Students will have a seamless experience starting from the home page, where they can easily navigate through food options. They can select their meals, choose a collection time, and complete their payment with various methods. Notifications will keep them informed about their order status, and the rewards system will incentivize repeat use, enhancing overall engagement and satisfaction.