@mundogamernetwork/shared-ui 1.3.7 → 1.4.1

package/pages/mural/[slug].vue

@@ -4,7 +4,7 @@ import SupportStepper from '../../components/indie-wall/SupportStepper.vue'
 import MuralCanvas from '../../components/indie-wall/MuralCanvas.vue'
 import IndieWallLeaderboard from '../../components/indie-wall/IndieWallLeaderboard.vue'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const wallSlug = route.params.slug as string
@@ -142,6 +142,15 @@ const goals = ref<any[]>([])
 const supporters = ref<any[]>([])
 const loading = ref(true)
 
+// SSR-safe fetch so bots/link-preview scrapers (which don't run JS) get the
+// real wall data for the SEO tags below, without waiting for the client-side
+// onMounted → loadWall() refresh (which still runs for goals/supporters/WS).
+const { data: ssrWallData } = await useAsyncData(
+    `mural-wall-${wallSlug}`,
+    () => fetchPublicWall(wallSlug).then(r => r.data?.data || r.data).catch(() => null),
+)
+if (ssrWallData.value) wall.value = ssrWallData.value
+
 // ── Stepper state ──────────────────────────────────────────────────────────
 const showStepper = ref(false)
 const stepperStartStep = ref<1 | 2 | 3 | 4 | 5>(1)
@@ -163,6 +172,15 @@ const progressPercent = computed(() => {
     return total > 0 ? Math.min(100, ((wall.value.used_pixels || 0) / total) * 100) : 0
 })
 
+// Locale-aware currency symbol + consistent decimals (was raw "BRL 500" string concat).
+function formatMoney(amount: number, currency?: string | null) {
+    try {
+        return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD' }).format(amount)
+    } catch {
+        return `${currency || ''} ${Number(amount).toFixed(2)}`.trim()
+    }
+}
+
 // ── Load ────────────────────────────────────────────────────────────────────
 async function loadWall() {
     loading.value = true
@@ -191,6 +209,13 @@ async function loadWall() {
             stepperStartStep.value = 1
             showStepper.value = true
         }
+
+        // Deep-link from a supporter's own share link (?pixel=123): open their
+        // pixel detail automatically so the shared link lands on their spot.
+        if (route.query.pixel) {
+            const shared = supporters.value.find((s: any) => String(s.id) === String(route.query.pixel))
+            if (shared) detailPixel.value = shared
+        }
     } catch (err) {
         console.error(err)
     } finally {
@@ -214,8 +239,19 @@ function onCanvasTapEmpty(coord: { x: number; y: number }) {
     })
 }
 
