Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based platform designed to streamline the shopping experience by allowing users to scan QR codes attached to clothing or grocery items for quick purchasing. By reducing waiting times at checkout, the app enhances convenience and user satisfaction.

## CORE FEATURES
1. **Navigation Bar**: A top navigation bar featuring icons for Cart, Settings, Location, and a Login button for easy access to key functionalities.
2. **QR Scanner & ID Entry**: A prominent section for scanning QR codes that accesses the device camera, supplemented by an "Enter ID" button for manual input, allowing users to choose their preferred method of item identification.
3. **Login Page**: A dedicated login page for user authentication, ensuring secure access to personalized features and previous purchase **history**.
4. **Sample Cart Display**: A functionality that simulates the scanning process; clicking an example button displays a fake cart with 3-4 items and a total bill, offering payment options for online or counter payments.
5. **Previous Purchases Section**: A section on the homepage showcasing a history of previous purchases from popular offline stores such as Trends, West Side, and H&M.
6. **Store Selection with Search**: An interactive feature to select stores, including a search option and quick-access buttons for stores like Trends, H&M, and WestSide, enhancing user navigation.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design is clean and simple, utilizing ample white space to create a sense of openness. Focus is placed on easy-to-read typography and straightforward UI elements.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and a modern aesthetic.
- **Layout**: 
  - **Desktop**: The QR scanner or ID entry feature at the top, followed by the Store Selection section. The left sidebar will feature the Cart and Previous Purchases sections.
  - **Mobile**: The QR scanner at the top, followed by Store Selection, and then Previous Purchases for a seamless mobile experience.
- **Typography**: Utilize a sans-serif font for clean readability, with a clear hierarchy: larger font sizes for headings and smaller sizes for body text, ensuring clarity and user-friendliness.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust development and type safety.
- **Styling**: Tailwind CSS for rapid styling and responsive design.
- **UI Components**: Utilize shadcn/ui for modern and customizable UI elements.
- **State Management**: Implement context API or Redux if necessary for global state management.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and configure Tailwind CSS for styling.
2. **Create the Navigation Bar component**, implementing the Cart, Settings, Location, and Login buttons.
3. **Develop the QR Scanner component**, integrating camera access for scanning and an "Enter ID" input field.
4. **Design the Login Page**, ensuring secure user authentication and session management.
5. **Implement the Sample Cart Display functionality**, creating a mock cart with items and payment options.
6. **Build the Previous Purchases Section**, pulling in dummy data for display and ensuring a user-friendly interface.
7. **Create the Store Selection component** with search functionality and quick-access buttons for selected stores.
8. **Ensure responsive design** for both desktop and mobile layouts, testing across devices for consistent user experience.
9. **Implement the Customer Support page**, providing users with help resources and contact information.

## USER EXPERIENCE
Users will interact with the app by first accessing the QR scanner or ID entry on the homepage. Upon scanning or entering an ID, they can select a store from the provided options, view previous purchases, and access the cart for payment. The navigation bar allows easy access to all app functionalities, ensuring a seamless and efficient user journey. The minimalist design enhances focus on the core functionalities, while the responsive layout adapts to various devices for optimal usability.Use subtle colours without rounded corners and rich experience without advanced english. App name is SwiftScan.