Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as an online store for football team shirts. The main purpose is to provide a user-friendly platform where customers can browse, select, and purchase a variety of football jerseys. The application will focus on creating a seamless shopping experience while showcasing the products in a visually appealing way.

## CORE FEATURES
1. **Product Catalog**: A clean, organized display of available football shirts with images, descriptions, and prices. Users can filter and sort products based on team, size, and price range.
2. **Shopping Cart**: Users can add shirts to their cart, view selected items, and adjust quantities before proceeding to checkout.
3. **User Authentication**: Secure user login and registration functionality to allow users to manage their accounts, view order history, and save favorite products.
4. **Checkout Process**: A straightforward checkout interface that includes shipping options, payment processing, and order confirmation.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across all devices, from desktops to mobile phones.
6. **Contact and Support**: A section for users to reach out for support, including FAQs and a contact form for inquiries.

## 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 top navigation bar, a hero section displaying featured products, a grid layout for the product catalog, a shopping cart summary, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux for managing user authentication and shopping cart state

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, shadcn/ui).
2. **Create Components**: Build core components including Header, Footer, ProductCard, ShoppingCart, and CheckoutForm.
3. **Implement Routing**: Set up React Router for navigating between the home page, product catalog, shopping cart, and checkout pages.
4. **Design the UI**: Use Tailwind CSS to style components according to the specified design specifications, ensuring responsiveness.
5. **Add Functionality**:
   - Implement product filtering and sorting in the Product Catalog.
   - Develop the Shopping Cart logic to add, remove, and update items.
   - Create user authentication flow with login, registration, and account management.
6. **Integrate Payment Gateway**: Set up a payment processing solution (like Stripe) for handling transactions during the checkout process.
7. **Testing**: Perform thorough testing to ensure all features work as expected and the application is responsive across different devices.
8. **Deployment**: Deploy the application using a hosting service (such as Vercel or Netlify) and ensure the domain is properly configured.

## USER EXPERIENCE
Users will start on the homepage, greeted by a hero section showcasing featured football shirts. They can easily navigate through the product catalog, filter their choices, and add items to their shopping cart. The checkout process is streamlined, allowing for quick completion of purchases. Users can create accounts to track their orders and save favorite items, enhancing their overall shopping experience. The contact section provides support options, ensuring users can find help when needed.