@mundogamernetwork/shared-ui 1.0.0

package/pages/partners.vue

@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { partner } = storeToRefs(institutionalStore);
+
+const currentPage = ref(1);
+const perPage = 12;
+const selectedPartner = ref<any>(null);
+
+async function fetchPartners() {
+	try {
+		await institutionalStore.fetchPartner({
+			filter: { status: 1 },
+			sort: "name",
+			order: "asc",
+			per_page: perPage,
+			page: currentPage.value,
+		});
+	} catch {
+		// silent
+	}
+}
+
+function changePage(page: number) {
+	currentPage.value = page;
+	fetchPartners();
+}
+
+function openPartnerModal(p: any) {
+	selectedPartner.value = p;
+	institutionalStore.togglePartnersModal();
+}
+
+function closePartnerModal() {
+	selectedPartner.value = null;
+	if (institutionalStore.showPartnersModal) {
+		institutionalStore.togglePartnersModal();
+	}
+}
+
+onMounted(() => {
+	fetchPartners();
+});
+</script>
+
+<template>
+	<div id="partners" class="container partners">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.partners.title") }}</h1>
+					<p>{{ $t("more.partners.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div v-if="partner.status === 'pending'" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="partner?.data?.data && partner.data.data.length > 0">
+							<div class="partners-grid">
+								<div
+									v-for="p in partner.data.data"
+									:key="p.id"
+									class="partner-card"
+									@click="openPartnerModal(p)"
+								>
+									<img
+										:src="p.logo_url || p.image_url || '/imgs/default.jpg'"
+										:alt="p.name"
+									/>
+									<h4>{{ p.name }}</h4>
+								</div>
+							</div>
+
+							<div v-if="partner.data.meta" class="pagination-controls">
+								<button
+									:disabled="currentPage <= 1"
+									@click="changePage(currentPage - 1)"
+								>
+									{{ $t("components.previous") }}
+								</button>
+								<span>{{ currentPage }} / {{ partner.data.meta.last_page || 1 }}</span>
+								<button
+									:disabled="currentPage >= (partner.data.meta.last_page || 1)"
+									@click="changePage(currentPage + 1)"
+								>
+									{{ $t("components.next") }}
+								</button>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.partners.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<Teleport to="body">
+			<div v-if="institutionalStore.showPartnersModal && selectedPartner" class="modal-overlay" @click.self="closePartnerModal">
+				<div class="partner-modal">
+					<button class="close-btn" @click="closePartnerModal">&times;</button>
+					<img
+						:src="selectedPartner.logo_url || selectedPartner.image_url || '/imgs/default.jpg'"
+						:alt="selectedPartner.name"
+						class="partner-modal__image"
+					/>
+					<h3>{{ selectedPartner.name }}</h3>
+					<p v-if="selectedPartner.localized_description">{{ selectedPartner.localized_description }}</p>
+					<a
+						v-if="selectedPartner.website_url"
+						:href="selectedPartner.website_url"
+						target="_blank"
+						rel="noopener"
+						class="partner-link"
+					>
+						{{ $t("more.partners.visit_website") }}
+					</a>
+				</div>
+			</div>
+		</Teleport>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.partners {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-partners.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.partners-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 16px;
+		margin-bottom: 24px;
+	}
+
+	.partner-card {
+		background-color: var(--chip-background-2);
+		padding: 16px;
+		text-align: center;
+		cursor: pointer;
+		transition: opacity 0.2s;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		img {
+			width: 80px;
+			height: 80px;
+			object-fit: contain;
+			margin-bottom: 8px;
+		}
+
+		h4 {
+			font-size: 14px;
+			font-weight: 500;
+			color: var(--card-cover-title);
+		}
+	}
+
+	.pagination-controls {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20px;
+		gap: 16px;
+
+		button {
+			padding: 8px 15px;
+			background-color: var(--chip-background-2);
+			color: var(--card-cover-title);
+			border: 1px solid var(--search-bar-border-color);
+			cursor: pointer;
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+}
+
+.partner-modal {
+	background-color: var(--sidebar-bg);
+	padding: 32px;
+	max-width: 500px;
+	width: 90%;
+	text-align: center;
+	position: relative;
+
+	.close-btn {
+		position: absolute;
+		top: 8px;
+		right: 12px;
+		background: none;
+		border: none;
+		color: var(--active);
+		font-size: 24px;
+		cursor: pointer;
+	}
+
+	&__image {
+		width: 120px;
+		height: 120px;
+		object-fit: contain;
+		margin-bottom: 16px;
+	}
+
+	h3 {
+		font-size: 18px;
+		font-weight: 600;
+		color: var(--active);
+		margin-bottom: 12px;
+	}
+
+	p {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--inactive);
+		margin-bottom: 16px;
+	}
+
+	.partner-link {
+		display: inline-block;
+		padding: 8px 24px;
+		border: 1px solid var(--chip-text);
+		color: var(--chip-text);
+		text-decoration: none;
+		font-size: 14px;
+
+		&:hover {
+			background: var(--chip-text);
+			color: var(--chip-background-2);
+		}
+	}
+}
+</style>

package/pages/press.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { press } = storeToRefs(institutionalStore);
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const currentPage = ref(1);
+const perPage = 8;
+
+async function fetchPressData() {
+	try {
+		await institutionalStore.fetchLatestPress({
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "created_at",
+			order: "desc",
+			per_page: perPage,
+			page: currentPage.value,
+		});
+	} catch {
+		// silent
+	}
+}
+
+function loadMore() {
+	currentPage.value++;
+	institutionalStore.fetchMoreLatestPress({
+		filter: {
+			status: 1,
+			platform_id: systemId,
+		},
+		sort: "created_at",
+		order: "desc",
+		per_page: perPage,
+		page: currentPage.value,
+	});
+}
+
+onMounted(() => {
+	fetchPressData();
+});
+</script>
+
+<template>
+	<div id="press" class="container press">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.press.title") }}</h1>
+					<p>{{ $t("more.press.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="press-info" v-if="$t('more.press.media_kit_title')">
+							<div class="press-info__title">{{ $t("more.press.media_kit_title") }}</div>
+							<p>{{ $t("more.press.media_kit_text") }}</p>
+						</div>
+
+						<div v-if="press.status === 'pending' && (!press.data || press.data.length === 0)" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="press.data && press.data.length > 0" class="press-list">
+							<div
+								v-for="item in press.data"
+								:key="item.id"
+								class="press-card"
+							>
+								<img
+									v-if="item.cover_image_url"
+									:src="item.cover_image_url"
+									:alt="item.localized_title"
+									class="press-card__image"
+								/>
+								<div class="press-card__content">
+									<h3>{{ item.localized_title }}</h3>
+									<p>{{ item.localized_short_description }}</p>
+									<span class="date">{{ item.created_at }}</span>
+								</div>
+							</div>
+
+							<div
+								v-if="press.data.meta && press.data.length < press.data.meta.total"
+								class="load-more"
+							>
+								<button @click="loadMore" :disabled="press.status === 'pending'">
+									{{ $t("components.load_more") }}
+								</button>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.press.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.press {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-press.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.press-info {
+		background-color: var(--chip-background-2);
+		padding: 16px;
+		margin-bottom: 24px;
+
+		&__title {
+			font-size: 14px;
+			font-weight: 600;
+			color: var(--card-cover-title);
+			margin-bottom: 8px;
+		}
+
+		p {
+			font-size: 14px;
+			line-height: 20px;
+		}
+	}
+
+	.press-list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.press-card {
+		display: flex;
+		gap: 16px;
+		background-color: var(--chip-background-2);
+		padding: 16px;
+
+		&__image {
+			width: 160px;
+			height: 100px;
+			object-fit: cover;
+			flex-shrink: 0;
+		}
+
+		&__content {
+			flex: 1;
+
+			h3 {
+				font-size: 16px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+				margin-bottom: 8px;
+			}
+
+			p {
+				font-size: 14px;
+				line-height: 20px;
+				margin-bottom: 8px;
+			}
+
+			.date {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+			}
+		}
+	}
+
+	.load-more {
+		text-align: center;
+		margin-top: 24px;
+
+		button {
+			padding: 8px 24px;
+			border: 1px solid var(--chip-text);
+			background: transparent;
+			color: var(--chip-text);
+			cursor: pointer;
+			font-size: 14px;
+
+			&:disabled {
+				opacity: 0.5;
+			}
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.press .press-card {
+		flex-direction: column;
+
+		&__image {
+			width: 100%;
+			height: 180px;
+		}
+	}
+}
+</style>

package/pages/presskit/[slug].vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { fetchPublicPressKit, trackPressKitEvent } from '../../services/pressKitService';
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const kit = ref<Record<string, any> | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+onMounted(async () => {
+	try {
+		const { data } = await fetchPublicPressKit(slug);
+		kit.value = data?.data || data;
+
+		trackPressKitEvent(slug, {
+			event_type: 'view',
+			referrer: document.referrer || undefined,
+		}).catch(() => {});
+	} catch {
+		error.value = true;
+	} finally {
+		loading.value = false;
+	}
+});
+
+const assets = computed(() => kit.value?.assets?.data || []);
+const videos = computed(() => kit.value?.videos?.data || []);
+const credits = computed(() => kit.value?.credits?.data || []);
+const awards = computed(() => kit.value?.awards?.data || []);
+const quotes = computed(() => kit.value?.quotes?.data || []);
+
+const requestUrl = useRequestURL();
+
+useHead(() => ({
+	title: kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit',
+	meta: [
+		{ name: 'description', content: kit.value?.tagline || kit.value?.description?.substring(0, 160) || '' },
+		{ property: 'og:title', content: kit.value?.name || 'Press Kit' },
+		{ property: 'og:description', content: kit.value?.tagline || kit.value?.description?.substring(0, 160) || '' },
+		{ property: 'og:image', content: kit.value?.hero_image_url || kit.value?.logo_url || '' },
+		{ property: 'og:type', content: 'article' },
+		{ property: 'og:url', content: requestUrl.href },
+	],
+}));
+</script>
+
+<template>
+	<div class="presskit-page">
+		<div v-if="loading" class="loading-state">
+			<span class="loading-text">{{ $t('press_kit.loading') }}</span>
+		</div>
+
+		<div v-else-if="error || !kit" class="error-state">
+			<h2>{{ $t('press_kit.not_found') }}</h2>
+			<p>{{ $t('press_kit.not_found_message') }}</p>
+			<NuxtLink to="/" class="btn-back">{{ $t('press_kit.back_home') }}</NuxtLink>
+		</div>
+
+		<template v-else>
+			<PressKitHero
+				:name="kit.name"
+				:tagline="kit.tagline"
+				:hero-image-url="kit.hero_image_url"
+				:logo-url="kit.logo_url"
+				:trailer-url="kit.trailer_url"
+			/>
+
+			<div class="presskit-content">
+				<aside class="presskit-sidebar">
+					<PressKitFactSheet :kit="kit" />
+				</aside>
+
+				<main class="presskit-main">
+					<div v-if="kit.description" class="description-section">
+						<h3 class="section-title">{{ $t('press_kit.description') }}</h3>
+						<div class="description-text" v-html="kit.description" />
+					</div>
+
+					<PressKitVideoPlayer :videos="videos" />
+
+					<PressKitAssetGallery
+						:assets="assets"
+						:allow-download="kit.allow_asset_download !== false"
+					/>
+
+					<PressKitQuotes :quotes="quotes" />
+
+					<PressKitAwards :awards="awards" />
+
+					<PressKitCredits :credits="credits" />
+				</main>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.presskit-page {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 24px 16px 60px;
+
+	.loading-state {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 400px;
+	}
+
+	.loading-text {
+		color: #888;
+		font-size: 0.95rem;
+	}
+
+	.error-state {
+		text-align: center;
+		padding: 80px 20px;
+
+		h2 {
+			color: #fff;
+			margin-bottom: 8px;
+		}
+
+		p {
+			color: #888;
+			margin-bottom: 24px;
+		}
+	}
+
+	.btn-back {
+		display: inline-block;
+		background: var(--color-primary, #FDB215);
+		color: #13161C;
+		padding: 10px 24px;
+		font-weight: 600;
+		text-decoration: none;
+		transition: opacity 0.2s;
+
+		&:hover {
+			opacity: 0.85;
+		}
+	}
+
+	.presskit-content {
+		display: grid;
+		grid-template-columns: 320px 1fr;
+		gap: 32px;
+		margin-top: 32px;
+
+		@media (max-width: 768px) {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.presskit-sidebar {
+		position: sticky;
+		top: 24px;
+		align-self: start;
+
+		@media (max-width: 768px) {
+			position: static;
+		}
+	}
+
+	.presskit-main {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+	}
+
+	.description-section {
+		.section-title {
+			font-size: 1.2rem;
+			font-weight: 700;
+			color: #fff;
+			margin-bottom: 12px;
+		}
+
+		.description-text {
+			font-size: 0.95rem;
+			color: #ccc;
+			line-height: 1.7;
+
+			:deep(p) {
+				margin-bottom: 12px;
+			}
+		}
+	}
+}
+</style>