Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a fully functional browser-based experimental webshop designed for academic research on Buy Now, Pay Later (BNPL) options. This web application will simulate a realistic online purchase flow while collecting structured data for statistical analysis. The application will focus on providing a seamless user experience across desktop and mobile devices, adhering to strict experimental controls.

## CORE FEATURES
1. **Scenario Page**: Introduces participants to the shopping context, prompting them to select a pair of sneakers to purchase.
2. **Product Selection**: Displays a choice of three sneakers with identical layouts and pricing, ensuring neutrality in branding and style.
3. **Checkout Process**: Allows participants to select a payment method, including a manipulated BNPL option, with visibility into repayment conditions based on experimental variables.
4. **Data Recording**: Captures participant selections and timings, ensuring a single data record is generated for each participant.
5. **Post-Choice Survey**: Gathers participant feedback on the BNPL experience through manipulation checks and secondary measures.
6. **Data Storage and Export**: Utilizes a backend database for structured data collection, ensuring easy export as CSV for analysis.

## 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 will consist of a vertical flow for the scenario page, product selection, and checkout, ensuring a logical progression with clear navigation cues.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and modern styling.
- **UI Components**: shadcn/ui for consistent component design.
- **State Management**: Use React Context or a similar solution for managing state across the application.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Develop the Scenario Page component with a clear call-to-action button.
   - Build the Product Selection component that displays sneaker options with the necessary data attributes.
   - Implement the Checkout Page component to handle payment selections and BNPL manipulations.
3. **Data Management**:
   - Set up state management to capture user selections and timing data.
   - Integrate with a backend service (like Supabase) to store participant records securely.
4. **Survey Implementation**: Create the Post-Choice Survey component to collect feedback from participants after their purchase.
5. **CSV Export Functionality**: Implement data export capabilities to allow for easy analysis of collected data.
6. **Testing and Optimization**: Conduct thorough testing on both desktop and mobile devices to ensure functionality and responsiveness.

## USER EXPERIENCE
Participants will navigate through a straightforward flow starting from the scenario introduction to product selection and checkout. Each interaction will be designed to minimize distractions, ensuring clarity and focus on the purchasing process. The use of consistent branding and minimalistic design will enhance the overall experience, allowing participants to concentrate on their choices without unnecessary interruptions. The data collection process will be seamless, ensuring that each participant's experience is smooth and adheres to the experimental design requirements.