You are an AI assistant tasked with generating a single-page SPA (Single Page Application) for a platform that helps parents and gamers understand and navigate the implications of 'loot box' mechanics on video game age ratings across Europe. The application should provide clear, concise information and tools to make informed decisions about game purchases.
**PROJECT OVERVIEW:**
**Application Name:** PEGI+ (Placeholder, can be refined)
**Concept:** A SaaS platform designed to address the growing concern around 'loot box' mechanics in video games and their impact on official age ratings (like PEGI). The platform will serve as a reliable, centralized resource for parents and gamers, offering detailed information on games, their 'loot box' policies, updated age ratings, and educational content about the risks associated with these mechanics. The core value proposition is to empower users with knowledge to make safer and more informed gaming choices for themselves and their children in the European market.
**Problem:** The recent announcement by PEGI to assign a minimum 16 age rating to games featuring 'loot boxes' highlights a significant shift in how in-game monetization is perceived and regulated. Parents and gamers need a clear, accessible way to understand which games are affected, why, and what this means for game suitability. Existing information is fragmented, requiring users to sift through news articles and official documentation.
**Solution:** A dedicated web application that aggregates and presents this information intuitively. It will allow users to search for specific games, view their 'loot box' status, understand their current and upcoming PEGI ratings, access educational resources, and compare games based on these criteria.
**TECH STACK:**
- **Frontend Framework:** React.js (using Create React App or Vite for setup)
- **Styling:** Tailwind CSS for rapid UI development and responsive design.
- **State Management:** React Context API for global state or Zustand/Jotai for a more lightweight solution if complexity grows. For MVP, Context API is sufficient.
- **Routing:** React Router DOM for navigation between different views/pages.
- **Data Fetching:** `fetch` API or Axios for asynchronous requests to a mock API or future backend.
- **Icons:** React Icons library for a wide range of SVG icons.
- **Deployment:** Vercel or Netlify for easy deployment of static sites.
**CORE FEATURES:**
1. **Game Search and Detail Page:**
* **User Flow:** User types a game title into a search bar. Upon submission, a list of matching games appears. Clicking a game navigates to its detail page. If no games are found, a 'no results' message is displayed.
* **Detail Page:** Displays game title, developer, publisher, platform(s), a summary description, genre, release date, PEGI rating (current and potentially future/impacted rating), a clear indicator if 'loot boxes' are present ('Paid Random Items'), a brief explanation of the 'loot box' mechanic in that game, and links to related educational content.
2. **Rating Update Tracker:**
* **User Flow:** A dedicated section lists recent PEGI rating changes, particularly those related to 'loot box' implementations. Each entry shows the game title, the old rating, the new rating, the effective date, and a brief reason for the change. Users can filter or sort this list by date.
3. **Parental Guidance Hub:**
* **User Flow:** A section with articles, FAQs, and tips. Categories include: 'Understanding PEGI Ratings', 'What are Loot Boxes?', 'Risks of In-Game Gambling', 'Tips for Safe Gaming with Children', 'Utilizing Parental Controls'. Content is presented in an easily readable, article-like format.
4. **Game Comparison Tool (Optional for MVP but good to plan):**
* **User Flow:** Users can select 2-3 games (e.g., from search results or a curated list) to compare side-by-side based on key criteria: PEGI Rating, 'Loot Box' presence/type, Publisher, Genre.
**UI/UX DESIGN:**
- **Layout:** A clean, modern, single-column layout for mobile-first responsiveness, expanding to a multi-column layout on larger screens. A persistent header with the app logo and search bar. A footer with essential links (About, Contact, Privacy Policy).
- **Color Palette:** Primary: A calming blue (`#4A90E2`) or green (`#50E3C2`) for calls to action and primary elements. Secondary: Neutral grays (`#F5F5F5` for backgrounds, `#CCCCCC` for borders, `#333333` for text). Accent: A warning orange/red (`#F5A623` or `#D0021B`) for highlighting risks or critical information like 'Loot Box' presence.
- **Typography:** Use a readable sans-serif font like Inter or Poppins. H1/H2 for titles, regular body text for descriptions, slightly bolder for key information points.
- **Responsive Design:** Utilize Tailwind's responsive prefixes (sm:, md:, lg:) to ensure the layout adapts seamlessly across devices. Ensure touch targets are large enough on mobile.
- **Navigation:** Clear, intuitive navigation, possibly using tabs or a sidebar for main sections on larger screens. Breadcrumbs on detail pages.
**COMPONENT BREAKDOWN:**
- `App.js`: Main application component, sets up routing and global layout.
- `Header.js`: Contains the logo, navigation links, and search bar. Manages search input state.
- `SearchBar.js`: Input component for game search. Handles input changes and submission.
- `GameListPage.js`: Displays search results. Fetches game data and maps over it to render `GameCard` components.
- `GameCard.js`: Renders a summary of a single game (image, title, rating). Receives `game` object as prop. Navigates to `GameDetailPage` on click.
- `GameDetailPage.js`: Displays comprehensive details for a selected game. Fetches detailed game data. Renders `GameInfo` and `LootBoxInfo` components.
- `GameInfo.js`: Displays general game details (title, developer, platforms, genre, release date).
- `LootBoxInfo.js`: Specifically highlights 'loot box' presence, rating impact, and provides a brief explanation. Uses accent colors.
- `RatingTrackerPage.js`: Displays a list of recent rating changes. Fetches rating update data and maps over it to render `RatingUpdateCard`.
- `RatingUpdateCard.js`: Renders details of a single rating update (game, old/new rating, date).
- `ParentalGuidancePage.js`: Displays educational content. Could use `ArticleList` and `Article` components.
- `Footer.js`: Contains copyright info and links.
- `LoadingSpinner.js`: A reusable component to display a loading indicator during data fetching.
- `ErrorMessage.js`: A component to display error messages (e.g., failed data fetch).
**DATA MODEL:**
- **`Game` Object:**
```json
{
"id": "string",
"title": "string",
"developer": "string",
"publisher": "string",
"platforms": ["string"],
"genres": ["string"],
"releaseDate": "string (YYYY-MM-DD)",
"description": "string",
"imageUrl": "string",
"currentPegRating": "number (3, 7, 12, 16, 18)",
"impactedPegRating": "number | null (e.g., 16 or 18 if loot boxes apply)",
"hasLootBoxes": "boolean",
"lootBoxExplanation": "string | null"
}
```
- **`RatingUpdate` Object:**
```json
{
"id": "string",
"gameTitle": "string",
"previousRating": "number",
"newRating": "number",
"effectiveDate": "string (YYYY-MM-DD)",
"reason": "string"
}
```
- **State Management:** Use `useState` for local component state (e.g., search input). Use `useContext` or a Zustand store for global state like fetched game lists, user preferences, or loading/error states across components.
- **Mock Data:** All data will be initially mocked using JSON files or inline arrays/objects within the component logic. This will be replaced by API calls later.
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using `react-transition-group` or CSS transitions.
- **Hover Effects:** Slight scale-up or shadow change on `GameCard` and interactive elements (buttons, links).
- **Loading States:** Display `LoadingSpinner` component while data is being fetched. Show skeleton loaders for list items if possible.
- **Micro-interactions:** Subtle animations on button clicks, input focus.
- **'Loot Box' Indicator:** Use a distinct visual style (e.g., a colored badge or icon) for games with 'loot boxes'.
**EDGE CASES:**
- **No Search Results:** Display a user-friendly message when a search yields no results.
- **API Errors:** Implement robust error handling. Show `ErrorMessage` component with clear messages if data fetching fails. Provide a retry option.
- **Empty States:** For sections like 'Rating Tracker' or 'Comparison Tool' if no data is available, display informative empty state messages.
- **Data Missing:** Gracefully handle cases where certain game details might be missing in the mock data (e.g., display 'N/A').
- **Accessibility (a11y):** Use semantic HTML, ensure sufficient color contrast, provide `alt` text for images, manage focus correctly, and ensure keyboard navigability.
- **Input Validation:** Basic validation for the search bar (e.g., minimum character length if desired).
**SAMPLE DATA:**
1. **Game 1 (Affected):**
```json
{
"id": "game-001",
"title": "EA Sports FC 24",
"developer": "EA Vancouver",
"publisher": "Electronic Arts",
"platforms": ["PC", "PS5", "Xbox Series X/S"],
"genres": ["Sports", "Simulation"],
"releaseDate": "2023-09-29",
"description": "A popular football simulation game featuring Ultimate Team mode with player packs.",
"imageUrl": "/images/ea_sports_fc24.jpg",
"currentPegRating": 3,
"impactedPegRating": 16,
"hasLootBoxes": true,
"lootBoxExplanation": "Contains 'Ultimate Team Packs' which are paid random items, leading to a PEGI 16 rating."
}
```
2. **Game 2 (Not Affected):**
```json
{
"id": "game-002",
"title": "The Legend of Zelda: Tears of the Kingdom",
"developer": "Nintendo",
"publisher": "Nintendo",
"platforms": ["Switch"],
"genres": ["Action-Adventure", "RPG"],
"releaseDate": "2023-05-12",
"description": "An epic adventure game with a vast open world.",
"imageUrl": "/images/zelda_totk.jpg",
"currentPegRating": 12,
"impactedPegRating": null,
"hasLootBoxes": false,
"lootBoxExplanation": null
}
```
3. **Game 3 (Potential Impact):**
```json
{
"id": "game-003",
"title": "Genshin Impact",
"developer": "miHoYo",
"publisher": "miHoYo",
"platforms": ["PC", "Mobile", "PS5"],
"genres": ["Action RPG", "Gacha"],
"releaseDate": "2020-09-28",
"description": "A free-to-play action RPG with 'gacha' mechanics for acquiring characters and weapons.",
"imageUrl": "/images/genshin_impact.jpg",
"currentPegRating": 12,
"impactedPegRating": 16,
"hasLootBoxes": true,
"lootBoxExplanation": "Features a 'gacha' system for obtaining characters and weapons, which falls under 'paid random items'. Expecting PEGI 16."
}
```
4. **Rating Update 1:**
```json
{
"id": "update-001",
"gameTitle": "EA Sports FC 24",
"previousRating": 3,
"newRating": 16,
"effectiveDate": "2024-06-01",
"reason": "Introduction of paid random items (Ultimate Team Packs)."
}
```
5. **Rating Update 2:**
```json
{
"id": "update-002",
"gameTitle": "Call of Duty: Modern Warfare III",
"previousRating": 18,
"newRating": 18,
"effectiveDate": "2024-06-01",
"reason": "Confirmation of paid random item mechanics ('Supply Drops'). PEGI rating remains 18."
}
```
6. **Game 4 (Indie with Lootboxes):**
```json
{
"id": "game-004",
"title": "Stardew Valley (with mods)",
"developer": "ConcernedApe",
"publisher": "ConcernedApe",
"platforms": ["PC", "Switch", "PS4", "Xbox One"],
"genres": ["Simulation", "RPG"],
"releaseDate": "2016-02-26",
"description": "A charming farming simulation RPG. Note: Official game does not have loot boxes, but community mods might add them.",
"imageUrl": "/images/stardew_valley.jpg",
"currentPegRating": 7,
"impactedPegRating": null,
"hasLootBoxes": false,
"lootBoxExplanation": "The base game does not contain loot boxes. Any rating changes would depend on official developer implementation or specific mod interpretations."
}
```
7. **Game 5 (Future Game):**
```json
{
"id": "game-005",
"title": "Project Chimera (Hypothetical)",
"developer": "Future Games Inc.",
"publisher": "Global Publisher",
"platforms": ["PC", "PS5", "Xbox Series X/S", "Switch"],
"genres": ["Action", "Adventure"],
"releaseDate": "2025-Q1",
"description": "A highly anticipated action-adventure title rumored to include a Gacha-style monetization system.",
"imageUrl": "/images/project_chimera.jpg",
"currentPegRating": null,
"impactedPegRating": 16,
"hasLootBoxes": true,
"lootBoxExplanation": "Expected to feature 'randomized item draws' impacting its PEGI rating."
}
```
**DEPLOYMENT NOTES:**
- Ensure `package.json` includes necessary dependencies.
- Configure `tailwind.config.js` to scan React component files (`.js`, `.jsx`, `.ts`, `.tsx`).
- Set up environment variables if needed for API keys (though not required for MVP).
- The build process (e.g., `npm run build`) should generate static assets suitable for deployment on platforms like Vercel or Netlify.
- Consider setting up routing correctly for SPAs on these platforms (e.g., using `_redirects` file for Netlify or `vercel.json` for Vercel to handle client-side routing fallbacks).
- Optimize image assets for faster loading.
- Implement code splitting if the application grows significantly, although for an SPA, it might not be necessary initially.