Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Pawtner & Co. is a modern e-commerce web application designed for a pet supplies store, focusing on providing a premium shopping experience for pet owners. The application will feature a wide range of pet products, an engaging user interface, and seamless navigation, making it easy for users to find and purchase products for their furry friends.

## CORE FEATURES
1. **Hero Section**: An attractive hero area with a compelling headline, subheadline, and promotional buttons to encourage users to explore products and make purchases.
2. **Product Catalog**: A searchable catalog of pet supplies with category filters for easy navigation, showcasing products with images, descriptions, and prices.
3. **Shopping Cart & Checkout**: A functional shopping cart that allows users to add, remove, and modify product quantities, complete with a secure checkout process and payment options.
4. **Customer Experience Sections**: Sections for best sellers, must-try products, customer reviews, and promotional content to enhance engagement and build trust.
5. **Admin Dashboard**: A secure backend for managing products, orders, and customer information, allowing the store owner to efficiently run the e-commerce site.

## 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 header, hero section, product catalog, customer experience sections, and footer. The design will prioritize responsive layouts for various devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing application state (if necessary for complex features)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Design Layout**: Create a responsive layout structure using Tailwind CSS. This includes header, hero, product catalog, and footer sections.
3. **Implement Hero Section**: Code the hero section with text, buttons, and a background image that reflects the brand's personality.
4. **Build Product Catalog**: Develop the product catalog component with filters and product cards displaying images, names, descriptions, and prices.
5. **Create Shopping Cart**: Implement the shopping cart functionality, allowing users to add/remove items and modify quantities.
6. **Design Checkout Flow**: Set up the checkout process, including input fields for user information and payment options.
7. **Develop Admin Dashboard**: Build the admin interface for managing products, including CRUD operations and order tracking.
8. **Test Responsiveness**: Ensure that the application is fully responsive across different devices (desktop, tablet, mobile).
9. **Optimize Performance**: Optimize images and ensure fast loading times while implementing proper form validation.

## USER EXPERIENCE
Users will be greeted with a visually appealing homepage that showcases featured products and promotional content. They can easily navigate through the product catalog, filter items based on their needs, and add desired products to their cart. The checkout process is designed to be straightforward and user-friendly, ensuring that customers can complete their purchases with minimal friction. The admin dashboard allows for efficient management of products and orders, contributing to a smooth overall experience for both customers and store owners.