@mundogamernetwork/shared-ui 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/kit/kit-theme.css +41 -0
- package/error.vue +140 -0
- package/nuxt.config.ts +1 -0
- package/package.json +3 -1
- package/pages/media-kit/[slug].vue +307 -548
- package/pages/presskit/[slug].vue +315 -139
- package/services/mediaKitService.ts +6 -3
- package/services/pressKitService.ts +5 -3
|
@@ -24,20 +24,58 @@ onMounted(async () => {
|
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
27
|
+
// Fractal include shape: relation -> { data: [...] }
|
|
28
|
+
const list = (rel: any) => rel?.data || rel || [];
|
|
29
|
+
const assets = computed(() => list(kit.value?.assets));
|
|
30
|
+
const videos = computed(() => list(kit.value?.videos));
|
|
31
|
+
const awards = computed(() => list(kit.value?.awards));
|
|
32
|
+
const quotes = computed(() => list(kit.value?.quotes));
|
|
33
|
+
const team = computed(() => list(kit.value?.credits));
|
|
34
|
+
const features = computed(() => kit.value?.key_features || []);
|
|
35
|
+
// New, optional blocks (rendered only when the API provides them)
|
|
36
|
+
const articles = computed(() => list(kit.value?.articles));
|
|
37
|
+
const coverage = computed(() => list(kit.value?.coverage));
|
|
38
|
+
const showcases = computed(() => list(kit.value?.showcases));
|
|
39
|
+
const hasEcosystem = computed(() => showcases.value.length || kit.value?.ventures_url || kit.value?.magazine_feature || kit.value?.community_url);
|
|
40
|
+
|
|
41
|
+
const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
|
|
42
|
+
const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
|
|
43
|
+
|
|
44
|
+
const tpl = computed(() => kit.value?.theme || null);
|
|
45
|
+
const layout = computed(() => kit.value?.layout || 'classic');
|
|
46
|
+
const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
|
|
47
|
+
|
|
48
|
+
const socials = computed(() => {
|
|
49
|
+
const s = kit.value?.social_links || {};
|
|
50
|
+
return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
|
|
51
|
+
});
|
|
32
52
|
|
|
33
|
-
const
|
|
53
|
+
const facts = computed(() => {
|
|
54
|
+
const k = kit.value || {};
|
|
55
|
+
const out: { label: string; value: string; accent?: boolean; href?: string }[] = [];
|
|
56
|
+
if (k.developer) out.push({ label: 'kit.press.developer', value: k.developer });
|
|
57
|
+
if (k.publisher) out.push({ label: 'kit.press.publisher', value: k.publisher });
|
|
58
|
+
if (k.release_date_tba) out.push({ label: 'kit.press.release', value: 'TBA', accent: true });
|
|
59
|
+
else if (k.release_date) out.push({ label: 'kit.press.release', value: k.release_date, accent: true });
|
|
60
|
+
if (k.release_status) out.push({ label: 'kit.press.status', value: String(k.release_status).replace(/_/g, ' ') });
|
|
61
|
+
if (k.price) out.push({ label: 'kit.press.price', value: `${k.price}${k.currency ? ' ' + k.currency : ''}` });
|
|
62
|
+
if (k.website_url) out.push({ label: 'kit.press.website', value: k.website_url, accent: true, href: k.website_url });
|
|
63
|
+
if (k.steam_url) out.push({ label: 'Steam', value: k.steam_url, href: k.steam_url });
|
|
64
|
+
if (k.press_contact_email) out.push({ label: 'kit.press.contact', value: k.press_contact_email, href: `mailto:${k.press_contact_email}` });
|
|
65
|
+
return out;
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
function track(type: 'click' | 'download' | 'contact') {
|
|
69
|
+
trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
|
|
70
|
+
}
|
|
34
71
|
|
|
72
|
+
const requestUrl = useRequestURL();
|
|
35
73
|
useHead(() => ({
|
|
36
74
|
title: kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit',
|
|
37
75
|
meta: [
|
|
38
|
-
{ name: 'description', content: kit.value?.tagline ||
|
|
76
|
+
{ name: 'description', content: kit.value?.tagline || '' },
|
|
39
77
|
{ property: 'og:title', content: kit.value?.name || 'Press Kit' },
|
|
40
|
-
{ property: 'og:description', content: kit.value?.tagline ||
|
|
78
|
+
{ property: 'og:description', content: kit.value?.tagline || '' },
|
|
41
79
|
{ property: 'og:image', content: kit.value?.hero_image_url || kit.value?.logo_url || '' },
|
|
42
80
|
{ property: 'og:type', content: 'article' },
|
|
43
81
|
{ property: 'og:url', content: requestUrl.href },
|
|
@@ -46,146 +84,284 @@ useHead(() => ({
|
|
|
46
84
|
</script>
|
|
47
85
|
|
|
48
86
|
<template>
|
|
49
|
-
<div class="
|
|
50
|
-
<div v-if="loading" class="
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<div v-else-if="error || !kit" class="error-state">
|
|
55
|
-
<h2>{{ $t('press_kit.not_found') }}</h2>
|
|
56
|
-
<p>{{ $t('press_kit.not_found_message') }}</p>
|
|
57
|
-
<NuxtLink to="/" class="btn-back">{{ $t('press_kit.back_home') }}</NuxtLink>
|
|
87
|
+
<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
|
|
88
|
+
<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
|
|
89
|
+
<div v-else-if="error || !kit" class="kit-state">
|
|
90
|
+
<h2>{{ $t('kit.press.not_found') }}</h2>
|
|
58
91
|
</div>
|
|
59
92
|
|
|
60
93
|
<template v-else>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<h3 class="section-title">{{ $t('press_kit.description') }}</h3>
|
|
77
|
-
<div class="description-text" v-html="kit.description" />
|
|
94
|
+
<!-- CAPA / COVER -->
|
|
95
|
+
<header class="kit-cover">
|
|
96
|
+
<img v-if="kit.hero_image_url" class="kit-cover-art" :src="kit.hero_image_url" :alt="kit.name" />
|
|
97
|
+
<div class="kit-cover-inner">
|
|
98
|
+
<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
|
|
99
|
+
<div class="kit-cover-text">
|
|
100
|
+
<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
|
|
101
|
+
<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
|
|
102
|
+
<h1 v-else>{{ kit.name }}</h1>
|
|
103
|
+
<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
|
|
104
|
+
<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
|
|
105
|
+
<div class="kit-actions">
|
|
106
|
+
<a v-if="allowDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
|
|
107
|
+
<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>
|
|
108
|
+
</div>
|
|
78
109
|
</div>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
110
|
+
</div>
|
|
111
|
+
</header>
|
|
112
|
+
|
|
113
|
+
<div class="kit-wrap">
|
|
114
|
+
<div class="kit-layout">
|
|
115
|
+
<aside class="kit-sidebar">
|
|
116
|
+
<div class="kit-card kit-factsheet">
|
|
117
|
+
<h3 class="kit-fact-title">{{ $t('kit.press.fact_sheet') }}</h3>
|
|
118
|
+
<div v-for="f in facts" :key="f.label" class="kit-fact">
|
|
119
|
+
<span class="k">{{ $te(f.label) ? $t(f.label) : f.label }}</span>
|
|
120
|
+
<a v-if="f.href" class="v accent" :href="f.href" target="_blank" rel="noopener" @click="track('click')">{{ f.value }}</a>
|
|
121
|
+
<span v-else class="v" :class="{ accent: f.accent }">{{ f.value }}</span>
|
|
122
|
+
</div>
|
|
123
|
+
<div v-if="socials.length" class="kit-fact">
|
|
124
|
+
<span class="k">{{ $t('kit.press.social') }}</span>
|
|
125
|
+
<div class="kit-socials">
|
|
126
|
+
<a v-for="s in socials" :key="s.platform" :href="s.url" target="_blank" rel="noopener" @click="track('click')">{{ s.platform.charAt(0).toUpperCase() }}</a>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</aside>
|
|
131
|
+
|
|
132
|
+
<main class="kit-main">
|
|
133
|
+
<section v-if="kit.description" class="kit-block">
|
|
134
|
+
<h2>{{ $t('kit.press.about') }}</h2>
|
|
135
|
+
<div class="kit-lead" v-html="kit.description" />
|
|
136
|
+
</section>
|
|
137
|
+
|
|
138
|
+
<section v-if="features.length" class="kit-block">
|
|
139
|
+
<h2>{{ $t('kit.press.features') }}</h2>
|
|
140
|
+
<div class="kit-features">
|
|
141
|
+
<div v-for="(f, i) in features" :key="i" class="kit-feature"><span class="m">▸</span>{{ f }}</div>
|
|
142
|
+
</div>
|
|
143
|
+
</section>
|
|
144
|
+
|
|
145
|
+
<section v-if="videos.length" class="kit-block">
|
|
146
|
+
<h2>{{ $t('kit.press.videos') }}</h2>
|
|
147
|
+
<PressKitVideoPlayer :videos="videos" />
|
|
148
|
+
</section>
|
|
149
|
+
|
|
150
|
+
<section v-if="screenshots.length" class="kit-block">
|
|
151
|
+
<div class="kit-shead"><h2>{{ $t('kit.press.screenshots') }}</h2><a v-if="allowDownload" class="kit-dl" @click="track('download')">{{ $t('kit.press.download_all') }}</a></div>
|
|
152
|
+
<div class="kit-gallery">
|
|
153
|
+
<a v-for="(s, i) in screenshots" :key="i" class="kit-shot" :href="s.url" target="_blank" rel="noopener"><img :src="s.thumbnail_url || s.url" :alt="s.title || ''" /></a>
|
|
154
|
+
</div>
|
|
155
|
+
</section>
|
|
156
|
+
|
|
157
|
+
<section v-if="brandAssets.length" class="kit-block">
|
|
158
|
+
<div class="kit-shead"><h2>{{ $t('kit.press.logo_icons') }}</h2></div>
|
|
159
|
+
<div class="kit-logos">
|
|
160
|
+
<a v-for="(b, i) in brandAssets" :key="i" class="kit-logo-tile" :href="b.url" target="_blank" rel="noopener" @click="track('download')">
|
|
161
|
+
<span class="ic">◆</span>{{ b.title || b.type }}
|
|
162
|
+
</a>
|
|
163
|
+
</div>
|
|
164
|
+
</section>
|
|
165
|
+
|
|
166
|
+
<!-- NEW: Conteúdos & Artigos (community + external) -->
|
|
167
|
+
<section v-if="articles.length" class="kit-block">
|
|
168
|
+
<div class="kit-shead"><h2>{{ $t('kit.press.articles') }}</h2></div>
|
|
169
|
+
<div class="kit-articles">
|
|
170
|
+
<a v-for="(a, i) in articles" :key="i" class="kit-article" :href="a.url" target="_blank" rel="noopener" @click="track('click')">
|
|
171
|
+
<div class="thumb" :style="a.image ? { backgroundImage: `url(${a.image})` } : {}"><span class="src" :class="{ ext: a.external }">{{ a.external ? $t('kit.press.external') : 'Mundo Gamer' }}</span></div>
|
|
172
|
+
<div class="a-body"><h4>{{ a.title }}</h4><div class="meta">{{ a.source }}<span v-if="a.date"> · {{ a.date }}</span></div></div>
|
|
173
|
+
</a>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
|
|
177
|
+
<!-- NEW: Cobertura de Criadores -->
|
|
178
|
+
<section v-if="coverage.length" class="kit-block">
|
|
179
|
+
<h2>{{ $t('kit.press.coverage') }}</h2>
|
|
180
|
+
<div class="kit-creators">
|
|
181
|
+
<a v-for="(c, i) in coverage" :key="i" class="kit-creator" :href="c.url || undefined" target="_blank" rel="noopener">
|
|
182
|
+
<div class="av" :style="c.avatar ? { backgroundImage: `url(${c.avatar})` } : {}" />
|
|
183
|
+
<div class="cn">{{ c.name }}</div>
|
|
184
|
+
<div class="cp">{{ c.platform }}<span v-if="c.followers"> · {{ c.followers }}</span></div>
|
|
185
|
+
<div v-if="c.label" class="cv">{{ c.label }}</div>
|
|
186
|
+
</a>
|
|
187
|
+
</div>
|
|
188
|
+
</section>
|
|
189
|
+
|
|
190
|
+
<section v-if="awards.length" class="kit-block">
|
|
191
|
+
<h2>{{ $t('kit.press.awards') }}</h2>
|
|
192
|
+
<PressKitAwards :awards="awards" />
|
|
193
|
+
</section>
|
|
194
|
+
|
|
195
|
+
<section v-if="quotes.length" class="kit-block">
|
|
196
|
+
<h2>{{ $t('kit.press.press') }}</h2>
|
|
197
|
+
<PressKitQuotes :quotes="quotes" />
|
|
198
|
+
</section>
|
|
199
|
+
|
|
200
|
+
<!-- Créditos -> Equipe -->
|
|
201
|
+
<section v-if="team.length" class="kit-block">
|
|
202
|
+
<h2>{{ $t('kit.press.team') }}</h2>
|
|
203
|
+
<div class="kit-team">
|
|
204
|
+
<div v-for="(m, i) in team" :key="i" class="kit-member"><span>{{ m.name }}</span><span class="role">{{ m.role }}</span></div>
|
|
205
|
+
</div>
|
|
206
|
+
</section>
|
|
207
|
+
|
|
208
|
+
<!-- NEW: Ecossistema Mundo Gamer -->
|
|
209
|
+
<section v-if="hasEcosystem" class="kit-block">
|
|
210
|
+
<h2>{{ $t('kit.press.ecosystem') }}</h2>
|
|
211
|
+
<div class="kit-eco">
|
|
212
|
+
<div v-if="showcases.length" class="kit-eco-card full">
|
|
213
|
+
<div class="kit-eco-h"><span class="ic">★</span>{{ $t('kit.press.showcases') }}</div>
|
|
214
|
+
<div class="kit-sbadges">
|
|
215
|
+
<span v-for="(s, i) in showcases" :key="i" class="kit-sbadge" :class="{ feat: s.featured }"><span class="medal">{{ s.featured ? '🏵️' : '🎮' }}</span>{{ s.name }}<span v-if="s.year"> {{ s.year }}</span></span>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div v-if="kit.ventures_url" class="kit-eco-card">
|
|
219
|
+
<div class="kit-eco-h"><span class="ic">◈</span>MGN Ventures</div>
|
|
220
|
+
<a class="kit-vrow" :href="kit.ventures_url" target="_blank" rel="noopener" @click="track('click')"><span class="vlogo">VENTURES</span><span class="vtxt">{{ $t('kit.press.ventures_text') }}</span></a>
|
|
221
|
+
</div>
|
|
222
|
+
<a v-if="kit.magazine_feature" class="kit-eco-card kit-mag" :href="kit.magazine_feature.url" target="_blank" rel="noopener" @click="track('click')">
|
|
223
|
+
<div class="kit-eco-h" style="width:100%"><span class="ic">▤</span>MGN Magazine</div>
|
|
224
|
+
<div class="kit-mag-row"><div class="mcover" :style="kit.magazine_feature.cover ? { backgroundImage: `url(${kit.magazine_feature.cover})` } : {}" /><div><div class="mtitle">{{ kit.magazine_feature.title }}</div><div class="mmeta">{{ kit.magazine_feature.issue }}</div></div></div>
|
|
225
|
+
</a>
|
|
226
|
+
<div v-if="kit.community_url" class="kit-eco-card full">
|
|
227
|
+
<div class="kit-ccta">
|
|
228
|
+
<div><div class="ctitle">{{ $t('kit.press.follow_community', { name: kit.name }) }}</div><div v-if="kit.community_followers" class="cmeta">{{ kit.community_followers }} {{ $t('kit.press.followers') }}</div></div>
|
|
229
|
+
<a class="kit-btn kit-btn-primary" :href="kit.community_url" target="_blank" rel="noopener" @click="track('click')">{{ $t('kit.press.follow') }}</a>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</section>
|
|
234
|
+
|
|
235
|
+
<section v-if="kit.press_contact_email" class="kit-block">
|
|
236
|
+
<div class="kit-cta">
|
|
237
|
+
<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
|
|
238
|
+
<p>{{ $t('kit.press.cta_text') }}</p>
|
|
239
|
+
<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
|
|
240
|
+
</div>
|
|
241
|
+
</section>
|
|
242
|
+
|
|
243
|
+
<p class="kit-madewith">
|
|
244
|
+
{{ $t('kit.press.made_with') }} <strong>Mundo Gamer</strong> —
|
|
245
|
+
<a :href="kit.create_kit_url || '/dashboard/press-kit'">{{ $t('kit.press.create_yours') }}</a>
|
|
246
|
+
</p>
|
|
247
|
+
</main>
|
|
248
|
+
</div>
|
|
93
249
|
</div>
|
|
94
250
|
</template>
|
|
95
251
|
</div>
|
|
96
252
|
</template>
|
|
97
253
|
|
|
98
254
|
<style lang="scss" scoped>
|
|
99
|
-
.
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
255
|
+
.kit-press { background: var(--kit-bg); color: var(--kit-text); min-height: 100vh; font-family: 'Inter', system-ui, sans-serif; }
|
|
256
|
+
.kit-state { display: flex; align-items: center; justify-content: center; min-height: 60vh; color: var(--kit-muted); flex-direction: column; gap: 8px; }
|
|
257
|
+
.kit-wrap { max-width: var(--kit-maxw); margin: 0 auto; padding: 0 24px; }
|
|
258
|
+
|
|
259
|
+
.kit-cover { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--kit-line); background: linear-gradient(135deg, #161b2a, #0f1320 55%, #1d1530); }
|
|
260
|
+
.kit-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
|
|
261
|
+
.kit-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent, var(--kit-bg) 95%); }
|
|
262
|
+
.kit-cover-inner { position: relative; z-index: 2; padding: 60px 24px; display: flex; align-items: center; justify-content: center; gap: 44px; width: 100%; max-width: var(--kit-maxw); }
|
|
263
|
+
.kit-cover-poster { width: 240px; flex-shrink: 0; aspect-ratio: 2/3; object-fit: cover; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 24px 70px rgba(0,0,0,.65); background: var(--kit-surface-2); }
|
|
264
|
+
.kit-cover-text { text-align: left; max-width: 560px; }
|
|
265
|
+
.kit-cover-text h1 { font-family: 'Rajdhani', sans-serif; font-size: 72px; font-weight: 700; line-height: .95; }
|
|
266
|
+
.kit-cover-logo-img { max-height: 150px; }
|
|
267
|
+
.kit-eyebrow { display: inline-block; background: var(--kit-accent); color: var(--kit-accent-ink); font-family: 'Rajdhani'; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px; margin-bottom: 18px; }
|
|
268
|
+
.kit-tagline { font-size: 20px; color: #dce0e8; margin-top: 14px; }
|
|
269
|
+
.kit-kicker { margin-top: 8px; font-family: 'Rajdhani'; letter-spacing: 4px; text-transform: uppercase; font-size: 13px; color: var(--kit-accent); font-weight: 600; }
|
|
270
|
+
.kit-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
|
|
271
|
+
|
|
272
|
+
.kit-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Rajdhani'; font-weight: 700; letter-spacing: .5px; font-size: 15px; padding: 12px 22px; cursor: pointer; border: 1px solid transparent; text-transform: uppercase; text-decoration: none; transition: .15s; }
|
|
273
|
+
.kit-btn-primary { background: var(--kit-accent); color: var(--kit-accent-ink); }
|
|
274
|
+
.kit-btn-ghost { background: rgba(255,255,255,.05); border-color: var(--kit-line); color: var(--kit-text); }
|
|
275
|
+
.kit-btn-ghost:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
|
|
276
|
+
|
|
277
|
+
.kit-layout { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 48px 0 80px; }
|
|
278
|
+
.kit-sidebar { position: sticky; top: 24px; align-self: start; }
|
|
279
|
+
.kit-card { background: var(--kit-surface); border: 1px solid var(--kit-line); }
|
|
280
|
+
.kit-factsheet { padding: 22px; }
|
|
281
|
+
.kit-fact-title { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--kit-accent); margin-bottom: 14px; font-weight: 700; }
|
|
282
|
+
.kit-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--kit-line); }
|
|
283
|
+
.kit-fact:last-child { border-bottom: none; }
|
|
284
|
+
.kit-fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
|
|
285
|
+
.kit-fact .v { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--kit-text); }
|
|
286
|
+
.kit-fact .v.accent { color: var(--kit-accent); }
|
|
287
|
+
.kit-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
|
|
288
|
+
.kit-socials a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--kit-surface-2); border: 1px solid var(--kit-line); font-size: 13px; color: var(--kit-muted); }
|
|
289
|
+
|
|
290
|
+
.kit-main { display: flex; flex-direction: column; gap: 46px; min-width: 0; }
|
|
291
|
+
.kit-block > h2, .kit-shead h2 { font-family: 'Inter'; font-size: 13px; letter-spacing: var(--kit-head-ls); text-transform: uppercase; color: var(--kit-muted); font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
|
|
292
|
+
.kit-block > h2::after { content: ""; flex: 1; height: 1px; background: var(--kit-line); }
|
|
293
|
+
.kit-lead { font-size: 16px; color: #c8cdd6; max-width: 70ch; }
|
|
294
|
+
.kit-shead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
|
|
295
|
+
.kit-shead h2 { margin: 0; }
|
|
296
|
+
.kit-dl { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--kit-accent); border: 1px solid var(--kit-line); padding: 7px 14px; cursor: pointer; }
|
|
297
|
+
|
|
298
|
+
.kit-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
|
|
299
|
+
.kit-feature { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
|
|
300
|
+
.kit-feature .m { color: var(--kit-accent); font-weight: 700; }
|
|
301
|
+
|
|
302
|
+
.kit-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
303
|
+
.kit-shot { aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--kit-line); background: var(--kit-surface-2); }
|
|
304
|
+
.kit-shot img { width: 100%; height: 100%; object-fit: cover; }
|
|
305
|
+
|
|
306
|
+
.kit-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
307
|
+
.kit-logo-tile { background: var(--kit-surface-2); border: 1px solid var(--kit-line); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--kit-muted); font-size: 12px; text-decoration: none; }
|
|
308
|
+
.kit-logo-tile .ic { font-size: 26px; color: var(--kit-accent); }
|
|
309
|
+
|
|
310
|
+
.kit-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
|
311
|
+
.kit-article { background: var(--kit-surface); border: 1px solid var(--kit-line); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
|
|
312
|
+
.kit-article .thumb { aspect-ratio: 16/9; background: var(--kit-surface-2) center/cover; position: relative; }
|
|
313
|
+
.kit-article .thumb .src { position: absolute; top: 8px; left: 8px; background: var(--kit-accent); color: var(--kit-accent-ink); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; }
|
|
314
|
+
.kit-article .thumb .src.ext { background: var(--kit-surface-2); color: var(--kit-muted); border: 1px solid var(--kit-line); }
|
|
315
|
+
.kit-article .a-body { padding: 14px; }
|
|
316
|
+
.kit-article h4 { font-size: 15px; font-weight: 600; line-height: 1.3; }
|
|
317
|
+
.kit-article .meta { font-size: 12px; color: var(--kit-muted); margin-top: 8px; }
|
|
318
|
+
|
|
319
|
+
.kit-creators { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
320
|
+
.kit-creator { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 16px; text-align: center; text-decoration: none; color: inherit; }
|
|
321
|
+
.kit-creator .av { width: 60px; height: 60px; margin: 0 auto 10px; background: var(--kit-surface-2) center/cover; border: 2px solid var(--kit-accent); }
|
|
322
|
+
.kit-creator .cn { font-weight: 600; font-size: 14px; }
|
|
323
|
+
.kit-creator .cp { font-size: 12px; color: var(--kit-muted); margin-top: 2px; }
|
|
324
|
+
.kit-creator .cv { margin-top: 8px; font-size: 12px; color: var(--kit-accent); font-weight: 600; }
|
|
325
|
+
|
|
326
|
+
.kit-team { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
|
|
327
|
+
.kit-member { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--kit-line); font-size: 14px; }
|
|
328
|
+
.kit-member .role { color: var(--kit-muted); }
|
|
329
|
+
|
|
330
|
+
.kit-cta { background: linear-gradient(120deg, var(--kit-surface), var(--kit-surface-2)); border: 1px solid var(--kit-line); padding: 36px; text-align: center; }
|
|
331
|
+
.kit-cta h2 { font-family: 'Rajdhani'; font-size: 28px; color: var(--kit-text); margin-bottom: 8px; }
|
|
332
|
+
.kit-cta p { color: var(--kit-muted); margin-bottom: 20px; }
|
|
333
|
+
|
|
334
|
+
/* Ecossistema Mundo Gamer */
|
|
335
|
+
.kit-eco { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
336
|
+
.kit-eco-card { background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 20px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
|
|
337
|
+
.kit-eco-card.full { grid-column: 1 / -1; }
|
|
338
|
+
.kit-eco-h { display: flex; align-items: center; gap: 10px; font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; }
|
|
339
|
+
.kit-eco-h .ic { width: 30px; height: 30px; background: var(--kit-accent); color: var(--kit-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
|
340
|
+
.kit-sbadges { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
341
|
+
.kit-sbadge { display: flex; align-items: center; gap: 8px; background: var(--kit-surface-2); border: 1px solid var(--kit-line); padding: 8px 12px; font-size: 13px; }
|
|
342
|
+
.kit-sbadge.feat { border-color: var(--kit-accent); background: linear-gradient(135deg, rgba(255,255,255,.06), transparent); }
|
|
343
|
+
.kit-vrow { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
|
344
|
+
.vlogo { font-family: 'Rajdhani'; font-weight: 700; color: var(--kit-accent); letter-spacing: 1px; font-size: 15px; }
|
|
345
|
+
.vtxt { font-size: 13px; color: var(--kit-muted); }
|
|
346
|
+
.kit-mag-row { display: flex; gap: 14px; align-items: center; }
|
|
347
|
+
.mcover { width: 60px; aspect-ratio: 3/4; background: var(--kit-surface-2) center/cover; border: 1px solid var(--kit-line); flex-shrink: 0; }
|
|
348
|
+
.mtitle { font-weight: 600; font-size: 14px; }
|
|
349
|
+
.mmeta { font-size: 12px; color: var(--kit-muted); }
|
|
350
|
+
.kit-ccta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
|
351
|
+
.ctitle { font-family: 'Rajdhani'; font-weight: 700; font-size: 16px; }
|
|
352
|
+
.cmeta { font-size: 13px; color: var(--kit-muted); margin-top: 2px; }
|
|
353
|
+
|
|
354
|
+
.kit-madewith { text-align: center; color: var(--kit-muted); font-size: 12px; padding: 24px 0; border-top: 1px solid var(--kit-line); }
|
|
355
|
+
.kit-madewith a { color: var(--kit-accent); font-weight: 600; }
|
|
356
|
+
|
|
357
|
+
@media (max-width: 880px) {
|
|
358
|
+
.kit-layout { grid-template-columns: 1fr; gap: 32px; }
|
|
359
|
+
.kit-sidebar { position: static; }
|
|
360
|
+
.kit-cover-inner { flex-direction: column; gap: 24px; }
|
|
361
|
+
.kit-cover-poster { width: 170px; }
|
|
362
|
+
.kit-cover-text { text-align: center; }
|
|
363
|
+
.kit-cover-text h1 { font-size: 46px; }
|
|
364
|
+
.kit-features, .kit-team { grid-template-columns: 1fr; }
|
|
365
|
+
.kit-gallery, .kit-logos, .kit-articles, .kit-creators { grid-template-columns: 1fr 1fr; }
|
|
190
366
|
}
|
|
191
367
|
</style>
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import axios, { type AxiosInstance } from "axios"
|
|
2
2
|
|
|
3
|
-
// Media
|
|
4
|
-
//
|
|
5
|
-
//
|
|
3
|
+
// Media Kit data is served by the api-main Shared\MediaKit module, now registered
|
|
4
|
+
// in every service. A dedicated client lets each project point at the API host that
|
|
5
|
+
// serves it without the /api/v1 base-URL inconsistency between projects:
|
|
6
|
+
// - community: VITE_MEDIA_KIT_API_URL=https://api.mundogamer.community (same-origin)
|
|
7
|
+
// - tv / agency: leave unset → fall back to their own VITE_API_BASE_URL
|
|
8
|
+
// The request path carries the /api/v1 prefix, so the base must NOT include it.
|
|
6
9
|
let _client: AxiosInstance | null = null
|
|
7
10
|
|
|
8
11
|
function getClient(): AxiosInstance {
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import axios, { type AxiosInstance } from "axios"
|
|
2
2
|
|
|
3
|
-
// Press
|
|
4
|
-
//
|
|
5
|
-
//
|
|
3
|
+
// Press Kit data is served by the api-main Shared\PressKit module, now registered
|
|
4
|
+
// in every service. A dedicated client lets each project point at the API host that
|
|
5
|
+
// serves it. The request path does NOT carry /api/v1, so the base MUST include it:
|
|
6
|
+
// - community: VITE_PRESS_KIT_API_URL=https://api.mundogamer.community/api/v1 (same-origin)
|
|
7
|
+
// - agency: leave unset → falls back to VITE_API_BASE_URL (already ends in /api/v1)
|
|
6
8
|
let _client: AxiosInstance | null = null
|
|
7
9
|
|
|
8
10
|
function getClient(): AxiosInstance {
|