@mundogamernetwork/shared-ui 1.1.82 → 1.1.83

package/locales/de.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Kampagne",
         "about": "Über das Spiel",
-        "screenshot_alt": "Spiel-Screenshot"
+        "screenshot_alt": "Spiel-Screenshot",
+        "see_all": "alle anzeigen"
       },
       "other_campaigns": "Andere Kampagnen",
       "available": "verfügbar",
@@ -184,7 +185,16 @@
       "status_completed": "Anfrage abgeschlossen",
       "status_refused": "Anfrage abgelehnt",
       "status_cancelled": "Anfrage storniert",
-      "refused_reason": "Grund der Ablehnung:"
+      "refused_reason": "Grund der Ablehnung:",
+      "good": "Super!",
+      "good_text": "Du hast einen Code zum Einlösen erhalten",
+      "approved_subtitle": "Folge den Schritten und löse deinen Schlüssel ein.",
+      "cody_text": "Der Code kann nur einmal eingelöst werden und läuft nach Ende des Angebots ab",
+      "redeem_description_1": "Öffne die Website oder App der entsprechenden Plattform (Steam, PlayStation, Xbox usw.) und melde dich bei deinem Konto an.",
+      "redeem_description_2": "Gehe zur Option „Code einlösen“, füge den kopierten Code ein und schließe den Vorgang ab.",
+      "redeem_description_3": "Der Inhalt wird auf deinem Konto aktiviert.",
+      "redeem_at": "Auf {platform} einlösen",
+      "no_redeemers": "Noch niemand hat diese Kampagne eingelöst."
     },
     "materials": {
       "title": "Submit material",

package/locales/en.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campaign",
         "about": "About the game",
-        "screenshot_alt": "Game screenshot"
+        "screenshot_alt": "Game screenshot",
+        "see_all": "see all"
       },
       "other_campaigns": "Other campaigns",
       "available": "available",
@@ -184,7 +185,16 @@
       "status_completed": "Request completed",
       "status_refused": "Request refused",
       "status_cancelled": "Request cancelled",
-      "refused_reason": "Reason for refusal:"
+      "refused_reason": "Reason for refusal:",
+      "good": "Nice!",
+      "good_text": "You received a code to redeem",
+      "approved_subtitle": "Follow the steps and redeem your key.",
+      "cody_text": "The code can only be redeemed once and expires after the offer ends",
+      "redeem_description_1": "Open the website or app of the corresponding platform (Steam, PlayStation, Xbox, etc.) and log in to your account.",
+      "redeem_description_2": "Go to the 'Redeem code' option, paste the copied code, and complete the process.",
+      "redeem_description_3": "The content will be activated on your account.",
+      "redeem_at": "Redeem on {platform}",
+      "no_redeemers": "No one has redeemed this campaign yet."
     },
     "materials": {
       "title": "Submit material",

package/locales/pt-BR.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campanha",
         "about": "Sobre o jogo",
-        "screenshot_alt": "Captura de tela do jogo"
+        "screenshot_alt": "Captura de tela do jogo",
+        "see_all": "ver todos"
       },
       "other_campaigns": "Outras campanhas",
       "available": "disponível",
@@ -184,7 +185,16 @@
       "status_completed": "Solicitação concluída",
       "status_refused": "Solicitação recusada",
       "status_cancelled": "Solicitação cancelada",
-      "refused_reason": "Motivo da recusa:"
+      "refused_reason": "Motivo da recusa:",
+      "good": "Boa!",
+      "good_text": "Você recebeu um código para resgatar",
+      "approved_subtitle": "Siga as etapas e resgate sua chave.",
+      "cody_text": "O código só pode ser resgatado uma vez e expira após o término da oferta",
+      "redeem_description_1": "Abra o site ou app da plataforma correspondente (Steam, PlayStation, Xbox, etc.) e faça login na sua conta.",
+      "redeem_description_2": " Vá até a opção “Resgatar código”, cole o código copiado e finalize.",
+      "redeem_description_3": "O conteúdo será ativado na sua conta.",
+      "redeem_at": "Resgatar em {platform}",
+      "no_redeemers": "Nenhum criador resgatou esta campanha ainda."
     },
     "materials": {
       "title": "Submit material",

package/locales/ro.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campanie",
         "about": "Despre joc",
-        "screenshot_alt": "Captură de ecran a jocului"
+        "screenshot_alt": "Captură de ecran a jocului",
+        "see_all": "vezi toate"
       },
       "other_campaigns": "Alte campanii",
       "available": "disponibil",
