Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
SoccerShirts is an e-commerce web application designed for selling authentic soccer and basketball jerseys, including limited edition collections. The platform aims to provide a seamless shopping experience for sports enthusiasts, featuring an engaging and visually appealing interface that highlights the uniqueness of the merchandise.

## CORE FEATURES
1. **Hero Banner**: A visually striking hero banner on the homepage to showcase featured products and promotions, drawing users into the shopping experience.
2. **Product Listings**: A dedicated section displaying available soccer and basketball jerseys, complete with filters for categories, sizes, and limited editions.
3. **Shopping Cart**: Users can easily add products to their cart, view item details, and proceed to checkout with an intuitive shopping cart interface.
4. **Coupon Usage**: A feature allowing users to apply discount coupons during checkout, enhancing their shopping experience and encouraging conversions.
5. **About Us Section**: A page dedicated to the brand's mission, values, and story, helping to build trust with customers.
6. **Contact Page**: A user-friendly contact form for inquiries and support, ensuring customer satisfaction and engagement.

## 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 structure includes a top navigation bar, a prominent hero banner, product listings in a grid format, and a footer with links to About Us and Contact pages.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (choose based on complexity).

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Design the main layout with a navigation bar, hero section, and a grid for product listings.
3. **Develop the Hero Banner**: Implement the hero banner component with a background image and call-to-action buttons.
4. **Build Product Listings**: Create a product listing component that fetches and displays jerseys, allowing filtering and sorting.
5. **Implement Shopping Cart Functionality**: Set up the shopping cart to manage state for added items and integrate coupon functionality.
6. **Construct About Us and Contact Pages**: Develop these pages with relevant content and a contact form for customer inquiries.
7. **Style the Application**: Use Tailwind CSS to apply the minimalist design specifications, ensuring consistency across components.
8. **Test and Optimize**: Conduct thorough testing for responsiveness and user experience, making adjustments based on feedback.

## USER EXPERIENCE
Users will start their journey on the homepage, greeted by a captivating hero banner. They can easily navigate through categories of jerseys, add items to their cart, apply discount codes, and complete their purchases seamlessly. The site will ensure a smooth flow from browsing to checkout, with clear calls to action and accessible information throughout the site.