@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);
body {
font-family: ‘Inter’, sans-serif;
background-color: #FAFAF9;
color: #1E293B;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.glass-panel {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.fade-in {
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-btn.active {
background-color: #0F172A;
color: #FBBF24;
border-left: 4px solid #FBBF24;
}
Goal: Inform & Organize -> Method: Master-detail interactive panel -> Interaction: Clickable sidebar updates main view -> Justification: Keeps the UI clean while allowing deep dives into specific campaigns.
– Report Info: Target Audience Focus -> Goal: Compare -> Method: Radar Chart (Chart.js) -> Interaction: Hover tooltips -> Justification: Visually demonstrates the projected platform focus (TikTok vs IG vs FB) for each demographic, adding analytical depth to the textual strategy.
– Report Info: Elementos Comunes -> Goal: Inform -> Method: Top banner cards -> Interaction: Hover lift -> Justification: Establishes global rules before diving into specifics. –>
Marlis Academy
Media Strategy Dashboard
Identidad Global de Marca
Esta sección define los Elementos Comunes que deben aplicarse a todas las campañas de Marlis Academy para mantener la consistencia visual y la confianza del usuario. Estos pilares respaldan la efectividad de los anuncios individuales.
Borde y Colores
Uso consistente de Azul Marino y Dorado (o Verde Agua) para establecer una identidad visual reconocible al instante.
Tipografía
Textos superpuestos con letras grandes, claras y sin remates (Sans Serif) optimizadas para la rápida lectura en dispositivos móviles.
Prueba Social
Inclusión estratégica de frases validadoras como “Join +500 students worldwide” para generar confianza inmediata.
Seleccione una estrategia
Haga clic en uno de los cursos en el menú lateral para explorar sus directrices creativas y de distribución.
const campaigns = [ { id: ‘ingles-inicial’, title: ‘Inglés Inicial’, target: ‘Para Hispanohablantes’, icon: ‘✈️’, concept: ‘Superación personal y apertura de puertas.’, image: ‘Una persona joven sonriendo, con audífonos, sosteniendo una taza de café frente a una laptop. De fondo, sutilmente, una bandera de Reino Unido o EE.UU.’, video: ‘Un montaje rápido de “Antes vs. Después”. Alguien confundido leyendo un menú en inglés, y luego la misma persona pidiendo con fluidez en un viaje.’, logo: ‘Esquina superior derecha (Fondo traslúcido)’, cta: ‘¡Empieza hoy tu viaje! Haz clic aquí para tu primera lección gratis.’, chartData: [40, 30, 20, 10], }, { id: ‘spanish-english’, title: ‘Spanish for English Speakers’, target: ‘Para Angloparlantes’, icon: ‘💃’, concept: ‘Inmersión cultural y calidez.’, image: ‘Un grupo de amigos diversos riendo en una calle colorida (estilo Cartagena o Madrid), con texto en inglés que diga: “Stop translating, start speaking”.’, video: ‘Un profesor nativo de Marlis Academy saludando con energía: “Hi! Want to master Spanish beyond \’Hola\’? Join us!”‘, logo: ‘Integrado con el eslogan “Connect through language”‘, cta: ‘Get my free trial! / ¡Quiero mi prueba gratis!’, chartData: [20, 45, 10, 25], }, { id: ‘espagnol-francophones’, title: ‘Espagnol pour Francophones’, target: ‘Para Francófonos’, icon: ‘🗼’, concept: ‘Elegancia y facilidad de aprendizaje entre lenguas romances.’, image: ‘Un estudiante francés comparando palabras similares entre francés y español (ej: Liberté / Libertad). Un diseño limpio con la Torre Eiffel de un lado y la Sagrada Familia del otro.’, video: ‘Un video corto explicando que, al hablar francés, ya tienes el 50% del camino hecho para aprender español.’, logo: ‘Logo con subtítulos en francés’, cta: ‘Inscrivez-vous maintenant ! / ¡Inscríbete ahora!’, chartData: [25, 35, 30, 10], }, { id: ‘anglais-francophones’, title: ‘Anglais pour Francophones’, target: ‘Para Francófonos’, icon: ‘💼’, concept: ‘Profesionalismo y negocios globales.’, image: ‘Un profesional en París trabajando de forma remota, con un mapa mundi de fondo. El texto dice: “Le monde parle anglais. Et vous ?”‘, video: ‘Un testimonio de un estudiante que consiguió un trabajo internacional gracias a Marlis Academy.’, logo: ‘Visible orgánicamente en el escritorio de la imagen’, cta: ‘Boostez votre carrière ici !’, chartData: [10, 20, 15, 55], }, { id: ‘french-english’, title: ‘French for English Speakers’, target: ‘Para Angloparlantes’, icon: ‘🎨’, concept: ‘El romance y el arte del lenguaje.’, image: ‘Una pareja cenando o alguien pintando en Montmartre. Una estética muy “chic” y aspiracional.’, video: ‘Una mini-clase de pronunciación de 15 segundos sobre sonidos difíciles como la “R” francesa, invitando a ver el curso completo.’, logo: ‘Diseño con un toque minimalista’, cta: ‘Speak the language of love. Start today!’, chartData: [35, 45, 15, 5], } ]; let currentChart = null; function initApp() { const navContainer = document.getElementById(‘campaign-nav’); campaigns.forEach(campaign => { const btn = document.createElement(‘button’); btn.className = ‘nav-btn w-full text-left p-5 border-b border-slate-200 hover:bg-slate-100 transition-colors flex items-center gap-4 group’; btn.dataset.id = campaign.id; btn.onclick = () => loadCampaign(campaign.id); btn.innerHTML = `
`; navContainer.appendChild(btn); }); } function loadCampaign(id) { const campaign = campaigns.find(c => c.id === id); if (!campaign) return; document.querySelectorAll(‘.nav-btn’).forEach(btn => { btn.classList.remove(‘active’); if (btn.dataset.id === id) btn.classList.add(‘active’); }); document.getElementById(’empty-state’).classList.add(‘hidden’); const displayContent = document.getElementById(‘content-display’); displayContent.classList.remove(‘fade-in’); void displayContent.offsetWidth; displayContent.classList.add(‘fade-in’); displayContent.classList.remove(‘hidden’); document.getElementById(‘display-tag’).textContent = campaign.target; document.getElementById(‘display-title’).textContent = campaign.title; document.getElementById(‘display-icon’).textContent = campaign.icon; document.getElementById(‘display-concept’).textContent = `”${campaign.concept}”`; document.getElementById(‘display-image’).textContent = campaign.image; document.getElementById(‘display-video’).textContent = campaign.video; document.getElementById(‘display-cta’).textContent = campaign.cta; document.getElementById(‘display-logo’).textContent = campaign.logo; updateChart(campaign); } function updateChart(campaign) { const ctx = document.getElementById(‘strategyChart’).getContext(‘2d’); if (currentChart) { currentChart.destroy(); } const chartConfig = { type: ‘polarArea’, data: { labels: [‘TikTok (Generación Z/Cortos)’, ‘Instagram (Visual/Aspiracional)’, ‘Facebook (Comunidad/Grupos)’, ‘LinkedIn (Profesional/B2B)’], datasets: [{ label: ‘Foco Estratégico (%)’, data: campaign.chartData, backgroundColor: [ ‘rgba(15, 23, 42, 0.7)’, ‘rgba(251, 191, 36, 0.7)’, ‘rgba(56, 189, 248, 0.7)’, ‘rgba(148, 163, 184, 0.7)’ ], borderWidth: 2, borderColor: ‘#ffffff’ }] }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { ticks: { display: false }, grid: { color: ‘rgba(0, 0, 0, 0.05)’ } } }, plugins: { legend: { position: ‘right’, labels: { font: { family: “‘Inter’, sans-serif”, size: 11 }, usePointStyle: true, padding: 20 } }, tooltip: { backgroundColor: ‘rgba(15, 23, 42, 0.9)’, titleFont: { family: “‘Inter’, sans-serif”, size: 13 }, bodyFont: { family: “‘Inter’, sans-serif”, size: 12 }, padding: 12, cornerRadius: 8, callbacks: { label: function(context) { let label = context.label || ”; if (label) { label = label.substring(0, 16) + (label.length > 16 ? ‘…’ : ”) + ‘: ‘; } if (context.parsed.r !== null) { label += context.parsed.r + ‘% del esfuerzo’; } return label; } } } } } }; if (window.innerWidth { if(currentChart){ const isMobile = window.innerWidth < 768; const currentPos = currentChart.options.plugins.legend.position; const newPos = isMobile ? ‘bottom’ : ‘right’; if(currentPos !== newPos){ currentChart.options.plugins.legend.position = newPos; currentChart.update(); } } }); document.addEventListener(‘DOMContentLoaded’, initApp);
Valoraciones
No hay valoraciones aún.