Lovable Prompt Creator - AI Prompt Generator

##  OVERVIEW
This project is a web application designed to provide a clean and intuitive interface for users to interact with a game pass system. It focuses on simplicity and user experience, allowing users to easily navigate and access game-related features while maintaining a minimalist aesthetic.

## CORE FEATURES
1. **Game Pass Display**: Showcase available game passes with descriptions and prices for easy browsing.
2. **Purchase Functionality**: Allow users to purchase game passes directly within the application, providing a seamless transaction experience.
3. **User Authentication**: Enable user sign-up and login for tracking purchases and managing accounts securely.
4. **Admin Dashboard**: A simple interface for administrators to add, edit, or remove game passes, ensuring the content is always up-to-date.
5. **Responsive Design**: Ensure the application is fully responsive across all devices, providing a consistent user experience on desktops and mobile devices.

## 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**: A single-page layout with a header section for navigation, a hero section to highlight the app's purpose, followed by a features section, a purchase section, and a footer for contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing user authentication and game pass data)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui, Redux).
2. **Create Layout**: Design the main page layout with a header, hero section, features section, and footer using Tailwind CSS for styling.
3. **Develop Components**:
   - Create a **GamePassCard** component to display individual game passes.
   - Implement a **PurchaseButton** component for handling transactions.
   - Set up a **LoginForm** and **SignupForm** component for user authentication.
4. **Integrate Redux**: Set up Redux for state management, creating slices for user authentication and game pass data.
5. **Implement API Calls**: Integrate the backend API for fetching game pass information and handling user purchases.
6. **Testing**: Conduct thorough testing to ensure user flows work seamlessly and the application is responsive across devices.

## USER EXPERIENCE
Users will arrive on a clean landing page with a clear call to action. They can browse available game passes in a grid format, view details, and make purchases with a single click. The login and signup process will be straightforward, allowing users to quickly create accounts or log in. The minimalist design ensures that users can focus on the content without distractions, while responsive design guarantees optimal viewing on any device.