From 1ff9537eba14bcb7c0f5e942f135d62500debff6 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 29 Oct 2025 00:32:52 -0300
Subject: [PATCH 1/4] feat: add emit event select video card

---
 src/components/VideoCard.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index ce4a653..f52620f 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="group relative cursor-pointer transition-all duration-300 ease-out" @mouseenter="() => isHovered = true"
-		@mouseleave="() => isHovered = false">
+    <div class="group relative cursor-pointer transition-all duration-300 ease-out" @mouseenter="() => isHovered = true"
+        @mouseleave="() => isHovered = false" @click="() => emit('select', id)">
 		<div
 			class="relative aspect-video rounded-lg overflow-hidden bg-gradient-to-br from-violet-900/20 to-cyan-900/20 border border-white/5">
 			<img :src="thumbnail" :alt="title"
@@ -60,7 +60,8 @@ interface VideoCardProps {
 const isHovered = ref(false);
 
 const props = defineProps<VideoCardProps>();
+const emit = defineEmits<{ (e: 'select', id: string): void }>();
 
-const { title, thumbnail, duration, category } = props;
+const { id, title, thumbnail, duration, category } = props as any;
 
 </script>
\ No newline at end of file

From 85790e43506606558121908a651042246f12810a Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 29 Oct 2025 00:35:33 -0300
Subject: [PATCH 2/4] feat: render select video card into video details dialog

---
 src/components/VideoCarousel.vue      |   5 +-
 src/components/VideoDetailsDialog.vue | 192 ++++++++------------------
 2 files changed, 60 insertions(+), 137 deletions(-)

diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
index 9cf6f77..170ea9c 100644
--- a/src/components/VideoCarousel.vue
+++ b/src/components/VideoCarousel.vue
@@ -20,12 +20,12 @@
 			</button>
 
 			<div class="overflow-hidden" ref="emblaRef">
-				<div class="flex gap-4 will-change-transform select-none touch-pan-y" style="backface-visibility:hidden">
+                <div class="flex gap-4 will-change-transform select-none touch-pan-y" style="backface-visibility:hidden">
 					<div v-for="video in videos" :key="video.id" class="px-2 flex-shrink-0 min-w-0" :style="{
 						flex: `0 0 calc(100% / var(--slides-per-view, ${slidesPerView}))`,
 						maxWidth: `calc(100% / var(--slides-per-view, ${slidesPerView}))`,
 					}">
-						<VideoCard v-bind="video" />
+                        <VideoCard v-bind="video" @select="(id) => emit('select', id)" />
 					</div>
 				</div>
 			</div>
@@ -53,6 +53,7 @@ interface VideoCarouselProps {
 }
 
 const props = defineProps<VideoCarouselProps>();
+const emit = defineEmits<{ (e: 'select', id: string): void }>();
 
 const { title, videos } = props;
 
