From af9d943a756e4e1cb71336d49abf6899882cb6d2 Mon Sep 17 00:00:00 2001
From: Antonio Andre <antonioandre1008@gmail.com>
Date: Thu, 28 May 2026 17:52:26 -0500
Subject: [PATCH] feat: implementa catalogo de jogos

---
 .../(protected)/catalogo/[id_ou_slug].vue     | 509 ++++++++++++++++++
 app/pages/(protected)/catalogo/criar.vue      | 280 ++++++++++
 app/pages/(protected)/catalogo/index.vue      | 312 +++++++++++
 app/pages/(protected)/home/index.vue          |   4 +
 4 files changed, 1105 insertions(+)
 create mode 100644 app/pages/(protected)/catalogo/[id_ou_slug].vue
 create mode 100644 app/pages/(protected)/catalogo/criar.vue
 create mode 100644 app/pages/(protected)/catalogo/index.vue

diff --git a/app/pages/(protected)/catalogo/[id_ou_slug].vue b/app/pages/(protected)/catalogo/[id_ou_slug].vue
new file mode 100644
index 0000000..bad5ce6
--- /dev/null
+++ b/app/pages/(protected)/catalogo/[id_ou_slug].vue
@@ -0,0 +1,509 @@
+<template>
+  <div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-10 font-sans text-[#0c0a09] md:px-8 md:py-16">
+    <div
+      class="pointer-events-none absolute left-1/2 top-8 h-[460px] w-[min(92vw,820px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(196,184,232,0.6),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(167,229,211,0.56),transparent_34%)] blur-2xl"
+      aria-hidden="true"></div>
+
+    <main class="relative mx-auto grid w-full max-w-[800px] gap-8">
+      <header class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+        <p
+          class="m-0 inline-flex rounded-full bg-[rgba(196,184,232,0.6)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
+          Catálogo
+        </p>
+
+        <NuxtLink to="/catalogo"
+          class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+          Voltar
+        </NuxtLink>
+      </header>
+
+      <div v-if="isLoading" class="grid gap-4" role="status" aria-live="polite">
+        <div class="h-48 animate-pulse rounded-2xl bg-[#f0efed]"></div>
+        <div class="h-8 w-2/3 animate-pulse rounded-xl bg-[#f0efed]"></div>
+        <div class="h-4 w-1/3 animate-pulse rounded-xl bg-[#f0efed]"></div>
+        <div class="h-24 animate-pulse rounded-xl bg-[#f0efed]"></div>
+      </div>
+
+      <div v-else-if="errorMessage"
+        class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[15px] leading-[1.47] tracking-[0.15px] text-red-700"
+        role="alert">
+        {{ errorMessage }}
+      </div>
+
+      <template v-else-if="game">
+        <div class="overflow-hidden rounded-2xl border border-[#e7e5e4] bg-white shadow-[0_4px_16px_rgba(0,0,0,0.04)]">
+          <div v-if="game.images?.header" class="relative h-48 w-full overflow-hidden bg-[#f0efed] sm:h-64">
+            <img :src="game.images.header" :alt="game.title" class="h-full w-full object-cover" />
+          </div>
+
+          <div class="grid gap-6 p-6 md:p-8">
+            <div class="flex flex-wrap items-start justify-between gap-4">
+              <div class="grid gap-2">
+                <h1 class="font-serif text-[32px] font-light leading-[1.1] tracking-[-0.64px] text-[#0c0a09]">
+                  {{ game.title }}
+                </h1>
+                <p class="text-[15px] leading-[1.47] tracking-[0.15px] text-[#777169]">
+                  {{ game.developer }}
+                </p>
+              </div>
+
+              <div class="flex flex-wrap gap-2">
+                <button type="button" :disabled="togglingFavorite"
+                  :aria-label="isFavorited ? 'Remover dos favoritos' : 'Adicionar aos favoritos'"
+                  @click="toggleFavorite"
+                  class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-[#e7e5e4] px-4 text-[13px] font-medium transition hover:bg-[#f0efed] disabled:cursor-not-allowed disabled:opacity-50">
+                  <Icon :name="togglingFavorite ? 'mdi:loading' : isFavorited ? 'mdi:heart' : 'mdi:heart-outline'"
+                    :class="['text-sm', togglingFavorite ? 'animate-spin text-[#777169]' : isFavorited ? 'text-rose-500' : 'text-[#777169]']" />
+                  <span>{{ isFavorited ? 'Favoritado' : 'Favoritar' }}</span>
+                </button>
+
+                <button v-if="!isEditing" type="button" @click="startEditing"
+                  class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-[#e7e5e4] px-4 text-[13px] font-medium text-[#0c0a09] transition hover:bg-[#f0efed]">
+                  <Icon name="mdi:pencil-outline" class="text-sm" />
+                  Editar
+                </button>
+
+                <div v-if="confirmingDelete" class="flex gap-2">
+                  <button type="button" :disabled="isDeleting" @click="deleteGame"
+                    class="inline-flex h-9 items-center justify-center gap-1 rounded-full bg-red-50 px-4 text-[13px] font-medium text-red-600 transition hover:bg-red-100 disabled:opacity-50">
+                    <Icon :name="isDeleting ? 'mdi:loading' : 'mdi:check'" class="text-sm"
+                      :class="isDeleting && 'animate-spin'" />
+                    Confirmar
+                  </button>
+                  <button type="button" @click="confirmingDelete = false"
+                    class="inline-flex h-9 items-center justify-center rounded-full border border-[#e7e5e4] px-4 text-[13px] font-medium text-[#777169] transition hover:border-[#0c0a09]">
+                    Cancelar
+                  </button>
+                </div>
+                <button v-else type="button" @click="confirmingDelete = true"
+                  class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-[#e7e5e4] px-4 text-[13px] font-medium text-[#777169] transition hover:border-red-300 hover:text-red-600">
+                  <Icon name="mdi:trash-can-outline" class="text-sm" />
+                  Deletar
+                </button>
+              </div>
+            </div>
+
+            <div v-if="!isEditing" class="grid gap-6">
+              <div>
+                <p class="mb-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Descrição
+                </p>
+                <p class="text-[15px] leading-[1.6] tracking-[0.15px] text-[#0c0a09]">{{ game.description }}</p>
+              </div>
+
+              <div class="grid gap-5 sm:grid-cols-2">
+                <div>
+                  <p class="mb-2 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Gêneros
+                  </p>
+                  <div class="flex flex-wrap gap-1.5">
+                    <span v-for="genre in game.genres" :key="genre"
+                      class="inline-flex items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2.5 py-1 text-[12px] font-semibold uppercase leading-none tracking-[0.8px] text-[#0c0a09]">
+                      {{ genre }}
+                    </span>
+                  </div>
+                </div>
+
+                <div>
+                  <p class="mb-2 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                    Plataformas</p>
+                  <div class="flex flex-wrap gap-1.5">
+                    <span v-for="platform in game.platforms" :key="platform"
+                      class="inline-flex items-center rounded-full bg-[rgba(167,229,211,0.5)] px-2.5 py-1 text-[12px] font-semibold uppercase leading-none tracking-[0.8px] text-[#0c0a09]">
+                      {{ platform }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-if="game.system_requirements?.cpu || game.system_requirements?.gpu || game.system_requirements?.ram"
+                class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] p-4">
+                <p class="mb-3 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                  Requisitos de sistema</p>
+                <dl class="grid gap-2">
+                  <div v-if="game.system_requirements.cpu" class="flex gap-3">
+                    <dt class="w-10 shrink-0 text-[13px] font-semibold text-[#777169]">CPU</dt>
+                    <dd class="text-[13px] text-[#0c0a09]">{{ game.system_requirements.cpu }}</dd>
+                  </div>
+                  <div v-if="game.system_requirements.gpu" class="flex gap-3">
+                    <dt class="w-10 shrink-0 text-[13px] font-semibold text-[#777169]">GPU</dt>
+                    <dd class="text-[13px] text-[#0c0a09]">{{ game.system_requirements.gpu }}</dd>
+                  </div>
+                  <div v-if="game.system_requirements.ram" class="flex gap-3">
+                    <dt class="w-10 shrink-0 text-[13px] font-semibold text-[#777169]">RAM</dt>
+                    <dd class="text-[13px] text-[#0c0a09]">{{ game.system_requirements.ram }}</dd>
+                  </div>
+                </dl>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <span :class="['inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.8px]',
+                  game.active ? 'bg-emerald-50 text-emerald-700' : 'bg-[#f0efed] text-[#777169]']">
+                  <span :class="['h-1.5 w-1.5 rounded-full', game.active ? 'bg-emerald-500' : 'bg-[#d6d3d1]']"></span>
+                  {{ game.active ? 'Ativo' : 'Inativo' }}
+                </span>
+              </div>
+            </div>
+
+            <form v-else class="grid gap-5" @submit.prevent="saveEdit">
+              <div v-if="editError"
+                class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[15px] leading-[1.47] tracking-[0.15px] text-red-700"
+                role="alert">
+                {{ editError }}
+              </div>
+
+              <div class="grid gap-1.5">
+                <label
+                  class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Título</label>
+                <input v-model="editForm.title" type="text"
+                  class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+              </div>
+
+              <div class="grid gap-1.5">
+                <label
+                  class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Descrição</label>
+                <textarea v-model="editForm.description" rows="3"
+                  class="w-full resize-none rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white"></textarea>
+              </div>
+
+              <div class="grid gap-1.5">
+                <label
+                  class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Developer</label>
+                <input v-model="editForm.developer" type="text"
+                  class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+              </div>
+
+              <div class="grid gap-5 md:grid-cols-2">
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Gêneros</label>
+                  <input v-model="editForm.genresRaw" type="text" placeholder="Separe com vírgula"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Plataformas</label>
+                  <input v-model="editForm.platformsRaw" type="text" placeholder="Separe com vírgula"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+              </div>
+
+              <div class="grid gap-5 md:grid-cols-2">
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Thumbnail
+                    URL</label>
+                  <input v-model="editForm.thumbnail" type="url"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+                <div class="grid gap-1.5">
+                  <label class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Header
+                    URL</label>
+                  <input v-model="editForm.header" type="url"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+              </div>
+
+              <div class="grid gap-5 md:grid-cols-3">
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">CPU</label>
+                  <input v-model="editForm.cpu" type="text"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">GPU</label>
+                  <input v-model="editForm.gpu" type="text"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+                <div class="grid gap-1.5">
+                  <label
+                    class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">RAM</label>
+                  <input v-model="editForm.ram" type="text"
+                    class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+                </div>
+              </div>
+
+              <div class="flex items-center gap-3">
+                <input id="active-edit" v-model="editForm.active" type="checkbox"
+                  class="h-4 w-4 rounded border-[#d6d3d1] accent-[#292524]" />
+                <label for="active-edit" class="text-[15px] leading-[1.47] tracking-[0.15px] text-[#0c0a09]">
+                  Jogo ativo no catálogo
+                </label>
+              </div>
+
+              <div class="flex justify-end gap-3 border-t border-[#e7e5e4] pt-5">
+                <button type="button" @click="cancelEditing"
+                  class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+                  Cancelar
+                </button>
+                <button type="submit" :disabled="isSaving"
+                  class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
+                  <Icon v-if="isSaving" name="mdi:loading" class="animate-spin text-base" />
+                  <span>{{ isSaving ? 'Salvando...' : 'Salvar alterações' }}</span>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div
+          class="flex flex-col items-center gap-2 text-center text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
+          <p>
+            Microsserviço consumido: <span
+              class="font-medium text-[#4e4e4e]">https://catalogo-jogos-sd-production.up.railway.app</span>
+            &nbsp;·&nbsp; Feito por Lucas Kauã
+          </p>
+          <span class="inline-flex items-center gap-1.5">
+            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
+            Sistema de validação de token funcional
+          </span>
+        </div>
+      </template>
+    </main>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
+const WISHLIST_API_BASE_URL = 'https://gameverse-wishlist-production.up.railway.app'
+
+const route = useRoute()
+const { $toast } = useNuxtApp()
+
+const token = useCookie('token', {
+  secure: true,
+  sameSite: 'lax',
+  maxAge: 900
+})
+
+const game = ref(null)
+const isLoading = ref(false)
+const errorMessage = ref('')
+const isFavorited = ref(false)
+const togglingFavorite = ref(false)
+const confirmingDelete = ref(false)
+const isDeleting = ref(false)
+const isEditing = ref(false)
+const isSaving = ref(false)
+const editError = ref('')
+
+const editForm = reactive({
+  title: '',
+  description: '',
+  developer: '',
+  genresRaw: '',
+  platformsRaw: '',
+  thumbnail: '',
+  header: '',
+  cpu: '',
+  gpu: '',
+  ram: '',
+  active: true
+})
+
+const clearToken = () => {
+  token.value = null
+}
+
+function startEditing() {
+  editForm.title = game.value.title ?? ''
+  editForm.description = game.value.description ?? ''
+  editForm.developer = game.value.developer ?? ''
+  editForm.genresRaw = (game.value.genres ?? []).join(', ')
+  editForm.platformsRaw = (game.value.platforms ?? []).join(', ')
+  editForm.thumbnail = game.value.images?.thumbnail ?? ''
+  editForm.header = game.value.images?.header ?? ''
+  editForm.cpu = game.value.system_requirements?.cpu ?? ''
+  editForm.gpu = game.value.system_requirements?.gpu ?? ''
+  editForm.ram = game.value.system_requirements?.ram ?? ''
+  editForm.active = game.value.active ?? true
+  isEditing.value = true
+}
+
+function cancelEditing() {
+  isEditing.value = false
+  editError.value = ''
+}
+
+async function fetchGame() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const data = await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${route.params.id_ou_slug}`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    game.value = data?.data ?? null
+
+    if (!game.value) {
+      errorMessage.value = 'Jogo não encontrado.'
+    }
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+    errorMessage.value = error?.data?.message ?? 'Erro ao carregar o jogo. Tente novamente.'
+    $toast.error(errorMessage.value, { duration: 8000 })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function fetchFavoriteStatus() {
+  if (!token.value || !game.value) return
+
+  try {
+    const data = await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    const favorites = (data?.data ?? []).filter((item) => item.is_favorite === 1 || item.is_favorite === true)
+    isFavorited.value = favorites.some((item) => item.game_id === game.value.title)
+  } catch {
+    // falha silenciosa
+  }
+}
+
+async function toggleFavorite() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  togglingFavorite.value = true
+  const gameId = game.value.title
+
+  try {
+    if (isFavorited.value) {
+      await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist/${encodeURIComponent(gameId)}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${token.value}` }
+      })
+      isFavorited.value = false
+      $toast.success(`${gameId} removido dos favoritos.`, { duration: 4000 })
+    } else {
+      await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token.value}` },
+        body: { game_id: gameId, is_wishlist: false, is_favorite: true, price_alert: false }
+      })
+      isFavorited.value = true
+      $toast.success(`${gameId} adicionado aos favoritos!`, { duration: 4000 })
+    }
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+    $toast.error('Erro ao atualizar favoritos. Tente novamente.', { duration: 6000 })
+  } finally {
+    togglingFavorite.value = false
+  }
+}
+
+async function saveEdit() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  editError.value = ''
+  isSaving.value = true
+
+  const body = {
+    title: editForm.title || undefined,
+    description: editForm.description || undefined,
+    developer: editForm.developer || undefined,
+    genres: editForm.genresRaw ? editForm.genresRaw.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
+    platforms: editForm.platformsRaw ? editForm.platformsRaw.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
+    active: editForm.active
+  }
+
+  if (editForm.thumbnail || editForm.header) {
+    body.images = {}
+    if (editForm.thumbnail) body.images.thumbnail = editForm.thumbnail
+    if (editForm.header) body.images.header = editForm.header
+  }
+
+  if (editForm.cpu || editForm.gpu || editForm.ram) {
+    body.system_requirements = {}
+    if (editForm.cpu) body.system_requirements.cpu = editForm.cpu
+    if (editForm.gpu) body.system_requirements.gpu = editForm.gpu
+    if (editForm.ram) body.system_requirements.ram = editForm.ram
+  }
+
+  try {
+    const data = await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${game.value.id}`, {
+      method: 'PATCH',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body
+    })
+    game.value = data?.data ?? game.value
+    isEditing.value = false
+    $toast.success('Jogo atualizado com sucesso!', { duration: 4000 })
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+    editError.value = error?.data?.message ?? 'Erro ao salvar alterações. Tente novamente.'
+    $toast.error(editError.value, { duration: 8000 })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function deleteGame() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  isDeleting.value = true
+
+  try {
+    await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${game.value.id}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    $toast.success(`${game.value.title} removido do catálogo.`, { duration: 4000 })
+    await navigateTo('/catalogo')
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+    $toast.error('Erro ao deletar o jogo. Tente novamente.', { duration: 6000 })
+  } finally {
+    isDeleting.value = false
+    confirmingDelete.value = false
+  }
+}
+
+onMounted(async () => {
+  await fetchGame()
+  fetchFavoriteStatus()
+})
+</script>
diff --git a/app/pages/(protected)/catalogo/criar.vue b/app/pages/(protected)/catalogo/criar.vue
new file mode 100644
index 0000000..6779fe7
--- /dev/null
+++ b/app/pages/(protected)/catalogo/criar.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-10 font-sans text-[#0c0a09] md:px-8 md:py-16">
+    <div
+      class="pointer-events-none absolute left-1/2 top-8 h-[460px] w-[min(92vw,820px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(196,184,232,0.6),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(167,229,211,0.56),transparent_34%)] blur-2xl"
+      aria-hidden="true"></div>
+
+    <main class="relative mx-auto grid w-full max-w-[720px] gap-8" aria-labelledby="criar-title">
+      <header class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p
+            class="m-0 inline-flex rounded-full bg-[rgba(196,184,232,0.6)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
+            Catálogo
+          </p>
+          <h1 id="criar-title"
+            class="my-5 max-w-[720px] font-serif text-[40px] font-light leading-[1.08] tracking-[-0.96px] text-[#0c0a09] md:text-[48px]">
+            Novo jogo
+          </h1>
+          <p class="m-0 max-w-[560px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e]">
+            Preencha os dados para adicionar um jogo ao catálogo.
+          </p>
+        </div>
+
+        <NuxtLink to="/catalogo"
+          class="inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+          Voltar
+        </NuxtLink>
+      </header>
+
+      <form
+        class="grid gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:p-8"
+        aria-label="Formulário de criação de jogo" @submit.prevent="submitForm">
+        <div>
+          <span
+            class="inline-flex min-h-6 items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
+            Informações
+          </span>
+          <h2 class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09]">
+            Dados do jogo
+          </h2>
+        </div>
+
+        <div v-if="formError"
+          class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[15px] leading-[1.47] tracking-[0.15px] text-red-700"
+          role="alert">
+          {{ formError }}
+        </div>
+
+        <div class="grid gap-5">
+          <div class="grid gap-1.5">
+            <label for="title" class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+              Título <span class="text-red-500">*</span>
+            </label>
+            <input id="title" v-model="form.title" type="text" placeholder="Ex: Counter-Strike 2" required
+              class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+          </div>
+
+          <div class="grid gap-1.5">
+            <label for="description"
+              class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+              Descrição <span class="text-red-500">*</span>
+            </label>
+            <textarea id="description" v-model="form.description" rows="3" placeholder="Descreva o jogo..." required
+              class="w-full resize-none rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white"></textarea>
+          </div>
+
+          <div class="grid gap-1.5">
+            <label for="developer"
+              class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+              Developer <span class="text-red-500">*</span>
+            </label>
+            <input id="developer" v-model="form.developer" type="text" placeholder="Ex: Valve" required
+              class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+          </div>
+
+          <div class="grid gap-5 md:grid-cols-2">
+            <div class="grid gap-1.5">
+              <label for="genres"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                Gêneros <span class="text-red-500">*</span>
+              </label>
+              <input id="genres" v-model="form.genresRaw" type="text" placeholder="Ex: FPS, Ação, Multiplayer" required
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+              <p class="text-xs leading-[1.4] text-[#777169]">Separe com vírgula</p>
+            </div>
+
+            <div class="grid gap-1.5">
+              <label for="platforms"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                Plataformas <span class="text-red-500">*</span>
+              </label>
+              <input id="platforms" v-model="form.platformsRaw" type="text" placeholder="Ex: PC, PlayStation 5" required
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+              <p class="text-xs leading-[1.4] text-[#777169]">Separe com vírgula</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-[#e7e5e4] pt-5">
+          <span
+            class="inline-flex min-h-6 items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
+            Imagens
+          </span>
+          <p class="mb-4 mt-3 text-[13px] leading-[1.5] text-[#777169]">Opcional — URLs públicas das imagens do jogo.
+          </p>
+
+          <div class="grid gap-5 md:grid-cols-2">
+            <div class="grid gap-1.5">
+              <label for="thumbnail"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                Thumbnail URL
+              </label>
+              <input id="thumbnail" v-model="form.thumbnail" type="url" placeholder="https://..."
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+            </div>
+
+            <div class="grid gap-1.5">
+              <label for="header"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+                Header URL
+              </label>
+              <input id="header" v-model="form.header" type="url" placeholder="https://..."
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-[#e7e5e4] pt-5">
+          <span
+            class="inline-flex min-h-6 items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
+            Requisitos de sistema
+          </span>
+          <p class="mb-4 mt-3 text-[13px] leading-[1.5] text-[#777169]">Opcional.</p>
+
+          <div class="grid gap-5 md:grid-cols-3">
+            <div class="grid gap-1.5">
+              <label for="cpu"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">CPU</label>
+              <input id="cpu" v-model="form.cpu" type="text" placeholder="Ex: Intel i5-8400"
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+            </div>
+            <div class="grid gap-1.5">
+              <label for="gpu"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">GPU</label>
+              <input id="gpu" v-model="form.gpu" type="text" placeholder="Ex: GTX 1060"
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+            </div>
+            <div class="grid gap-1.5">
+              <label for="ram"
+                class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">RAM</label>
+              <input id="ram" v-model="form.ram" type="text" placeholder="Ex: 8 GB"
+                class="w-full rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-2.5 text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09] focus:bg-white" />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-3 border-t border-[#e7e5e4] pt-5">
+          <input id="active" v-model="form.active" type="checkbox"
+            class="h-4 w-4 rounded border-[#d6d3d1] accent-[#292524]" />
+          <label for="active" class="text-[15px] leading-[1.47] tracking-[0.15px] text-[#0c0a09]">
+            Jogo ativo no catálogo
+          </label>
+        </div>
+
+        <div class="flex justify-end gap-3 border-t border-[#e7e5e4] pt-5">
+          <NuxtLink to="/catalogo"
+            class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+            Cancelar
+          </NuxtLink>
+          <button type="submit" :disabled="isSubmitting"
+            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
+            <Icon v-if="isSubmitting" name="mdi:loading" class="animate-spin text-base" />
+            <span>{{ isSubmitting ? 'Salvando...' : 'Salvar jogo' }}</span>
+          </button>
+        </div>
+      </form>
+    </main>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
+
+const { $toast } = useNuxtApp()
+
+const token = useCookie('token', {
+  secure: true,
+  sameSite: 'lax',
+  maxAge: 900
+})
+
+const isSubmitting = ref(false)
+const formError = ref('')
+
+const form = reactive({
+  title: '',
+  description: '',
+  developer: '',
+  genresRaw: '',
+  platformsRaw: '',
+  thumbnail: '',
+  header: '',
+  cpu: '',
+  gpu: '',
+  ram: '',
+  active: true
+})
+
+const clearToken = () => {
+  token.value = null
+}
+
+async function submitForm() {
+  formError.value = ''
+
+  const genres = form.genresRaw.split(',').map((s) => s.trim()).filter(Boolean)
+  const platforms = form.platformsRaw.split(',').map((s) => s.trim()).filter(Boolean)
+
+  if (!form.title || !form.description || !form.developer || !genres.length || !platforms.length) {
+    formError.value = 'Preencha todos os campos obrigatórios.'
+    return
+  }
+
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  isSubmitting.value = true
+
+  const body = {
+    title: form.title,
+    description: form.description,
+    developer: form.developer,
+    genres,
+    platforms,
+    active: form.active
+  }
+
+  if (form.thumbnail || form.header) {
+    body.images = {}
+    if (form.thumbnail) body.images.thumbnail = form.thumbnail
+    if (form.header) body.images.header = form.header
+  }
+
+  if (form.cpu || form.gpu || form.ram) {
+    body.system_requirements = {}
+    if (form.cpu) body.system_requirements.cpu = form.cpu
+    if (form.gpu) body.system_requirements.gpu = form.gpu
+    if (form.ram) body.system_requirements.ram = form.ram
+  }
+
+  try {
+    await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body
+    })
+    $toast.success(`${form.title} adicionado ao catálogo!`, { duration: 5000 })
+    await navigateTo('/catalogo')
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+
+    formError.value = error?.data?.message ?? 'Erro ao criar o jogo. Verifique os dados e tente novamente.'
+    $toast.error(formError.value, { duration: 8000 })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
diff --git a/app/pages/(protected)/catalogo/index.vue b/app/pages/(protected)/catalogo/index.vue
new file mode 100644
index 0000000..bfbe7ea
--- /dev/null
+++ b/app/pages/(protected)/catalogo/index.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-10 font-sans text-[#0c0a09] md:px-8 md:py-16">
+    <div
+      class="pointer-events-none absolute left-1/2 top-8 h-[460px] w-[min(92vw,820px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(196,184,232,0.6),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(167,229,211,0.56),transparent_34%)] blur-2xl"
+      aria-hidden="true"></div>
+
+    <main class="relative mx-auto grid w-full max-w-[1120px] gap-8" aria-labelledby="catalogo-title">
+      <header class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p
+            class="m-0 inline-flex rounded-full bg-[rgba(196,184,232,0.6)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
+            Catálogo
+          </p>
+          <h1 id="catalogo-title"
+            class="my-5 max-w-[720px] font-serif text-[40px] font-light leading-[1.08] tracking-[-0.96px] text-[#0c0a09] md:text-[48px]">
+            Catálogo de jogos
+          </h1>
+          <p class="m-0 max-w-[560px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e]">
+            Explore o catálogo completo de jogos, filtre por gênero e plataforma.
+          </p>
+        </div>
+
+        <div class="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center">
+          <NuxtLink to="/catalogo/criar"
+            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09]">
+            <Icon name="mdi:plus" class="text-base" />
+            Novo jogo
+          </NuxtLink>
+          <NuxtLink to="/home"
+            class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+            Voltar
+          </NuxtLink>
+        </div>
+      </header>
+
+      <section
+        class="grid gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:p-8"
+        aria-label="Lista do catálogo de jogos">
+        <div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-end">
+          <AppSelect id="genre-filter" v-model="selectedGenre" label="Gênero" :options="genreOptions"
+            :disabled="isLoading" />
+          <AppSelect id="platform-filter" v-model="selectedPlatform" label="Plataforma" :options="platformOptions"
+            :disabled="isLoading" />
+        </div>
+
+        <div v-if="isLoading" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="status" aria-live="polite">
+          <div v-for="item in 6" :key="item" class="h-56 animate-pulse rounded-xl bg-[#f0efed]"></div>
+        </div>
+
+        <div v-else-if="errorMessage"
+          class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[15px] leading-[1.47] tracking-[0.15px] text-red-700"
+          role="alert">
+          {{ errorMessage }}
+        </div>
+
+        <div v-else-if="!filteredGames.length"
+          class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-8 text-center" role="status">
+          <Icon name="mdi:gamepad-variant-outline" class="mb-3 text-4xl text-[#d6d3d1]" />
+          <p class="text-[15px] leading-[1.47] tracking-[0.15px] text-[#777169]">
+            Nenhum jogo encontrado com esses filtros.
+          </p>
+        </div>
+
+        <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <article v-for="game in filteredGames" :key="game.id"
+            class="flex flex-col overflow-hidden rounded-xl border border-[#e7e5e4] bg-white transition hover:shadow-[0_4px_16px_rgba(0,0,0,0.08)]">
+            <div class="relative h-36 bg-[#f0efed]">
+              <img v-if="game.images?.thumbnail" :src="game.images.thumbnail" :alt="game.title"
+                class="h-full w-full object-cover" />
+              <div v-else class="flex h-full w-full items-center justify-center">
+                <Icon name="mdi:gamepad-variant-outline" class="text-4xl text-[#d6d3d1]" />
+              </div>
+
+              <button type="button" :disabled="togglingId === game.title"
+                :aria-label="favoriteIds.has(game.title) ? 'Remover dos favoritos' : 'Adicionar aos favoritos'"
+                @click="toggleFavorite(game)"
+                class="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/80 shadow backdrop-blur-sm transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50">
+                <Icon
+                  :name="togglingId === game.title ? 'mdi:loading' : favoriteIds.has(game.title) ? 'mdi:heart' : 'mdi:heart-outline'"
+                  :class="['text-base', togglingId === game.title ? 'animate-spin text-[#777169]' : favoriteIds.has(game.title) ? 'text-rose-500' : 'text-[#777169]']" />
+              </button>
+            </div>
+
+            <div class="flex flex-1 flex-col gap-3 p-4">
+              <div class="grid gap-1">
+                <h3 class="text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
+                  {{ game.title }}
+                </h3>
+                <p class="text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
+                  {{ game.developer }}
+                </p>
+              </div>
+
+              <div class="flex flex-wrap gap-1.5">
+                <span v-for="genre in game.genres?.slice(0, 3)" :key="genre"
+                  class="inline-flex items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2 py-0.5 text-[11px] font-semibold uppercase leading-none tracking-[0.8px] text-[#0c0a09]">
+                  {{ genre }}
+                </span>
+              </div>
+
+              <p class="line-clamp-2 flex-1 text-[13px] leading-[1.5] tracking-[0.13px] text-[#4e4e4e]">
+                {{ game.description }}
+              </p>
+
+              <div class="flex items-center justify-between gap-2 border-t border-[#f0efed] pt-3">
+                <div v-if="confirmingDeleteId === game.id" class="flex gap-2">
+                  <button type="button" :disabled="deletingId === game.id" @click="confirmDelete(game)"
+                    class="inline-flex h-7 items-center justify-center gap-1 rounded-full bg-red-50 px-3 text-[12px] font-medium text-red-600 transition hover:bg-red-100 disabled:opacity-50">
+                    <Icon :name="deletingId === game.id ? 'mdi:loading' : 'mdi:check'" class="text-xs"
+                      :class="deletingId === game.id && 'animate-spin'" />
+                    Confirmar
+                  </button>
+                  <button type="button" @click="confirmingDeleteId = null"
+                    class="inline-flex h-7 items-center justify-center rounded-full border border-[#e7e5e4] px-3 text-[12px] font-medium text-[#777169] transition hover:border-[#0c0a09]">
+                    Cancelar
+                  </button>
+                </div>
+
+                <button v-else type="button" :aria-label="`Deletar ${game.title}`" @click="confirmingDeleteId = game.id"
+                  class="inline-flex h-7 w-7 items-center justify-center rounded-full transition hover:bg-red-50 hover:text-red-500">
+                  <Icon name="mdi:trash-can-outline" class="text-sm text-[#777169]" />
+                </button>
+
+                <NuxtLink :to="`/catalogo/${game.id}`"
+                  class="inline-flex h-7 items-center justify-center gap-1 rounded-full border border-[#e7e5e4] px-3 text-[12px] font-medium text-[#0c0a09] transition hover:border-[#0c0a09]">
+                  Ver detalhes
+                  <Icon name="mdi:arrow-right" class="text-xs" />
+                </NuxtLink>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <div class="flex flex-col items-center gap-2 text-center text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
+        <p>
+          Microsserviço consumido: <span
+            class="font-medium text-[#4e4e4e]">https://catalogo-jogos-sd-production.up.railway.app</span>
+          &nbsp;·&nbsp; Feito por Lucas Kauã
+        </p>
+        <span class="inline-flex items-center gap-1.5">
+          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
+          Sistema de validação de token funcional
+        </span>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
+const WISHLIST_API_BASE_URL = 'https://gameverse-wishlist-production.up.railway.app'
+
+const { $toast } = useNuxtApp()
+
+const token = useCookie('token', {
+  secure: true,
+  sameSite: 'lax',
+  maxAge: 900
+})
+
+const games = ref([])
+const isLoading = ref(false)
+const errorMessage = ref('')
+const favoriteIds = ref(new Set())
+const togglingId = ref(null)
+const confirmingDeleteId = ref(null)
+const deletingId = ref(null)
+const selectedGenre = ref('')
+const selectedPlatform = ref('')
+
+const clearToken = () => {
+  token.value = null
+}
+
+const uniqueGenres = computed(() => {
+  const all = games.value.flatMap((g) => g.genres ?? [])
+  return [...new Set(all)].sort()
+})
+
+const uniquePlatforms = computed(() => {
+  const all = games.value.flatMap((g) => g.platforms ?? [])
+  return [...new Set(all)].sort()
+})
+
+const genreOptions = computed(() => [
+  { label: 'Todos os gêneros', value: '' },
+  ...uniqueGenres.value.map((g) => ({ label: g, value: g }))
+])
+
+const platformOptions = computed(() => [
+  { label: 'Todas as plataformas', value: '' },
+  ...uniquePlatforms.value.map((p) => ({ label: p, value: p }))
+])
+
+const filteredGames = computed(() => {
+  return games.value
+    .filter((g) => !selectedGenre.value || g.genres?.includes(selectedGenre.value))
+    .filter((g) => !selectedPlatform.value || g.platforms?.includes(selectedPlatform.value))
+})
+
+async function fetchGames() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const data = await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    games.value = data?.data ?? []
+  } catch (error) {
+    errorMessage.value = error?.data?.message ?? 'Erro ao carregar o catálogo. Tente novamente.'
+    $toast.error(errorMessage.value, { duration: 8000 })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function fetchFavorites() {
+  if (!token.value) return
+
+  try {
+    const data = await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    favoriteIds.value = new Set(
+      (data?.data ?? [])
+        .filter((item) => item.is_favorite === 1 || item.is_favorite === true)
+        .map((item) => item.game_id)
+    )
+  } catch {
+    // falha silenciosa
+  }
+}
+
+async function toggleFavorite(game) {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  const gameId = game.title
+  togglingId.value = gameId
+
+  try {
+    if (favoriteIds.value.has(gameId)) {
+      await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist/${encodeURIComponent(gameId)}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${token.value}` }
+      })
+      favoriteIds.value = new Set([...favoriteIds.value].filter((id) => id !== gameId))
+      $toast.success(`${gameId} removido dos favoritos.`, { duration: 4000 })
+    } else {
+      await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token.value}` },
+        body: { game_id: gameId, is_wishlist: false, is_favorite: true, price_alert: false }
+      })
+      favoriteIds.value = new Set([...favoriteIds.value, gameId])
+      $toast.success(`${gameId} adicionado aos favoritos!`, { duration: 4000 })
+    }
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+    $toast.error('Erro ao atualizar favoritos. Tente novamente.', { duration: 6000 })
+  } finally {
+    togglingId.value = null
+  }
+}
+
+async function confirmDelete(game) {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  deletingId.value = game.id
+
+  try {
+    await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${game.id}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    games.value = games.value.filter((g) => g.id !== game.id)
+    confirmingDeleteId.value = null
+    $toast.success(`${game.title} removido do catálogo.`, { duration: 4000 })
+  } catch (error) {
+    $toast.error(error?.data?.message ?? 'Erro ao remover o jogo. Tente novamente.', { duration: 6000 })
+  } finally {
+    deletingId.value = null
+  }
+}
+
+onMounted(() => {
+  fetchGames()
+  fetchFavorites()
+})
+</script>
diff --git a/app/pages/(protected)/home/index.vue b/app/pages/(protected)/home/index.vue
index e1a4354..f57aef2 100644
--- a/app/pages/(protected)/home/index.vue
+++ b/app/pages/(protected)/home/index.vue
@@ -31,6 +31,10 @@
             class="inline-flex h-10 w-fit items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
             Meus favoritos
           </NuxtLink>
+          <NuxtLink to="/catalogo"
+            class="inline-flex h-10 w-fit items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+            Catálogo
+          </NuxtLink>
           <button type="button" :disabled="isLeaving" @click="sair"
             class="inline-flex h-10 w-fit items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
             <Icon v-if="isLeaving" name="mdi:loading" class="animate-spin text-base" />