@mundogamernetwork/shared-ui 1.0.0

package/components/PressKit/Awards.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+interface Award {
+	id: number;
+	title: string;
+	event?: string;
+	year?: number;
+	url?: string;
+	sort_order?: number;
+}
+
+interface Props {
+	awards: Award[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+	<div v-if="awards.length" class="awards-section">
+		<h3 class="section-title">{{ $t('press_kit.awards') }}</h3>
+		<div class="awards-grid">
+			<a
+				v-for="award in awards"
+				:key="award.id"
+				:href="award.url || undefined"
+				:target="award.url ? '_blank' : undefined"
+				rel="noopener"
+				:class="['award-card', { 'no-link': !award.url }]"
+			>
+				<MGIcon icon="trophy" class="award-icon" />
+				<div class="award-info">
+					<span class="award-title">{{ award.title }}</span>
+					<span v-if="award.event || award.year" class="award-event">
+						{{ [award.event, award.year].filter(Boolean).join(' — ') }}
+					</span>
+				</div>
+			</a>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.awards-section {
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #fff;
+		margin-bottom: 16px;
+	}
+
+	.awards-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		gap: 12px;
+	}
+
+	.award-card {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		background: #191B20;
+		border: 1px solid #1e2028;
+		padding: 16px;
+		text-decoration: none;
+		transition: background 0.2s, border-color 0.2s;
+
+		&:not(.no-link):hover {
+			background: #22252b;
+			border-color: #3a3d45;
+		}
+
+		&.no-link {
+			cursor: default;
+		}
+	}
+
+	.award-icon {
+		color: var(--color-primary, #FDB215);
+		font-size: 1.4rem;
+		flex-shrink: 0;
+	}
+
+	.award-info {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.award-title {
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: #fff;
+	}
+
+	.award-event {
+		font-size: 0.8rem;
+		color: #888;
+	}
+}
+</style>

package/components/PressKit/Credits.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Credit {
+	id: number;
+	name: string;
+	role: string;
+	url?: string;
+	sort_order?: number;
+}
+
+interface Props {
+	credits: Credit[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+	<div v-if="credits.length" class="credits-section">
+		<h3 class="section-title">{{ $t('press_kit.credits') }}</h3>
+		<div class="credits-grid">
+			<div v-for="credit in credits" :key="credit.id" class="credit-item">
+				<span class="credit-role">{{ credit.role }}</span>
+				<a v-if="credit.url" :href="credit.url" target="_blank" rel="noopener" class="credit-name link">
+					{{ credit.name }}
+				</a>
+				<span v-else class="credit-name">{{ credit.name }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.credits-section {
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #fff;
+		margin-bottom: 16px;
+	}
+
+	.credits-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 16px;
+	}
+
+	.credit-item {
+		background: #191B20;
+		border: 1px solid #1e2028;
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.credit-role {
+		font-size: 0.75rem;
+		color: #888;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.credit-name {
+		font-size: 0.95rem;
+		color: #fff;
+		font-weight: 500;
+
+		&.link {
+			color: #64D8FF;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
+</style>

package/components/PressKit/FactSheet.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+interface Props {
+	kit: Record<string, any>;
+}
+
+const props = defineProps<Props>();
+
+const facts = computed(() => {
+	const items: { label: string; value: string }[] = [];
+	const k = props.kit;
+
+	if (k.developer) items.push({ label: 'press_kit.developer', value: k.developer });
+	if (k.publisher) items.push({ label: 'press_kit.publisher_label', value: k.publisher });
+	if (k.release_date) items.push({ label: 'press_kit.release_date', value: k.release_date });
+	if (k.release_status) items.push({ label: 'press_kit.release_status', value: formatStatus(k.release_status) });
+	if (k.price) items.push({ label: 'press_kit.price', value: k.price });
+	if (k.monetization) items.push({ label: 'press_kit.monetization', value: formatMonetization(k.monetization) });
+	if (k.website_url) items.push({ label: 'press_kit.website', value: k.website_url });
+	if (k.press_contact_email) items.push({ label: 'press_kit.press_contact', value: k.press_contact_email });
+
+	return items;
+});
+
+const socialLinks = computed(() => {
+	if (!props.kit.social_links) return [];
+	const links = props.kit.social_links;
+	return Object.entries(links).filter(([, v]) => v).map(([key, url]) => ({ platform: key, url }));
+});
+
+const storeLinks = computed(() => {
+	const links: { platform: string; url: string }[] = [];
+	if (props.kit.steam_url) links.push({ platform: 'Steam', url: props.kit.steam_url });
+	if (props.kit.epic_url) links.push({ platform: 'Epic Games', url: props.kit.epic_url });
+	return links;
+});
+
+function formatStatus(status: string) {
+	return status.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function formatMonetization(m: string) {
+	return m.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+</script>
+
+<template>
+	<div class="fact-sheet">
+		<h3 class="section-title">{{ $t('press_kit.fact_sheet') }}</h3>
+
+		<div class="facts-list">
+			<div v-for="fact in facts" :key="fact.label" class="fact-item">
+				<span class="fact-label">{{ $t(fact.label) }}</span>
+				<span v-if="fact.value.startsWith('http')" class="fact-value">
+					<a :href="fact.value" target="_blank" rel="noopener">{{ fact.value }}</a>
+				</span>
+				<span v-else-if="fact.value.includes('@')" class="fact-value">
+					<a :href="`mailto:${fact.value}`">{{ fact.value }}</a>
+				</span>
+				<span v-else class="fact-value">{{ fact.value }}</span>
+			</div>
+		</div>
+
+		<div v-if="kit.key_features?.length" class="key-features">
+			<h4>{{ $t('press_kit.key_features') }}</h4>
+			<ul>
+				<li v-for="(feature, idx) in kit.key_features" :key="idx">{{ feature }}</li>
+			</ul>
+		</div>
+
+		<div v-if="storeLinks.length" class="store-links">
+			<h4>{{ $t('press_kit.available_on') }}</h4>
+			<div class="links-row">
+				<a v-for="link in storeLinks" :key="link.platform" :href="link.url" target="_blank" rel="noopener" class="store-badge">
+					{{ link.platform }}
+				</a>
+			</div>
+		</div>
+
+		<div v-if="socialLinks.length" class="social-links">
+			<h4>{{ $t('press_kit.social_media') }}</h4>
+			<div class="links-row">
+				<a v-for="link in socialLinks" :key="link.platform" :href="link.url as string" target="_blank" rel="noopener" class="social-badge">
+					{{ link.platform }}
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.fact-sheet {
+	background: #191B20;
+	border: 1px solid #1e2028;
+	padding: 24px;
+
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: var(--color-primary, #FDB215);
+		margin-bottom: 20px;
+	}
+
+	.facts-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		margin-bottom: 24px;
+	}
+
+	.fact-item {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.fact-label {
+		font-size: 0.75rem;
+		color: #888;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.fact-value {
+		font-size: 0.95rem;
+		color: #fff;
+
+		a {
+			color: #64D8FF;
+			text-decoration: none;
+			word-break: break-all;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.key-features {
+		margin-bottom: 24px;
+
+		h4 {
+			font-size: 0.9rem;
+			font-weight: 600;
+			color: #fff;
+			margin-bottom: 8px;
+		}
+
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+
+			li {
+				padding: 6px 0;
+				color: #ccc;
+				font-size: 0.9rem;
+				border-bottom: 1px solid #2a2d35;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				&::before {
+					content: '•';
+					color: var(--color-primary, #FDB215);
+					margin-right: 8px;
+				}
+			}
+		}
+	}
+
+	.store-links, .social-links {
+		margin-bottom: 16px;
+
+		h4 {
+			font-size: 0.9rem;
+			font-weight: 600;
+			color: #fff;
+			margin-bottom: 8px;
+		}
+	}
+
+	.links-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.store-badge, .social-badge {
+		display: inline-block;
+		padding: 6px 14px;
+		background: #2a2d35;
+		border: 1px solid #3a3d45;
+		color: #fff;
+		font-size: 0.85rem;
+		text-decoration: none;
+		transition: background 0.2s;
+
+		&:hover {
+			background: #3a3d45;
+		}
+	}
+}
+</style>

package/components/PressKit/Hero.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+interface Props {
+	name: string;
+	tagline?: string;
+	heroImageUrl?: string;
+	logoUrl?: string;
+	trailerUrl?: string;
+}
+
+const props = defineProps<Props>();
+
+const showTrailer = ref(false);
+
+const youtubeEmbedUrl = computed(() => {
+	if (!props.trailerUrl) return null;
+	const match = props.trailerUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+	if (match) return `https://www.youtube.com/embed/${match[1]}?autoplay=1`;
+	return props.trailerUrl;
+});
+</script>
+
+<template>
+	<div class="press-kit-hero">
+		<div class="hero-banner" :style="heroImageUrl ? { backgroundImage: `url(${heroImageUrl})` } : {}">
+			<div class="hero-overlay">
+				<img v-if="logoUrl" :src="logoUrl" :alt="name" class="hero-logo" />
+				<h1 v-else class="hero-title">{{ name }}</h1>
+				<p v-if="tagline" class="hero-tagline">{{ tagline }}</p>
+				<button v-if="trailerUrl" class="btn-trailer" @click="showTrailer = true">
+					<MGIcon icon="play" /> {{ $t('press_kit.watch_trailer') }}
+				</button>
+			</div>
+		</div>
+
+		<div v-if="showTrailer" class="trailer-modal" @click.self="showTrailer = false">
+			<div class="trailer-wrapper">
+				<button class="btn-close-trailer" @click="showTrailer = false">&times;</button>
+				<iframe
+					v-if="youtubeEmbedUrl"
+					:src="youtubeEmbedUrl"
+					frameborder="0"
+					allow="autoplay; encrypted-media"
+					allowfullscreen
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.press-kit-hero {
+	.hero-banner {
+		position: relative;
+		height: 400px;
+		background-size: cover;
+		background-position: center;
+		background-color: #191B20;
+		overflow: hidden;
+	}
+
+	.hero-overlay {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 100%);
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: flex-start;
+		padding: 40px;
+	}
+
+	.hero-logo {
+		max-height: 80px;
+		max-width: 300px;
+		object-fit: contain;
+		margin-bottom: 12px;
+	}
+
+	.hero-title {
+		font-size: 2.5rem;
+		font-weight: 700;
+		color: #fff;
+		margin-bottom: 8px;
+	}
+
+	.hero-tagline {
+		font-size: 1.1rem;
+		color: #ccc;
+		margin-bottom: 16px;
+	}
+
+	.btn-trailer {
+		background: var(--color-primary, #FDB215);
+		color: #13161C;
+		border: none;
+		padding: 10px 24px;
+		font-weight: 600;
+		font-size: 0.95rem;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		transition: opacity 0.2s;
+
+		&:hover {
+			opacity: 0.85;
+		}
+	}
+
+	.trailer-modal {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.9);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.trailer-wrapper {
+		position: relative;
+		width: 80vw;
+		max-width: 900px;
+		aspect-ratio: 16 / 9;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.btn-close-trailer {
+		position: absolute;
+		top: -40px;
+		right: 0;
+		background: none;
+		border: none;
+		color: #fff;
+		font-size: 2rem;
+		cursor: pointer;
+	}
+}
+</style>

package/components/PressKit/Quotes.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+interface Quote {
+	id: number;
+	quote: string;
+	source: string;
+	source_url?: string;
+	sort_order?: number;
+}
+
+interface Props {
+	quotes: Quote[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+	<div v-if="quotes.length" class="quotes-section">
+		<h3 class="section-title">{{ $t('press_kit.quotes') }}</h3>
+		<div class="quotes-list">
+			<blockquote v-for="q in quotes" :key="q.id" class="quote-card">
+				<p class="quote-text">&ldquo;{{ q.quote }}&rdquo;</p>
+				<footer class="quote-source">
+					&mdash;
+					<a v-if="q.source_url" :href="q.source_url" target="_blank" rel="noopener">{{ q.source }}</a>
+					<span v-else>{{ q.source }}</span>
+				</footer>
+			</blockquote>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.quotes-section {
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #fff;
+		margin-bottom: 16px;
+	}
+
+	.quotes-list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.quote-card {
+		background: #191B20;
+		border-left: 3px solid var(--color-primary, #FDB215);
+		border-top: 1px solid #1e2028;
+		border-right: 1px solid #1e2028;
+		border-bottom: 1px solid #1e2028;
+		padding: 20px 24px;
+		margin: 0;
+	}
+
+	.quote-text {
+		font-size: 1rem;
+		color: #ddd;
+		line-height: 1.6;
+		font-style: italic;
+		margin-bottom: 12px;
+	}
+
+	.quote-source {
+		font-size: 0.85rem;
+		color: #888;
+
+		a {
+			color: #64D8FF;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
+</style>