diff --git a/src/components/VideoDetailsDialog.vue b/src/components/VideoDetailsDialog.vue
index 198f2fd..7b23e94 100644
--- a/src/components/VideoDetailsDialog.vue
+++ b/src/components/VideoDetailsDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
 import {
 	Play,
 	Star,
@@ -13,7 +13,9 @@ import {
 import VideoCard from './VideoCard.vue';
 
 const props = defineProps<{
-	open: boolean
+    open: boolean,
+    video?: any,
+    related?: any[]
 }>();
 
 const emit = defineEmits<{
@@ -54,32 +56,7 @@ onBeforeUnmount(() => {
 	window.removeEventListener('keydown', handleKeydown);
 });
 
-const relatedVideos = [
-	{
-		id: '2',
-		title: 'Comunicação entre Microfrontends: Event Bus e Context',
-		thumbnail:
-			'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '28 min',
-		category: 'Comunicação',
-	},
-	{
-		id: '3',
-		title: 'Design System Distribuído para Microfrontends',
-		thumbnail:
-			'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '41 min',
-		category: 'Design',
-	},
-	{
-		id: '5',
-		title: 'Micro Frontend com Single-SPA Framework',
-		thumbnail:
-			'https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZWIlMjBkZXZlbG9wbWVudHxlbnwxfHx8fDE3NjEwNTI3ODh8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '52 min',
-		category: 'Framework',
-	},
-];
+const relatedVideos = computed(() => props.related || []);
 </script>
 
 <template>
@@ -102,10 +79,10 @@ const relatedVideos = [
 					</button>
 
 					<div class="video-detail-scroll overflow-y-auto max-h-[90vh]">
-						<div class="relative w-full h-[400px]">
-							<img
-								src="https://images.unsplash.com/photo-1431576901776-e539bd916ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMGFyY2hpdGVjdHVyZXxlbnwxfHx8fDE3NjExMDIyNDF8MA&ixlib=rb-4.1.0&q=80&w=1080"
-								alt="Module Federation" class="w-full h-full object-cover" />
+                        <div class="relative w-full h-[400px]">
+                            <img
+                                :src="props.video?.thumbnail"
+                                :alt="props.video?.title || 'Vídeo'" class="w-full h-full object-cover" />
 							<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f]/50 to-transparent" />
 							<div
 								class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black/30 backdrop-blur-sm">
@@ -128,32 +105,31 @@ const relatedVideos = [
 									<span class="text-sm">Em destaque</span>
 								</div>
 
-								<h2 class="mb-4 text-transparent bg-clip-text" :style="{
-									backgroundImage:
-										'linear-gradient(120deg, #71bedb 30%, #f4f468)',
-								}">
-									Module Federation: Compartilhando Código Entre
-									Microfrontends
-								</h2>
-
-								<div class="flex flex-wrap items-center gap-4 mb-6">
-									<div class="flex items-center gap-2 text-sm">
-										<Star class="w-4 h-4" :style="{ color: '#f4f468' }" fill="#f4f468" />
-										<span class="text-gray-300">4.9</span>
-									</div>
-									<div class="flex items-center gap-2 text-sm text-gray-400">
-										<Calendar class="w-4 h-4" />
-										<span>2024</span>
-									</div>
-									<div class="flex items-center gap-2 text-sm text-gray-400">
-										<Clock class="w-4 h-4" />
-										<span>32 minutos</span>
-									</div>
-									<div class="flex items-center gap-2 text-sm text-gray-400">
-										<Users class="w-4 h-4" />
-										<span>15.2K visualizações</span>
-									</div>
-								</div>
+                                <h2 class="mb-4 text-transparent bg-clip-text" :style="{
+                                    backgroundImage:
+                                        'linear-gradient(120deg, #71bedb 30%, #f4f468)',
+                                }">
+                                    {{ props.video?.title }}
+                                </h2>
+
+                                <div class="flex flex-wrap items-center gap-4 mb-6">
+                                    <div v-if="props.video?.rating" class="flex items-center gap-2 text-sm">
+                                        <Star class="w-4 h-4" :style="{ color: '#f4f468' }" fill="#f4f468" />
+                                        <span class="text-gray-300">{{ props.video?.rating }}</span>
+                                    </div>
+                                    <div v-if="props.video?.year" class="flex items-center gap-2 text-sm text-gray-400">
+                                        <Calendar class="w-4 h-4" />
+                                        <span>{{ props.video?.year }}</span>
+                                    </div>
+                                    <div v-if="props.video?.duration" class="flex items-center gap-2 text-sm text-gray-400">
+                                        <Clock class="w-4 h-4" />
+                                        <span>{{ props.video?.duration }}</span>
+                                    </div>
+                                    <div v-if="props.video?.views" class="flex items-center gap-2 text-sm text-gray-400">
+                                        <Users class="w-4 h-4" />
+                                        <span>{{ props.video?.views }} visualizações</span>
+                                    </div>
+                                </div>
 
 								<div class="flex items-center gap-3 mb-8">
 									<button
@@ -188,96 +164,42 @@ const relatedVideos = [
 								</div>
 							</div>
 
-							<div class="mb-8">
+                            <div class="mb-8">
 								<h3 class="mb-3 text-gray-200">Sinopse</h3>
-								<p class="text-gray-400 leading-relaxed mb-4">
-									Aprenda a implementar Module Federation, uma das técnicas
-									mais poderosas para compartilhamento de código entre
-									microfrontends. Este curso aborda desde conceitos básicos
-									até implementações avançadas, incluindo compartilhamento
-									dinâmico de módulos, versionamento e estratégias de deploy.
-								</p>
-								<p class="text-gray-400 leading-relaxed">
-									Você vai dominar a configuração do Webpack Module
-									Federation, entender como criar hosts e remotes,
-									implementar lazy loading de componentes compartilhados e
-									gerenciar dependências entre diferentes aplicações.
-								</p>
+                                <p v-for="(p, idx) in (props.video?.synopsis || [])" :key="idx" class="text-gray-400 leading-relaxed mb-4">
+                                    {{ p }}
+                                </p>
 							</div>
 
-							<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-6 bg-white/5 rounded-lg border border-white/10">
-								<div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-6 bg-white/5 rounded-lg border border-white/10">
+                                <div v-if="props.video?.instructor || props.video?.level">
 									<h4 class="mb-3 text-gray-300">Instrutor</h4>
-									<p class="text-gray-400">Dr. Marcus Silva</p>
+                                    <p class="text-gray-400">{{ props.video?.instructor || '—' }}</p>
 								</div>
-								<div>
+                                <div v-if="props.video?.level">
 									<h4 class="mb-3 text-gray-300">Nível</h4>
-									<p class="text-gray-400">
-										Intermediário - Avançado
-									</p>
+                                    <p class="text-gray-400">{{ props.video?.level }}</p>
 								</div>
-								<div>
+                                <div v-if="(props.video?.technologies || []).length">
 									<h4 class="mb-3 text-gray-300">Tecnologias</h4>
 									<div class="flex flex-wrap gap-2">
-										<span class="px-3 py-1 rounded-full text-xs border" :style="{
-											backgroundColor:
-												'rgba(113, 190, 219, 0.1)',
-											borderColor:
-												'rgba(113, 190, 219, 0.3)',
-											color: '#71BEDB',
-										}">
-											Webpack
-										</span>
-										<span class="px-3 py-1 rounded-full text-xs border" :style="{
-											backgroundColor:
-												'rgba(113, 190, 219, 0.1)',
-											borderColor:
-												'rgba(113, 190, 219, 0.3)',
-											color: '#71BEDB',
-										}">
-											React
-										</span>
-										<span class="px-3 py-1 rounded-full text-xs border" :style="{
-											backgroundColor:
-												'rgba(113, 190, 219, 0.1)',
-											borderColor:
-												'rgba(113, 190, 219, 0.3)',
-											color: '#71BEDB',
-										}">
-											TypeScript
-										</span>
-										<span class="px-3 py-1 rounded-full text-xs border" :style="{
-											backgroundColor:
-												'rgba(113, 190, 219, 0.1)',
-											borderColor:
-												'rgba(113, 190, 219, 0.3)',
-											color: '#71BEDB',
-										}">
-											Module Federation
-										</span>
+                                        <span v-for="tech in (props.video?.technologies || [])" :key="tech" class="px-3 py-1 rounded-full text-xs border" :style="{
+                                            backgroundColor: 'rgba(113, 190, 219, 0.1)',
+                                            borderColor: 'rgba(113, 190, 219, 0.3)',
+                                            color: '#71BEDB',
+                                        }">{{ tech }}</span>
 									</div>
 								</div>
