Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a comprehensive e-commerce web application consisting of 5 pages. The primary purpose is to provide users with a seamless shopping experience that showcases products effectively and facilitates easy navigation and purchasing.

## CORE FEATURES
1. **Homepage**: A welcoming landing page that highlights featured products, promotions, and brand messaging, designed to engage visitors immediately.
2. **Product Listing Page**: A searchable and filterable product grid displaying all available products with images, prices, and quick view options.
3. **Product Detail Page**: Detailed information about each product, including images, descriptions, specifications, and an "Add to Cart" button.
4. **Shopping Cart**: A user-friendly cart that displays selected items, allows quantity adjustments, and provides an easy checkout button.
5. **Checkout Page**: A streamlined checkout process where users enter shipping and payment information, review their order, and confirm the purchase.

## 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 layout will consist of a top navigation bar, a central content area for product displays, sidebars for filters, and a footer with links to policies and social media.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit (for managing cart state and user sessions)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build a responsive layout incorporating a navigation bar, footer, and main content area.
3. **Implement Routing**: Use React Router to set up routes for the homepage, product listing, product detail, shopping cart, and checkout pages.
4. **Design UI Components**: Utilize shadcn/ui for building the necessary UI components while applying Tailwind CSS for styling.
5. **State Management**: Set up Redux Toolkit to manage the shopping cart and product data.
6. **Create Pages**: Develop each page (homepage, product listing, product detail, cart, checkout) with corresponding functionality.
7. **Testing**: Conduct thorough testing for responsiveness and user experience across devices.
8. **Deployment**: Prepare and deploy the application to a hosting platform.

## USER EXPERIENCE
Users will begin their journey on the homepage, where they can explore featured products. They can easily navigate to the product listing page to browse all items, view detailed information on specific products, and add them to their cart. The checkout process is designed to be straightforward, minimizing the number of steps required to complete a purchase. Throughout the experience, the design focuses on clarity and ease of use, ensuring users can navigate without confusion.