Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an e-commerce web app designed for selling peptide products, specifically GHK-Cu. The platform aims to provide a seamless shopping experience with a focus on simplicity and clarity, allowing users to easily browse and purchase products.

## CORE FEATURES
1. **Product Catalog**: A comprehensive listing of peptide products with high-quality images, descriptions, and pricing information.
2. **Product Details Page**: A dedicated page for each product featuring in-depth information, usage instructions, customer reviews, and related products.
3. **Shopping Cart**: A user-friendly shopping cart that allows users to easily add, remove, and update quantities of products before checkout.
4. **Secure Checkout Process**: A streamlined, multi-step checkout process that ensures user data security and provides various payment options.
5. **User Account Management**: Users can create accounts to track orders, manage preferences, and save payment information for future purchases.
6. **Responsive Design**: An adaptable layout that ensures usability across various devices, providing an optimal shopping experience on desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on content. The overall aesthetic should evoke trust and professionalism.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: Utilize a grid system for the product catalog, with clear separation between product items. The header includes a logo, navigation links, and a shopping cart icon, while the footer contains links to customer support and company information.
- **Typography**: Use a clean sans-serif font for body text (e.g., Inter or Helvetica) and a bolder variant for headings to establish a clear hierarchy. Maintain consistent font sizes with a focus on readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and scalability.
- **Styling**: Tailwind CSS for rapid styling with utility-first CSS classes.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible UI components that align with the minimalist design.
- **State Management**: Use React Context API or Redux for managing global state, such as user authentication and shopping cart data.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize the project using Create React App with TypeScript and install Tailwind CSS.
2. **Design the Layout**: Create the main layout components such as Header, Footer, and ProductGrid using Tailwind CSS for styling.
3. **Implement Routing**: Set up React Router for navigation between the home page, product details, and user account pages.
4. **Develop Core Features**: 
   - Build the Product Catalog component to fetch and display products from a mock API or local JSON data.
   - Create the Product Details page to display detailed information upon clicking a product.
   - Set up the Shopping Cart functionality, allowing items to be added and removed.
   - Implement the Checkout process with forms for user information and payment.
5. **User Account Management**: Create user registration and login functionality with local storage for session persistence.
6. **Test Responsiveness**: Ensure all components are responsive and adjust layout for different screen sizes.

## USER EXPERIENCE
The user journey begins on the Product Catalog page, where users can easily scroll through available peptides. Clicking on a product directs them to a detailed page with all the information needed to make a purchase decision. Users can add items to their shopping cart and proceed to a straightforward checkout process, ensuring a pleasant and efficient shopping experience. The design's minimalist approach emphasizes content while maintaining an intuitive interface, making navigation effortless.