-								<div>
+                                <div v-if="(props.video?.learnings || []).length">
 									<h4 class="mb-3 text-gray-300">
 										O que você vai aprender
 									</h4>
 									<ul class="space-y-2 text-gray-400 text-sm">
-										<li class="flex items-start gap-2">
-											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
-												:style="{ backgroundColor: '#71BEDB' }" />
-											<span>Configuração de Module
-												Federation</span>
-										</li>
-										<li class="flex items-start gap-2">
-											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
-												:style="{ backgroundColor: '#71BEDB' }" />
-											<span>Compartilhamento de componentes</span>
-										</li>
-										<li class="flex items-start gap-2">
-											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
-												:style="{ backgroundColor: '#71BEDB' }" />
-											<span>Gestão de dependências</span>
-										</li>
+                                        <li v-for="(item, idx) in (props.video?.learnings || [])" :key="idx" class="flex items-start gap-2">
+                                            <span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
+                                                :style="{ backgroundColor: '#71BEDB' }" />
+                                            <span>{{ item }}</span>
+                                        </li>
 									</ul>
 								</div>
 							</div>
@@ -286,8 +208,8 @@ const relatedVideos = [
 								<h3 class="mb-4 text-gray-200">
 									Vídeos Relacionados
 								</h3>
-								<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-									<VideoCard v-for="video in relatedVideos" :key="video.id" v-bind="video" />
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                    <VideoCard v-for="video in relatedVideos" :key="video.id" v-bind="video" />
 								</div>
 							</div>
 						</div>

From ab91cc035dfcce4d1071ae31a3ade4be2fc77fe1 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 29 Oct 2025 00:37:41 -0300
Subject: [PATCH 3/4] feat: render catalog by catalogData

---
 src/App.vue        | 160 ++++-------------------------
 src/catalogData.ts | 246 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 267 insertions(+), 139 deletions(-)
 create mode 100644 src/catalogData.ts

diff --git a/src/App.vue b/src/App.vue
index d074f03..3ec65b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,152 +1,35 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 import Header from './components/Header.vue';
 import Hero from './components/Hero.vue';
 import VideoCarousel from './components/VideoCarousel.vue';
 import VideoDetailsDialog from './components/VideoDetailsDialog.vue';
+import catalogData from './catalogData';
 
 
 const modalDetailOpen = ref(false);
+const selectedVideoId = ref<string | null>(null);
 
-const featuredArchitectures = [
-	{
-		id: '1',
-		title: 'Module Federation: Compartilhando Código Entre Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1431576901776-e539bd916ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMGFyY2hpdGVjdHVyZXxlbnwxfHx8fDE3NjExMDIyNDF8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '32 min',
-		category: 'Arquitetura',
-	},
-	{
-		id: '2',
-		title: 'Comunicação entre Microfrontends: Event Bus e Context',
-		thumbnail: 'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '28 min',
-		category: 'Comunicação',
-	},
-	{
-		id: '3',
-		title: 'Design System Distribuído para Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '41 min',
-		category: 'Design',
-	},
-	{
-		id: '4',
-		title: 'Deploy e CI/CD para Arquitetura Microfrontend',
-		thumbnail: 'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '36 min',
-		category: 'DevOps',
-	},
-	{
-		id: '5',
-		title: 'Micro Frontend com Single-SPA Framework',
-		thumbnail: 'https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZWIlMjBkZXZlbG9wbWVudHxlbnwxfHx8fDE3NjEwNTI3ODh8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '52 min',
-		category: 'Framework',
-	},
-	{
-		id: '6',
-		title: 'Estratégias de Roteamento em Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '24 min',
-		category: 'Roteamento',
-	},
-];
-
-const practicalMicrofrontends = [
-	{
-		id: '7',
-		title: 'Construindo um E-commerce com Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1558181445-eca4774b2a37?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkZXZlbG9wZXIlMjB3b3Jrc3BhY2V8ZW58MXx8fHwxNzYxMDgzODM3fDA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '1h 15min',
-		category: 'Prático',
-	},
-	{
-		id: '8',
-		title: 'Gerenciamento de Estado Global em Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '38 min',
-		category: 'Estado',
-	},
-	{
-		id: '9',
-		title: 'Performance e Otimização em Arquitetura Distribuída',
-		thumbnail: 'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '45 min',
-		category: 'Performance',
-	},
-	{
-		id: '10',
-		title: 'Testes End-to-End em Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1519662978799-2f05096d3636?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBhcmNoaXRlY3R1cmV8ZW58MXx8fHwxNzYxMDQ1MDQzfDA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '33 min',
-		category: 'Testes',
-	},
-	{
-		id: '11',
-		title: 'Monitoramento e Observabilidade de Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkYXRhJTIwdmlzdWFsaXphdGlvbnxlbnwxfHx8fDE3NjEwMDg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '29 min',
-		category: 'Monitoramento',
-	},
-	{
-		id: '12',
-		title: 'Migração de Monolito para Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1595623654300-b27329804025?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5JTIwY29kaW5nfGVufDF8fHx8MTc2MTA3Njc4NHww&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '58 min',
-		category: 'Migração',
-	},
-];
+function openDetails(id: string) {
+	selectedVideoId.value = id;
+	modalDetailOpen.value = true;
+}
 
-const advancedPatterns = [
-	{
-		id: '13',
-		title: 'Micro Frontends com React e Vue no Mesmo Projeto',
-		thumbnail: 'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '42 min',
-		category: 'Avançado',
-	},
-	{
-		id: '14',
-		title: 'Server-Side Rendering em Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '51 min',
-		category: 'SSR',
-	},
-	{
-		id: '15',
-		title: 'Edge Computing e Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '37 min',
-		category: 'Edge',
-	},
-	{
-		id: '16',
-		title: 'Segurança e Autenticação Distribuída',
-		thumbnail: 'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '44 min',
-		category: 'Segurança',
-	},
-	{
-		id: '17',
-		title: 'GraphQL Federation em Microfrontends',
-		thumbnail: 'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '39 min',
-		category: 'GraphQL',
-	},
-	{
-		id: '18',
-		title: 'Micro Frontends em Aplicações Mobile',
-		thumbnail: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
-		duration: '48 min',
-		category: 'Mobile',
-	},
-];
 
 function handleShowDetails() {
-	modalDetailOpen.value = true;
+	openDetails('1');
 }
+
+const selectedVideo = computed(() =>
+	selectedVideoId.value ? (catalogData as any).byId[selectedVideoId.value] : null
+);
+
+const relatedVideos = computed(() => {
+	const current = selectedVideo.value as any;
+	if (!current || !current.relatedIds) return [] as any[];
+	return current.relatedIds.map((id: string) => (catalogData as any).byId[id]).filter(Boolean);
+});
 </script>
 
 <template>
@@ -167,15 +50,14 @@ function handleShowDetails() {
 			<Header />
 			<main class="z-10">
 				<Hero @on-show-details="handleShowDetails" />
-				<VideoCarousel class="mt-4" title="Arquiteturas em Destaque" :videos="featuredArchitectures" />
-				<VideoCarousel title="Microfrontends na Prática" :videos="practicalMicrofrontends" />
-				<VideoCarousel title="Padrões Avançados" :videos="advancedPatterns" />
+				<VideoCarousel v-for="carousel in (catalogData as any).carousels" :key="carousel.id" class="mt-4"
+					:title="carousel.title" :videos="carousel.videos" @select="openDetails" />
 			</main>
 
 		</div>
 
 		<!-- <SearchModal open={searchOpen} onOpenChange={setSearchOpen} /> -->
-		<VideoDetailsDialog v-model:open="modalDetailOpen" />
+		<VideoDetailsDialog v-model:open="modalDetailOpen" :video="selectedVideo" :related="relatedVideos" />
 	</div>
 </template>
 <style>
diff --git a/src/catalogData.ts b/src/catalogData.ts
new file mode 100644
index 0000000..82f1318
--- /dev/null
+++ b/src/catalogData.ts
@@ -0,0 +1,246 @@
+export type CatalogVideo = {
+  id: string;
+  title: string;
+  thumbnail: string;
+  duration: string;
+  category: string;
+  year?: number;
+  rating?: number;
+  views?: string;
+  synopsis?: string[];
+  instructor?: string;
+  level?: string;
+  technologies?: string[];
+  learnings?: string[];
+  relatedIds?: string[];
+};
+
+export type CatalogCarousel = {
+  id: string;
+  title: string;
+  videos: CatalogVideo[];
+};
+
+export type CatalogHero = {
+  backgroundImage: string;
+  title: string;
+  subtitle: string;
+  highlightLabel?: string;
+  relevance?: string;
+  duration?: string;
+  year?: string | number;
+};
+
+export type CatalogData = {
+  hero: CatalogHero;
+  carousels: CatalogCarousel[];
+  byId: Record<string, CatalogVideo>;
+};
+
+export const catalogData: CatalogData = {
+  hero: {
+    backgroundImage:
+      'https://images.unsplash.com/photo-1595623654300-b27329804025?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5JTIwY29kaW5nfGVufDF8fHx8MTc2MTA3Njc4NHww&ixlib=rb-4.1.0&q=80&w=1080',
+    title: 'Microfrontends',
+    subtitle: 'Arquitetura do Futuro',
+    highlightLabel: 'Novidade',
+    relevance: '98% relevante',
+    duration: '45 min',
+    year: 2025,
+  },
+  carousels: [
+    {
+      id: 'c1',
+      title: 'Arquiteturas em Destaque',
+      videos: [
+        {
+          id: '1',
+          title: 'Module Federation: Compartilhando Código Entre Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1431576901776-e539bd916ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMGFyY2hpdGVjdHVyZXxlbnwxfHx8fDE3NjExMDIyNDF8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '32 min',
+          category: 'Arquitetura',
+          year: 2024,
+          rating: 4.9,
+          views: '15.2K',
+          synopsis: [
+            'Aprenda a implementar Module Federation para compartilhamento de código.',
+            'Do básico ao avançado: módulos dinâmicos, versionamento e deploy.'
+          ],
+          instructor: 'Dr. Marcus Silva',
+          level: 'Intermediário - Avançado',
+          technologies: ['Webpack', 'React', 'TypeScript', 'Module Federation'],
+          learnings: [
+            'Configuração de Module Federation',
+            'Compartilhamento de componentes',
+            'Gestão de dependências'
+          ],
+          relatedIds: ['2', '3', '5']
+        },
+        {
+          id: '2',
+          title: 'Comunicação entre Microfrontends: Event Bus e Context',
+          thumbnail:
+            'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '28 min',
+          category: 'Comunicação',
+          relatedIds: ['1', '3']
+        },
+        {
+          id: '3',
+          title: 'Design System Distribuído para Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '41 min',
+          category: 'Design',
+          relatedIds: ['1', '5']
+        },
+        {
+          id: '4',
+          title: 'Deploy e CI/CD para Arquitetura Microfrontend',
+          thumbnail:
+            'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '36 min',
+          category: 'DevOps',
+          relatedIds: ['10']
+        },
+        {
+          id: '5',
+          title: 'Micro Frontend com Single-SPA Framework',
+          thumbnail:
+            'https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZWIlMjBkZXZlbG9wbWVudHxlbnwxfHx8fDE3NjEwNTI3ODh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '52 min',
+          category: 'Framework'
+        },
+        {
+          id: '6',
+          title: 'Estratégias de Roteamento em Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '24 min',
+          category: 'Roteamento'
+        }
+      ]
+    },
+    {
+      id: 'c2',
+      title: 'Microfrontends na Prática',
+      videos: [
+        {
+          id: '7',
+          title: 'Construindo um E-commerce com Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1558181445-eca4774b2a37?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkZXZlbG9wZXIlMjB3b3Jrc3BhY2V8ZW58MXx8fHwxNzYxMDgzODM3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '1h 15min',
+          category: 'Prático'
+        },
+        {
+          id: '8',
+          title: 'Gerenciamento de Estado Global em Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '38 min',
+          category: 'Estado'
+        },
+        {
+          id: '9',
+          title: 'Performance e Otimização em Arquitetura Distribuída',
+          thumbnail:
+            'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '45 min',
+          category: 'Performance'
+        },
+        {
+          id: '10',
+          title: 'Testes End-to-End em Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1519662978799-2f05096d3636?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBhcmNoaXRlY3R1cmV8ZW58MXx8fHwxNzYxMDQ1MDQzfDA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '33 min',
+          category: 'Testes'
+        },
+        {
+          id: '11',
+          title: 'Monitoramento e Observabilidade de Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkYXRhJTIwdmlzdWFsaXphdGlvbnxlbnwxfHx8fDE3NjEwMDg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '29 min',
+          category: 'Monitoramento'
+        },
+        {
+          id: '12',
+          title: 'Migração de Monolito para Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1595623654300-b27329804025?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5JTIwY29kaW5nfGVufDF8fHx8MTc2MTA3Njc4NHww&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '58 min',
+          category: 'Migração'
+        }
+      ]
+    },
+    {
+      id: 'c3',
+      title: 'Padrões Avançados',
+      videos: [
+        {
+          id: '13',
+          title: 'Micro Frontends com React e Vue no Mesmo Projeto',
+          thumbnail:
+            'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '42 min',
+          category: 'Avançado'
+        },
+        {
+          id: '14',
+          title: 'Server-Side Rendering em Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '51 min',
+          category: 'SSR'
+        },
+        {
+          id: '15',
+          title: 'Edge Computing e Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '37 min',
+          category: 'Edge'
+        },
+        {
+          id: '16',
+          title: 'Segurança e Autenticação Distribuída',
+          thumbnail:
+            'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '44 min',
+          category: 'Segurança'
+        },
+        {
+          id: '17',
+          title: 'GraphQL Federation em Microfrontends',
+          thumbnail:
+            'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '39 min',
+          category: 'GraphQL'
+        },
+        {
+          id: '18',
+          title: 'Micro Frontends em Aplicações Mobile',
+          thumbnail:
+            'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+          duration: '48 min',
+          category: 'Mobile'
+        }
+      ]
+    }
+  ],
+  byId: {}
+};
+
+// Build byId index for quick lookup
+for (const carousel of catalogData.carousels) {
+  for (const video of carousel.videos) {
+    catalogData.byId[video.id] = video;
+  }
+}
+
+export default catalogData;
+
+

From 81eb4fa5a2fdfec868d41f82aa14e857c61acaaf Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 4 Nov 2025 01:38:29 -0300
Subject: [PATCH 4/4] chore: redirect to player module

---
 package-lock.json       | 4 ++--
 package.json            | 2 +-
 src/App.vue             | 8 +++++++-
 src/components/Hero.vue | 3 ++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 37a567a..8152205 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mod-catalog",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mod-catalog",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "@module-federation/bridge-vue3": "^0.21.2",
         "@tailwindcss/vite": "^4.1.16",
diff --git a/package.json b/package.json
index 92651b0..ab5a38c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mod-catalog",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index 3ec65b5..6280cb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,12 @@ const relatedVideos = computed(() => {
 	if (!current || !current.relatedIds) return [] as any[];
 	return current.relatedIds.map((id: string) => (catalogData as any).byId[id]).filter(Boolean);
 });
