Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is an e-commerce platform designed for the sale of Robux via Game Pass, with payment processing through Pix. Its primary objective is to provide users with a seamless shopping experience for purchasing in-game currency while ensuring an intuitive interface and efficient navigation.

## CORE FEATURES
1. **Home Page**: A welcoming introduction featuring the latest promotions and quick access to the catalog.
2. **Product Catalog**: A comprehensive display of available Game Passes with filtering options and detailed product descriptions.
3. **User Dashboard**: A personalized area for users to manage their accounts, view purchase history, and update personal information.
4. **Shopping Cart**: A user-friendly interface for managing selected items before proceeding to checkout.
5. **Checkout Process**: A streamlined payment process utilizing Pix, ensuring a secure and quick transaction experience.
6. **FAQ and Support**: Easily accessible help sections to assist users with common inquiries and provide customer support options.

## 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 will consist of a top navigation bar for easy access to sections, a hero section showcasing featured Game Passes, a grid layout for the product catalog, and a footer with links to FAQs and support.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui, Redux).
2. **Configure Tailwind CSS**: Set up Tailwind CSS for styling, ensuring it follows the specified design specifications.
3. **Build the Home Page**: Create the home page layout with a hero section and quick links to the catalog.
4. **Develop the Product Catalog**: Implement the product catalog with filtering and sorting functionalities, ensuring a responsive design.
5. **Create User Dashboard**: Build the user dashboard for account management, integrating user authentication if required.
6. **Implement Shopping Cart**: Develop the shopping cart functionality, allowing users to add and remove items easily.
7. **Design Checkout Process**: Create a secure checkout page that facilitates payments via Pix, ensuring a smooth transaction flow.
8. **Add FAQ and Support Sections**: Develop comprehensive FAQ and support pages with easy navigation.

## USER EXPERIENCE
Users will enjoy a streamlined shopping experience with intuitive navigation and responsive design. The home page will guide them to featured products, while the catalog allows for easy exploration. The user dashboard ensures they can manage their accounts effectively, and the checkout process is designed to be quick and secure, making purchasing Robux straightforward and hassle-free.