-function onCanvasTapSupporter(s: any) {
+function openPixelDetail(s: any) {
     detailPixel.value = s
+    router.replace({ query: { ...route.query, pixel: s.id } })
+}
+
+function closePixelDetail() {
+    detailPixel.value = null
+    const { pixel: _omit, ...rest } = route.query
+    router.replace({ query: rest })
+}
+
+function onCanvasTapSupporter(s: any) {
+    openPixelDetail(s)
 }
 
 const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
@@ -248,10 +284,93 @@ function supporterDisplayName(s: any): string {
     return s.title || s.user?.name || t('tv.dashboard.indie_wall.anonymous')
 }
 
-useHead({
-    title: computed(() => wall.value?.name ? `Mural · ${wall.value.name}` : 'Mural'),
+const requestUrl = useRequestURL()
+
+// When a supporter's own pixel is open (either they just clicked it, or a
+// visitor followed that supporter's share link), the page's own title/
+// description swap to their name+message so *their* share card, not just
+// the wall's, reads correctly. Image stays the wall's own cover — pixel
+// images are inline base64, not real URLs, so crawlers can't fetch them.
+const seoTitle = computed(() => {
+    if (detailPixel.value && wall.value) {
+        return t('tv.dashboard.indie_wall.share_pixel_title', { name: supporterDisplayName(detailPixel.value), wall: wall.value.name })
+    }
+    return wall.value?.name ? `${wall.value.name} · Mundo Gamer Wall` : 'Mundo Gamer Wall'
+})
+const seoDescription = computed(() => {
+    if (detailPixel.value) {
+        return detailPixel.value.supporter_message
+            || (wall.value?.name ? t('tv.dashboard.indie_wall.share_pixel_default_desc', { wall: wall.value.name }) : '')
+    }
+    return wall.value?.description || wall.value?.long_description?.replace(/\n+/g, ' ').slice(0, 160) || ''
+})
+const seoImage = computed(() => wall.value?.cover_image_url || wall.value?.logo_url || '')
+
+// ── Per-supporter share link ────────────────────────────────────────────────
+const sharePixelUrl = computed(() => {
+    if (!detailPixel.value) return requestUrl.href
+    const base = `${requestUrl.origin}${route.path}`
+    return `${base}?pixel=${detailPixel.value.id}`
+})
+const shareText = computed(() => {
+    if (!detailPixel.value || !wall.value) return ''
+    return t('tv.dashboard.indie_wall.share_pixel_text', { name: supporterDisplayName(detailPixel.value), wall: wall.value.name })
+})
+const shareTwitterUrl = computed(() => `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText.value)}&url=${encodeURIComponent(sharePixelUrl.value)}`)
+const shareWhatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(`${shareText.value} ${sharePixelUrl.value}`)}`)
+const shareFacebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(sharePixelUrl.value)}`)
+
+const linkCopied = ref(false)
+async function copyShareLink() {
+    try {
+        await navigator.clipboard.writeText(sharePixelUrl.value)
+        linkCopied.value = true
+        setTimeout(() => { linkCopied.value = false }, 2000)
+    } catch { /* clipboard unavailable */ }
+}
+
+// "Create your own wall" footer CTA — same host map as the backend's
+// IndieWallController::resolverResponse, so it always points at whichever
+// platform (TV/Agency) actually owns this wall rather than a hardcoded host.
+const CREATE_WALL_HOST_MAP: Record<string, string> = {
+    MGTV: 'https://mundogamer.tv',
+    MGAG: 'https://mundogamer.agency',
+}
+const createWallUrl = computed(() => {
+    const shortName = wall.value?.origin_system?.short_name
+    const host = (shortName && CREATE_WALL_HOST_MAP[shortName]) || CREATE_WALL_HOST_MAP.MGTV
+    return `${host}/${locale.value}/dashboard/wall`
 })
 
+// Raw useHead meta-array form — matches the exact mechanism the site-wide
+// defaults in nuxt.config.ts use, and is proven to reliably override by
+// name/property key in this app. useSeoMeta was tried first but its og:*/
+// twitter:*/description overrides were silently dropped here (stray
+// duplicate `unhead`/`@vueuse/head` deps in community-frontend/package.json
+// likely cause a resolution conflict) — only `title` and `ogUrl` came
+// through. Do not switch this back to useSeoMeta without first removing
+// those stray deps and re-verifying against raw SSR HTML (curl), not just
+// the browser, since hydration can mask a server-side-only failure.
+useHead(() => ({
+    title: seoTitle.value,
+    link: [{ rel: 'canonical', href: requestUrl.href }],
+    meta: [
+        { name: 'description', content: seoDescription.value },
+        { property: 'og:title', content: seoTitle.value },
+        { property: 'og:description', content: seoDescription.value },
+        // Only override the image when the wall actually has one — an empty
+        // string would replace (not fall back to) the site default image.
+        ...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
+        { property: 'og:type', content: 'website' },
+        { property: 'og:url', content: requestUrl.href },
+        { property: 'og:site_name', content: 'Mundo Gamer Wall' },
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: seoTitle.value },
+        { name: 'twitter:description', content: seoDescription.value },
+        ...(seoImage.value ? [{ name: 'twitter:image', content: seoImage.value }] : []),
+    ],
+}))
+
 onMounted(async () => {
     await loadWall()
     if (wall.value?.id) subscribeWall(wall.value.id)
@@ -318,11 +437,15 @@ onUnmounted(() => {
             <div class="hero-overlay">
                 <img v-if="wall.logo_url" :src="wall.logo_url" class="hero-logo" alt="" />
                 <h1 class="hero-title">{{ wall.name }}</h1>
+                <div v-if="wall.owner_nickname || wall.owner_name" class="hero-owner">
+                    <img v-if="wall.owner_avatar_url" :src="wall.owner_avatar_url" class="hero-owner-avatar" alt="" />
+                    <span class="hero-owner-name">{{ $t('tv.dashboard.indie_wall.mural_by', { name: wall.owner_nickname || wall.owner_name }) }}</span>
+                </div>
                 <p v-if="wall.description" class="hero-desc">{{ wall.description }}</p>
 
                 <div class="hero-stats">
                     <div class="hero-stat">
-                        <span class="hero-stat-value">{{ wall.currency }} {{ Number(wall.raised_amount || 0).toFixed(2) }}</span>
+                        <span class="hero-stat-value">{{ formatMoney(Number(wall.raised_amount || 0), wall.currency) }}</span>
                         <span class="hero-stat-label">{{ $t('tv.dashboard.indie_wall.raised') }}</span>
                     </div>
                     <div class="hero-stat-divider" />
@@ -372,7 +495,7 @@ onUnmounted(() => {
                                 {{ $t('tv.dashboard.indie_wall.reached') }}
                             </span>
                             <span v-else-if="goal.target_amount > 0" class="goal-amount">
-                                {{ wall.currency }} {{ Number(goal.target_amount).toFixed(0) }}
+                                {{ formatMoney(Number(goal.target_amount), wall.currency) }}
                             </span>
                             <span v-else class="goal-amount">
                                 {{ goal.target_pixels }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}
@@ -396,7 +519,7 @@ onUnmounted(() => {
                             <div class="goal-progress-fill" :style="{ width: (goal.progress_percent || 0) + '%' }" />
                             <span class="goal-progress-text">
                                 <template v-if="goal.target_amount > 0">
-                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing_amount', { currency: wall.currency, amount: Math.max(0, goal.target_amount - (goal.current_amount || 0)).toFixed(0) }) }}
+                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing_amount', { amount: formatMoney(Math.max(0, goal.target_amount - (goal.current_amount || 0)), wall.currency) }) }}
                                 </template>
                                 <template v-else>
                                     {{ $t('tv.dashboard.indie_wall.goal_card_missing', { count: Math.max(0, (goal.target_pixels || 0) - (goal.current_pixels || 0)) }) }}
@@ -433,7 +556,7 @@ onUnmounted(() => {
                 >
                     <img v-if="tier.image_url" :src="tier.image_url" class="tier-img" alt="" />
                     <h3 class="tier-name">{{ tier.name }}</h3>
-                    <div class="tier-price">{{ tier.currency || wall.currency }} {{ Number(tier.price).toFixed(2) }}</div>
+                    <div class="tier-price">{{ formatMoney(Number(tier.price), tier.currency || wall.currency) }}</div>
                     <p class="tier-pixels">{{ tier.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</p>
                     <p v-if="tier.description" class="tier-desc">{{ tier.description }}</p>
                     <div v-if="tier.max_quantity" class="tier-stock">
@@ -471,7 +594,7 @@ onUnmounted(() => {
         <section v-if="supporters.length" class="section">
             <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.recent_supporters') }}</h2>
             <div class="supporters-grid">
-                <div v-for="s in supporters.slice(0, 24)" :key="s.id" class="supp-card" @click="detailPixel = s">
+                <div v-for="s in supporters.slice(0, 24)" :key="s.id" class="supp-card" @click="openPixelDetail(s)">
                     <div class="supp-pixel">
                         <img v-if="s.image_url" :src="s.image_url" class="supp-pixel-img" alt="" />
                         <div v-else class="supp-pixel-swatch" :style="{ background: s.background_color || '#272930' }" />
@@ -484,7 +607,7 @@ onUnmounted(() => {
                                 <span class="supp-name">{{ supporterDisplayName(s) }}</span>
                                 <span v-if="!s.is_anonymous && !s.user && s.guest_email" class="supp-email">{{ s.guest_email }}</span>
                             </div>
-                            <span class="supp-amount">{{ wall.currency }} {{ Number(s.amount_paid || 0).toFixed(2) }}</span>
+                            <span class="supp-amount">{{ formatMoney(Number(s.amount_paid || 0), wall.currency) }}</span>
                         </div>
                         <p v-if="s.message || s.supporter_message" class="supp-msg">"{{ s.message || s.supporter_message }}"</p>
                     </div>
@@ -497,6 +620,16 @@ onUnmounted(() => {
             <IndieWallLeaderboard :supporters="supporters" />
         </section>
 
+        <!-- ── Footer credit ─────────────────────────────────────────────────── -->
+        <footer class="mural-footer">
+            <p class="mural-footer-text">
+                {{ $t('tv.dashboard.indie_wall.footer_made_with') }} <strong>Mundo Gamer Wall</strong>
+            </p>
+            <a :href="createWallUrl" target="_blank" rel="noopener" class="mural-footer-cta">
+                {{ $t('tv.dashboard.indie_wall.footer_create_cta') }}
+            </a>
+        </footer>
+
     </div>
 
     <!-- ── Overlays ────────────────────────────────────────────────────────── -->
@@ -568,7 +701,7 @@ onUnmounted(() => {
                     <p class="hover-tip-name">{{ supporterDisplayName(hoverTip.supporter) }}</p>
                     <p v-if="hoverTip.supporter.supporter_message" class="hover-tip-msg">"{{ hoverTip.supporter.supporter_message }}"</p>
                     <div class="hover-tip-badges">
-                        <span class="hover-tip-amount">{{ wall.currency }} {{ Number(hoverTip.supporter.amount_paid || 0).toFixed(2) }}</span>
+                        <span class="hover-tip-amount">{{ formatMoney(Number(hoverTip.supporter.amount_paid || 0), wall.currency) }}</span>
                         <span class="hover-tip-pixels">{{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
                     </div>
                 </div>
@@ -576,9 +709,9 @@ onUnmounted(() => {
         </Transition>
 
         <Transition name="fade">
-            <div v-if="detailPixel" class="detail-overlay" @click.self="detailPixel = null">
+            <div v-if="detailPixel" class="detail-overlay" @click.self="closePixelDetail">
                 <div class="detail-box">
-                    <button class="overlay-close" type="button" @click="detailPixel = null">×</button>
+                    <button class="overlay-close" type="button" @click="closePixelDetail">×</button>
                     <div
                         class="detail-hero"
                         :style="{ background: detailPixel.background_color || '#272930' }"
@@ -592,7 +725,7 @@ onUnmounted(() => {
                         <div class="detail-amount-row">
                             <span class="detail-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
                             <span class="detail-amount-value">
-                                <span v-if="wall">{{ wall.currency }}</span> {{ Number(detailPixel.amount_paid).toFixed(2) }}
+                                {{ formatMoney(Number(detailPixel.amount_paid), wall?.currency) }}
                             </span>
                         </div>
                         <div class="detail-chips">
@@ -602,6 +735,24 @@ onUnmounted(() => {
                         <a v-if="detailPixel.link" :href="detailPixel.link" target="_blank" rel="noopener" class="detail-link">
                             {{ detailPixel.link }}
                         </a>
+
+                        <!-- ── Share this pixel ─────────────────────────────────────── -->
+                        <div class="detail-share">
+                            <p class="detail-share-title">{{ $t('tv.dashboard.indie_wall.share_pixel_cta') }}</p>
+                            <div class="detail-share-row">
+                                <a :href="shareTwitterUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_twitter')">𝕏</a>
+                                <a :href="shareWhatsappUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_whatsapp')">
+                                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.2h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z" opacity="0"/><path d="M9.2 6.8c-.2-.45-.42-.46-.62-.47h-.53c-.18 0-.48.07-.73.34-.25.27-.96.93-.96 2.28s.98 2.65 1.12 2.83c.14.18 1.9 3.03 4.7 4.14 2.32.92 2.8.74 3.3.7.5-.05 1.62-.66 1.85-1.3.23-.63.23-1.17.16-1.29-.07-.11-.25-.18-.53-.32-.27-.14-1.62-.8-1.87-.89-.25-.09-.43-.14-.62.14-.18.27-.7.89-.86 1.07-.16.18-.32.2-.59.07-.27-.14-1.15-.42-2.19-1.35-.81-.72-1.36-1.62-1.52-1.89-.16-.27-.02-.42.12-.55.13-.13.27-.33.4-.5.13-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.6-1.5-.85-2.05Z"/></svg>
+                                </a>
+                                <a :href="shareFacebookUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_facebook')">f</a>
+                                <button type="button" class="detail-share-btn" @click="copyShareLink" :aria-label="$t('tv.dashboard.indie_wall.share_copy_link')">
+                                    {{ linkCopied ? '✓' : '🔗' }}
+                                </button>
+                            </div>
+                            <button type="button" class="detail-share-cta" @click="closePixelDetail(); openStepper({ startStep: 1 })">
+                                {{ $t('tv.dashboard.indie_wall.share_join_cta') }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -647,6 +798,9 @@ onUnmounted(() => {
     margin-bottom: 16px; border: 2px solid rgba(255,255,255,0.1);
 }
 .hero-title { font-size: 2rem; font-weight: 800; color: var(--title-fg, #fff); margin: 0 0 12px; letter-spacing: -0.5px; }
+.hero-owner { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; }
+.hero-owner-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
+.hero-owner-name { color: rgba(255,255,255,0.75); font-size: 0.9rem; font-weight: 500; }
 .hero-desc { color: rgba(255,255,255,0.65); font-size: 1rem; max-width: 600px; line-height: 1.6; margin: 0 0 24px; }
 .hero-stats { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
 .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@@ -930,6 +1084,32 @@ onUnmounted(() => {
     &:hover { text-decoration: underline; }
 }
 
+.detail-share {
+    margin-top: 16px; padding-top: 16px;
+    border-top: 1px solid #272930;
+}
+.detail-share-title {
+    margin: 0 0 8px; font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
+}
+.detail-share-row {
+    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+.detail-share-btn {
+    width: 34px; height: 34px; flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255,255,255,0.06); border: 1px solid #272930;
+    color: var(--title-fg, #fff); font-size: 0.9rem; font-weight: 700;
+    cursor: pointer; text-decoration: none; transition: border-color 0.15s;
+    &:hover { border-color: var(--chip-text, #D297FF); }
+}
+.detail-share-cta {
+    width: 100%;
+    background: var(--chip-text, #D297FF); color: #13161C;
+    border: none; padding: 10px 14px; font-weight: 700; font-size: 0.85rem;
+    cursor: pointer; transition: opacity 0.15s;
+    &:hover { opacity: 0.88; }
+}
+
 .fade-enter-active, .fade-leave-active { transition: opacity 0.18s; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 
@@ -1047,6 +1227,28 @@ onUnmounted(() => {
     background: rgba(255,255,255,0.06); padding: 2px 6px;
 }
 
+// ── Footer credit ─────────────────────────────────────────────────────────
+.mural-footer {
+    display: flex; flex-direction: column; align-items: center; gap: 12px;
+    padding: 48px 16px; margin-top: 8px;
+    border-top: 1px solid #1e2028;
+    text-align: center;
+}
+.mural-footer-text {
+    font-size: 0.8rem; color: var(--secondary-info-fg, #888); margin: 0;
+    strong { color: var(--title-fg, #fff); }
+}
+.mural-footer-cta {
+    display: inline-block;
+    padding: 8px 20px;
+    border: 1px solid var(--chip-text, #D297FF);
+    color: var(--chip-text, #D297FF);
+    font-size: 0.8rem; font-weight: 600;
+    text-decoration: none;
+    transition: background 0.15s, color 0.15s;
+    &:hover { background: var(--chip-text, #D297FF); color: #13161C; }
+}
+
 @media (max-width: 640px) {
     .hero-title { font-size: 1.5rem; }
     .hero-stats { gap: 12px; }

package/pages/presskit/game/[slug].vue

@@ -86,6 +86,7 @@ const layout = computed(() => kit.value?.layout || 'classic');
 const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
 const hasDownloadableAssets = computed(() => assets.value.length > 0);
 const canDownload = computed(() => allowDownload.value && hasDownloadableAssets.value);
+const zipDownloadUrl = computed(() => `${apiBase}/public/press-kits/${slug}/download${previewToken ? `?preview_token=${previewToken}` : ''}`);
 
 const keyPoolsVisible = ref(false);
 function onPoolsReady(count: number) {
@@ -179,27 +180,37 @@ function track(type: 'click' | 'download' | 'contact') {
 
 const requestUrl = useRequestURL();
 
-const seoTitle = computed(() => kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit');
+const seoTitle = computed(() => kit.value ? `${kit.value.name} — Mundo Gamer Press Kit` : 'Mundo Gamer Press Kit');
 const seoDescription = computed(() => kit.value?.tagline || kit.value?.description?.replace(/<[^>]*>/g, '').slice(0, 160) || '');
 const seoImage = computed(() => kit.value?.hero_image_url || kit.value?.cover_image_url || kit.value?.logo_url || '');
 
+// Raw useHead meta-array form, not useSeoMeta — see the matching comment in
+// shared-ui/pages/mural/[slug].vue for why (useSeoMeta's og:*/twitter:*/
+// description overrides get silently dropped in this app).
 useHead(() => ({
 	title: seoTitle.value,
+	link: [{ rel: 'canonical', href: requestUrl.href }],
+	// Studio's own GA4 tag, opt-in per kit — free feature, no plan gate.
+	script: kit.value?.analytics_ga_id ? [
+		{ src: `https://www.googletagmanager.com/gtag/js?id=${kit.value.analytics_ga_id}`, async: true },
+		{ innerHTML: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${kit.value.analytics_ga_id}');` },
+	] : [],
+	meta: [
+		{ name: 'description', content: seoDescription.value },
+		{ property: 'og:title', content: seoTitle.value },
+		{ property: 'og:description', content: seoDescription.value },
+		// Only override the image when the kit actually has one — an empty
+		// string would replace (not fall back to) the site default image.
+		...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
+		{ property: 'og:type', content: 'article' },
+		{ property: 'og:url', content: requestUrl.href },
+		{ property: 'og:site_name', content: 'Mundo Gamer Press Kit' },
+		{ name: 'twitter:card', content: 'summary_large_image' },
+		{ name: 'twitter:title', content: seoTitle.value },
+		{ name: 'twitter:description', content: seoDescription.value },
+		...(seoImage.value ? [{ name: 'twitter:image', content: seoImage.value }] : []),
+	],
 }));
-
-useSeoMeta({
-	title: () => seoTitle.value,
-	description: () => seoDescription.value,
-	ogTitle: () => seoTitle.value,
-	ogDescription: () => seoDescription.value,
-	ogImage: () => seoImage.value,
-	ogType: 'article',
-	ogUrl: () => requestUrl.href,
-	twitterCard: 'summary_large_image',
-	twitterTitle: () => seoTitle.value,
-	twitterDescription: () => seoDescription.value,
-	twitterImage: () => seoImage.value,
-});
 </script>
 
 <template>
@@ -247,7 +258,7 @@ useSeoMeta({
 						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
 						<div class="kit-actions">
 							<template v-if="allowDownload">
-								<a v-if="canDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+								<a v-if="canDownload" class="kit-btn kit-btn-primary" :href="zipDownloadUrl" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
 								<span v-else class="kit-btn kit-btn-primary kit-btn-disabled" :title="$t('kit.press.no_assets')">{{ $t('kit.press.no_assets') }}</span>
 							</template>
 							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
@@ -274,7 +285,7 @@ useSeoMeta({
 				<span class="kit-stickybar-name">{{ kit.name }}</span>
 				<div class="kit-stickybar-actions">
 					<template v-if="allowDownload">
-						<a v-if="canDownload" class="kit-btn kit-btn-primary kit-btn-sm" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+						<a v-if="canDownload" class="kit-btn kit-btn-primary kit-btn-sm" :href="zipDownloadUrl" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
 						<span v-else class="kit-btn kit-btn-primary kit-btn-sm kit-btn-disabled" :title="$t('kit.press.no_assets')">{{ $t('kit.press.no_assets') }}</span>
 					</template>
 					<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost kit-btn-sm" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
@@ -450,7 +461,7 @@ useSeoMeta({
 			</section>
 
 			<footer class="kit-footer">
-				<p class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
+				<p v-if="!kit.is_premium" class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
 				<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.press.create_yours') }}</a>
 			</footer>
 		</template>

package/services/campaignService.ts

@@ -297,6 +297,8 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		name: k.name,
 		slug: k.slug,
 		cover: k.cover_src,
+		cover_focal_x: k.cover_focal_x ?? 0.5,
+		cover_focal_y: k.cover_focal_y ?? 0.5,
 		game_cover: k.game?.url_cover_src,
 		game_slug: k.game?.slug,
 		time_to_expire: k.time_to_expire,
@@ -307,6 +309,8 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		email: k.company?.email,
 		twitter: k.company?.twitter,
 		logo: k.company?.thumbnail_url,
+		pr_contact_name: k.supplier_pr?.name ?? null,
+		pr_contact_email: k.supplier_pr?.email ?? null,
 		status: k.status,
 		quantity: k.quantity,
 		available_count: k.available_count ?? 0,