@@ -184,7 +185,16 @@
       "status_completed": "Cerere finalizată",
       "status_refused": "Cerere refuzată",
       "status_cancelled": "Cerere anulată",
-      "refused_reason": "Motivul refuzului:"
+      "refused_reason": "Motivul refuzului:",
+      "good": "Super!",
+      "good_text": "Ai primit un cod de revendicare",
+      "approved_subtitle": "Urmează pașii și revendică-ți cheia.",
+      "cody_text": "Codul poate fi folosit o singură dată și expiră la finalul ofertei",
+      "redeem_description_1": "Deschide site-ul sau aplicația platformei corespunzătoare (Steam, PlayStation, Xbox etc.) și autentifică-te în contul tău.",
+      "redeem_description_2": "Accesează opțiunea „Redeem code”, lipește codul copiat și finalizează procesul.",
+      "redeem_description_3": "Conținutul va fi activat în contul tău.",
+      "redeem_at": "Revendică pe {platform}",
+      "no_redeemers": "Nimeni nu a revendicat această campanie încă."
     },
     "materials": {
       "title": "Submit material",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.82",
+  "version": "1.1.83",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -10,7 +10,7 @@ import {
 	revealKey,
 	requestKey,
 } from "../../services/campaignService"
-import { fetchDetailGameImage } from "../../services/gamesService"
+import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -136,6 +136,20 @@ const { data: gameDetailsImages } = await useAsyncData(
 	{ watch: [campaign] },
 )
 
+const { data: gameDetails } = await useAsyncData(
+	`campaign-game-detail-${slug}`,
+	async () => {
+		if (!campaign.value?.game_slug) return null
+		try {
+			const response = await fetchDetailGame(locale.value, campaign.value.game_slug)
+			return response.data.data || null
+		} catch {
+			return null
+		}
+	},
+	{ watch: [campaign] },
+)
+
 const showVideoModal = ref(false)
 const selectedVideoUrl = ref("")
 const showImageModal = ref(false)
@@ -600,6 +614,17 @@ onMounted(async () => {
 							{{ b }}
 						</div>
 					</div>
+
+					<div class="tags-items" v-if="gameDetails?.platforms?.length">
+						<div class="tag" v-for="platform in gameDetails.platforms" :key="platform.id">
+							{{ platform.name }}
+						</div>
+					</div>
+					<div class="tags-items" v-if="gameDetails?.genres?.length">
+						<div class="tag" v-for="genre in gameDetails.genres" :key="genre.id">
+							{{ genre.localized_name }}
+						</div>
+					</div>
 				</div>
 
 				<!-- Cover when no game details -->
@@ -804,6 +829,36 @@ onMounted(async () => {
 									<span>+{{ redeemedUsers?.total ?? 0 }}</span>
 									{{ $t("keys.campaigns.creators") }}
 								</div>
+								<div class="see" v-if="(redeemedUsers?.users?.length ?? 0) > 0" @click="showUsersModal = true">
+									{{ $t("keys.campaigns.campaign.see_all") }}
+								</div>
+							</div>
+						</div>
+
+						<div class="users-modal" v-if="showUsersModal" @click.self="showUsersModal = false">
+							<div class="users-modal-content">
+								<div class="users-modal-header">
+									<span>{{ $t("keys.campaigns.campaign.who_redeem") }}</span>
+									<button class="close-button" @click="showUsersModal = false">
+										<MGIcon size="1x" icon="close" />
+									</button>
+								</div>
+								<div class="users-modal-body">
+									<div
+										v-if="!redeemedUsers?.users?.length"
+										class="users-modal-empty"
+									>
+										{{ $t("keys.campaigns.no_redeemers") }}
+									</div>
+									<div v-for="(u, index) in redeemedUsers?.users" :key="index" class="users-modal-row">
+										<img
+											:src="u.avatar_url || '/imgs/avatar-default.jpg'"
+											:alt="u.nickname"
+											@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t && t.src !== '/imgs/avatar-default.jpg') t.src = '/imgs/avatar-default.jpg' }"
+										/>
+										<span>{{ u.nickname || `${u.first_name || ''} ${u.last_name || ''}`.trim() }}</span>
+									</div>
+								</div>
 							</div>
 						</div>
 
@@ -1008,6 +1063,24 @@ onMounted(async () => {
 					i { font-size: 13px; }
 				}
 			}
+
+			.tags-items {
+				display: flex;
+				gap: 4px;
+				flex-flow: wrap;
+
+				.tag {
+					height: 32px;
+					display: flex;
+					font-size: 12px;
+					color: var(--secondary-info-fg);
+					font-weight: 400;
+					background-color: var(--button-secondary-default-bg);
+					justify-content: center;
+					padding: 12px;
+					align-items: center;
+				}
+			}
 		}
 
 		.cards {
@@ -1306,6 +1379,70 @@ onMounted(async () => {
 							width: -webkit-fill-available;
 							span { font-size: 16px; color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); font-weight: 600; }
 						}
+
+						.see {
+							font-size: 12px;
+							color: var(--key-accent, var(--primary, #D297FF));
+							cursor: pointer;
+							text-decoration: underline;
+							white-space: nowrap;
+						}
+					}
+
+					.users-modal {
+						position: fixed;
+						inset: 0;
+						z-index: 1000;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
+
+						.users-modal-content {
+							width: 100%;
+							max-width: 360px;
+							max-height: 70vh;
+							background: var(--button-secondary-default-bg);
+							display: flex;
+							flex-direction: column;
+						}
+
+						.users-modal-header {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							padding: 16px;
+							font-size: 14px;
+							font-weight: 600;
+							color: var(--card-article-title);
+							border-bottom: 1px solid var(--bg-app-badge);
+
+							.close-button { background: transparent; border: none; color: var(--secondary-info-fg); cursor: pointer; }
+						}
+
+						.users-modal-body {
+							overflow-y: auto;
+							padding: 8px 16px;
+						}
+
+						.users-modal-empty {
+							padding: 24px 0;
+							text-align: center;
+							font-size: 13px;
+							color: var(--secondary-info-fg);
+						}
+
+						.users-modal-row {
+							display: flex;
+							align-items: center;
+							gap: 10px;
+							padding: 10px 0;
+							border-bottom: 1px solid var(--bg-app-badge);
+							&:last-child { border-bottom: none; }
+
+							img { width: 36px; height: 36px; border-radius: 0; }
+							span { font-size: 13px; color: var(--card-article-title); }
+						}
 					}
 
 					.company {

package/pages/key-campaigns/redeem-key-approved.vue

@@ -20,6 +20,31 @@ const keyCode = ref<string | null>(null)
 const error = ref("")
 const requestData = ref<any>(null)
 const copied = ref(false)
+const platform = ref("")
+
+// Maps a platform name to its official key-activation page.
+const REDEEM_URLS: Record<string, string> = {
+	steam: "https://store.steampowered.com/account/registerkey",
+	playstation: "https://store.playstation.com/redeem",
+	"playstation 4": "https://store.playstation.com/redeem",
+	"playstation 5": "https://store.playstation.com/redeem",
+	xbox: "https://redeem.microsoft.com",
+	"xbox one": "https://redeem.microsoft.com",
+	"xbox series x/s": "https://redeem.microsoft.com",
+	"pc (microsoft windows)": "https://store.steampowered.com/account/registerkey",
+	epic: "https://store.epicgames.com/redeem",
+	"epic games": "https://store.epicgames.com/redeem",
+	gog: "https://www.gog.com/redeem",
+	nintendo: "https://ecommerce.nintendo.com/redeem",
+	"nintendo switch": "https://ecommerce.nintendo.com/redeem",
+	"google stadia": "https://stadia.google.com/redeem",
+}
+
+const redeemUrl = computed(() => {
+	const key = (platform.value || "").trim().toLowerCase()
+	if (!key) return ""
+	return REDEEM_URLS[key] || ""
+})
 
 onMounted(async () => {
 	if (!currentUser) {
@@ -48,6 +73,7 @@ async function reveal() {
 		const res = await revealKey(requestId)
 		const data = res?.data?.data || res?.data || null
 		keyCode.value = data?.key || data?.code || data?.value || null
+		platform.value = data?.platform || data?.platforms?.[0]?.name || ""
 		if (!keyCode.value) {
 			error.value = $i18n.t("keys.campaigns.error_reveal")
 		}
@@ -103,49 +129,78 @@ function goBack() {
 
 			<div v-else class="content">
 				<div class="title-bar">
-					<MGIcon icon="version" size="2x" class="title-icon" />
-					<div>
-						<h3>{{ $t("keys.campaigns.status_key.reveal_key") }}</h3>
-						<p v-if="requestData?.key?.name" class="campaign-name">{{ requestData.key.name }}</p>
-					</div>
+					<h3>
+						<span class="accent-text">{{ $t("keys.campaigns.good") }}</span>
+						{{ $t("keys.campaigns.good_text") }}
+						<span class="accent-text">{{ currentUser?.nickname || currentUser?.name }}</span>
+					</h3>
+					<p class="description">{{ $t("keys.campaigns.approved_subtitle") }}</p>
 				</div>
 
-				<!-- Key not yet revealed -->
-				<div v-if="!keyCode" class="reveal-block">
-					<p class="hint">{{ $t("keys.campaigns.reveal_hint") }}</p>
-					<button
-						class="btn"
-						:class="{ disabled: revealing }"
-						:disabled="revealing"
-						@click="reveal"
-					>
-						{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
-					</button>
-					<div v-if="error" class="req-error">{{ error }}</div>
-				</div>
-
-				<!-- Key revealed -->
-				<div v-else class="key-block">
-					<div class="key-label">{{ $t("keys.campaigns.your_key") }}</div>
-					<div class="key-code-row">
-						<span class="key-code">{{ keyCode }}</span>
-						<button class="copy-btn" @click="copyCode">
-							<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
-							{{ copied ? $t("keys.campaigns.copied") : $t("keys.campaigns.copy") }}
-						</button>
+				<div class="cards">
+					<div class="side">
+						<div class="code-list">
+							<div class="code">
+								<div class="number">1</div>
+								<div class="texts">
+									<div class="code-box" v-if="!keyCode">
+										<input type="text" value="••••••••••••••••" readonly class="code-masked" />
+										<button class="btn" :class="{ disabled: revealing }" :disabled="revealing" @click="reveal">
+											{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
+										</button>
+									</div>
+
+									<div class="code-box" v-else>
+										<input type="text" :value="keyCode" readonly class="code-value" />
+										<button class="btn" @click="copyCode">
+											<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
+											{{ copied ? $t("keys.campaigns.copied") : $t("keys.campaigns.copy") }}
+										</button>
+									</div>
+
+									<div v-if="error" class="req-error">{{ error }}</div>
+
+									<div class="info">
+										<MGIcon size="1x" icon="version" />
+										{{ $t("keys.campaigns.cody_text") }}
+									</div>
+								</div>
+							</div>
+
+							<div class="code">
+								<div class="number">2</div>
+								<div class="texts">
+									<div class="description">{{ $t("keys.campaigns.redeem_description_1") }}</div>
+									<a
+										v-if="keyCode && redeemUrl"
+										:href="redeemUrl"
+										target="_blank"
+										rel="noopener"
+										class="btn redeem-link"
+									>
+										{{ $t("keys.campaigns.redeem_at", { platform }) }}
+									</a>
+								</div>
+							</div>
+
+							<div class="code">
+								<div class="number">3</div>
+								<div class="texts">
+									<div class="description">
+										{{ $t("keys.campaigns.redeem_description_2") }}
+										<br />
+										{{ $t("keys.campaigns.redeem_description_3") }}
+									</div>
+								</div>
+							</div>
+						</div>
 					</div>
-					<p class="redeem-info">{{ $t("keys.campaigns.redeem_on_platform") }}</p>
-				</div>
 
-				<!-- Request info -->
-				<div v-if="requestData" class="info-grid">
-					<div class="info-row" v-if="requestData.status_request?.name">
-						<span class="info-label">{{ $t("keys.campaigns.status_label") }}</span>
-						<span class="info-val">{{ requestData.status_request.name }}</span>
-					</div>
-					<div class="info-row" v-if="requestData.key?.name">
-						<span class="info-label">{{ $t("keys.campaigns.campaign.title") }}</span>
-						<span class="info-val">{{ requestData.key.name }}</span>
+					<div class="side-border">
+						<div class="title">{{ requestData?.key?.name }}</div>
+						<div class="imagem" v-if="requestData?.key?.cover_original_src">
+							<img :src="requestData.key.cover_original_src" :alt="requestData.key.name" />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -196,119 +251,153 @@ function goBack() {
 		& + & { margin-top: 8px; }
 	}
 
-	.content { display: flex; flex-direction: column; gap: 28px; }
+	.content { display: flex; flex-direction: column; gap: 42px; }
 
 	.title-bar {
-		display: flex;
-		align-items: flex-start;
-		gap: 14px;
-		.title-icon { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); margin-top: 2px; }
-		h3 { font-size: 20px; font-weight: 700; color: var(--card-article-title); margin: 0 0 4px; }
-		.campaign-name { font-size: 13px; color: var(--secondary-info-fg); margin: 0; }
+		h3 {
+			font-size: 24px;
+			font-weight: 700;
+			color: var(--card-article-title);
+			margin: 0 0 8px;
+		}
+		.accent-text { color: var(--key-accent, var(--primary, #D297FF)); }
+		.description { font-size: 14px; color: var(--secondary-info-fg); margin: 0; }
 	}
 
-	.reveal-block {
+	.cards {
 		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		padding: 24px;
-		background: var(--bg-app-badge);
-		border: 1px solid var(--button-secondary-default-bg);
+		align-items: flex-start;
+		gap: 84px;
+		width: 100%;
+		justify-content: space-between;
 
-		.hint { font-size: 14px; color: var(--secondary-info-fg); margin: 0; }
+		@media (max-width: 767px) {
+			flex-direction: column;
+			gap: 32px;
+		}
 	}
 
-	.key-block {
+	.side {
 		display: flex;
 		flex-direction: column;
-		gap: 12px;
-		padding: 24px;
-		background: var(--bg-app-badge);
-		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+		gap: 42px;
 	}
 
-	.key-label {
-		font-size: 12px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: var(--secondary-info-fg);
+	.code-list {
+		display: flex;
+		flex-direction: column;
+		gap: 42px;
 	}
 
-	.key-code-row {
+	.code {
 		display: flex;
 		align-items: center;
-		gap: 12px;
-		flex-wrap: wrap;
-	}
+		gap: 24px;
+
+		.number {
+			display: flex;
+			width: 80px;
+			height: 80px;
+			padding: 24px;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background-color: var(--button-secondary-default-bg);
+			color: var(--key-accent, var(--primary, #D297FF));
+			text-align: center;
+			font-size: 28px;
+			font-weight: 700;
+			flex-shrink: 0;
+		}
 
-	.key-code {
-		font-size: 20px;
-		font-weight: 700;
-		font-family: monospace;
-		letter-spacing: 2px;
-		color: var(--card-article-title);
-		word-break: break-all;
-	}
+		.texts {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
 
-	.copy-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 6px 14px;
-		font-size: 13px;
-		font-weight: 600;
-		background: transparent;
-		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		cursor: pointer;
-		transition: background 0.15s;
-		&:hover { background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.1)); }
-	}
+		.code-box {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			width: 100%;
+
+			input {
+				display: flex;
+				padding: 12px;
+				background-color: transparent;
+				height: 48px;
+				border: 1px solid var(--bg-app-badge);
+				width: 100%;
+				font-size: 16px;
+				color: var(--secondary-info-fg);
+				&:focus { border-color: var(--key-accent, var(--primary, #D297FF)); outline: 0; }
+			}
+
+			button {
+				background-color: var(--key-accent, var(--primary, #D297FF));
+				color: var(--key-accent-ink, #13161C);
+				height: 48px;
+				padding: 0 16px;
+				border: none;
+				cursor: pointer;
+				white-space: nowrap;
+				display: inline-flex;
+				align-items: center;
+				gap: 6px;
+				&.disabled, &:disabled { opacity: 0.45; cursor: not-allowed; }
+			}
+		}
 
-	.redeem-info {
-		font-size: 12px;
-		color: var(--secondary-info-fg);
-		margin: 0;
-	}
+		.code-masked { letter-spacing: 3px; color: rgba(128, 128, 128, 0.5) !important; }
 
-	.req-error { font-size: 13px; color: var(--danger, #e53935); }
+		.info {
+			display: flex;
+			align-items: flex-end;
+			gap: 4px;
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+			svg { color: var(--key-accent, var(--primary, #D297FF)); }
+		}
 
-	.info-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding-top: 8px;
-		border-top: 1px solid var(--button-secondary-default-bg);
+		.description {
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+
+		.redeem-link {
+			display: inline-flex;
+			width: fit-content;
+			margin-top: 8px;
+			padding: 8px 14px;
+			background: var(--key-accent, var(--primary, #D297FF));
+			color: var(--key-accent-ink, #13161C);
+			font-size: 13px;
+			text-decoration: none;
+		}
 	}
 
-	.info-row {
+	.side-border {
 		display: flex;
-		gap: 12px;
-		font-size: 13px;
-	}
+		padding: 18px;
+		flex-direction: column;
+		gap: 24px;
+		flex: 1 0 0;
+		border: 1px solid var(--button-secondary-default-bg);
+		max-width: 391px;
 
-	.info-label {
-		color: var(--secondary-info-fg);
-		min-width: 100px;
-	}
+		.title { font-size: 14px; color: var(--card-article-title); font-weight: 600; }
 
-	.info-val { color: var(--card-article-title); }
-
-	.btn {
-		align-self: flex-start;
-		padding: 0 28px;
-		height: 44px;
-		font-size: 14px;
-		font-weight: 700;
-		background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: var(--key-accent-ink, #13161C);
-		border: none;
-		cursor: pointer;
-		transition: opacity 0.15s;
-		&.disabled, &:disabled { opacity: 0.45; cursor: not-allowed; }
-		&:not(.disabled):hover { opacity: 0.85; }
+		.imagem {
+			width: 100%;
+			max-height: 200px;
+			overflow: hidden;
+			text-align: center;
+			img { width: auto; height: 100%; max-width: 100%; }
+		}
 	}
+
+	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
 }
 
 @keyframes pulse {

package/services/gamesService.ts

@@ -44,5 +44,13 @@ export interface GameImage {
 	url_image_src: string
 }
 
+export interface GameDetail {
+	platforms?: Array<{ id: number; name: string }>
+	genres?: Array<{ id: number; localized_name: string }>
+}
+
+export const fetchDetailGame = (lang: string, slug: string) =>
+	client.get<{ data: GameDetail }>(`/${lang}/games/details/${slug}`)
+
 export const fetchDetailGameImage = (lang: string, slug: string) =>
 	client.get<{ data: GameImage[] }>(`/${lang}/games/details/${slug}/images`)