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 groceries for quick payment. The app aims to reduce waiting times in stores by enabling users to either scan an item or enter its ID and complete their purchase online.

## CORE FEATURES
1. **Navigation Bar**: A persistent nav bar featuring links to the Cart, Settings, Location, and Login for easy access.
2. **QR Scanner and ID Entry**: A prominent QR scanner that utilizes the device's camera, accompanied by an "Enter ID" button for manual entry.
3. **Login Page**: A dedicated login page for user authentication to access personalized features.
4. **Example Cart**: A mock cart feature that displays a sample cart with 3-4 items, showing the total bill and payment options (Pay Online or Pay at Counter).
5. **Previous Purchases Section**: A section on the home page that lists previous purchases from offline stores like Trends, West Side, and H&M.
6. **Store Selection**: An interactive section allowing users to select stores, complete with a search function and quick access buttons for popular stores like Trends, H&M, and WestSide.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing cleanliness and simplicity with ample white space. Focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds for maximum contrast and clarity.
- **Layout**: 
  - **Desktop**: The layout features the QR scanner or ID entry at the top, followed by the Store Selection feature, with the Cart and Previous Purchases displayed on the left side.
  - **Mobile**: The QR scanner is prioritized at the top, followed by the Store Selection, and then the Previous Purchases section below.
- **Typography**: Use a sans-serif font for a modern look. Headings should be bold and clear, while body text should be regular weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling that promotes rapid development and customization.
- **UI Components**: Use shadcn/ui for pre-built components that align with the minimalist design theme.
- **State Management**: Consider using React Context API or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Navigation Bar**: Implement the nav bar with links for Cart, Settings, Location, and Login.
4. **Build QR Scanner Component**: Develop the QR scanner functionality using a library like `react-qr-reader` for camera access.
5. **Implement ID Entry Feature**: Add an input field for manual ID entry below the QR scanner.
6. **Design Login Page**: Create a simple login form that captures user credentials.
7. **Create Example Cart Feature**: Develop a mock cart that showcases sample items, total bill, and payment options.
8. **Add Previous Purchases Section**: Populate this section with fake data from popular offline stores.
9. **Implement Store Selection**: Create a search functionality and buttons for rapid store selection.
10. **Blueprint Feature**: Design a visual representation of store layouts, including key areas such as male, female, and kids' sections.

## USER EXPERIENCE
Users will interact with the app by first accessing the QR scanner to quickly input items. They can select their preferred store, view previous purchases, and initiate payment through a streamlined checkout process. The application will provide a seamless experience across devices, ensuring that all features are easily accessible whether on desktop or mobile. Users will also receive visual cues and feedback throughout their interactions to enhance usability and satisfaction.app name is swift scan...it should be minimalistic and subtle colours and 0 border radius for containers... no groceries, only clothes and also add a option to delete previous purchases ... it must show store map also when we select a store and scanner button should we able to access camera.