feat(games): add steam pages with steam price/reduc

polylan_submitter/src/Home.vue

@@ -18,6 +18,7 @@ useTitle(computed(() => t("home.title")));
 
 const games = ref<GamesApiListEventGamesResponse | undefined>();
 const loading = ref(true);
+const hasSteamGames = computed(() => games.value?.some((game) => game.steam_app_id) ?? false);
 const imageErrors = ref<Set<number>>(new Set());
 
 const getHeaderImage = (game: GamesApiListEventGamesResponse[number]) => {
@@ -83,7 +84,7 @@ onMounted(async () => {
           </figure>
           <div class="card-body">
             <h2 class="card-title text-2xl">{{ game.name }}</h2>
-            <p v-if="game.description" class="text-base-content/70">{{ game.description }}</p>
+            <p v-if="game.description" class="text-sm text-base-content/70 line-clamp-2" :title="game.description">{{ game.description }}</p>
             <div class="card-actions justify-end mt-4">
               <button class="btn btn-primary">
                 <i class="mdi mdi-arrow-right mr-2"></i>
@@ -94,6 +95,14 @@ onMounted(async () => {
         </div>
       </div>
 
+      <!-- Link to the Steam games page -->
+      <div v-if="!loading && hasSteamGames" class="text-center mt-12">
+        <RouterLink :to="{ name: 'games', params: { eventPath } }" class="btn btn-outline">
+          <i class="mdi mdi-steam mr-2"></i>
+          {{ t("home.getTheGames") }}
+        </RouterLink>
+      </div>
+
       <!-- Footer -->
       <div class="text-center mt-12 text-base-content/50">
         <p>{{ t("home.footer") }}</p>