Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application for an e-commerce platform where users can browse and purchase high-quality tech products. The site will focus on a minimalist design that enhances user experience and emphasizes the products through clean layouts and an intuitive interface.

## CORE FEATURES
1. **Product Catalog**: Display a grid of products with images, descriptions, and prices. Users can filter and sort products by categories, price range, and popularity.
2. **Product Details Page**: Each product will have a dedicated page with detailed descriptions, specifications, reviews, and a prominent "Add to Cart" button.
3. **Shopping Cart**: Users can view and manage their selected items, adjust quantities, and proceed to checkout. The cart will dynamically update as items are added or removed.
4. **Checkout Process**: A streamlined checkout experience that collects shipping information, payment details, and order confirmation. 
5. **User Authentication**: Users can create accounts to save their information, view order history, and manage their profiles.
6. **Responsive Design**: The application will be fully responsive to ensure an optimal experience on both desktop and mobile devices.

## 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 feature a header with navigation links, a hero section for promotions, a product grid for the catalog, and a footer with contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or Context API as an alternative for simpler state management)

## IMPLEMENTATION STEPS
1. **Setup the Project**: Create a new React application using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other necessary libraries (e.g., Redux, React Router).
3. **Configure Tailwind CSS**: Set up Tailwind CSS by creating the configuration files and including it in the project.
4. **Create Components**:
   - Build the `Header`, `Footer`, `ProductCard`, and `ProductDetails` components.
   - Implement the `ShoppingCart` and `Checkout` components.
5. **Implement Routing**: Use React Router to handle navigation between the home page, product details, and shopping cart.
6. **State Management**: Set up Redux for managing the state of the products and shopping cart.
7. **Design Layouts**: Use Tailwind CSS classes to create the minimalist design as specified, ensuring responsiveness.
8. **Testing**: Conduct thorough testing to ensure all features work as intended and the design is consistent across devices.

## USER EXPERIENCE
Users will arrive at a clean landing page featuring a hero section that highlights featured products. They can easily navigate the product catalog, view detailed product information, and add items to their cart. The checkout process is designed to be quick and user-friendly, ensuring that customers can complete their purchases with minimal friction. The application will be responsive, ensuring a seamless experience on all devices, maintaining usability and accessibility throughout.