Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a professional e-commerce web application named SoccerShirts, dedicated to selling soccer, NBA, and NFL jerseys in Spanish. The platform will provide a seamless shopping experience, featuring an elegant yet sporty aesthetic to appeal to sports fans.

## CORE FEATURES
1. **Product Listings**: Display a range of jerseys organized by category (Soccer, NBA, NFL) with high-quality images, descriptions, and prices.
2. **Shopping Cart**: Allow users to add items to their cart, view selected products, adjust quantities, and proceed to checkout.
3. **Animations**: Incorporate smooth animations for transitions, button clicks, and cart updates to enhance user engagement.
4. **Contact Section**: Provide a simple contact form for inquiries, including fields for name, email, and message.
5. **About Us Section**: Share the brand’s story, mission, and values to build trust with customers.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasize a clean, simple design with ample white space to ensure products stand out. The layout should enhance readability and usability.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain clarity and focus on product imagery.
- **Layout**: A structured layout with a top navigation bar, hero section showcasing featured products, a grid display for product listings, and clearly defined sections for Contact and About Us.
- **Typography**: Use modern sans-serif fonts for headers and body text to maintain a sporty yet elegant feel. Hierarchy should be established through size and weight variations (e.g., bold for headers, regular for body).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainable code.
- **Styling**: Tailwind CSS for efficient styling and responsive design.
- **UI Components**: Utilize shadcn/ui components for a consistent and modern user interface.
- **State Management**: Implement Zustand or React Context for managing the shopping cart and user sessions effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Zustand).
2. **Create Navigation Bar**: Develop a responsive navigation bar that links to product categories, Cart, and Contact/About Us sections.
3. **Design Product Listing Page**: Implement the product grid layout, integrating product data and images.
4. **Implement Shopping Cart Functionality**: Build the cart component to manage state, allowing for adding/removing products.
5. **Add Animations**: Use libraries like Framer Motion for smooth transitions and animations throughout the application.
6. **Develop Contact and About Us Sections**: Create static pages with forms and content that align with the overall design aesthetic.
7. **Test Responsiveness**: Ensure the application is fully responsive across different devices and screen sizes.

## USER EXPERIENCE
Users will land on the homepage featuring a hero section with highlighted products. They can navigate through categories using the top navigation bar, add items to their cart with a simple click, and enjoy animated transitions that enhance their interaction. The checkout process will be straightforward, guiding users to complete their purchase smoothly. The Contact and About Us sections will provide additional information, fostering a connection with the brand. A focus on user experience ensures that navigating the site feels intuitive and enjoyable.