+
+function handleRedirectPlayer() {
+	if ((window as any)?.shellNavigate) {
+		(window as any).shellNavigate("/player");
+	}
+}
 </script>
 
 <template>
@@ -49,7 +55,7 @@ const relatedVideos = computed(() => {
 		<div class="relative z-10">
 			<Header />
 			<main class="z-10">
-				<Hero @on-show-details="handleShowDetails" />
+				<Hero @on-show-details="handleShowDetails" @on-watch-now="handleRedirectPlayer" />
 				<VideoCarousel v-for="carousel in (catalogData as any).carousels" :key="carousel.id" class="mt-4"
 					:title="carousel.title" :videos="carousel.videos" @select="openDetails" />
 			</main>
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index f9d416e..351ede9 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -47,6 +47,7 @@
 			<div class="flex items-center gap-4">
 				<button
 					class="px-8 py-4 rounded-lg transition-all duration-300 flex items-center gap-3 shadow-xl hover:scale-105"
+					@click="emit('onWatchNow')"
 					:style="{
 						backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)',
 						boxShadow: '0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px -5px rgba(113, 190, 219, 0.2)'
@@ -70,6 +71,6 @@
 <script setup lang="ts">
 import { Info, Play } from 'lucide-vue-next';
 
-const emit = defineEmits(['onShowDetails']);
+const emit = defineEmits(['onWatchNow', 'onShowDetails']);
 
 </script>
\ No newline at end of file