1<!DOCTYPE html> 2<html lang="pt-BR"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais."> 7 <meta name="keywords" content="Solução completa para rádio, streaming rádio, app personalizado, JMV Technology, radio online, transmissão ao vivo"> 8 <meta name="author" content="JMV Technology"> 9 <meta name="robots" content="index, follow"> 10 11 <!-- Open Graph / Facebook --> 12 <meta property="og:type" content="website"> 13 <meta property="og:url" content="/"> 14 <meta property="og:title" content="JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media"> 15 <meta property="og:description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais."> 16 <meta property="og:image" content="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp"> 17 18 <!-- Twitter --> 19 <meta property="twitter:card" content="summary_large_image"> 20 <meta property="twitter:url" content="/"> 21 <meta property="twitter:title" content="JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media"> 22 <meta property="twitter:description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais."> 23 <meta property="twitter:image" content="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp"> 24 25 <link rel="canonical" href="/"> 26 <title>JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media</title> 27 28 <!-- Preconnect for performance --> 29 <link rel="preconnect" href="https://fonts.googleapis.com"> 30 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 31 <link rel="preconnect" href="https://cdnjs.cloudflare.com"> 32 <link rel="preconnect" href="https://cdn.jsdelivr.net"> 33 34 <!-- Google Fonts - Poppins --> 35 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 36 37 <!-- Font Awesome --> 38 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"> 39 40 <!-- Swiper CSS --> 41 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> 42 43 <link rel="stylesheet" href="assets/build/css/main.css?id=533d5a074fc0916601580cbde23a337c"> 44 45 <!-- Structured Data --> 46
46<script type="application/ld+json"> 47 { 48 "@context": "https://schema.org", 49 "@type": "Organization", 50 "name": "JMV Technology", 51 "description": "Soluções Cross Media e de tecnologia para streaming, rádio e TV digital", 52 "url": "/", 53 "logo": "assets/images/logomarca-oficial-jmvstream-logo-identidade-visual-streaming-radio-online-tv-digital-webtv-app-personalizado-transmissao-ao-vivo-audio-video-tecnologia-jmv-technology.webp", 54 "sameAs": [ 55 "https://www.facebook.com/jmvtechnology", 56 "https://www.instagram.com/jmvtechnology", 57 "https://www.linkedin.com/company/jmvtechnology" 58 ] 59 } 60 </script>
60 61 62 <!-- Swiper JS --> 63
63<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
63 64
64<script defer src="assets/build/js/main.js?id=b463c846155476125526d5a4cedfdeff"></script>
64 65 <style> 66 /* ===== JMV News â Minimal Header ===== */ 67 .lp-header { 68 position: fixed; 69 inset: 0 0 auto 0; 70 height: 64px; 71 z-index: 9999; 72 background: rgba(255,255,255,.97); 73 border-bottom: 1px solid rgba(0,0,0,.07); 74 box-shadow: 0 1px 14px rgba(0,0,0,.06); 75 backdrop-filter: blur(8px); 76 -webkit-backdrop-filter: blur(8px); 77 transition: box-shadow .25s, background .25s; 78 } 79 .lp-header.is-scrolled { 80 box-shadow: 0 4px 24px rgba(0,0,0,.10); 81 background: #fff; 82 } 83 .lp-header-inner { 84 max-width: 1280px; 85 margin: 0 auto; 86 padding: 0 32px; 87 height: 100%; 88 display: flex; 89 align-items: center; 90 justify-content: space-between; 91 gap: 16px; 92 } 93 .lp-logo-link { 94 display: flex; 95 align-items: center; 96 flex-shrink: 0; 97 text-decoration: none; 98 outline-offset: 4px; 99 } 100 .lp-logo-link img { 101 height: 36px; 102 width: auto; 103 display: block; 104 transition: opacity .2s; 105 } 106 .lp-logo-link:hover img { opacity: .8; } 107 .lp-header-nav { 108 display: flex; 109 align-items: center; 110 gap: 10px; 111 flex-shrink: 0; 112 } 113 .lp-btn-secondary { 114 display: inline-block; 115 color: #374151; 116 font-family: 'Poppins', sans-serif; 117 font-size: 13.5px; 118 font-weight: 500; 119 text-decoration: none; 120 padding: 8px 18px; 121 border-radius: 8px; 122 border: 1.5px solid #e5e7eb; 123 white-space: nowrap; 124 transition: background .18s, border-color .18s, color .18s; 125 outline-offset: 3px; 126 } 127 .lp-btn-secondary:hover { 128 background: #f9fafb; 129 border-color: #d1d5db; 130 color: #111827; 131 } 132 .lp-btn-primary { 133 display: inline-flex; 134 align-items: center; 135 gap: 7px; 136 background: #b91c1c; 137 color: #fff; 138 font-family: 'Poppins', sans-serif; 139 font-size: 13.5px; 140 font-weight: 600; 141 text-decoration: none; 142 padding: 10px 22px; 143 border-radius: 8px; 144 white-space: nowrap; 145 letter-spacing: .015em; 146 box-shadow: 0 2px 10px rgba(185,28,28,.28); 147 transition: background .18s, transform .15s, box-shadow .18s; 148 outline-offset: 3px; 149 } 150 .lp-btn-primary:hover { 151 background: #991b1b; 152 transform: translateY(-1px); 153 box-shadow: 0 6px 20px rgba(185,28,28,.40); 154 color: #fff; 155 } 156 .lp-btn-primary:active { 157 transform: translateY(0); 158 box-shadow: 0 2px 8px rgba(185,28,28,.22); 159 } 160 .lp-icon-arrow { 161 width: 14px; height: 14px; 162 flex-shrink: 0; 163 transition: transform .18s; 164 } 165 .lp-btn-primary:hover .lp-icon-arrow { transform: translateX(3px); } 166 @media (max-width: 768px) { 167 .lp-header-inner { padding: 0 20px; } 168 .lp-btn-secondary { display: none; } 169 .lp-btn-primary { font-size: 13px; padding: 9px 18px; } 170 } 171 @media (max-width: 480px) { 172 .lp-header { height: 56px; } 173 .lp-logo-link img { height: 28px; } 174 .lp-header-inner { padding: 0 16px; } 175 .lp-btn-primary { font-size: 12.5px; padding: 8px 14px; gap: 5px; } 176 .lp-icon-arrow { width: 12px; height: 12px; } 177 } 178 /* Header dark override (logo is white) */ 179 .lp-header { 180 background: rgba(15,23,42,.98); 181 border-bottom: 1px solid rgba(255,255,255,.07); 182 box-shadow: 0 1px 14px rgba(0,0,0,.25); 183 } 184 .lp-header.is-scrolled { 185 background: #0f172a; 186 box-shadow: 0 4px 24px rgba(0,0,0,.45); 187 } 188 .lp-btn-secondary { 189 color: rgba(255,255,255,.72); 190 border-color: rgba(255,255,255,.18); 191 } 192 .lp-btn-secondary:hover { 193 background: rgba(255,255,255,.08); 194 border-color: rgba(255,255,255,.35); 195 color: #fff; 196 } 197 /* Footer layout */ 198 .lp-footer-wrap { 199 display: flex; 200 flex-direction: column; 201 align-items: center; 202 gap: 18px;
203 text-align: center; 204 } 205 @media (min-width: 640px) { 206 .lp-footer-wrap { 207 flex-direction: row; 208 justify-content: space-between; 209 text-align: left; 210 } 211 } 212 .lp-footer-nav { 213 display: flex; 214 flex-wrap: wrap; 215 align-items: center; 216 justify-content: center; 217 } 218 .lp-footer-nav a { 219 color: #9ca3af; 220 font-size: 13px; 221 text-decoration: none; 222 padding: 2px 12px; 223 border-right: 1px solid rgba(255,255,255,.1); 224 transition: color .18s; 225 white-space: nowrap; 226 } 227 .lp-footer-nav a:last-child { border-right: none; } 228 .lp-footer-nav a:hover { color: #fff; } 229 .lp-footer-copy { 230 font-size: 11.5px; 231 color: #6b7280; 232 white-space: nowrap; 233 } 234 </style> 235 </head> 236 <body class="text-gray-900 antialiased" style="font-family: 'Poppins', sans-serif;"> 237 <!-- Skip to main content link for accessibility --> 238 <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded-md z-50"> 239 Pular para o conteúdo principal 240 </a> 241 <!-- Header Navigation --> 242 <header class="lp-header" role="banner"> 243 <div class="lp-header-inner"> 244 <a href="https://jmvnews.com/pt-br/" class="lp-logo-link" aria-label="JMV News â Voltar ao portal"> 245 <img 246 src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 247 alt="JMV News â Portal de NotÃcias e Soluções Cross Media" 248 width="140" 249 height="40" 250 > 251 </a> 252 <nav class="lp-header-nav" role="navigation" aria-label="Ações do cabeçalho"> 253 <a href="#cockpit-video" class="lp-btn-secondary">Cockpit</a> 254 <a href="#planos-app-radio-jmv" class="lp-btn-secondary">Ver Planos</a> 255 <a href="#contato-jmv-news-ecossistema-crossmedia" class="lp-btn-primary"> 256 Fale Conosco
257 <svg class="lp-icon-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="2" y1="8" x2="14" y2="8"/><polyline points="10,4 14,8 10,12"/></svg> 258 </a> 259 </nav> 260 </div> 261 </header> 262
262<script>(function(){var h=document.querySelector('.lp-header');if(h)window.addEventListener('scroll',function(){h.classList.toggle('is-scrolled',window.scrollY>8)},{passive:true});})();</script>
262 263 264 <!-- Main content --> 265 <main class="pt-16" id="main-content" role="main"> 266 267<!-- Hero Section --> 268<section class="relative min-h-screen flex items-center overflow-hidden" role="banner" aria-labelledby="hero-title"> 269 <!-- Background Video --> 270 <video 271 class="absolute inset-0 w-full h-full object-cover" 272 autoplay 273 muted 274 loop 275 playsinline 276 aria-hidden="true" 277 > 278 <source src="assets/images/videos/video-background-jmv-news-site-streaming-radio-tv-webtv-aplicativo-digital-transmissao-ao-vivo-loop.mp4" type="video/mp4"> 279 <track kind="descriptions" src="" srclang="pt" label="VÃdeo de apresentação JMV News"> 280 </video> 281 282 <!-- Overlay --> 283 <div class="absolute inset-0 bg-gradient-to-r from-red-900/80 via-red-800/70 to-red-700/60" aria-hidden="true"></div> 284 285 <!-- Content Container --> 286 <div class="relative z-10 w-full"> 287 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 288 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-center relative min-h-[80vh] px-4 sm:px-0"> 289 290 <!-- Vertical White Line Between Columns --> 291 <div class="hidden lg:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-80 w-px bg-white/80 z-10" aria-hidden="true"></div> 292 293 <!-- Left Side - Smartphone Mockup --> 294 <div class="flex justify-center lg:justify-end order-2 lg:order-1 lg:-mr-24"> 295 <img 296 src="assets/images/mockup-app-para-radios-jmv-news-streaming-jmv-stream-jmv-technology-01.webp" 297 alt="Mockup do aplicativo Cross Media JMV News mostrando interface para rádios com player de música, sorteios e integração Spotify" 298 class="w-96 sm:w-[28rem] md:w-[28rem] h-auto drop-shadow-2xl transform transition-transform duration-300 brightness-110 contrast-125 saturate-110 lg:w-auto" 299 style="max-width: 800px;" 300 width="400" 301 height="800" 302 loading="eager" 303 > 304 </div> 305 306 <!-- Right Side - Content --> 307 <div class="text-white order-1 lg:order-2 text-center lg:text-left lg:pl-6 px-4 sm:px-6 lg:px-0"> 308 <!-- Main Title --> 309 <h1 id="hero-title" class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold leading-tight mb-4 sm:mb-6"> 310 <span class="block">Sua Rádio,</span> 311 <span class="block italic font-bold text-2xl sm:text-3xl md:text-4xl lg:text-5xl mt-2"> 312 Muito além do Spotify. 313 </span> 314 </h1> 315 316 <!-- Description --> 317 <p class="text-base sm:text-lg md:text-xl lg:text-xl leading-relaxed mb-6 sm:mb-8 text-gray-200 max-w-xl sm:max-w-2xl mx-auto lg:mx-0"> 318 Chega de só transmitir: com nosso ecossistema Cross Media completo, sua rádio finalmente fideliza ouvintes e conquista faturamento de verdade no digital. 319 </p> 320 321 <!-- CTA Button --> 322 <div class="flex justify-center lg:justify-start"> 323 <a href="#planos-app-radio-jmv" 324 class="inline-flex items-center px-6 sm:px-8 py-3 sm:py-4 bg-white text-red-800 font-semibold text-base sm:text-lg rounded-full hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl hover:shadow-2xl group hover-reflect" 325 aria-label="Conheça os planos disponÃveis" 326 title="Conheça os planos disponÃveis"> 327 <span class="text-sm sm:text-base lg:text-lg">Conheça os planos</span> 328 <i class="fas fa-arrow-right ml-2 sm:ml-3 text-sm sm:text-base group-hover:translate-x-1 transition-transform duration-300" aria-hidden="true"></i> 329 </a> 330 </div> 331 </div> 332 </div> 333 </div> 334 </div> 335 336 <!-- Scroll Indicator --> 337 <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce" aria-label="Role para baixo para ver mais conteúdo"> 338 <i class="fas fa-chevron-down text-2xl opacity-70" aria-hidden="true"></i>
339 <span class="sr-only">Role para baixo</span> 340 </div> 341</section><!-- Cockpit da Rádio - Seção Principal --> 342<section id="cockpit-da-radio" class="relative overflow-hidden py-24 px-4" aria-labelledby="cockpit-title"> 343 344 <!-- Background Video --> 345 <video 346 class="absolute inset-0 w-full h-full object-cover bg-video-dim" 347 autoplay 348 muted 349 loop 350 playsinline 351 aria-hidden="true" 352 > 353 <source src="assets/images/videos/jmv-news-jmv-technology-cockpit-da-radio-cross-media-aplicativo-da-radio-plataforma-digital-jmv-news-background-oficial.mp4" type="video/mp4"> 354 <track kind="descriptions" src="" srclang="pt" label="VÃdeo de apresentação do Cockpit da Rádio JMV News"> 355 </video> 356 <div class="cockpit-bg-overlay" aria-hidden="true"></div> 357 358 <div class="max-w-7xl mx-auto relative z-10"> 359 360 <div class="text-center max-w-4xl mx-auto mb-10"> 361 <p class="text-sm text-indigo-300 uppercase tracking-wider mb-2">Cockpit da Rádio</p> 362 <h2 id="cockpit-title" class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-white">Pilote sua Rádio</h2> 363 <p class="text-gray-300 mt-4 mb-6 text-sm md:text-base leading-relaxed"> 364 Conheça o <strong>Cockpit da Rádio</strong> â o CRM completo que finalmente <strong>profissionaliza</strong> o digital da sua emissora. 365Gerencie participações, denúncias, pedidos de música e interações em um só lugar. Aprove, reprove e publique com um fluxo <strong>organizado e integrado ao software de ao vivo da rádio.</strong> 366 </p> 367 </div> 368 369 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"> 370 <div class="flex flex-col"> 371 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> 372 373 <article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect"> 374 <div class="flex items-start gap-4"> 375 <svg class="w-8 h-8 text-indigo-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 2v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22v-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.93 4.93l4.24 4.24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.83 14.83l4.24 4.24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 376 <div> 377 <h3 class="text-lg font-semibold text-white mb-2">Centralização & Gestão</h3> 378 <p class="text-gray-300 text-sm">Todas as interações do aplicativo, site e WhatsApp reunidas em um só lugar. Modere, classifique, aprove e publique sem perder nada â nem tempo, nem audiência.</p> 379 </div> 380 </div> 381 </article> 382 383 <article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect"> 384 <div class="flex items-start gap-4"> 385 <svg class="w-8 h-8 text-rose-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 3v18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 386 <div> 387 <h3 class="text-lg font-semibold text-white mb-2">Gestão Facilitada</h3> 388 <p class="text-gray-300 text-sm">Kanban visual que simplifica tudo: gestão rápida, aprovação fácil, controle total do que entra no ar e painéis personalizados para locutor, marketing, jornalismo e direção. Operação leve, clara e sem fricção.</p> 389 </div> 390 </div> 391 </article> 392 393 <article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect"> 394 <div class="flex items-start gap-4"> 395 <svg class="w-8 h-8 text-yellow-400 mt-1 flex-shrink-0" viewB
395ox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 12h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 3v18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 396 <div> 397 <h3 class="text-lg font-semibold text-white mb-2">Transcrição & Normalização</h3> 398 <p class="text-gray-300 text-sm">Transcrição instantânea e normalização automática do áudio: veja o conteúdo antes de ouvir e receba tudo pronto para entrar no ar com qualidade profissional.</p> 399 </div> 400 </div> 401 </article> 402 403 <article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect"> 404 <div class="flex items-start gap-4"> 405 <svg class="w-8 h-8 text-sky-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 12h3l3 8 4-16 3 8 3-8 3 16" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 406 <div> 407 <h3 class="text-lg font-semibold text-white mb-2">Relatórios & Métricas</h3> 408 <p class="text-gray-300 text-sm">Métricas reais da sua programação: engajamento, interações, sorteios, participação por programa e muito mais â dados que finalmente mostram o valor do seu digital.</p> 409 </div> 410 </div> 411 </article> 412 </div> 413 414 <div class="mt-8 flex gap-4 items-center"> 415 <a href="#planos-app-radio-jmv" class="btn-primary hover-reflect hover-reflect--fast inline-flex items-center font-bold py-3 px-8 rounded-full shadow-lg transition">Conhecer Planos</a> 416 <a href="#cockpit-video" class="inline-flex items-center text-white/90 hover:text-white font-medium py-2 px-4 rounded-md transition smooth-scroll" title="Ver apresentação do Cockpit">Assistir à Apresentação em VÃdeo <i class="fas fa-play ml-2 text-sm"></i></a> 417 </div> 418 </div> 419 420 <div class="relative z-10 flex items-center justify-center"> 421 <div class="w-full max-w-4xl rounded-3xl overflow-hidden shadow-2xl hover-reflect"> 422 <img src="assets/images/monitor-kanban-cockpit-radio-jmv-news-dashboard-digital-studio-radio-profissional-jmv-technology.webp" alt="Mockup do Cockpit da Rádio JMV â Kanban visual, caixa de entrada unificada e métricas em tempo real" class="w-full h-auto object-cover"> 423 </div> 424 </div> 425 </div> 426 </div> 427 428 <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden"> 429 <div class="absolute -top-24 -left-32 w-96 h-96 bg-rose-600/10 rounded-full blur-3xl"></div> 430 <div class="absolute -bottom-48 -right-40 w-[30rem] h-[30rem] bg-blue-600/8 rounded-full blur-3xl"></div> 431 </div> 432</section> 433 434 435 436 437<!-- Cockpit Video Presentation - Modern Minimalistic --> 438<section id="cockpit-video" class="relative px-4 bg-white/0 overflow-visible pt-24 -pb-48 bg-black"> 439 <!-- Modern Gradient Animated Background --> 440 <div class="gradient-background pointer-events-none absolute inset-0 w-full h-full z-0"> 441 <div class="gradient-sphere sphere-1"></div> 442 <div class="gradient-sphere sphere-2"></div> 443 <div class="gradient-sphere sphere-3"></div> 444 <div class="glow"></div> 445 <div class="grid-overlay"></div> 446 <div class="noise-overlay"></div> 447 <div class="particles-container" id="particles-container"></div> 448 </div> 449 <div class="max-w-6xl mx-auto relative z-10"> 450 <div class="flex flex-col items-center justify-center"> 451 <h3 class="text-2xl md:text-3xl lg:text-5xl font-bold text-white text-center pt-12">Apresentação do Cockpit</h3> 452 <p class="text-white text-center mb-10 max-w-5xl mx-auto text-sm md:text-base pt-8">Conheça em detalhes as funcionalidades que irão profissionalizar a opseração digital da sua rádio â transcrição, normalização, gerenciamento de participações e integração com ferramentas já utilizadas pela sua equipe.</p> 453 454 <!-- Video card (player) floating over the panels --> 455 <div class="video-card-wrapper"> 456 <div class="video-card reveal-scale relative z-10 w-full max-w-5xl mt-12 aspect-video rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-black hover:scale-105 hover:rotate-1 transition-transform duration-300"> 457 <iframe allowfullscreen allow="fullscreen;" frameBorder="0" class="w-full h-full" src="https://player.jmvstream.com/RVctDBRpU1YWCXtK5HQurbLYEuBFGx/va571h833a32s61" aria-label="Apresentação do Cockpit da Rádio"></iframe> 458 </div> 459 </div> 460 <a href="#plano-crossmedia-titulo" class="video-cta inline-flex items-center md:mb-16 lg:mb-16 mb-8 bg-red-500 hover:bg-red-600 text-white font-bold text-lg md:text-xl py-4 px-8 rounded-full shadow-lg op
460acity-0 transform translate-y-3 transition-all duration-500 pointer-events-none hover-reflect" aria-hidden="true">Conhecer Planos</a> 461 </div> 462 </div> 463</section> 464 465 466 467<style> 468 @keyframes pulse-slow { 469 0%, 100% { opacity: 0.2; transform: scale(1); } 470 50% { opacity: 0.3; transform: scale(1.1); } 471 } 472 .animate-pulse-slow { 473 animation: pulse-slow 8s infinite ease-in-out; 474 } 475 .animate-pulse-subtle { 476 animation: pulse 3s infinite ease-in-out; 477 } 478 @keyframes float { 479 0%, 100% { transform: translateY(0) rotate(6deg); } 480 50% { transform: translateY(-10px) rotate(6deg); } 481 } 482 .animate-float { 483 animation: float 6s ease-in-out infinite; 484 } 485 @keyframes tilt { 486 0%, 50%, 100% { transform: rotate(0deg); } 487 25% { transform: rotate(0.5deg); } 488 75% { transform: rotate(-0.5deg); } 489 } 490 .animate-tilt { 491 animation: tilt 10s infinite linear; 492 } 493 494 /* New Background Effect CSS */ 495 @font-face { 496 font-family: "Geist"; 497 src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype"); 498 } 499 500 :root { 501 --size: 20px; 502 } 503 504 .ia-bg-effect { 505 background: conic-gradient(from 180deg at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn); 506 width: 100%; 507 height: 100%; 508 mask: 509 radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size), 510 url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px; 511 mask-composite: intersect; 512 animation: flicker 20s infinite linear; 513 } 514 515 @keyframes flicker { 516 to { 517 mask-position: 50% 50%, 0 50%; 518 } 519 } 520 521 #chat-sequence.start-chat .chat-message { 522 opacity: 1; 523 transform: translateY(0); 524 } 525</style> 526
527<script> 528document.addEventListener('DOMContentLoaded', () => { 529 const observer = new IntersectionObserver((entries) => { 530 entries.forEach(entry => { 531 if (entry.isIntersecting) { 532 entry.target.classList.add('start-chat'); 533 observer.unobserve(entry.target); 534 } 535 }); 536 }, { threshold: 0.5 }); 537 538 const chatContainer = document.getElementById('chat-sequence'); 539 if(chatContainer) observer.observe(chatContainer); 540}); 541</script>
541 542<section class="relative py-24 lg:py-32 overflow-hidden" id="gamificacao" style="background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);"> 543 <!-- Retro TV/Game Background Effects --> 544 <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden"> 545 <div class="noise"></div> 546 <div class="noise noise-moving"></div> 547 548 <!-- Vignette Overlay --> 549 <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.6)_100%)] z-[5]"></div> 550 551 <!-- Parallax Stars Background --> 552 <div id="stars"></div> 553 <div id="stars2"></div> 554 <div id="stars3"></div> 555 556 <!-- HUD Elements --> 557 <div class="absolute top-8 left-8 font-['Press_Start_2P'] text-white/80 text-xs md:text-sm animate-pulse z-10 tracking-widest"> 558 <span class="text-green-500">â¶</span> PLAY 559 </div> 560 <div class="absolute top-8 right-8 font-['Press_Start_2P'] text-white/80 text-xs md:text-sm z-10 tracking-widest"> 561 REC <span class="text-red-500 animate-pulse">â</span> 562 </div> 563 </div> 564 565 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 566 <!-- Header --> 567 <div class="text-center mb-16 lg:mb-24"> 568 <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8"> 569 <i class="fas fa-trophy text-yellow-400 text-xs"></i> 570 <span class="text-gray-300 text-xs font-bold tracking-wider uppercase font-sans">Engajamento & Fidelidade</span> 571 </div> 572 573 <h2 class="glitch-title text-4xl md:text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight font-['Press_Start_2P'] leading-snug" data-text="GAMIFICAÃÃO"> 574 GAMIFICAÃÃO 575 </h2> 576 577 <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed font-light font-sans"> 578 Transforme ouvintes em fãs leais. Cada interação vale <span class="text-green-400 font-bold font-['Press_Start_2P'] text-xs mx-1">XP</span> que pode ser trocado por prêmios reais. 579 </p> 580 </div> 581 582 <!-- Main Content Grid --> 583 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> 584 585 <!-- Left: The "Game" Interface Card --> 586 <div class="relative group perspective-1000"> 587 <div class="absolute -inset-1 bg-gradient-to-r from-green-500 via-blue-500 to-purple-600 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-1000 animate-tilt"></div> 588 589 <div class="relative bg-gray-900/90 border border-white/10 rounded-3xl p-6 md:p-8 backdrop-blur-xl overflow-hidden"> 590 <!-- User Profile Mockup --> 591 <div class="flex items-center gap-4 mb-8 border-b border-white/10 pb-6"> 592 <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 p-1 shadow-[0_0_15px_rgba(168,85,247,0.5)]"> 593 <img src="https://i.pravatar.cc/150?img=11" alt="Avatar" class="w-full h-full rounded-full object-cover border-2 border-black"> 594 </div> 595 <div class="flex-1"> 596 <div class="flex justify-between items-center mb-1"> 597 <h3 id="user-name" class="text-white font-bold font-sans text-lg">Carlos Henrique</h3> 598 <span class="text-yellow-400 font-['Press_Start_2P'] text-[10px]">LVL 12</span> 599 </div> 600 <!-- XP Bar --> 601 <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden border border-white/5 relative"> 602 <div id="xp-bar" class="absolute top-0 left-0 h-full bg-gradient-to-r from-green-400 to-emerald-600 w-0 shadow-[0_0_10px_rgba(74,222,128,0.5)] transition-all duration-3000 ease-out"></div> 603 </div> 604 <div class="flex justify-between mt-1">
605 <span class="text-xs text-gray-500 font-sans">Próximo nÃvel</span> 606 <span id="xp-counter" class="text-xs text-green-400 font-['Press_Start_2P'] text-[8px]">0 / 3000 XP</span> 607 </div> 608 </div> 609 </div> 610 611 <!-- Actions List --> 612 <div class="space-y-4 font-sans"> 613 <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-green-500/30 transition-colors group/item"> 614 <div class="flex items-center gap-3"> 615 <div class="w-8 h-8 rounded bg-green-500/20 flex items-center justify-center text-green-400"> 616 <i class="fas fa-music"></i> 617 </div> 618 <span class="text-gray-300 text-sm">Tempo de escuta: 1 hora</span> 619 </div> 620 <span class="text-green-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+50 XP</span> 621 </div> 622 623 <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-blue-500/30 transition-colors group/item"> 624 <div class="flex items-center gap-3"> 625 <div class="w-8 h-8 rounded bg-blue-500/20 flex items-center justify-center text-blue-400"> 626 <i class="fas fa-share-alt"></i> 627 </div> 628 <span class="text-gray-300 text-sm">Compartilhar app</span> 629 </div> 630 <span class="text-blue-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+100 XP</span> 631 </div> 632 633 <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-purple-500/30 transition-colors group/item"> 634 <div class="flex items-center gap-3"> 635 <div class="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center text-purple-400"> 636 <i class="fas fa-comment-alt"></i> 637 </div> 638 <span class="text-gray-300 text-sm">Enviar mensagem de áudio</span> 639 </div> 640 <span class="text-purple-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+30 XP</span> 641 </div> 642 643 <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors group/item"> 644 <div class="flex items-center gap-3"> 645 <div class="w-8 h-8 rounded bg-orange-500/20 flex items-center justify-center text-orange-400"> 646 <i class="fas fa-fire"></i> 647 </div> 648 <span class="text-gray-300 text-sm">Ouvir rádio por 5 dias seguidos</span> 649 </div> 650 <span class="text-orange-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+500 XP</span> 651 </div> 652 </div> 653 654 <!-- Reward Unlock Notification --> 655 <div class="mt-6 p-4 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/20 rounded-xl flex items-center justify-between animate-bounce-subtle"> 656 <div class="flex items-center gap-4"> 657 <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center text-yellow-400 flex-shrink-0"> 658 <i class="fas fa-gift text-lg"></i> 659 </div> 660 <div> 661 <p class="text-yellow-200 text-xs font-bold uppercase mb-1">PRÃMIO DESBLOQUEADO!</p> 662 <p class="text-white text-sm">Par de Ingressos - Cinema VIP</p> 663 </div> 664 </div> 665 <button class="px-4 py-2 bg-yellow-500 text-black font-bold text-xs rounded hover:bg-yellow-400 transition-colors font-['Press_Start_2P']"> 666 RESGATAR 667 </button> 668 </div> 669 </div> 670 </div> 671 672 <!-- Right: Features Description --> 673 <div class="space-y-8 relative z-10"> 674 <div class="group"> 675 <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
676 <span class="w-2 h-8 bg-green-500 rounded-full shadow-[0_0_10px_#22c55e]"></span> 677 Pontuação Automática 678 </h3> 679 <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-green-500/50 transition-colors"> 680 O sistema rastreia automaticamente o tempo de escuta, compartilhamentos e interações. O ouvinte acumula pontos sem esforço, apenas curtindo sua rádio. 681 </p> 682 </div> 683 684 <div class="group"> 685 <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3"> 686 <span class="w-2 h-8 bg-blue-500 rounded-full shadow-[0_0_10px_#3b82f6]"></span> 687 Loja de Prêmios 688 </h3> 689 <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-blue-500/50 transition-colors"> 690 Crie um catálogo de recompensas personalizado. De brindes exclusivos da rádio a ingressos para shows e vouchers de parceiros comerciais. 691 </p> 692 </div> 693 694 <div class="group"> 695 <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3"> 696 <span class="w-2 h-8 bg-purple-500 rounded-full shadow-[0_0_10px_#a855f7]"></span> 697 Ranking & Competição 698 </h3> 699 <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-purple-500/50 transition-colors"> 700 Estimule a competição saudável com leaderboards semanais e mensais. Reconheça os "Super Fãs" da sua emissora ao vivo. 701 </p> 702 </div> 703 704 <div class="pt-8"> 705 <a href="#contato-jmv-news-ecossistema-crossmedia" class="inline-flex items-center gap-3 px-8 py-4 bg-white text-black font-bold rounded-sm hover:bg-green-400 transition-all duration-300 font-['Press_Start_2P'] text-xs shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1"> 706 CONHECER PLANOS 707 <i class="fas fa-chevron-right"></i> 708 </a> 709 </div> 710 </div> 711 </div> 712 </div> 713</section> 714
715<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
vendor: 2 bytes, line 715
715
716<script> 717document.addEventListener('DOMContentLoaded', function() { 718 const section = document.getElementById('gamificacao'); 719 const xpBar = document.getElementById('xp-bar'); 720 const xpCounter = document.getElementById('xp-counter'); 721 722 const observer = new IntersectionObserver((entries) => { 723 entries.forEach(entry => { 724 if (entry.isIntersecting) { 725 animateXP(); 726 observer.unobserve(section); 727 } 728 }); 729 }, { threshold: 0.5 }); 730 731 observer.observe(section); 732 733 function animateXP() { 734 let currentXP = 0; 735 const targetXP = 3000; 736 const duration = 5000; // 5 seconds for slower animation 737 const startTime = Date.now(); 738 739 function updateXP() { 740 const elapsed = Date.now() - startTime; 741 const progress = Math.min(elapsed / duration, 1); 742 currentXP = Math.floor(progress * targetXP); 743 744 const percentage = (currentXP / targetXP) * 100; 745 xpBar.style.width = percentage + '%'; 746 xpCounter.textContent = currentXP + ' / 3000 XP'; 747 748 if (progress < 1) { 749 requestAnimationFrame(updateXP); 750 } else { 751 // Trigger confetti when reaching 3000 XP 752 confetti({ 753 particleCount: 150, 754 spread: 70, 755 origin: { y: 0.6 } 756 }); 757 // Update name to Superfã with fade effect 758 const nameEl = document.getElementById('user-name'); 759 nameEl.style.opacity = '0'; 760 nameEl.textContent = 'Carlos Henrique ð'; 761 setTimeout(() => nameEl.style.opacity = '1', 100); 762 } 763 } 764 765 updateXP(); 766 } 767 768 // Generate Space Background Stars 769 function generateSpaceBackground() { 770 const generateBoxShadow = (n) => { 771 let value = ''; 772 for (let i = 0; i < n; i++) { 773 value += `${Math.floor(Math.random() * 2000)}px ${Math.floor(Math.random() * 2000)}px #FFF`; 774 if (i < n - 1) value += ', '; 775 } 776 return value; 777 }; 778 779 const shadowsSmall = generateBoxShadow(700); 780 const shadowsMedium = generateBoxShadow(200); 781 const shadowsBig = generateBoxShadow(100); 782 783 const style = document.createElement('style'); 784 style.innerHTML = ` 785 #stars { box-shadow: ${shadowsSmall}; } 786 #stars:after { box-shadow: ${shadowsSmall}; } 787 #stars2 { box-shadow: ${shadowsMedium}; } 788 #stars2:after { box-shadow: ${shadowsMedium}; } 789 #stars3 { box-shadow: ${shadowsBig}; } 790 #stars3:after { box-shadow: ${shadowsBig}; } 791 `; 792 document.head.appendChild(style); 793 } 794 795 generateSpaceBackground(); 796}); 797</script>
797 798 799<style> 800 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); 801 802 /* Noise Effect */ 803 .noise { 804 position: absolute; 805 top: 0; 806 left: 0; 807 width: 100%; 808 height: 100%; 809 overflow: hidden; 810 z-index: 1; 811 opacity: 0.15; 812 pointer-events: none; 813 mix-blend-mode: screen; 814 } 815 816 .noise:before { 817 content: ''; 818 position: absolute; 819 top: 0; 820 left: 0; 821 right: 0; 822 bottom: 0; 823 background: url('https://ice-creme.de/images/background-noise.png'); 824 pointer-events: none; 825 } 826 827 .noise-moving { 828 opacity: 0.2; 829 z-index: 2; 830 mix-blend-mode: screen; 831 } 832 833 .noise-moving:before { 834 will-change: background-position; 835 animation: noise 1s infinite alternate; 836 } 837 838 /* Glitch Text Animation */ 839 .glitch-title { 840 position: relative; 841 color: white; 842 } 843 844 .glitch-title::before, 845 .glitch-title::after { 846 content: attr(data-text); 847 position: absolute; 848 top: 0; 849 left: 0; 850 width: 100%; 851 height: 100%; 852 background: transparent; 853 } 854 855 .glitch-title::before { 856 left: 2px; 857 text-shadow: -1px 0 #ff00c1; 858 clip: rect(44px, 450px, 56px, 0); 859 animation: glitch-anim 5s infinite linear alternate-reverse; 860 } 861 862 .glitch-title::after { 863 left: -2px; 864 text-shadow: -1px 0 #00fff9; 865 clip: rect(44px, 450px, 56px, 0); 866 animation: glitch-anim2 5s infinite linear alternate-reverse; 867 } 868 869 /* User Name Fade Transition */ 870 #user-name { 871 transition: opacity 1s ease-in-out; 872 } 873 874 /* Parallax Stars Background */ 875 #stars, #stars2, #stars3 { 876 position: absolute; 877 top: 0; 878 left: 0; 879 right: 0; 880 bottom: 0; 881 overflow: hidden; 882 z-index: 0; 883 } 884 885 #stars { 886 width: 1px; 887 height: 1px; 888 background: transparent; 889 animation: animStar 50s linear infinite; 890 } 891 892 #stars:after { 893 content: " "; 894 position: absolute; 895 top: 2000px; 896 width: 1px; 897 height: 1px; 898 background: transparent; 899 } 900 901 #stars2 { 902 width: 2px; 903 height: 2px; 904 background: transparent; 905 animation: animStar 100s linear infinite; 906 } 907 908 #stars2:after { 909 content: " "; 910 position: absolute; 911 top: 2000px; 912 width: 2px; 913 height: 2px; 914 background: transparent; 915 } 916 917 #stars3 { 918 width: 3px; 919 height: 3px; 920 background: transparent; 921 animation: animStar 150s linear infinite; 922 } 923 924 #stars3:after { 925 content: " "; 926 position: absolute; 927 top: 2000px; 928 width: 3px; 929 height: 3px; 930 background: transparent; 931 } 932 933 @keyframes animStar { 934 from { transform: translateY(0px); } 935 to { transform: translateY(-2000px); } 936 } 937 @keyframes noise { 938 0%, 100% {background-position: 0 0;} 939 10% {background-position: -5% -10%;} 940 20% {background-position: -15% 5%;} 941 30% {background-position: 7% -25%;} 942 40% {background-position: 20% 25%;} 943 50% {background-position: -25% 10%;} 944 60% {background-position: 15% 5%;} 945 70% {background-position: 0 15%;} 946 80% {background-position: 25% 35%;} 947 90% {background-position: -10% 10%;} 948 } 949 950 @keyframes opacity { 951 0% {opacity: 0.3;} 952 20% {opacity: 0.1;} 953 35% {opacity: 0.2;} 954 50% {opacity: 0.4;} 955 60% {opacity: 0.2;} 956 80% {opacity: 0.3;} 957 100% {opacity: 0.3;} 958 } 959 960 @keyframes glitch-anim { 961 0% { clip: rect(30px, 9999px, 10px, 0); } 962 5% { clip: rect(80px, 9999px, 90px, 0); } 963 10% { clip: rect(10px, 9999px, 50px, 0); } 964 15% { clip: rect(60px, 9999px, 20px, 0); } 965 20% { clip: rect(20px, 9999px, 70px, 0); } 966 25% { clip: rect(90px, 9999px, 10px, 0); } 967 30% { clip: rect(10px, 9999px, 50px, 0); } 968 35% { clip: rect(50px, 9999px, 20px, 0); } 969 40% { clip: rect(20px, 9999px, 60px, 0); } 970 45% { clip: rect(70px, 9999px, 30px, 0); } 971 50% { clip: rect(30px, 9999px, 80px, 0); } 972 55% { clip: rect(80px, 9999px, 10px, 0); } 973 60% { clip: rect(10px, 9999px, 40px, 0); }
974 65% { clip: rect(40px, 9999px, 90px, 0); } 975 70% { clip: rect(90px, 9999px, 20px, 0); } 976 75% { clip: rect(20px, 9999px, 60px, 0); } 977 80% { clip: rect(60px, 9999px, 10px, 0); } 978 85% { clip: rect(10px, 9999px, 50px, 0); } 979 90% { clip: rect(50px, 9999px, 30px, 0); } 980 95% { clip: rect(30px, 9999px, 70px, 0); } 981 100% { clip: rect(70px, 9999px, 40px, 0); } 982 } 983 984 @keyframes glitch-anim2 { 985 0% { clip: rect(60px, 9999px, 20px, 0); } 986 5% { clip: rect(10px, 9999px, 50px, 0); } 987 10% { clip: rect(80px, 9999px, 10px, 0); } 988 15% { clip: rect(30px, 9999px, 70px, 0); } 989 20% { clip: rect(50px, 9999px, 30px, 0); } 990 25% { clip: rect(20px, 9999px, 60px, 0); } 991 30% { clip: rect(70px, 9999px, 40px, 0); } 992 35% { clip: rect(40px, 9999px, 90px, 0); } 993 40% { clip: rect(90px, 9999px, 20px, 0); } 994 45% { clip: rect(10px, 9999px, 50px, 0); } 995 50% { clip: rect(60px, 9999px, 10px, 0); } 996 55% { clip: rect(30px, 9999px, 80px, 0); } 997 60% { clip: rect(80px, 9999px, 20px, 0); } 998 65% { clip: rect(20px, 9999px, 60px, 0); } 999 70% { clip: rect(50px, 9999px, 30px, 0); } 1000 75% { clip: rect(10px, 9999px, 40px, 0); } 1001 80% { clip: rect(40px, 9999px, 90px, 0); } 1002 85% { clip: rect(90px, 9999px, 10px, 0); } 1003 90% { clip: rect(30px, 9999px, 70px, 0); } 1004 95% { clip: rect(70px, 9999px, 20px, 0); } 1005 100% { clip: rect(20px, 9999px, 50px, 0); } 1006 } 1007</style> 1008<section class="bg-gradient-to-b from-[#1a1a2e] to-[#16213e] py-12 px-4" aria-labelledby="recursos-title"> 1009 <div class="max-w-4xl mx-auto text-center"> 1010 <h2 id="recursos-title" class="text-3xl md:text-4xl font-bold text-white mb-2"> 1011 Um <span class="text-red-500">Ecossistema</span> Completo 1012 </h2> 1013 <p class="text-gray-300 mb-10 text-sm md:text-base"> 1014 Tecnologia avançada para conectar sua rádio diretamente com os ouvintes através de um aplicativo móvel completo e interativo. 1015 </p> 1016 1017 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" role="list" aria-label="Recursos do aplicativo"> 1018 <!-- Card 1 --> 1019 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1020 <i class="fas fa-music text-4xl text-white mb-4" aria-hidden="true"></i> 1021 <h3 class="text-lg font-semibold text-white mb-2">Spotify da Rádio</h3> 1022 <p class="text-gray-300 text-sm">Mais de 150 mil músicas para o ouvinte ouvir quando quiser. Sistema de busca inteligente e playlists personalizadas para sua programação.</p> 1023 </article> 1024 1025 <!-- Card 2 --> 1026 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1027 <i class="fas fa-gift text-4xl text-white mb-4" aria-hidden="true"></i> 1028 <h3 class="text-lg font-semibold text-white mb-2">Sorteios Automatizados</h3> 1029 <p class="text-gray-300 text-sm">Login facilitado com conta Google ou Apple. Participação em apenas 2 cliques. Sorteios transparentes e automáticos que aumentam o engajamento.</p> 1030 </article> 1031 1032 <!-- Card 3 --> 1033 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1034 <i class="fas fa-star text-4xl text-white mb-4" aria-hidden="true"></i> 1035 <h3 class="text-lg font-semibold text-white mb-2">Top 10 Exclusivo</h3> 1036 <p class="text-gray-300 text-sm">Motive sua audiência exibindo um ranking sempre atualizado das músicas mais tocadas na sua emissora.</p> 1037 </article> 1038 1039 <!-- Card 4 --> 1040 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1041 <i class="fas fa-broadcast-tower text-4xl text-white mb-4" aria-hidden="true"></i> 1042 <h3 class="text-lg font-semibold text-white mb-2">Player ao Vivo</h3> 1043 <p class="text-gray-300 text-sm">Transmissão ao vivo do produto 24h por dia, com controle de áudio superior e compatibilidade multi-plataforma.</p> 1044 </article> 1045 1046 <!-- Card 5 --> 1047 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1048 <i class="fas fa-robot text-4xl text-white mb-4" aria-hidden="true"></i> 1049 <h3 class="text-lg font-semibold text-white mb-2">NotÃcias Automáticas com I.A</h3> 1050 <p class="text-gray-300 text-sm">Conteúdo sempre atualizado e relevante para manter seus ouvintes informados e engajados.</p> 1051 </article> 1052 1053 <!-- Card 6 --> 1054 <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem"> 1055 <i class="fas fa-bell text-4xl text-white mb-4" aria-hidden="true"></i> 1056 <h3 class="text-lg font-semibold text-white mb-2">Push Notifications</h3> 1057 <p class="text-gray-300 text-sm">
1057Envie avisos instantâneos para os ouvintes sobre promoções, sorteios, notÃcias e novidades da programação, mantendo todos sempre informados e engajados.</p> 1058 </article> 1059 </div> 1060 1061 <div class="flex flex-col sm:flex-row justify-center gap-4" role="group" aria-label="Ações principais"> 1062 <a href="#contato-jmv-news-ecossistema-crossmedia" 1063 class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 text-base hover-reflect" 1064 title="Entre em contato para saber mais sobre nossos serviços" 1065 aria-label="Entre em contato conosco"> 1066 Entre em Contato 1067 </a> 1068 </div> 1069 </div> 1070</section><section class="bg-gradient-to-r from-[#8e2de2] via-[#a4508b] to-[#c471f5] py-12 px-4" aria-labelledby="porque-escolher-title"> 1071 <div class="max-w-6xl mx-auto text-center"> 1072 <h2 id="porque-escolher-title" class="text-3xl md:text-4xl font-bold text-white mb-2"> 1073 Por que escolher nossa solução? 1074 </h2> 1075 <p class="text-gray-200 mb-10 text-sm md:text-base max-w-2xl mx-auto"> 1076Nossa solução vai além do streaming tradicional. Criamos um ecossistema completo que valoriza sua marca, aumenta sua audiência e abre novas oportunidades de monetização. 1077 1078 </p> 1079 1080 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-10" role="list" aria-label="Vantagens da nossa solução"> 1081 <!-- Card 1 --> 1082 <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem"> 1083 <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true"> 1084 <i class="fas fa-mobile-alt text-3xl text-[#a4508b]"></i> 1085 </div> 1086 <h3 class="text-lg font-semibold text-white mb-2">App Exclusivo</h3> 1087 <p class="text-gray-200 text-sm">Chega de depender de Spotify, WhatsApp ou redes sociais: sua rádio ganha um aplicativo próprio com a identidade visual da sua marca!</p> 1088 </article> 1089 1090 <!-- Card 2 --> 1091 <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem"> 1092 <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true"> 1093 <i class="fas fa-search text-3xl text-[#a4508b]"></i> 1094 </div> 1095 <h3 class="text-lg font-semibold text-white mb-2">SEO Otimizado</h3> 1096 <p class="text-gray-200 text-sm">Seu app publicado na Google Play e App Store e seu site otimizado para o Google, garantindo que sua rádio apareça no topo das pesquisas.</p> 1097 </article> 1098 1099 <!-- Card 3 --> 1100 <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem"> 1101 <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true"> 1102 <i class="fas fa-robot text-3xl text-[#a4508b]"></i> 1103 </div> 1104 <h3 class="text-lg font-semibold text-white mb-2">NotÃcias com I.A</h3> 1105 <p class="text-gray-200 text-sm">Conteúdo de notÃcias gerado por I.A. que mantém sua audiência informada, engajada e conectada ao seu app o tempo todo.</p> 1106 </article> 1107 1108 <!-- Card 4 --> 1109 <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem"> 1110 <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true"> 1111 <i class="fas fa-layer-group text-3xl text-[#a4508b]"></i> 1112 </div> 1113 <h3 class="text-lg font-semibold text-white mb-2">Plataforma Completa</h3> 1114 <p class="text-gray-200 text-sm">Unifique streaming de áudio, vÃdeo, podcast, músicas, notÃcias e interação em uma única plataforma. Experiência completa que mantém seus ouvintes sempre conectados!</p> 1115 </article> 1116 </div> 1117 1118 <div class="flex flex-col sm:flex-row justify-center gap-4" role="group" aria-label="Ações principais"> 1119 <a href="#contato-jmv-news-ecossistema-crossmedia" 1120 class="bg-white text-[#a4508b] font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 text-base hover:bg-[#a4508b] hover:text-white hover:scale-105" 1121 title="Solicite seu aplicativo personalizado" 1122 aria-label="Solicitar aplicativo personalizado para rádio"> 1123 Quero Meu Aplicativo Personalizado 1124 </a> 1125 1126 </div> 1127 </div> 1128</section><section class="py-24 px-4 relative bg-black" aria-labelledby="conheca-app-title"> 1129 <!-- Overlay para melhorar legibilidade do texto --> 1130 <div class="absolute inset-0 bg-black/50" aria-hidden="true"></div> 1131 1132 <div class="max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-10 relative z-10"> 1133 <!-- Mockup do Smartphone --> 1134 <div class="w-full lg:w-1/2 flex justify-center" role="img" aria-label="Demonstração das telas do aplicativo JMV News"> 1135 <div class="relative"> 1136 <!-- Smartphone Frame --> 1137 <div class="relative w-[300px] h-[600px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation"> 1138 <!-- Screen --> 1139 <div class="w-full h-full bg-white rounded-[2.3rem] overflow-hidden relative"> 1140 <!-- Top notch (iPhone style) --> 1141 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-10" aria-hidden="true"></div> 1142 1143 <!-- Swiper Container --> 1144 <div class="swiper mySwiper w-full h-full" role="region" aria-label="Galeria de telas do aplicativo" aria-l
1144ive="polite"> 1145 <div class="swiper-wrapper"> 1146 <!-- 1. Tela Inicial --> 1147 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 1 de 10"> 1148 <img src="assets/images/telas-jmv-news/tela-inicial-app-para-radios-jmv-news-jmv-technology-home-streaming-noticias-programacao.jpeg" 1149 alt="Tela inicial do aplicativo Cross Media JMV News mostrando home com streaming, notÃcias e programação" 1150 class="w-full h-full object-cover" 1151 loading="lazy" 1152 width="300" 1153 height="600" /> 1154 </div> 1155 1156 <!-- 2. Contatos --> 1157 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 2 de 10"> 1158 <img src="assets/images/telas-jmv-news/contatos-app-para-radios-jmv-news-jmv-technology-integracao-multicanal-email-whatsapp-redes-sociais.jpeg" 1159 alt="Tela de contatos com integração multicanal incluindo email, WhatsApp e redes sociais" 1160 class="w-full h-full object-cover" 1161 loading="lazy" 1162 width="300" 1163 height="600" /> 1164 </div> 1165 1166 <!-- 3. Player Ao Vivo --> 1167 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 3 de 10"> 1168 <img src="assets/images/telas-jmv-news/player-de-musica-spotify-da-radio-audio-on-demand-app-para-radios-jmv-news-jmv-technology.jpeg" 1169 alt="Player de música tipo Spotify da rádio com funcionalidade de áudio on-demand" 1170 class="w-full h-full object-cover" 1171 loading="lazy" 1172 width="300" 1173 height="600" /> 1174 </div> 1175 1176 <!-- 4. Programação Semanal --> 1177 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 4 de 10"> 1178 <img src="assets/images/telas-jmv-news/programacao-semanal-app-para-radios-jmv-news-jmv-technology-grade-de-horarios.jpeg" 1179 alt="Programação semanal da rádio com grade de horários completa" 1180 class="w-full h-full object-cover" 1181 loading="lazy" 1182 width="300" 1183 height="600" /> 1184 </div> 1185 1186 <!-- 5. Top 10 Músicas --> 1187 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 5 de 10"> 1188 <img src="assets/images/telas-jmv-news/top-10-musicas-app-para-radios-jmv-news-jmv-technology-ranking-musical-fidelizacao.jpeg" 1189 alt="Top 10 das músicas mais tocadas na rádio com ranking musical para fidelização" 1190 class="w-full h-full object-cover" 1191 loading="lazy" 1192 width="300" 1193 height="600" /> 1194 </div> 1195 1196 <!-- 6. NotÃcias --> 1197 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 6 de 10"> 1198 <img src="assets/images/telas-jmv-news/noticias-app-para-radios-jmv-news-jmv-technology-conteudo-digital-informacao-em-tempo-real.jpeg" 1199 alt="Seção de notÃcias com conteúdo digital e informações em tempo real" 1200 class="w-full h-full object-cover" 1201 loading="lazy" 1202 width="300" 1203 height="600" /> 1204 </div> 1205 1206 <!-- 7. Pedidos de Música --> 1207 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 7 de 10"> 1208 <img src="assets/images/telas-jmv-news/pedidos-de-musica-app-para-radios-jmv-news-jmv-technology-interatividade-engajamento.jpeg" 1209 alt="Tela de pedidos de música promovendo interatividade e engajamento com ouvintes" 1210 class="w-full h-full object-cover" 1211 loading="lazy" 1212 width="300" 1213 height="600" /> 1214 </div> 1215 1216 <!-- 8. Sorteios --> 1217 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 8 de 10"> 1218 <img src="assets/images/telas-jmv-news/sorteios-automatizados-app-para-radios-jmv-news-jmv-technology-engajamento-fidelizacao.jpeg" 1219 alt="Sistema de sorteios automatizados para engajamento e fidelização de ouvintes" 1220 class="w-full h-full object-cover" 1221 loading="lazy" 1222 width="300" 1223 height="600" /> 1224 </div> 1225 1226 <!-- 9. Catálogo Musical --> 1227 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 9 de 10"> 1228 <img src="assets/images/telas-jmv-news/spotify-da-radio-audio-on-demand-app-para-radios-jmv-news-jmv-technology-catalogo-musical-galeria-de-audio.jpeg" 1229 alt="Catálogo musical tipo Spotify da rádio com galeria de áudio on-demand" 1230 class="w-full h-full object-cover" 1231 loading="lazy" 1232 width="300" 1233 height="600" /> 1234 </div> 1235 1236 <!-- 10. Galeria de VÃdeos --> 1237 <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 10 de 10"> 1238 <img src="assets/images/telas-jmv-news/videos-app-p
1238ara-radios-jmv-news-jmv-technology-galeria-de-conteudo-exclusivo-streaming.jpeg" 1239 alt="Galeria de vÃdeos exclusivos com conteúdo de streaming da rádio" 1240 class="w-full h-full object-cover" 1241 loading="lazy" 1242 width="300" 1243 height="600" /> 1244 </div> 1245 </div> 1246 </div> 1247 1248 <!-- Home indicator (iPhone style) --> 1249 <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-black rounded-full opacity-30 z-10" aria-hidden="true"></div> 1250 </div> 1251 1252 <!-- Side buttons (maiores) --> 1253 <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1254 <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1255 <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1256 <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div> 1257 </div> 1258 1259 <!-- Botões de navegação externos --> 1260 <div class="absolute top-1/2 -translate-y-1/2 -left-12"> 1261 <button class="swiper-button-prev-custom w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-all duration-200" 1262 aria-label="Slide anterior" 1263 title="Ver tela anterior do aplicativo"> 1264 <i class="fas fa-chevron-left text-sm" aria-hidden="true"></i> 1265 </button> 1266 </div> 1267 <div class="absolute top-1/2 -translate-y-1/2 -right-12"> 1268 <button class="swiper-button-next-custom w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-all duration-200" 1269 aria-label="Próximo slide" 1270 title="Ver próxima tela do aplicativo"> 1271 <i class="fas fa-chevron-right text-sm" aria-hidden="true"></i> 1272 </button> 1273 </div> 1274 1275 <!-- Paginação externa --> 1276 <div class="swiper-pagination-custom flex justify-center gap-2 mt-4" role="tablist" aria-label="Indicadores de slides"></div> 1277 1278 <!-- Reflection effect --> 1279 <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/20 rounded-[3rem] pointer-events-none" aria-hidden="true"></div> 1280 </div> 1281 </div> 1282 1283 <!-- Texto explicativo --> 1284 <div class="w-full lg:w-1/2 mt-10 lg:mt-0"> 1285 <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40 1286 transition-all duration-500 ease-out 1287 hover:from-black/85 hover:via-black/75 hover:to-black/70 1288 hover:shadow-2xl hover:shadow-blue-600/20 hover:-translate-y-1 hover:border-blue-500/20 hover-reflect"> 1289 <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-blue-500/20" aria-hidden="true"></div> 1290 <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true"> 1291 <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-blue-500/5 via-transparent to-blue-400/10 blur-sm"></div> 1292 </div> 1293 1294 <h2 id="conheca-app-title" class="text-2xl md:text-3xl font-bold text-white mb-4">Conheça o Aplicativo</h2> 1295 <p class="text-gray-200 mb-3"> 1296 Seu aplicativo não é apenas uma extensão da sua rádio â <span class="font-bold text-white">é um novo palco digital para sua marca.</span> 1297 </p> 1298 <p class="text-gray-300 mb-3"> 1299 Aqui você pode ver, na prática, como cada recurso se integra para criar um <span class="text-yellow-400 font-semibold">ecossistema completo</span>: o player ao vivo com <span class="text-yellow-400 font-semibold">qualidade profissional</span>, o catálogo on-demand que coloca sua programação <span class="font-semibold text-white">no mesmo nÃvel dos grandes players</span>. 1300 </p> 1301 <p class="text-gray-300 mb-3">
1302 Os sorteios em <span class="font-semibold text-white">apenas dois cliques</span> fidelizam ouvintes, o espaço para pedidos de música aproxima a audiência e a seção de notÃcias mantém todos informados sem precisar sair do app. 1303 </p> 1304 <p class="italic text-gray-400"> 1305 Navegue pelas telas e descubra como sua rádio pode oferecer uma <span class="text-yellow-400 font-semibold">experiência moderna</span>, <span class="text-yellow-400 font-semibold">envolvente</span> e <span class="text-yellow-400 font-semibold">exclusiva</span> para cada ouvinte. 1306 </p> 1307 </div> 1308 </div> 1309 </div> 1310</section> 1311 1312<!-- Custom Swiper Styles --> 1313<style> 1314 .swiper-pagination-custom .pagination-bullet { 1315 width: 8px; 1316 height: 8px; 1317 background: #fff; 1318 opacity: 0.5; 1319 border-radius: 50%; 1320 cursor: pointer; 1321 transition: all 0.3s ease; 1322 } 1323 .swiper-pagination-custom .pagination-bullet.active { 1324 opacity: 1; 1325 background: #ef4444; 1326 transform: scale(1.2); 1327 } 1328</style> 1329 1330<!-- Swiper.js: inicialização do slider -->
1331<script> 1332 document.addEventListener('DOMContentLoaded', function () { 1333 const swiper = new Swiper('.mySwiper', { 1334 loop: true, 1335 autoplay: { 1336 delay: 4000, 1337 disableOnInteraction: false, 1338 }, 1339 effect: 'slide', 1340 grabCursor: true, 1341 speed: 500, 1342 on: { 1343 init: function () { 1344 createCustomPagination(this); 1345 }, 1346 slideChange: function () { 1347 updateCustomPagination(this); 1348 } 1349 } 1350 }); 1351 1352 // Botões customizados 1353 document.querySelector('.swiper-button-prev-custom').addEventListener('click', () => { 1354 swiper.slidePrev(); 1355 }); 1356 1357 document.querySelector('.swiper-button-next-custom').addEventListener('click', () => { 1358 swiper.slideNext(); 1359 }); 1360 1361 // Função para criar paginação customizada 1362 function createCustomPagination(swiper) { 1363 const paginationContainer = document.querySelector('.swiper-pagination-custom'); 1364 paginationContainer.innerHTML = ''; 1365 1366 // Conta slides reais (sem duplicatas do loop) 1367 const realSlidesCount = swiper.slides.length - 2; // Removes duplicate slides added by loop 1368 1369 for (let i = 0; i < realSlidesCount; i++) { 1370 const bullet = document.createElement('div'); 1371 bullet.classList.add('pagination-bullet'); 1372 if (i === 0) bullet.classList.add('active'); 1373 bullet.addEventListener('click', () => swiper.slideTo(i + 1)); // +1 por causa do loop 1374 paginationContainer.appendChild(bullet); 1375 } 1376 } 1377 1378 // Função para atualizar paginação customizada 1379 function updateCustomPagination(swiper) { 1380 const bullets = document.querySelectorAll('.pagination-bullet'); 1381 bullets.forEach((bullet, index) => { 1382 bullet.classList.toggle('active', index === swiper.realIndex); 1383 }); 1384 } 1385 }); 1386</script>
1386<section class="py-24 px-4 relative overflow-hidden min-h-screen flex items-center bg-black" aria-labelledby="spotify-radio-title"> 1387 <!-- Background Image --> 1388 <div class="absolute inset-0 z-0" role="img" aria-label="Fundo com ondas vibrantes representando streaming de música"> 1389 <img src="assets/images/fundo-background-spotify-da-radio-audio-on-demand-catalogo-musical-jmv-news-jmv-technology-abstrato-ondas-vibrantes.webp" 1390 alt="Fundo abstrato com ondas vibrantes representando streaming de música e catálogo musical" 1391 class="w-full h-full object-cover opacity-30" 1392 loading="lazy" 1393 width="1920" 1394 height="1080" /> 1395 <!-- Overlay para melhorar contraste --> 1396 <div class="absolute inset-0 bg-black/20" aria-hidden="true"></div> 1397 </div> 1398 1399 <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-10 relative z-20"> 1400 <!-- Conteúdo textual --> 1401 <article class="w-full lg:w-1/2 text-white"> 1402 <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40 1403 transition-all duration-500 ease-out 1404 hover:from-black/85 hover:via-black/75 hover:to-black/70 1405 hover:shadow-2xl hover:shadow-red-600/20 hover:-translate-y-1 hover:border-red-500/20 hover-reflect"> 1406 <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-red-500/20" aria-hidden="true"></div> 1407 <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true"> 1408 <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-red-500/5 via-transparent to-red-400/10 blur-sm"></div> 1409 </div> 1410 1411 <h2 id="spotify-radio-title" class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight"> 1412 O Spotify da Rádio 1413 </h2> 1414 1415 <p class="text-gray-300 text-lg mb-6 leading-relaxed"> 1416 Vá além dos grandes players de streaming. 1417 </p> 1418 1419 <div class="space-y-4 mb-8" role="list" aria-label="BenefÃcios do catálogo musical on-demand"> 1420 <p class="text-gray-200 leading-relaxed" role="listitem"> 1421 Com o recurso de áudio on-demand, disponÃvel para rádios que já contribuem com o 1422 <abbr title="Escritório Central de Arrecadação e Distribuição" class="font-bold text-white">ECAD</abbr>, seu aplicativo se transforma em um 1423 <strong class="font-bold text-yellow-400">catálogo musical exclusivo</strong>, totalmente com a cara da sua marca. 1424 </p> 1425 1426 <p class="text-gray-200 leading-relaxed" role="listitem"> 1427 Mais do que tocar músicas, sua rádio oferece liberdade para o ouvinte escolher 1428 <strong class="font-bold text-white">artistas, estilos, e criar suas próprias playlists personalizadas</strong>, em um ambiente livre de distrações â algo que nem o Spotify entrega: 1429 <strong class="font-bold text-yellow-400">a experiência premium de ouvir tudo dentro do seu próprio app</strong>. 1430 </p> 1431 </div> 1432 1433 <a href="#contato-jmv-news-ecossistema-crossmedia" 1434 class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black hover-reflect" 1435 aria-label="Entrar em contato com especialista sobre catálogo musical" 1436 title="Falar com especialista sobre implementação do catálogo musical"> 1437 <i class="fas fa-comments mr-2" aria-hidden="true"></i> 1438 Falar com um Especialista 1439 </a> 1440 </div> 1441 </article> 1442 1443 <!-- Mockup do Smartphone com vÃdeo --> 1444 <div class="w-full lg:w-1/2 flex justify-center" role="img" aria-label="Demonstração em vÃdeo do catálogo musical no aplicativo"> 1445 <div class="relative"> 1446 1447 <!-- Smartphone Frame --> 1448 <div class="relative w-[280px] h-[560px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1 z-30" role="presentation"> 1449 <!-- Screen --> 1450 <div class="w-full h-full bg-black rounded-[2.3rem] overflow-hidden relative"> 1451 <!-- Top notch (iPhone style) --> 1452 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-40" aria-hidden="true"></div> 1453 1454 <!-- VÃdeo Container --> 1455 <div class="w-full h-full relative"> 1456 <video 1457 class="w-full h-full object-cover" 1458 autoplay 1459 muted 1460 loop 1461 playsinline 1462 poster="assets/images/telas-jmv-news/tela-inicial.jpg" 1463 aria-label="VÃdeo demonstrativo do catálogo musical tipo Spotify no aplicativo Cross Media JMV News" 1464 role="img" 1465 width="280" 1466 height="560" 1467 > 1468 <source src="assets/images/videos/video-spotify-da-radio-catalogo-musicas-audio-on-demand-app-jmv-news-streaming-digital.mp4" type="video/mp4"> 1469 <!-- Fallback para imagem caso o vÃdeo não carregue --> 1470 <img src="assets/images/telas-jmv-news/tela-inicial.jpg" 1471 alt="Tela inicial do aplicativo Cross Media JMV News mostrando catálogo musical" 1472 class="w-full h-full object-cover" 1473 loading="lazy" 1474 width="280" 1475 height="560" /> 1476 </video> 1477 </div> 1478 1479 <!-- Home indicator (iPhone style) --> 1480 <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white rounded-full opacity-30 z-40" aria-hidden="true"></div> 1481 </div> 1482 1483 <!-- Side buttons --> 1484 <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1485 <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1486 <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1487 <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div> 1488 </div> 1489 1490 1491 <!-- Reflection effect --> 1492 <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/20 rounded-[3rem] pointer-events-none z-25" aria-hidden="true"></div> 1493 </div> 1494 </div> 1495 </div> 1496</section> 1497 1498<!-- Estilos para efeitos de iluminação --> 1499<style> 1500 /* Efeito de iluminação acima do celular */ 1501 .altar-light-top { 1502 position: absolute; 1503 top: -60px; 1504 left: 50%; 1505 transform: translateX(-50%); 1506 width: 300px; 1507 height: 80px; 1508 background: radial-gradient(ellipse at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%); 1509 filter: blur(10px); 1510 z-index: 5; 1511 pointer-events: none; 1512 } 1513 1514 /* Efeito de iluminação no chão abaixo do celular */ 1515 .altar-light-bottom { 1516 position: absolute; 1517 bottom: -60px; 1518 left: 50%; 1519 transform: translateX(-50%); 1520 width: 320px; 1521 height: 100px; 1522 background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 70%, rgba(255,255,255,0) 100%); 1523 filter: blur(18px); 1524 z-index: 5; 1525 pointer-events: none; 1526 } 1527 1528 /* Responsividade para mobile */ 1529 @media (max-width: 768px) { 1530 .altar-light-top { 1531 width: 250px; 1532 height: 60px; 1533 } 1534 1535 .altar-light-bottom { 1536 width: 270px; 1537 height: 80px; 1538 } 1539 } 1540</style><section class="relative bg-black py-24 px-4 overflow-hidden" aria-labelledby="sorteios-title">
1541 <!-- Background image with 20% opacity --> 1542 <div class="absolute inset-0" role="img" aria-label="Fundo abstrato com ondas vibrantes representando engajamento"> 1543 <img src="assets/images/fundo-background-sorteios-com-apenas-dois-cliques-radio-audio-on-demand-catalogo-musical-jmv-news-jmv-technology-abstrato-ondas-vibrantes.webp" 1544 alt="Fundo abstrato com ondas vibrantes representando sorteios e engajamento de ouvintes" 1545 class="w-full h-full object-cover opacity-20" 1546 loading="lazy" 1547 width="1920" 1548 height="1080"> 1549 </div> 1550 1551 <!-- Glow decor --> 1552 <div class="pointer-events-none absolute inset-0" aria-hidden="true"> 1553 <div class="absolute -top-32 -left-32 w-96 h-96 bg-rose-600/10 rounded-full blur-3xl"></div> 1554 <div class="absolute -bottom-32 -right-32 w-[30rem] h-[30rem] bg-rose-500/10 rounded-full blur-3xl"></div> 1555 </div> 1556 1557 <div class="relative max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-16"> 1558 <!-- Mockup --> 1559 <div class="w-full lg:w-5/12 flex justify-center order-1 lg:order-none" role="img" aria-label="Demonstração dos sorteios automatizados no aplicativo"> 1560 <div class="relative"> 1561 <div class="relative w-[280px] md:w-[300px] h-[560px] md:h-[600px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation"> 1562 <div class="w-full h-full bg-white rounded-[2.3rem] overflow-hidden relative"> 1563 <div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-10" aria-hidden="true"></div> 1564 <!-- Video --> 1565 <video 1566 class="w-full h-full object-cover" 1567 src="assets/images/videos/video-sorteios-automatizados-2-cliques-app-radio-engajamento-fidelizacao-jmv-news-jmv-technology.mp4" 1568 autoplay 1569 loop 1570 muted 1571 playsinline 1572 preload="metadata" 1573 aria-label="VÃdeo demonstrativo dos sorteios automatizados funcionando em apenas 2 cliques" 1574 role="img" 1575 width="280" 1576 height="560"> 1577 Seu navegador não suporta vÃdeo em HTML5. 1578 </video> 1579 <div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-black rounded-full opacity-30 z-10" aria-hidden="true"></div> 1580 </div> 1581 <!-- Buttons (laterais) --> 1582 <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1583 <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1584 <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div> 1585 <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div> 1586 1587 <!-- Indicador "2 Cliques" (mais próximo, sem linha) --> 1588 <div class="double-click-indicator flex absolute top-[7.6rem] -right-[90px] md:-right-[105px] flex-col items-center gap-2 pointer-events-none select-none" 1589 style="animation: horizontal-bounce 2s infinite;" 1590 aria-label="Indicador visual de apenas 2 cliques necessários" 1591 role="img"> 1592 <style> 1593 @keyframes horizontal-bounce { 1594 0% { transform: translateX(-10px); } 1595 50% { transform: translateX(10px); } 1596 100% { transform: translateX(-10px); } 1597 } 1598 </style> 1599 <div class="relative flex flex-col items-center"> 1600 <div class="relative hand-rotated -rotate-90"> 1601 <i class="fas fa-hand-pointer text-rose-500 text-4xl animate-double-click drop-shadow-[0_0_6px_rgba(244,63,94,0.55)]" aria-hidden="true"></i>
1602 <!-- Anéis --> 1603 <span class="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true"> 1604 <span class="click-ring w-10 h-10"></span> 1605 <span class="click-ring w-10 h-10 animation-delay-150"></span> 1606 </span> 1607 > 1608 </div> 1609 </div> 1610 <span class="text-[11px] leading-tight uppercase tracking-wider text-gray-200 font-medium text-center"> 1611 2 cliques 1612 </span> 1613 </div> 1614 1615 <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 rounded-[3rem] pointer-events-none" aria-hidden="true"></div> 1616 </div> 1617 </div> 1618 </div> 1619 1620 <!-- Texto com overlay --> 1621 <article class="w-full lg:w-7/12 relative z-10"> 1622 <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40 1623 transition-all duration-500 ease-out 1624 hover:from-black/85 hover:via-black/75 hover:to-black/70 1625 hover:shadow-2xl hover:shadow-rose-600/20 hover:-translate-y-1 hover:border-rose-500/20 hover-reflect"> 1626 <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-rose-500/20" aria-hidden="true"></div> 1627 <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true"> 1628 <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-rose-500/5 via-transparent to-rose-400/10 blur-sm"></div> 1629 </div> 1630 1631 <h2 id="sorteios-title" class="text-3xl md:text-4xl font-bold mb-6 leading-tight text-white"> 1632 Sorteios em <span class="text-rose-500">2 Cliques</span> 1633 </h2> 1634 1635 <p class="text-gray-300 mb-5 font-medium"> 1636 Engaje sua audiência sem depender de redes sociais ou expor a privacidade dos ouvintes. 1637 </p> 1638 1639 <p class="text-gray-400 mb-5"> 1640 Transforme seu aplicativo em uma poderosa ferramenta de <span class="text-yellow-400 font-semibold">engajamento</span>. 1641 </p> 1642 1643 <ul class="space-y-4 mb-8" role="list" aria-label="BenefÃcios dos sorteios automatizados"> 1644 <li class="flex items-start gap-3" role="listitem"> 1645 <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-bolt"></i></div> 1646 <p class="text-gray-300">Participação em <strong class="font-semibold text-white">2 cliques</strong> usando conta Google ou Apple â sem formulários cansativos.</p> 1647 </li> 1648 <li class="flex items-start gap-3" role="listitem"> 1649 <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-sliders-h"></i></div> 1650 <p class="text-gray-300">Total <span class="text-yellow-400 font-semibold">autonomia</span>: defina regras, prêmios e duração dos sorteios.</p> 1651 </li> 1652 <li class="flex items-start gap-3" role="listitem"> 1653 <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-chart-line"></i></div> 1654 <p class="text-gray-300">Acompanhe resultados em tempo real e aumente a <strong class="font-semibold text-white">fidelização</strong>.</p> 1655 </li> 1656 <li class="flex items-start gap-3" role="listitem"> 1657 <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-shield-alt"></i></div> 1658 <p class="text-gray-300">Processo <span class="text-yellow-400 font-semibold">transparente</span>, <span class="text-yellow-400 font-semibold">auditável</span> e integrado ao seu app.</p> 1659 </li> 1660 </ul> 1661 1662 <p class="text-gray-400 mb-8 italic"> 1663 Simples, transparente e feito para criar <span class="text-yellow-400 font-semibold">experiências</span> que retêm ouvintes. 1664 </p> 1665 1666 <div> 1667 <a href="#contato-jmv-news-ecossistema-crossmedia" 1668 class="inline-flex items-center gap-2 bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white font-semibold px-7 py-3 rounded-full text-sm md:text-base transition-colors shadow-lg shadow-rose-600/20 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-black hover-reflect" 1669 aria-label="Entrar em contato com especialista sobre sorteios automatizados" 1670 title="Falar com especialista sobre implementação de sorteios"> 1671 <i class="fas fa-comments" aria-hidden="true"></i> 1672 Falar com um Especialista 1673 </a> 1674 </div> 1675 </div> 1676 </article> 1677 </div> 1678</section> 1679 1680<style> 1681@keyframes double-click-pulse { 1682 0%,34%,100% { transform: scale(1); } 1683 5% { transform: scale(0.9); } 1684 10% { transform: scale(1.15); } 1685 15% { transform: scale(1); } 1686 20% { transform: scale(0.9); } 1687 25% { transform: scale(1.15); } 1688 30% { transform: scale(1); } 1689} 1690@keyframes click-ring { 1691 0% { transform: scale(.4); opacity:.8; } 1692 60% { opacity:0; } 1693 70%,100% { transform: scale(1.6); opacity:0; } 1694} 1695.animate-double-click { animation: double-click-pulse 4s ease-in-out infinite; transform-origin: center; } 1696.click-ring { 1697 position:absolute; 1698 border:2px solid rgba(244,63,94,0.45); 1699 border-radius:9999px; 1700 animation: click-ring 4s ease-out infinite; 1701} 1702.animation-delay-150 { animation-delay:.15s; } 1703
1704/* Conector apontando para o botão lateral */ 1705.double-click-indicator .connector { 1706 position:absolute; 1707 left:-115px; /* alcança o botão lateral */ 1708 top:50%; 1709 transform:translateY(-50%); 1710 width:110px; 1711 height:2px; 1712 background:linear-gradient(to left, rgba(244,63,94,0.9), rgba(244,63,94,0) 70%); 1713 animation: connector-pulse 2.4s ease-in-out infinite; 1714} 1715.double-click-indicator .connector:before { 1716 content:""; 1717 position:absolute; 1718 left:0; 1719 top:50%; 1720 transform:translateY(-50%); 1721 width:10px; 1722 height:10px; 1723 background:rgba(244,63,94,0.95); 1724 border-radius:50%; 1725 box-shadow:0 0 8px 2px rgba(244,63,94,0.6); 1726} 1727.double-click-indicator .connector:after { 1728 content:""; 1729 position:absolute; 1730 right:4px; 1731 top:50%; 1732 transform:translateY(-50%) rotate(180deg); 1733 border:6px solid transparent; 1734 border-left-color:rgba(244,63,94,0.95); 1735 filter:drop-shadow(0 0 4px rgba(244,63,94,0.6)); 1736} 1737@keyframes connector-pulse { 1738 0%,100% { opacity:.55; } 1739 50% { opacity:1; } 1740} 1741</style><section class="py-16" aria-labelledby="pedidos-musica-title"> 1742 <div class="container mx-auto px-4 lg:px-8"> 1743 <div class="grid items-center gap-10 lg:grid-cols-2"> 1744 <!-- Texto --> 1745 <article> 1746 <h2 id="pedidos-musica-title" class="text-3xl md:text-4xl font-bold text-neutral-900"> 1747 Pedidos de Música 1748 </h2> 1749 1750 <div class="mt-6 rounded-xl bg-white p-6 md:p-8 shadow-lg"> 1751 <p class="font-semibold text-neutral-800"> 1752 Dê voz ao seu ouvinte e torne sua programação ainda mais interativa. 1753 </p> 1754 <p class="mt-4 text-neutral-700 leading-relaxed"> 1755 Com os pedidos de música direto no app, sua rádio cria 1756 <strong class="font-semibold">proximidade</strong> com o público, aumenta a participação ao vivo e 1757 reforça a <strong class="font-semibold">fidelização</strong> da audiência â tudo de forma simples e 1758 integrada. 1759 </p> 1760 1761 <ul class="mt-6 space-y-3" role="list" aria-label="BenefÃcios dos pedidos de música"> 1762 <li class="flex gap-3" role="listitem"> 1763 <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i> 1764 <span class="text-neutral-700">Formulário simples e direto â sem burocracia para o ouvinte participar.</span> 1765 </li> 1766 <li class="flex gap-3" role="listitem"> 1767 <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i> 1768 <span class="text-neutral-700">Mais engajamento ao vivo â interatividade real durante a programação.</span> 1769 </li> 1770 <li class="flex gap-3" role="listitem"> 1771 <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i> 1772 <span class="text-neutral-700">Ouvintes fiéis â quem participa mais, se conecta mais com a rádio.</span> 1773 </li> 1774 </ul> 1775 1776 <div class="mt-8"> 1777 <a href="#contato-jmv-news-ecossistema-crossmedia" 1778 class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 1779 aria-label="Entrar em contato sobre pedidos de música" 1780 title="Falar sobre implementação de pedidos de música"> 1781 <i class="fas fa-comments mr-3" aria-hidden="true"></i> 1782 Entre em Contato 1783 </a> 1784 </div> 1785 </div> 1786 </article> 1787 1788 <!-- Imagem --> 1789 <div class="relative" role="img" aria-label="Ouvinte usando fones de ouvido com aplicativo JMV News"> 1790 <div class="aspect-[4/5] md:aspect-[4/3] w-full rounded-2xl border-2 border-neutral-300 bg-neutral-100 flex items-center justify-center hover-reflect"> 1791 <img src="assets/images/ouvinte-com-fones-usando-app-jmv-news-pedidos-de-musica-streaming-radio-digital-jmv-technology.webp" 1792 alt="Ouvinte usando fones de ouvido enquanto utiliza o aplicativo JMV News para fazer pedidos de música" 1793 class="w-full h-full object-cover rounded-2xl shadow-2xl shadow-black/40" 1794 loading="lazy" 1795 width="400" 1796 height="300" /> 1797 </div> 1798 </div> 1799 </div> 1800 </div> 1801</section> 1802<section class="py-16 md:py-20 bg-black" aria-labelledby="personalizacao-title" id="demo"> 1803 <div class="max-w-6xl mx-auto px-4"> 1804 <div class="grid lg:grid-cols-2 items-center gap-12"> 1805 <!-- Mockup do Smartphone --> 1806 <div class="flex justify-center lg:justify-start" role="img" aria-label="Demonstração interativa do aplicativo JMV News"> 1807 <div class="relative"> 1808 <!-- Smartphone Frame --> 1809 <div class="relative w-[300px] h-[600px] bg-gray-900 rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation"> 1810 <!-- Screen --> 1811 <div class="w-full h-full bg-black rounded-[2.3rem] overflow-y-auto relative"> 1812 <!-- App Content Container -->
1813 <div id="app-content" class="w-full h-full" role="application" aria-label="Simulador do aplicativo"> 1814 <!-- Página Inicial (padrão) --> 1815 <div id="page-inicio" class="app-page active" role="tabpanel" aria-labelledby="nav-inicio"> 1816 <!-- Status Bar --> 1817<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 1818 <span>10:21</span> 1819 <div class="flex items-center gap-1"> 1820 <i class="fas fa-signal text-xs"></i> 1821 <i class="fas fa-wifi text-xs"></i> 1822 <i class="fas fa-battery-three-quarters text-xs"></i> 1823 </div> 1824</div> 1825 1826<!-- Header --> 1827<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 1828 <div class="flex-1 flex justify-center"> 1829 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 1830 alt="JMV News Logo" 1831 class="h-4 object-contain"> 1832 </div> 1833 <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center"> 1834 <i class="fas fa-user text-black text-[8px]"></i> 1835 </div> 1836</div> 1837 1838<!-- Main Image/News Banner Slider --> 1839<div class="px-4 py-3"> 1840 <div class="relative h-24 rounded-lg overflow-hidden"> 1841 <!-- Swiper Container --> 1842 <div class="swiper bannerSwiper w-full h-full"> 1843 <div class="swiper-wrapper"> 1844 <div class="swiper-slide"> 1845 <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual.webp" 1846 alt="Banner Exemplo 1" 1847 class="w-full h-full object-cover"> 1848 </div> 1849 <div class="swiper-slide"> 1850 <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual2.webp" 1851 alt="Banner Exemplo 2" 1852 class="w-full h-full object-cover"> 1853 </div> 1854 <div class="swiper-slide"> 1855 <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual3.webp" 1856 alt="Banner Exemplo 3" 1857 class="w-full h-full object-cover"> 1858 </div> 1859 </div> 1860 <!-- Pagination --> 1861 <div class="swiper-pagination-banner"></div> 1862 </div> 1863 </div> 1864</div> 1865 1866<!-- Navigation Buttons --> 1867<div class="px-4 pb-3"> 1868 <div class="grid grid-cols-4 gap-2"> 1869 <button data-nav="contato" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;"> 1870 <i class="fas fa-phone mb-1 text-[11px]"></i> 1871 <span>Contato</span> 1872 </button> 1873 <button data-nav="videos" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;"> 1874 <i class="fas fa-play mb-1 text-[11px]"></i> 1875 <span>Ao vivo</span> 1876 </button> 1877 <button data-nav="programacao" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;"> 1878 <i class="fas fa-calendar mb-1 text-[11px]"></i> 1879 <span>Programação</span> 1880 </button> 1881 <button data-nav="top10" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;"> 1882 <i class="fas fa-chart-line mb-1 text-[11px]"></i> 1883 <span>Top 10</span> 1884 </button> 1885 </div> 1886</div> 1887 1888<!-- News Cards --> 1889<div class="px-4 space-y-3 flex-1 overflow-y-auto pb-20"> 1890 <!-- News Card 1 --> 1891 <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 1892 <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center"> 1893 <img src="assets/images/imagens-app-personalizacao/jmvnewsnome-de-jogadores-cruzeiro-2025-elenco-reforcos-novas-contratacoes-futebol-brasileiro.webp" 1894 alt="Jogadores Cruzeiro 2025" 1895 class="w-10 h-10 object-cover" /> 1896 </div> 1897 <div class="flex-1"> 1898 <p class="text-white text-[9px] font-medium">Ataque do Cruzeiro é o setor com mais contratações para 2025, c
1898onfira os detalhes</p> 1899 </div> 1900 <i class="fas fa-chevron-right text-white text-xs"></i> 1901 </div> 1902 1903 <!-- News Card 2 --> 1904 <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 1905 <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center"> 1906 <img src="assets/images/imagens-app-personalizacao/the-rock-emocionado-festival-cinema-ovacionado-publico-aplauso-evento-internacional.webp" 1907 alt="The Rock emocionado festival cinema" 1908 class="w-10 h-10 object-cover" /> 1909 </div> 1910 <div class="flex-1"> 1911 <p class="text-white text-[9px] font-medium">The Rock se emociona após aplaudido lançamento de filme que o fez emagrecer 30 kg em Veneza</p> 1912 </div> 1913 <i class="fas fa-chevron-right text-white text-xs"></i> 1914 </div> 1915 1916 <!-- News Card 3 --> 1917 <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 1918 <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center"> 1919 <img src="assets/images/imagens-app-personalizacao/torcida-festa-galo-atletico-mg-classico-vitoria-comemoracao-torcedores-rua-futebol-mineiro.webp" 1920 alt="Torcida festa Galo Atlético MG" 1921 class="w-10 h-10 object-cover" /> 1922 </div> 1923 <div class="flex-1"> 1924 <p class="text-white text-[9px] font-medium">Despedida do Bar do Salomão: Data e Programação da Grande Festa</p> 1925 </div> 1926 <i class="fas fa-chevron-right text-white text-xs"></i> 1927 </div> 1928</div> 1929 1930<!-- Bottom Navigation --> 1931<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 1932 <div class="flex justify-around items-center"> 1933 <button data-nav="home" class="text-white flex flex-col items-center"> 1934 <i class="fas fa-home text-sm mb-1"></i> 1935 </button> 1936 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 1937 <i class="fas fa-radio text-sm mb-1"></i> 1938 </button> 1939 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 1940 <i class="fas fa-gift text-sm mb-1"></i> 1941 </button> 1942 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 1943 <i class="fas fa-music text-sm mb-1"></i> 1944 </button> 1945 <button data-nav="videos" class="text-white flex flex-col items-center"> 1946 <i class="fas fa-play text-sm mb-1"></i> 1947 </button> 1948 </div> 1949 <!-- Home Indicator --> 1950 <div class="flex justify-center mt-2"> 1951 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 1952 </div> 1953</div> 1954 1955 </div> 1956 1957 <!-- Página Contato (oculta inicialmente) --> 1958 <div id="page-contato" class="app-page hidden" role="tabpanel" aria-labelledby="nav-contato"> 1959 <!-- Status Bar --> 1960<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 1961 <span>10:21</span> 1962 <div class="flex items-center gap-1"> 1963 <i class="fas fa-signal text-xs"></i> 1964 <i class="fas fa-wifi text-xs"></i> 1965 <i class="fas fa-battery-three-quarters text-xs"></i> 1966 </div> 1967</div> 1968 1969<!-- Header --> 1970<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 1971 <button class="back-button mr-3" data-nav="home"> 1972 <i class="fas fa-chevron-left text-white text-sm"></i> 1973 </button> 1974 <span class="text-white text-sm mr-4">Home</span> 1975 <div class="flex-1 text-center"> 1976 <h1 class="text-white text-lg font-semibold">Contatos</h1> 1977 </div> 1978</div> 1979 1980<!-- Content Area --> 1981<div class="bg-black flex-1 px-4 pt-24 flex items-center justify-center"> 1982 <!-- Contact Buttons --> 1983 <div class="space-y-3 w-full max-w-xs"> 1984 <!-- Email --> 1985 <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;"> 1986 <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center"> 1987 <i class="fas fa-envelope text-white" style="font-size: 12px;"></i> 1988 </div>
1989 <span class="text-white text-sm font-medium">Email</span> 1990 </button> 1991 1992 <!-- WhatsApp --> 1993 <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;"> 1994 <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center"> 1995 <i class="fab fa-whatsapp text-white" style="font-size: 12px;"></i> 1996 </div> 1997 <span class="text-white text-sm font-medium">Whatsapp</span> 1998 </button> 1999 2000 <!-- Facebook --> 2001 <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;"> 2002 <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center"> 2003 <i class="fab fa-facebook-f text-white" style="font-size: 12px;"></i> 2004 </div> 2005 <span class="text-white text-sm font-medium">Facebook</span> 2006 </button> 2007 2008 <!-- Instagram --> 2009 <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;"> 2010 <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center"> 2011 <i class="fab fa-instagram text-white" style="font-size: 12px;"></i> 2012 </div> 2013 <span class="text-white text-sm font-medium">Instagram</span> 2014 </button> 2015 2016 <!-- Twitter --> 2017 <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;"> 2018 <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center"> 2019 <i class="fab fa-twitter text-white" style="font-size: 12px;"></i> 2020 </div> 2021 <span class="text-white text-sm font-medium">Twitter</span> 2022 </button> 2023 </div> 2024</div> 2025 2026<!-- Bottom Navigation --> 2027<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 2028 <div class="flex justify-around items-center"> 2029 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2030 <i class="fas fa-home text-sm mb-1"></i> 2031 </button> 2032 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2033 <i class="fas fa-radio text-sm mb-1"></i> 2034 </button> 2035 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2036 <i class="fas fa-gift text-sm mb-1"></i> 2037 </button> 2038 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2039 <i class="fas fa-music text-sm mb-1"></i> 2040 </button> 2041 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2042 <i class="fas fa-play text-sm mb-1"></i> 2043 </button> 2044 </div> 2045 <!-- Home Indicator --> 2046 <div class="flex justify-center mt-2"> 2047 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 2048 </div> 2049</div> 2050 </div> 2051 2052 <!-- Página VÃdeos (oculta inicialmente) --> 2053 <div id="page-videos" class="app-page hidden" role="tabpanel" aria-labelledby="nav-videos"> 2054 <!-- Status Bar --> 2055<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 2056 <span>10:21</span> 2057 <div class="flex items-center gap-1"> 2058 <i class="fas fa-signal text-xs"></i> 2059 <i class="fas fa-wifi text-xs"></i> 2060 <div class="flex items-center gap-1"> 2061 <i class="fas fa-battery-three-quarters text-xs"></i> 2062 <span class="text-[10px]">87</span> 2063 </div> 2064 </div> 2065</div> 2066 2067<!-- Header --> 2068<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 2069 <div class="flex-1 flex justify-center"> 2070 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 2071 alt="JMV News Logo" 2072 class="h-4 object-contain"> 2073 </div> 2074 <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center"> 2075 <i class="fas fa-user text-black text-[8px]"></i> 2076 </div> 2077</div> 2078 2079<!-- Live Button and Title Row --> 2080<div class="px-4 py-2"> 2081 <div class="flex justify-between items-center"> 2082 <div class="bg-red-600 text-white px-2 py-1 rounded-full flex items-center gap-1"> 2083 <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
2084 <span class="text-[8px] font-medium">AO VIVO</span> 2085 </div> 2086 <h1 class="text-white text-sm font-bold">JMV NEWS</h1> 2087 </div> 2088</div> 2089 2090<!-- Video Player Area --> 2091<div class="px-4 py-3"> 2092 <div class="relative h-40 rounded-lg overflow-hidden" style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);"> 2093 2094 2095 <!-- Conteúdo do vÃdeo - Player JMV Stream --> 2096 <div class="w-full h-full flex items-center justify-center"> 2097 <div id="video-player-container" class="w-full h-full relative"> 2098 <!-- PLAYER DE VÃDEO LOCAL --> 2099 <!-- VÃdeo de fundo/hero sem controles --> 2100<video 2101 id="heroVideo" 2102 width="100%" 2103 height="100%" 2104 autoplay 2105 muted 2106 loop 2107 playsinline 2108 preload="metadata" 2109 poster="https://cdn.vod.br1.jmvstream.com/vod/vod_323/files/5wuzr35ph8nm2cc/cover/cover1.jpg?uf085lum5fbz=hr9yd7dh87le" 2110 style="position:absolute; height:100%; width:100%; object-fit:cover;"> 2111 <!-- sem <source>; o JS abaixo injeta o .m3u8 --> 2112 Seu navegador não suporta vÃdeo. 2113</video> 2114 2115<!-- Hls.js (CDN) -->
2116<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
vendor: 2 bytes, line 2116
2116
2117<script> 2118 const m3u8 = "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/5wuzr35ph8nm2cc/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le"; 2119 const video = document.getElementById("heroVideo"); 2120 2121 // Safari (iOS/macOS) toca HLS nativo 2122 if (video.canPlayType("application/vnd.apple.mpegurl")) { 2123 video.src = m3u8; 2124 } else if (window.Hls && Hls.isSupported()) { 2125 const hls = new Hls({ 2126 // ajustes opcionais 2127 maxBufferLength: 30, 2128 maxMaxBufferLength: 60, 2129 }); 2130 hls.loadSource(m3u8); 2131 hls.attachMedia(video); 2132 } else { 2133 console.warn("HLS não suportado neste navegador."); 2134 } 2135 2136 // tentativa de iniciar assim que possÃvel (alguns navegadores exigem interação) 2137 video.addEventListener('canplay', () => video.play().catch(()=>{})); 2138</script>
2138 2139 2140 </div> 2141 </div> 2142 2143 2144 </div> 2145</div> 2146 2147<!-- Galeria de VÃdeos --> 2148<div class="px-4 py-3"> 2149 <div class="bg-white rounded-lg p-4"> 2150 <div class="flex items-center gap-3"> 2151 <div class="w-6 h-6 bg-red-600 rounded flex items-center justify-center"> 2152 <i class="fas fa-play text-white text-xs"></i> 2153 </div> 2154 <div> 2155 <h3 class="text-gray-800 font-bold text-xs">Galeria de VÃdeos</h3> 2156 <p class="text-gray-500 text-[10px]">Conteúdo Exclusivo JMV</p> 2157 </div> 2158 </div> 2159 </div> 2160</div> 2161 2162<!-- Area de vÃdeos --> 2163<div class="px-4 flex-1 pb-20"> 2164 <div class="flex gap-3 py-4"> 2165 <!-- VÃdeo 1 --> 2166 <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden"> 2167 <div class="aspect-video bg-gray-700 flex items-center justify-center relative video-container"> 2168 <video 2169 id="video1" 2170 width="100%" 2171 height="100%" 2172 preload="metadata" 2173 playsinline 2174 muted 2175 style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;"> 2176 Seu navegador não suporta vÃdeo. 2177 </video> 2178 <!-- Play Button Overlay --> 2179 <div id="playBtn1" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10"> 2180 <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg"> 2181 <i class="fas fa-play text-white text-sm ml-0.5"></i> 2182 </div> 2183 </div> 2184 <!-- Pause Button Overlay --> 2185 <div id="pauseBtn1" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10 opacity-0 hover:opacity-100 transition-opacity duration-300" style="display:none;"> 2186 <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg"> 2187 <i class="fas fa-pause text-white text-sm"></i> 2188 </div> 2189 </div> 2190 </div> 2191 </div> 2192 2193 <!-- VÃdeo 2 --> 2194 <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden"> 2195 <div class="aspect-video bg-gray-700 flex items-center justify-center relative video-container"> 2196 <video 2197 id="video2" 2198 width="100%" 2199 height="100%" 2200 preload="metadata" 2201 playsinline 2202 muted 2203 style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;"> 2204 Seu navegador não suporta vÃdeo. 2205 </video> 2206 <!-- Play Button Overlay --> 2207 <div id="playBtn2" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10"> 2208 <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg"> 2209 <i class="fas fa-play text-white text-sm ml-0.5"></i> 2210 </div> 2211 </div> 2212 <!-- Pause Button Overlay --> 2213 <div id="pauseBtn2" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10 opacity-0 hover:opacity-100 transition-opacity duration-300" style="display:none;"> 2214 <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg"> 2215 <i class="fas fa-pause text-white text-sm"></i> 2216 </div> 2217 </div> 2218 </div> 2219 </div> 2220 </div> 2221</div> 2222 2223<!-- Hls.js -->
2224<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
vendor: 2 bytes, line 2224
2224
2225<script> 2226 const streams = { 2227 video1: "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/5y8m34f81kr247m/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le", 2228 video2: "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/38ppdvzqd22mpk9/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le", 2229 }; 2230 2231 Object.keys(streams).forEach(id => { 2232 const video = document.getElementById(id); 2233 const playBtn = document.getElementById("playBtn" + id.slice(-1)); 2234 const pauseBtn = document.getElementById("pauseBtn" + id.slice(-1)); 2235 2236 if (video.canPlayType("application/vnd.apple.mpegurl")) { 2237 video.src = streams[id]; 2238 } else if (Hls.isSupported()) { 2239 const hls = new Hls(); 2240 hls.loadSource(streams[id]); 2241 hls.attachMedia(video); 2242 } 2243 2244 // Controles overlay 2245 playBtn.addEventListener("click", () => { 2246 video.play(); 2247 playBtn.style.display = "none"; 2248 pauseBtn.style.display = "flex"; 2249 }); 2250 pauseBtn.addEventListener("click", () => { 2251 video.pause(); 2252 playBtn.style.display = "flex"; 2253 pauseBtn.style.display = "none"; 2254 }); 2255 }); 2256</script>
2256 2257 2258 2259<!-- Bottom Navigation --> 2260<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 2261 <div class="flex justify-around items-center"> 2262 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2263 <i class="fas fa-home text-sm mb-1"></i> 2264 </button> 2265 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2266 <i class="fas fa-radio text-sm mb-1"></i> 2267 </button> 2268 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2269 <i class="fas fa-gift text-sm mb-1"></i> 2270 </button> 2271 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2272 <i class="fas fa-music text-sm mb-1"></i> 2273 </button> 2274 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2275 <i class="fas fa-play text-sm mb-1"></i> 2276 </button> 2277 </div> 2278 <!-- Home Indicator --> 2279 <div class="flex justify-center mt-2"> 2280 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 2281 </div> 2282</div> 2283 2284<style> 2285@keyframes marquee { 2286 0% { transform: translateX(100%); } 2287 100% { transform: translateX(-100%); } 2288} 2289 2290.animate-marquee { 2291 animation: marquee 15s linear infinite; 2292} 2293</style> 2294
2295<script> 2296document.addEventListener('DOMContentLoaded', function() { 2297 // Video 1 controls 2298 const video1 = document.getElementById('video1'); 2299 const playBtn1 = document.getElementById('playBtn1'); 2300 const pauseBtn1 = document.getElementById('pauseBtn1'); 2301 2302 playBtn1.addEventListener('click', function() { 2303 if (video1.paused) { 2304 video1.play(); 2305 playBtn1.style.display = 'none'; 2306 pauseBtn1.style.display = 'flex'; 2307 } 2308 }); 2309 2310 pauseBtn1.addEventListener('click', function() { 2311 if (!video1.paused) { 2312 video1.pause(); 2313 pauseBtn1.style.display = 'none'; 2314 playBtn1.style.display = 'flex'; 2315 } 2316 }); 2317 2318 video1.addEventListener('ended', function() { 2319 pauseBtn1.style.display = 'none'; 2320 playBtn1.style.display = 'flex'; 2321 }); 2322 2323 // Video 2 controls 2324 const video2 = document.getElementById('video2'); 2325 const playBtn2 = document.getElementById('playBtn2'); 2326 const pauseBtn2 = document.getElementById('pauseBtn2'); 2327 2328 playBtn2.addEventListener('click', function() { 2329 if (video2.paused) { 2330 video2.play(); 2331 playBtn2.style.display = 'none'; 2332 pauseBtn2.style.display = 'flex'; 2333 } 2334 }); 2335 2336 pauseBtn2.addEventListener('click', function() { 2337 if (!video2.paused) { 2338 video2.pause(); 2339 pauseBtn2.style.display = 'none'; 2340 playBtn2.style.display = 'flex'; 2341 } 2342 }); 2343 2344 video2.addEventListener('ended', function() { 2345 pauseBtn2.style.display = 'none'; 2346 playBtn2.style.display = 'flex'; 2347 }); 2348}); 2349</script>
2349 </div> 2350 2351 <!-- Página Programação (oculta inicialmente) --> 2352 <div id="page-programacao" class="app-page hidden" role="tabpanel" aria-labelledby="nav-programacao"> 2353 <!-- Status Bar --> 2354<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 2355 <span>10:22</span> 2356 <div class="flex items-center gap-1"> 2357 <i class="fas fa-signal text-xs"></i> 2358 <i class="fas fa-wifi text-xs"></i> 2359 <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div> 2360 </div> 2361</div> 2362 2363<!-- Header --> 2364<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 2365 <button class="back-button mr-3" data-nav="home"> 2366 <i class="fas fa-chevron-left text-white text-sm"></i> 2367 </button> 2368 <span class="text-white text-sm mr-4">Home</span> 2369 <div class="flex-1 text-center"> 2370 <h1 class="text-white text-sm font-semibold">Programação</h1> 2371 </div> 2372</div> 2373 2374<!-- Days of Week Tabs --> 2375<div class="px-4 py-3" style="background-color: #7D1B1A;"> 2376 <div class="flex justify-between items-center text-white text-[9px]"> 2377 <button class="day-tab px-2 py-1" data-day="dom">Dom</button> 2378 <button class="day-tab px-2 py-1" data-day="seg">Seg</button> 2379 <button class="day-tab px-2 py-1" data-day="ter">Ter</button> 2380 <button class="day-tab px-2 py-1" data-day="qua">Qua</button> 2381 <button class="day-tab px-2 py-1 bg-white text-black rounded active" data-day="qui">Qui</button> 2382 <button class="day-tab px-2 py-1" data-day="sex">Sex</button> 2383 <button class="day-tab px-2 py-1" data-day="sab">Sáb</button> 2384 </div> 2385</div> 2386 2387<!-- Programming Content --> 2388<div class="bg-black flex-1 px-4 py-4"> 2389 <!-- Programming for each day --> 2390 2391 <!-- Sunday --> 2392 <div id="prog-dom" class="day-content hidden"> 2393 <div class="space-y-3"> 2394 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2395 <div class="w-16 h-16 rounded overflow-hidden"> 2396 <img src="assets/images/imagens-app-personalizacao/programacao/chip-tecnologia-hardware-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2397 alt="JMV Tech Domingo" 2398 class="w-full h-full object-cover"> 2399 </div> 2400 <div class="flex-1"> 2401 <h3 class="text-white font-semibold text-sm">JMV Tech Domingo</h3> 2402 <p class="text-white/70 text-xs">08:00 Horas</p> 2403 </div> 2404 <i class="fas fa-chevron-right text-white text-sm"></i> 2405 </div> 2406 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2407 <div class="w-16 h-16 rounded overflow-hidden"> 2408 <img src="assets/images/imagens-app-personalizacao/programacao/estudio-transmissao-profissional-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2409 alt="Transmissão ao Vivo" 2410 class="w-full h-full object-cover"> 2411 </div> 2412 <div class="flex-1"> 2413 <h3 class="text-white font-semibold text-sm">Transmissão ao Vivo</h3> 2414 <p class="text-white/70 text-xs">20:00 Horas</p> 2415 </div> 2416 <i class="fas fa-chevron-right text-white text-sm"></i> 2417 </div> 2418 </div> 2419 </div> 2420 2421 <!-- Monday --> 2422 <div id="prog-seg" class="day-content hidden"> 2423 <div class="space-y-3"> 2424 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2425 <div class="w-16 h-16 rounded overflow-hidden"> 2426 <img src="assets/images/imagens-app-personalizacao/programacao/logo-oficial-identidade-visual-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2427 alt="JMV Manhã Tech" 2428 class="w-full h-full object-cover"> 2429 </div> 2430 <div class="flex-1"> 2431 <h3 class="text-white font-semibold text-sm">JMV Manhã Tech</h3> 2432 <p class="text-white/70 text-xs">06:00 Horas</p> 2433 </div> 2434 <i class="fas fa-chevron-right text-white text-sm"></i> 2435 </div> 2436 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2437 <div class="w-16 h-16 rounded overflow-hidden"> 2438 <img src="assets/images/imagens-app-personalizacao/programacao/desenvolvimento-tecnologia-programacao-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2439 alt="Desenvolvimento de Apps" 2440 class="w-full h-full object-cover"> 2441 </div> 2442 <div class="flex-1"> 2443 <h3 class="text-white font-semibold text-sm">Desenvolvimento de Apps</h3> 2444 <p class="text-white/70 text-xs">18:00 Horas</p> 2445 </div> 2446 <i class="fas fa-chevron-right text-white text-sm"></i> 2447 </div> 2448 </div> 2449 </div> 2450 2451 <!-- Tuesday --> 2452 <div id="prog-ter" class="day-content hidden"> 2453 <div class="space-y-3"> 2454 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2455 <div class="w-16 h-16 rounded overflow-hidden"> 2456 <img src="assets/images/imagens-app-personalizacao/programacao/west-api-hospedagem-de-videos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2457 alt="JMV Soluções Stream" 2458 class="w-full h-full object-cover"> 2459 </div> 2460 <div class="flex-1"> 2461 <h3 class="text-white font-semibold text-sm">JMV Soluções Stream</h3> 2462 <p class="text-white/70 text-xs">10:00 Horas</p> 2463 </div> 2464 <i class="fas fa-chevron-right text-white text-sm"></i> 2465 </div> 2466 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2467 <div class="w-16 h-16 rounded overflow-hidden"> 2468 <img src="assets/images/imagens-app-personalizacao/programacao/web-hosting-hospedagem-sites-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2469 alt="Hospedagem e Nuvem" 2470 class="w-full h-full object-cover"> 2471 </div> 2472 <div class="flex-1"> 2473 <h3 class="text-white font-semibold text-sm">Hospedagem e Nuvem</h3> 2474 <p class="text-white/70 text-xs">19:00 Horas</p> 2475 </div> 2476 <i class="fas fa-chevron-right text-white text-sm"></i> 2477 </div> 2478 </div> 2479 </div> 2480 2481 <!-- Wednesday --> 2482 <div id="prog-qua" class="day-content hidden"> 2483 <div class="space-y-3"> 2484 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2485 <div class="w-16 h-16 rounded overflow-hidden"> 2486 <img src="assets/images/imagens-app-personalizacao/programacao/laboratorio-inovacao-digital-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2487 alt="Laboratório Web" 2488 class="w-full h-full object-cover"> 2489 </div> 2490 <div class="flex-1"> 2491 <h3 class="text-white font-semibold text-sm">Laboratório Web</h3> 2492 <p class="text-white/70 text-xs">12:00 Horas</p> 2493 </div> 2494 <i class="fas fa-chevron-right text-white text-sm"></i> 2495 </div> 2496 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2497 <div class="w-16 h-16 rounded overflow-hidden"> 2498 <img src="assets/images/imagens-app-personalizacao/programacao/ideias-inovacao-projetos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2499 alt="JMV Noite Inovação" 2500 class="w-full h-full object-cover"> 2501 </div> 2502 <div class="flex-1"> 2503 <h3 class="text-white font-semibold text-sm">JMV Noite Inovação</h3> 2504 <p class="text-white/70 text-xs">21:00 Horas</p> 2505 </div> 2506 <i class="fas fa-chevron-right text-white text-sm"></i> 2507 </div> 2508 </div> 2509 </div> 2510 2511 <!-- Thursday (Active) --> 2512 <div id="prog-qui" class="day-content"> 2513 <div class="space-y-3"> 2514 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2515 <div class="w-16 h-16 rounded overflow-hidden"> 2516 <img src="assets/images/imagens-app-personalizacao/programacao/oficial-identidade-visual-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2517 alt="JMV News Tech" 2518 class="w-full h-full object-cover"> 2519 </div> 2520 <div class="flex-1"> 2521 <h3 class="text-white font-semibold text-sm">JMV News Tech</h3> 2522 <p class="text-white/70 text-xs">14:00 Horas</p> 2523 </div> 2524 <i class="fas fa-chevron-right text-white text-sm"></i> 2525 </div> 2526 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2527 <div class="w-16 h-16 rounded overflow-hidden"> 2528 <img src="assets/images/imagens-app-personalizacao/programacao/interface-ux-ui-design-app-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2529 alt="Transformação Digital" 2530 class="w-full h-full object-cover"> 2531 </div> 2532 <div class="flex-1"> 2533 <h3 class="text-white font-semibold text-sm">Transformação Digital</h3> 2534 <p class="text-white/70 text-xs">16:00 Horas</p> 2535 </div> 2536 <i class="fas fa-chevron-right text-white text-sm"></i> 2537 </div> 2538 </div> 2539 </div> 2540 2541 <!-- Friday --> 2542 <div id="prog-sex" class="day-content hidden"> 2543 <div class="space-y-3"> 2544 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2545 <div class="w-16 h-16 rounded overflow-hidden"> 2546 <img src="assets/images/imagens-app-personalizacao/programacao/estudio-transmissao-profissional-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2547 alt="JMV Sexta Stream" 2548 class="w-full h-full object-cover"> 2549 </div> 2550 <div class="flex-1"> 2551 <h3 class="text-white font-semibold text-sm">JMV Sexta Stream</h3> 2552 <p class="text-white/70 text-xs">15:00 Horas</p> 2553 </div> 2554 <i class="fas fa-chevron-right text-white text-sm"></i> 2555 </div> 2556 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2557 <div class="w-16 h-16 rounded overflow-hidden"> 2558 <img src="assets/images/imagens-app-personalizacao/programacao/chip-tecnologia-hardware-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2559 alt="Preparação Tech" 2560 class="w-full h-full object-cover"> 2561 </div> 2562 <div class="flex-1"> 2563 <h3 class="text-white font-semibold text-sm">Preparação Tech</h3> 2564 <p class="text-white/70 text-xs">22:00 Horas</p> 2565 </div> 2566 <i class="fas fa-chevron-right text-white text-sm"></i> 2567 </div> 2568 </div> 2569 </div> 2570 2571 <!-- Saturday --> 2572 <div id="prog-sab" class="day-content hidden"> 2573 <div class="space-y-3"> 2574 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2575 <div class="w-16 h-16 rounded overflow-hidden"> 2576 <img src="assets/images/imagens-app-personalizacao/programacao/desenvolvimento-tecnologia-programacao-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2577 alt="JMV Sábado Code" 2578 class="w-full h-full object-cover"> 2579 </div> 2580 <div class="flex-1"> 2581 <h3 class="text-white font-semibold text-sm">JMV Sábado Code</h3> 2582 <p class="text-white/70 text-xs">11:00 Horas</p> 2583 </div> 2584 <i class="fas fa-chevron-right text-white text-sm"></i> 2585 </div> 2586 <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;"> 2587 <div class="w-16 h-16 rounded overflow-hidden"> 2588 <img src="assets/images/imagens-app-personalizacao/programacao/west-api-hospedagem-de-videos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2589 alt="Hospedagem de VÃdeos" 2590 class="w-full h-full object-cover"> 2591 </div> 2592 <div class="flex-1"> 2593 <h3 class="text-white font-semibold text-sm">Hospedagem de VÃdeos</h3> 2594 <p class="text-white/70 text-xs">20:30 Horas</p> 2595 </div> 2596 <i class="fas fa-chevron-right text-white text-sm"></i> 2597 </div> 2598 </div> 2599 </div> 2600</div> 2601 2602<!-- Bottom Navigation --> 2603<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 2604 <div class="flex justify-around items-center"> 2605 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2606 <i class="fas fa-home text-sm mb-1"></i> 2607 </button> 2608 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2609 <i class="fas fa-radio text-sm mb-1"></i> 2610 </button> 2611 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2612 <i class="fas fa-gift text-sm mb-1"></i> 2613 </button> 2614 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2615 <i class="fas fa-music text-sm mb-1"></i> 2616 </button> 2617 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2618 <i class="fas fa-play text-sm mb-1"></i> 2619 </button> 2620 </div> 2621 <!-- Home Indicator --> 2622 <div class="flex justify-center mt-2"> 2623 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 2624 </div> 2625</div> 2626
2627<script> 2628document.addEventListener('DOMContentLoaded', function() { 2629 // Tab switching functionality 2630 const dayTabs = document.querySelectorAll('.day-tab'); 2631 const dayContents = document.querySelectorAll('.day-content'); 2632 2633 dayTabs.forEach(tab => { 2634 tab.addEventListener('click', function() { 2635 const day = this.getAttribute('data-day'); 2636 2637 // Remove active class from all tabs 2638 dayTabs.forEach(t => { 2639 t.classList.remove('active', 'bg-white', 'text-black', 'rounded'); 2640 t.classList.add('text-white'); 2641 }); 2642 2643 // Add active class to clicked tab 2644 this.classList.add('active', 'bg-white', 'text-black', 'rounded'); 2645 this.classList.remove('text-white'); 2646 2647 // Hide all day contents 2648 dayContents.forEach(content => { 2649 content.classList.add('hidden'); 2650 }); 2651 2652 // Show selected day content 2653 document.getElementById('prog-' + day).classList.remove('hidden'); 2654 }); 2655 }); 2656}); 2657</script>
2657 2658 2659<style> 2660.day-content.hidden { 2661 display: none; 2662} 2663 2664.day-tab { 2665 transition: all 0.3s ease; 2666} 2667 2668.day-tab:hover { 2669 background-color: rgba(255, 255, 255, 0.1); 2670 border-radius: 4px; 2671} 2672</style> </div> 2673 2674 <!-- Página Top 10 (oculta inicialmente) --> 2675 <div id="page-top10" class="app-page hidden" role="tabpanel" aria-labelledby="nav-top10"> 2676 <!-- Status Bar --> 2677<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 2678 <span>10:22</span> 2679 <div class="flex items-center gap-1"> 2680 <i class="fas fa-signal text-xs"></i> 2681 <i class="fas fa-wifi text-xs"></i> 2682 <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div> 2683 </div> 2684</div> 2685 2686<!-- Header --> 2687<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 2688 <button class="back-button mr-3" data-nav="home"> 2689 <i class="fas fa-chevron-left text-white text-sm"></i> 2690 </button> 2691 <span class="text-white text-sm mr-4">Voltar</span> 2692 <div class="flex-1 text-center"> 2693 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 2694 alt="JMV News Logo" 2695 class="h-6 object-contain mx-auto"> 2696 </div> 2697</div> 2698 2699<!-- Content Area --> 2700<div class="bg-black flex-1 px-4 py-6 pb-24 overflow-y-auto"> 2701 <!-- Title Section --> 2702 <div class="mb-6"> 2703 <h1 class="text-white text-sm font-bold mb-1">Top 10 Músicas</h1> 2704 <p class="text-gray-400 text-[9px]">As mais tocadas da semana</p> 2705 </div> 2706 2707 <!-- Music List --> 2708 <div class="space-y-3"> 2709 <!-- Music 1 - Flor E O Beija Flor - Henrique & Juliano --> 2710 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2711 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2712 1 2713 </div> 2714 <div class="w-8 h-8 rounded overflow-hidden"> 2715 <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-dvd-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2716 alt="Flor E O Beija Flor" 2717 class="w-full h-full object-cover"> 2718 </div> 2719 <div class="flex-1"> 2720 <h3 class="text-white font-semibold text-[9px]">Flor E O Beija Flor</h3> 2721 <p class="text-gray-400 text-[7px]">Henrique & Juliano</p> 2722 </div> 2723 </div> 2724 2725 <!-- Music 2 - Na Hora De Amar - Gusttavo Lima --> 2726 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2727 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2728 2 2729 </div> 2730 <div class="w-8 h-8 rounded overflow-hidden"> 2731 <img src="assets/images/imagens-app-personalizacao/top10/embaixador-gusttavo-lima-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2732 alt="Na Hora De Amar" 2733 class="w-full h-full object-cover"> 2734 </div> 2735 <div class="flex-1"> 2736 <h3 class="text-white font-semibold text-[9px]">Na Hora De Amar</h3> 2737 <p class="text-gray-400 text-[7px]">
2737Gusttavo Lima</p> 2738 </div> 2739 </div> 2740 2741 <!-- Music 3 - Desbloqueado - Diego & Victor Hugo --> 2742 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2743 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2744 3 2745 </div> 2746 <div class="w-8 h-8 rounded overflow-hidden"> 2747 <img src="assets/images/imagens-app-personalizacao/top10/dupla-sertaneja-equilibrio-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2748 alt="Desbloqueado" 2749 class="w-full h-full object-cover"> 2750 </div> 2751 <div class="flex-1"> 2752 <h3 class="text-white font-semibold text-[9px]">Desbloqueado</h3> 2753 <p class="text-gray-400 text-[7px]">Diego & Victor Hugo</p> 2754 </div> 2755 </div> 2756 2757 <!-- Music 4 - Quebrando Protocolo - Gusttavo Lima --> 2758 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2759 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2760 4 2761 </div> 2762 <div class="w-8 h-8 rounded overflow-hidden"> 2763 <img src="assets/images/imagens-app-personalizacao/top10/gusttavo-lima-buteco-show-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2764 alt="Quebrando Protocolo" 2765 class="w-full h-full object-cover"> 2766 </div> 2767 <div class="flex-1"> 2768 <h3 class="text-white font-semibold text-[9px]">Quebrando Protocolo</h3> 2769 <p class="text-gray-400 text-[7px]">
2769Gusttavo Lima</p> 2770 </div> 2771 </div> 2772 2773 <!-- Music 5 - Ainda Ontem Chorei De Saud... - Fernando & Sorocaba --> 2774 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2775 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2776 5 2777 </div> 2778 <div class="w-8 h-8 rounded overflow-hidden"> 2779 <img src="assets/images/imagens-app-personalizacao/top10/fernando-e-sorocaba-on-fire-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2780 alt="Ainda Ontem Chorei De Saudade" 2781 class="w-full h-full object-cover"> 2782 </div> 2783 <div class="flex-1"> 2784 <h3 class="text-white font-semibold text-[9px]">Ainda Ontem Chorei De Saud...</h3> 2785 <p class="text-gray-400 text-[7px]">Fernando & Sorocaba</p> 2786 </div> 2787 </div> 2788 2789 <!-- 2790 Music 6 - Voa Beija Flor - Jorge & Mateus 2791 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2792 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2793 6 2794 </div> 2795 <div class="w-8 h-8 rounded overflow-hidden"> 2796 <img src="assets/images/imagens-app-personalizacao/top10/jorge-e-mateus-cantores-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2797 alt="Voa Beija Flor" 2798 class="w-full h-full object-cover"> 2799 </div> 2800 <div class="flex-1"> 2801 <h3 class="text-white font-semibold text-[9px]">Voa Beija Flor</h3> 2802 <p class="text-gray-400 text-[7px]">Jorge & Mateus</p> 2803 </div> 2804 </div> 2805 2806 Music 7 - Alô Bebê - Henrique & Juliano 2807 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2808 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2809 7 2810 </div> 2811 <div class="w-8 h-8 rounded overflow-hidden"> 2812 <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-sertanejo-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2813 alt="Alô Bebê" 2814 class="w-full h-full object-cover"> 2815 </div> 2816 <div class="flex-1"> 2817 <h3 class="text-white font-semibold text-[9px]">Alô Bebê</h3> 2818 <p class="text-gray-400 text-[7px]">Henrique & Juliano</p> 2819 </div> 2820 </div> 2821 2822 Music 8 - Nosso Quadro - Ana Castela 2823 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2824 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2825 8 2826 </div> 2827 <div class="w-8 h-8 rounded overflow-hidden"> 2828 <img src="assets/images/imagens-app-personalizacao/top10/marilia-mendonca-cantora-sertaneja-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2829 alt="Nosso Quadro" 2830 class="w-full h-full object-cover"> 2831 </div> 2832 <div class="flex-1"> 2833 <h3 class="text-white font-semibold text-[9px]">Nosso Quadro</h3> 2834 <p class="text-gray-400 text-[7px]">Ana Castela</p> 2835 </div> 2836 </div> 2837 2838 Music 9 - Eu Quero Tchu Eu Quero Tcha - João Lucas & Marcelo 2839 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2840 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2841 9 2842 </div> 2843 <div class="w-8 h-8 rounded overflow-hidden"> 2844 <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-musica-sertaneja-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2845 alt="Eu Quero Tchu Eu Quero Tcha" 2846 class="w-full h-full object-cover"> 2847 </div> 2848 <div class="flex-1"> 2849 <h3 class="text-white font-semibold text-[9px]">Eu Quero Tchu Eu Quero Tcha</h3> 2850 <p class="text-gray-400 text-[7px]">João Lucas & Marcelo</p> 2851 </div> 2852 </div> 2853 2854 Music 10 - Coração Cachorro - Simone Mendes 2855 <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;"> 2856 <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;"> 2857 10 2858 </div> 2859 <div class="w-8 h-8 rounded overflow-hidden"> 2860 <img src="assets/images/imagens-app-personalizacao/top10/marili
2860a-mendonca-show-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 2861 alt="Coração Cachorro" 2862 class="w-full h-full object-cover"> 2863 </div> 2864 <div class="flex-1"> 2865 <h3 class="text-white font-semibold text-[9px]">Coração Cachorro</h3> 2866 <p class="text-gray-400 text-[7px]">Simone Mendes</p> 2867 </div> 2868 </div> 2869 --> 2870 </div> 2871</div> 2872 2873<!-- Home Indicator --> 2874<div class="flex justify-center py-2 bg-black"> 2875 <div class="w-32 h-1 bg-white rounded-full"></div> 2876</div> 2877 2878<!-- Bottom Navigation --> 2879<div class="fixed bottom-0 left-0 right-0 px-4 py-2 z-50" style="background-color: #7D1B1A;"> 2880 <div class="flex justify-around items-center"> 2881 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2882 <i class="fas fa-home text-sm mb-1"></i> 2883 </button> 2884 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2885 <i class="fas fa-radio text-sm mb-1"></i> 2886 </button> 2887 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2888 <i class="fas fa-gift text-sm mb-1"></i> 2889 </button> 2890 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2891 <i class="fas fa-music text-sm mb-1"></i> 2892 </button> 2893 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2894 <i class="fas fa-play text-sm mb-1"></i> 2895 </button> 2896 </div> 2897 <!-- Home Indicator --> 2898 <div class="flex justify-center mt-2"> 2899 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 2900 </div> 2901</div> </div> 2902 2903 <!-- Página Pedido (oculta inicialmente) --> 2904 <div id="page-pedido" class="app-page hidden" role="tabpanel" aria-labelledby="nav-pedido"> 2905 <!-- Status Bar --> 2906<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 2907 <span>10:22</span> 2908 <div class="flex items-center gap-1"> 2909 <i class="fas fa-signal text-xs"></i> 2910 <i class="fas fa-wifi text-xs"></i> 2911 <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div> 2912 </div> 2913</div> 2914 2915<!-- Header --> 2916<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 2917 <button class="back-button mr-3" data-nav="home"> 2918 <i class="fas fa-chevron-left text-white text-sm"></i> 2919 </button> 2920 <span class="text-white text-sm mr-4">Voltar</span> 2921 <div class="flex-1 text-center"> 2922 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 2923 alt="JMV News Logo" 2924 class="h-6 object-contain mx-auto"> 2925 </div> 2926</div> 2927 2928<!-- Content Area --> 2929<div class="bg-black flex-1 px-4 py-6 overflow-y-auto"> 2930 <!-- Radio Player Card --> 2931 <div class="rounded-lg p-4 mb-6 relative" style="background-color: #7D1B1A;"> 2932 <div class="flex flex-col items-start"> 2933 <!-- Imagem --> 2934 2935 <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center mb-2 p-2 overflow-hidden"> 2936 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 2937 alt="JMV News Logo" 2938 class="max-w-8 max-h-8 object-contain animate-spin-slow logo-rotativa-fixa" 2939 style="filter: brightness(0); animation: spin 10s linear infinite; max-width: 32px !important; max-height: 32px !important; width: auto !important; height: auto !important;"> 2940 </div> 2941 2942 <!-- Textos abaixo da imagem --> 2943 <div> 2944 <h3 class="text-white font-bold text-[10px] mb-1">JMV NEWS</h3> 2945 <p class="text-white/80 text-[9px]">A rádio que conecta você!</p> 2946 </div> 2947 </div> 2948 2949 <div class="absolute flex items-center justify-center right-[-1rem] my-auto h-20 w-20 bg-black rounded-full -mt-12"> 2950 <button id="playPauseBtn" class="w-12 h-12 rounded-full flex items-center justify-center transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;"> 2951 <i id="playPauseIcon" class="fas fa-play text-white text-lg"></i> 2952 </button> 2953 </div> 2954 </div> 2955 2956 <!-- Music Request Card --> 2957 <div class="rounded-lg p-4" style="background-color: #7D1B1A;"> 2958 <div class="text-center mb-4"> 2959 <h2 class="text-white font-bold text-[10px] mb-2">Realize seu pedido de música</h2> 2960 <p class="text-white/80 text-[9px] leading-relaxed">Informe qual música e artista você gostaria de ouvir, e adicione uma mensagem se desejar.</p> 2961 </div> 2962 2963 <!-- Form --> 2964 <div class="space-y-4"> 2965 <!-- Music Input --> 2966 <div> 2967 <input type="text" 2968 placeholder="Nome da música e artista" 2969 class="w-full px-3 py-3 bg-transparent border border-white/30 rounded-lg text-white text-[9px] placeholder-white/60 focus:border-white focus:outline-none"> 2970 </div> 2971 2972 <!-- Message Input - Tamanho reduzido --> 2973 <div> 2974 <textarea placeholder="Sua mensagem ou comentário (opcional)" 2975 rows="2" 2976 class="w-full px-3 py-3 bg-transparent border border-white/30 rounded-lg text-white text-[9px] placeholder-white/60 focus:border-white focus:outline-none resize-none"></textarea> 2977 </div> 2978 2979 <!-- Submit Button --> 2980 <button class="w-full py-3 bg-white rounded-lg text-[10px] font-bold transition-opacity duration-200 hover:opacity-90" style="color: #7D1B1A;"> 2981 Enviar pedido de música 2982 </button> 2983 </div> 2984 </div> 2985</div> 2986
2987<!-- Audio Player (pré-conectado mas mudo) --> 2988<audio id="audioPlayer" preload="auto" muted style="display: none;"> 2989 <source src="https://newsjmv.jmvstream.com/live" type="audio/mpeg"> 2990 <source src="https://newsjmv.jmvstream.com/live" type="audio/wav"> 2991 Seu navegador não suporta o elemento de áudio. 2992</audio> 2993 2994<!-- Bottom Navigation --> 2995<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 2996 <div class="flex justify-around items-center"> 2997 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 2998 <i class="fas fa-home text-sm mb-1"></i> 2999 </button> 3000 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3001 <i class="fas fa-radio text-sm mb-1"></i> 3002 </button> 3003 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3004 <i class="fas fa-gift text-sm mb-1"></i> 3005 </button> 3006 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3007 <i class="fas fa-music text-sm mb-1"></i> 3008 </button> 3009 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3010 <i class="fas fa-play text-sm mb-1"></i> 3011 </button> 3012 </div> 3013 <!-- Home Indicator --> 3014 <div class="flex justify-center mt-2"> 3015 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 3016 </div> 3017</div> 3018 3019<style> 3020@keyframes spin { 3021 from { 3022 transform: rotate(0deg); 3023 } 3024 to { 3025 transform: rotate(360deg); 3026 } 3027} 3028</style> 3029
3030<script> 3031document.addEventListener('DOMContentLoaded', function() { 3032 const audioPlayer = document.getElementById('audioPlayer'); 3033 const playPauseBtn = document.getElementById('playPauseBtn'); 3034 const playPauseIcon = document.getElementById('playPauseIcon'); 3035 3036 let isPlaying = false; 3037 let isConnected = false; 3038 3039 // Pré-conectar o áudio quando a página carrega 3040 setTimeout(() => { 3041 audioPlayer.play().then(() => { 3042 // Conectado com sucesso, mas pausar imediatamente 3043 audioPlayer.pause(); 3044 isConnected = true; 3045 console.log('Stream pré-conectado com sucesso'); 3046 }).catch(error => { 3047 console.log('Tentando pré-conectar stream...', error); 3048 // Se falhar, tentar novamente em 2 segundos 3049 setTimeout(() => { 3050 audioPlayer.load(); // Recarregar o stream 3051 }, 2000); 3052 }); 3053 }, 1000); 3054 3055 playPauseBtn.addEventListener('click', function() { 3056 if (isPlaying) { 3057 // Pausar 3058 audioPlayer.pause(); 3059 playPauseIcon.className = 'fas fa-play text-white text-lg'; 3060 isPlaying = false; 3061 console.log('Rádio pausada'); 3062 } else { 3063 // Tocar 3064 audioPlayer.muted = false; // Desmutar 3065 audioPlayer.play().then(() => { 3066 playPauseIcon.className = 'fas fa-pause text-white text-lg'; 3067 isPlaying = true; 3068 console.log('Rádio tocando'); 3069 }).catch(error => { 3070 console.error('Erro ao reproduzir áudio:', error); 3071 // Tentar recarregar o stream 3072 audioPlayer.load(); 3073 setTimeout(() => { 3074 audioPlayer.play().then(() => { 3075 playPauseIcon.className = 'fas fa-pause text-white text-lg'; 3076 isPlaying = true; 3077 console.log('Rádio tocando após reload'); 3078 }).catch(err => { 3079 alert('Erro ao conectar com a rádio. Verifique sua conexão.'); 3080 console.error('Erro final:', err); 3081 }); 3082 }, 1000); 3083 }); 3084 } 3085 }); 3086 3087 // Event listeners para controle automático 3088 audioPlayer.addEventListener('play', function() { 3089 if (!audioPlayer.muted) { 3090 playPauseIcon.className = 'fas fa-pause text-white text-lg'; 3091 isPlaying = true; 3092 } 3093 }); 3094 3095 audioPlayer.addEventListener('pause', function() { 3096 playPauseIcon.className = 'fas fa-play text-white text-lg'; 3097 isPlaying = false; 3098 }); 3099 3100 audioPlayer.addEventListener('error', function() { 3101 console.error('Erro no stream de áudio'); 3102 playPauseIcon.className = 'fas fa-play text-white text-lg'; 3103 isPlaying = false; 3104 // Tentar reconectar 3105 setTimeout(() => { 3106 audioPlayer.load(); 3107 }, 3000); 3108 }); 3109 3110 audioPlayer.addEventListener('canplay', function() { 3111 isConnected = true; 3112 console.log('Stream pronto para reprodução'); 3113 }); 3114}); 3115</script>
3115 </div> 3116 3117 <!-- Página Sorteios (oculta inicialmente) --> 3118 <div id="page-sorteios" class="app-page hidden" role="tabpanel" aria-labelledby="nav-sorteios"> 3119 <!-- Status Bar --> 3120<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 3121 <span>10:22</span> 3122 <div class="flex items-center gap-1"> 3123 <i class="fas fa-signal text-xs"></i> 3124 <i class="fas fa-wifi text-xs"></i> 3125 <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div> 3126 </div> 3127</div> 3128 3129<!-- Header --> 3130<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 3131 <div class="flex-1 flex justify-center"> 3132 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 3133 alt="JMV News Logo" 3134 class="h-4 object-contain"> 3135 </div> 3136 <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center"> 3137 <i class="fas fa-user text-black text-[8px]"></i> 3138 </div> 3139</div> 3140 3141<!-- Tabs Section --> 3142<div class="bg-black px-4 py-3"> 3143 <div class="flex justify-between items-center"> 3144 <button class="text-white font-bold text-[10px] border-b-2 border-white pb-1 transition-opacity duration-200 hover:opacity-70">Todos</button> 3145 <button class="text-gray-400 font-bold text-[10px] transition-opacity duration-200 hover:opacity-70">Expirado</button> 3146 </div> 3147</div> 3148 3149<!-- Content Area --> 3150<div class="bg-black flex-1 px-4 py-4 overflow-y-auto pb-24"> 3151 <!-- Sorteio 1 - Fone Bluetooth JBL --> 3152 <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 3153 <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0"> 3154 <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-fone-bluetooth-jbl-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3155 alt="Fone Bluetooth JBL" 3156 class="w-16 h-16 object-cover rounded"> 3157 </div> 3158 <div class="flex-1"> 3159 <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de um Fone Bluetooth JBL</h3> 3160 <p class="text-white/80 text-[8px] mb-1">de: 05/08/2025 08:00</p> 3161 <p class="text-white/80 text-[8px]">até: 05/12/2025 08:00</p> 3162 </div> 3163 </div> 3164 3165 <!-- Sorteio 2 - Apple Watch Series 9 --> 3166 <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 3167 <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0"> 3168 <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-apple-watch-series-9-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3169 alt="Apple Watch Series 9" 3170 class="w-16 h-16 object-cover rounded"> 3171 </div> 3172 <div class="flex-1"> 3173 <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de um Apple Watch Series 9</h3> 3174 <p class="text-white/80 text-[8px] mb-1">de: 25/08/2025 11:00</p> 3175 <p class="text-white/80 text-[8px]">até: 15/09/2025 11:00</p> 3176 </div> 3177 </div> 3178 3179 <!-- Sorteio 3 - Ingressos Arena Sertaneja --> 3180 <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 3181 <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0"> 3182 <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-ingressos-show-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3183 alt="Arena Sertaneja 2025" 3184 class="w-16 h-16 object-cover rounded"> 3185 </div> 3186 <div class="flex-1"> 3187 <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de 02 Ingressos para a Arena Sertaneja 2025</h3> 3188 <p class="text-white/80 text-[8px] mb-1">de: 25/08/2025 11:00</p> 3189 <p class="text-white/80 text-[8px]">até: 25/11/2025 11:00</p> 3190 </div> 3191 </div> 3192 3193 <!-- Sorteio 4 - Caldas Country --> 3194 <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;"> 3195 <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0"> 3196 <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-ingressos-caldas-country-festival-2025-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3197 alt="Caldas Country 2025" 3198 class="w-16 h-16 object-cover rounded"> 3199 </div> 3200 <div class="flex-1"> 3201 <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de Ingressos â Caldas Country 2025</h3> 3202 <p class="text-white/80 text-[8px] mb-1">de: 28/08/2025 11:00</p> 3203 <p class="text-white/80 text-[8px]">até: 28/10/2025 11:00</p> 3204 </div> 3205 </div> 3206</div> 3207 3208<!-- Pagination --> 3209<div class="bg-black flex justify-center items-center py-4 gap-4"> 3210 <i class="fas fa-chevron-left text-white text-lg transition-opacity duration-200 hover:opacity-70 cursor-pointer"></i> 3211 <span class="text-white font-bold text-lg">1</span> 3212 <i class="fas fa-chevron-right text-white text-lg transition-opacity duration-200 hover:opacity-70 cursor-pointer"></i> 3213</div> 3214 3215<!-- Bottom Navigation --> 3216<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 3217 <div class="flex justify-around items-center"> 3218 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3219 <i class="fas fa-home text-sm mb-1"></i> 3220 </button> 3221 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3222 <i class="fas fa-radio text-sm mb-1"></i> 3223 </button> 3224 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3225 <i class="fas fa-gift text-sm mb-1"></i> 3226 </button> 3227 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3228 <i class="fas fa-music text-sm mb-1"></i> 3229 </button> 3230 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3231 <i class="fas fa-play text-sm mb-1"></i> 3232 </button> 3233 </div> 3234 <!-- Home Indicator --> 3235 <div class="flex justify-center mt-2"> 3236 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 3237 </div> 3238</div> </div> 3239 3240 <!-- Página Spotify (oculta inicialmente) --> 3241 <div id="page-spotify" class="app-page hidden" role="tabpanel" aria-labelledby="nav-spotify"> 3242 <!-- Status Bar --> 3243<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;"> 3244 <span>10:23</span> 3245 <div class="flex items-center gap-1"> 3246 <i class="fas fa-signal text-xs"></i> 3247 <i class="fas fa-wifi text-xs"></i> 3248 <div class="bg-white text-black px-1 rounded text-[10px] font-bold">86</div> 3249 </div> 3250</div> 3251 3252<!-- Header --> 3253<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;"> 3254 <div class="flex-1 flex justify-center"> 3255 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 3256 alt="JMV News Logo" 3257 class="h-4 object-contain"> 3258 </div> 3259 <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center"> 3260 <i class="fas fa-user text-black text-[8px]"></i> 3261 </div> 3262</div> 3263 3264<!-- Search Section --> 3265<div class="bg-black px-4 py-4 flex items-center gap-4"> 3266 <h1 class="text-white font-bold text-lg flex-1">Artistas</h1> 3267 <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: #7D1B1A;"> 3268 <i class="fas fa-search text-white text-sm"></i> 3269 </div> 3270</div> 3271 3272<!-- Content Area --> 3273<div class="bg-black flex-1 px-4 py-4 overflow-y-auto pb-24"> 3274 <!-- Artists Grid --> 3275 <div class="grid grid-cols-2 gap-2">
3276 <!-- Gusttavo Lima --> 3277 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3278 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3279 <img src="assets/images/imagens-app-personalizacao/spotify/gusttavo-lima-buteco-in-boston-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3280 alt="Gusttavo Lima" 3281 class="w-full h-full object-cover"> 3282 </div> 3283 <p class="text-white text-[9px] font-medium text-center">Gusttavo Lima</p> 3284 </div> 3285 3286 <!-- César Menotti & Fabiano --> 3287 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3288 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3289 <img src="assets/images/imagens-app-personalizacao/spotify/cesar-menotti-e-fabiano-intensidade-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3290 alt="César Menotti & Fabiano" 3291 class="w-full h-full object-cover"> 3292 </div> 3293 <p class="text-white text-[9px] font-medium text-center">César Menotti & Fabia...</p> 3294 </div> 3295 3296 <!-- Jorge & Mateus --> 3297 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3298 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3299 <img src="assets/images/imagens-app-personalizacao/spotify/jorge-e-mateus-tudo-em-paz-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3300 alt="Jorge & Mateus" 3301 class="w-full h-full object-cover"> 3302 </div> 3303 <p class="text-white text-[9px] font-medium text-center">Jorge & Mateus</p> 3304 </div> 3305 3306 <!-- Bruno & Marrone --> 3307 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3308 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3309 <img src="assets/images/imagens-app-personalizacao/spotify/bruno-e-marrone-sertanejo-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3310 alt="Bruno & Marrone" 3311 class="w-full h-full object-cover"> 3312 </div> 3313 <p class="text-white text-[9px] font-medium text-center">Bruno & Marrone</p> 3314 </div> 3315 3316 <!-- Fernando & Sorocaba --> 3317 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3318 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3319 <img src="assets/images/imagens-app-personalizacao/spotify/fernando-e-sorocaba-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3320 alt="Fernando & Sorocaba" 3321 class="w-full h-full object-cover"> 3322 </div> 3323 <p class="text-white text-[9px] font-medium text-center">Fernando & Sorocaba</p> 3324 </div> 3325 3326 <!-- Henrique & Juliano --> 3327 <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer"> 3328 <div class="w-24 h-24 rounded-full overflow-hidden mb-2"> 3329 <img src="assets/images/imagens-app-personalizacao/spotify/henrique-e-juliano-rancorosa-streaming-jmv-news-jmv-stream-jmv-technology.webp" 3330 alt="Henrique & Juliano" 3331 class="w-full h-full object-cover"> 3332 </div> 3333 <p class="text-white text-[9px] font-medium text-center">Henrique & Juliano</p> 3334 </div> 3335 </div> 3336</div> 3337 3338<!-- Bottom Navigation --> 3339<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;"> 3340 <div class="flex justify-around items-center"> 3341 <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3342 <i class="fas fa-home text-sm mb-1"></i> 3343 </button> 3344 <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3345 <i class="fas fa-radio text-sm mb-1"></i> 3346 </button> 3347 <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3348 <i class="fas fa-gift text-sm mb-1"></i> 3349 </button> 3350 <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3351 <i class="fas fa-music text-sm mb-1"></i> 3352 </button> 3353 <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70"> 3354 <i class="fas fa-play text-sm mb-1"></i> 3355 </button> 3356 </div> 3357 <!-- Home Indicator --> 3358 <div class="flex justify-center mt-2"> 3359 <div class="w-32 h-1 bg-white/30 rounded-full"></div> 3360 </div> 3361</div> </div> 3362 </div> 3363 </div> 3364 3365 <!-- Side buttons --> 3366 <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-600 rounded-l-sm" aria-hidden="true"></div> 3367 <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-600 rounded-l-sm" aria-hidden="true"></div> 3368 <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-600 rounded-l-sm" aria-hidden="true"></div> 3369 <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-600 rounded-r-sm" aria-hidden="true"></div> 3370 </div> 3371 </div> 3372 </div> 3373 3374 <!-- Conteúdo de Personalização --> 3375 <div class="text-white"> 3376 <h2 id="personalizacao-title" class="text-3xl md:text-4xl font-bold mb-4"> 3377 Personalize como quiser 3378 </h2> 3379 <p class="text-gray-300 mb-8"> 3380 A cara da sua rádio, no app totalmente seu. 3381 </p> 3382 3383 <!-- Controles de Personalização --> 3384 <div class="grid md:grid-cols-2 gap-6 mb-8" role="region" aria-label="Controles de personalização"> 3385 <!-- Seletor de Cor --> 3386 <div class="bg-gray-800 rounded-lg p-6"> 3387 <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> 3388 <i class="fas fa-palette" aria-hidden="true"></i> 3389 Escolha sua Cor 3390 </h3> 3391 <p class="text-gray-300 text-sm mb-4"> 3392 Personalize a cor principal do seu app 3393 </p> 3394 <div class="flex items-center gap-4"> 3395 <label for="colorPicker" class="sr-only">Seletor de cor do aplicativo</label> 3396 <input type="color" 3397 id="colorPicker" 3398 value="#7D1B1A" 3399 class="w-16 h-16 rounded-lg border-2 border-gray-600 cursor-pointer" 3400 aria-describedby="colorHex" 3401 title="Escolha a cor principal do aplicativo"> 3402 <div> 3403 <div class="text-sm font-medium mb-1">Cor Atual:</div> 3404 <div id="colorHex" class="text-xs text-gray-400 font-mono" aria-l
3404ive="polite">#7D1B1A</div> 3405 </div> 3406 </div> 3407 <button id="resetColor" 3408 class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-500 transition-colors" 3409 title="Restaurar cor padrão do aplicativo" 3410 aria-label="Restaurar cor original"> 3411 Restaurar Cor Original 3412 </button> 3413 </div> 3414 3415 <!-- Upload de Logo --> 3416 <div class="bg-gray-800 rounded-lg p-6"> 3417 <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> 3418 <i class="fas fa-image" aria-hidden="true"></i> 3419 Sua Logo 3420 </h3> 3421 <p class="text-gray-300 text-sm mb-4"> 3422 Envie seu logo (PNG, JPG - max 2MB) 3423 </p> 3424 <div class="space-y-4"> 3425 <label for="logoUpload" class="sr-only">Enviar logo personalizada</label> 3426 <input type="file" 3427 id="logoUpload" 3428 accept="image/png,image/jpg,image/jpeg" 3429 class="w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 file:cursor-pointer" 3430 aria-describedby="logo-help" 3431 title="Selecione um arquivo de imagem para logo"> 3432 <div id="logo-help" class="sr-only">Formatos aceitos: PNG, JPG, JPEG. Tamanho máximo: 2MB</div> 3433 <div class="flex gap-2" role="group" aria-label="Ações da logo"> 3434 <button id="previewLogo" 3435 class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors" 3436 title="Aplicar logo selecionada no aplicativo" 3437 aria-label="Aplicar logo ao aplicativo"> 3438 Aplicar Logo 3439 </button> 3440 <button id="resetLogo" 3441 class="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-500 transition-colors" 3442 title="Restaurar logo padrão" 3443 aria-label="Restaurar logo original"> 3444 Logo Original 3445 </button> 3446 </div> 3447 </div> 3448 </div> 3449 </div> 3450 3451 3452 <!-- Navegação --> 3453 <div role="region" aria-labelledby="nav-title"> 3454 <h3 id="nav-title" class="text-white font-semibold mb-4"> 3455 Veja cada página clicando no botão abaixo: 3456 </h3> 3457 <div class="flex flex-wrap gap-3 mb-6" role="tablist" aria-label="Páginas do aplicativo"> 3458 <button id="nav-inicio" 3459 class="bg-white text-black px-4 py-2 rounded-full text-sm font-semibold hover:bg-gray-200 transition-colors flex items-center gap-2" 3460 role="tab" 3461 aria-selected="true" 3462 aria-controls="page-inicio" 3463 title="Visualizar página inicial do aplicativo"> 3464 <i class="fas fa-home text-xs" aria-hidden="true"></i> 3465 InÃcio 3466 </button> 3467 <button id="nav-contato" 3468 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3469 role="tab" 3470 aria-selected="false" 3471 aria-controls="page-contato" 3472 title="Visualizar página de contato"> 3473 <i class="fas fa-phone text-xs" aria-hidden="true"></i> 3474 Contato 3475 </button> 3476 <button id="nav-videos" 3477 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3478 role="tab" 3479 aria-selected="false" 3480 aria-controls="page-videos" 3481 title="Visualizar página de transmissão ao vivo"> 3482 <i class="fas fa-play text-xs" aria-hidden="true"></i> 3483 Ao Vivo 3484 </button> 3485 <button id="nav-programacao" 3486 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3487 role="tab" 3488 aria-selected="false" 3489 aria-controls="page-programacao" 3490 title="Visualizar programação da rádio"> 3491 <i class="fas fa-calendar text-xs" aria-hidden="true"></i> 3492 Programação 3493 </button> 3494 <button id="nav-top10" 3495 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3496 role="tab" 3497 aria-selected="false" 3498 aria-controls="page-top10" 3499 title="Visualizar top 10 das músicas"> 3500 <i class="fas fa-list-ol text-xs" aria-hidden="true"></i> 3501 Top 10 3502 </button> 3503 <button id="nav-pedido" 3504 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3505 role="tab" 3506 aria-selected="false" 3507 aria-controls="page-pedido" 3508 title="Visualizar página de pedidos musicais"> 3509 <i class="fas fa-radio text-xs" aria-hidden="true"></i> 3510 Pedido 3511 </button> 3512 <button id="nav-sorteios" 3513 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3514 role="tab" 3515 aria-selected="false" 3516 aria-controls="page-sorteios" 3517 title="Visualizar página de sorteios"> 3518 <i class="fas fa-gift text-xs" aria-hidden="true"></i> 3519 Sorteios 3520 </button> 3521 <button id="nav-spotify" 3522 class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2" 3523 role="tab" 3524 aria-selected="false" 3525 aria-controls="page-spotify" 3526 title="Visualizar integração com Spotify"> 3527 <i class="fas fa-music text-xs" aria-hidden="true"></i> 3528 Spotify 3529 </button> 3530 </div> 3531 3532 <!-- Botão CTA --> 3533 <div class="text-center"> 3534 <a href="#contato-jmv-news-ecossistema-crossmedia" 3535 class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover-reflect" 3536 title="Entre em contato com nossos especialistas" 3537 aria-label="Falar com especialista sobre o aplicativo"> 3538 <i class="fas fa-comments mr-2" aria-hidden="true"></i> 3539 Falar com um Especialista 3540 </a> 3541 </div> 3542 </div> 3543 </div> 3544 </div> 3545 </div> 3546</section> 3547 3548 3549<style> 3550 /* Color Picker Styling */ 3551 #colorPicker { 3552 -webkit-appearance: none; 3553 -moz-appearance: none; 3554 appearance: none; 3555 background: none; 3556 border: 2px solid #4B5563; 3557 cursor: pointer; 3558 transition: all 0.3s ease; 3559 } 3560 3561 #colorPicker::-webkit-color-swatch { 3562 border-radius: 8px; 3563 border: none; 3564 } 3565 3566 #colorPicker::-moz-color-swatch { 3567 border-radius: 8px; 3568 border: none; 3569 } 3570 3571 #colorPicker:hover { 3572 border-color: #9CA3AF; 3573 transform: scale(1.05); 3574 } 3575 3576 /* Logo Upload Styling */ 3577 #logoUpload::-webkit-file-upload-button { 3578 background: #2563EB; 3579 color: white; 3580 border: none; 3581 border-radius: 8px; 3582 padding: 8px 16px; 3583 cursor: pointer; 3584 font-size: 14px; 3585 font-weight: 600; 3586 transition: background 0.3s ease; 3587 } 3588 3589 #logoUpload::-webkit-file-upload-button:hover { 3590 background: #1D4ED8; 3591 } 3592 3593 /* Garantir tamanho adequado das logos no app mockup */ 3594 #app-content img[alt*="JMV News Logo"], 3595 #app-content img[alt*="JMV News"], 3596 #app-content img[src*="logo-jmv-news"] { 3597 max-width: 120px !important; 3598 max-height: 32px !important; 3599 width: auto !important; 3600 height: auto !important; 3601 object-fit: contain !important; 3602 object-position: center !important; 3603 } 3604 3605 /* Logo rotativa no quadrado branco - tamanho máximo 32px (8 * 4px) */ 3606 #app-content .animate-spin-slow { 3607 max-width: 32px !important; 3608 max-height: 32px !important; 3609 width: auto !important; 3610 height: auto !important; 3611 object-fit: contain !important; 3612 object-position: center !important; 3613 } 3614 3615 /* Regra ainda mais especÃfica para garantir o tamanho */ 3616 #app-content .logo-rotativa-fixa, 3617 #app-content img.logo-rotativa-fixa { 3618 max-width: 32px !important; 3619 max-height: 32px !important; 3620 width: auto !important; 3621 height: auto !important; 3622 object-fit: contain !important; 3623 } 3624 3625 .swiper-pagination-banner { 3626 bottom: 8px !important; 3627 left: 50% !important; 3628 transform: translateX(-50%) !important; 3629 width: auto !important; 3630 } 3631 3632 .swiper-pagination-banner .swiper-pagination-bullet { 3633 background: rgba(255, 255, 255, 0.6) !important; 3634 width: 6px !important; 3635 height: 6px !important; 3636 margin: 0 2px !important; 3637 } 3638 3639 .swiper-pagination-banner .swiper-pagination-bullet-active { 3640 background: white !important; 3641 transform: scale(1.2) !important; 3642 } 3643 3644 /* Estilos para navegação SPA */ 3645 .app-page { 3646 width: 100%; 3647 height: 100%; 3648 position: absolute; 3649 top: 0; 3650 left: 0; 3651 transition: all 0.3s ease-in-out; 3652 } 3653 3654 .app-page.hidden { 3655 opacity: 0; 3656 transform: translateX(100%); 3657 pointer-events: none; 3658 } 3659 3660 .app-page.active { 3661 opacity: 1;
3662 transform: translateX(0); 3663 pointer-events: auto; 3664 } 3665 3666 /* Esconder scrollbar em todos os elementos */ 3667 * { 3668 scrollbar-width: none; /* Firefox */ 3669 -ms-overflow-style: none; /* Internet Explorer 10+ */ 3670 } 3671 3672 *::-webkit-scrollbar { 3673 width: 0px; 3674 background: transparent; /* Chrome/Safari/Webkit */ 3675 } 3676 3677 *::-webkit-scrollbar-thumb { 3678 background: transparent; 3679 } 3680 3681 /* Garantir que o scroll funcione mas seja invisÃvel */ 3682 .overflow-y-auto { 3683 scrollbar-width: none; 3684 -ms-overflow-style: none; 3685 } 3686 3687 .overflow-y-auto::-webkit-scrollbar { 3688 display: none; 3689 } 3690</style> 3691
3692<script> 3693 document.addEventListener('DOMContentLoaded', function () { 3694 // Banner Swiper 3695 const bannerSwiper = new Swiper('.bannerSwiper', { 3696 loop: true, 3697 autoplay: { 3698 delay: 3000, 3699 disableOnInteraction: false, 3700 }, 3701 effect: 'slide', 3702 speed: 500, 3703 pagination: { 3704 el: '.swiper-pagination-banner', 3705 clickable: true, 3706 }, 3707 }); 3708 3709 // Sistema de Navegação SPA 3710 window.AppNavigation = { 3711 currentPage: 'inicio', 3712 3713 // Navegar para uma página 3714 navigateTo: function(pageId) { 3715 // Ocultar página atual 3716 const currentPageElement = document.getElementById(`page-${this.currentPage}`); 3717 if (currentPageElement) { 3718 currentPageElement.classList.remove('active'); 3719 currentPageElement.classList.add('hidden'); 3720 } 3721 3722 // Mostrar nova página 3723 const newPageElement = document.getElementById(`page-${pageId}`); 3724 if (newPageElement) { 3725 newPageElement.classList.remove('hidden'); 3726 newPageElement.classList.add('active'); 3727 this.currentPage = pageId; 3728 } 3729 }, 3730 3731 // Voltar para página anterior (por enquanto só volta para inÃcio) 3732 goBack: function() { 3733 this.navigateTo('inicio'); 3734 } 3735 }; 3736 3737 // Event listeners para botões de navegação 3738 document.addEventListener('click', function(e) { 3739 // Debug - verificar cliques 3740 console.log('Clique detectado:', e.target); 3741 3742 // Botão Contato 3743 if (e.target.closest('[data-nav="contato"]')) { 3744 e.preventDefault(); 3745 console.log('Navegando para contato'); 3746 AppNavigation.navigateTo('contato'); 3747 } 3748 3749 // Botão VÃdeos 3750 if (e.target.closest('[data-nav="videos"]')) { 3751 e.preventDefault(); 3752 console.log('Navegando para videos'); 3753 AppNavigation.navigateTo('videos'); 3754 } 3755 3756 // Botão Programação 3757 if (e.target.closest('[data-nav="programacao"]')) { 3758 e.preventDefault(); 3759 console.log('Navegando para programacao'); 3760 AppNavigation.navigateTo('programacao'); 3761 } 3762 3763 // Botão Spotify (Nota Musical) 3764 if (e.target.closest('[data-nav="spotify"]')) { 3765 e.preventDefault(); 3766 console.log('Navegando para spotify'); 3767 AppNavigation.navigateTo('spotify'); 3768 } 3769 3770 // Botão Top 10 3771 if (e.target.closest('[data-nav="top10"]')) { 3772 e.preventDefault(); 3773 console.log('Navegando para top10'); 3774 AppNavigation.navigateTo('top10'); 3775 } 3776 3777 // Botão Pedido (Rádio) 3778 if (e.target.closest('[data-nav="pedido"]')) { 3779 e.preventDefault(); 3780 console.log('Navegando para pedido'); 3781 AppNavigation.navigateTo('pedido'); 3782 } 3783 3784 // Botão Sorteios (Presente) 3785 if (e.target.closest('[data-nav="sorteios"]')) { 3786 e.preventDefault(); 3787 console.log('Navegando para sorteios'); 3788 AppNavigation.navigateTo('sorteios'); 3789 } 3790 3791 // Botão Home (voltar) 3792 if (e.target.closest('[data-nav="home"]')) { 3793 e.preventDefault(); 3794 console.log('Navegando para inicio'); 3795 AppNavigation.navigateTo('inicio'); 3796 } 3797 3798 // Botão InÃcio 3799 if (e.target.closest('[data-nav="inicio"]')) { 3800 e.preventDefault(); 3801 console.log('Navegando para inicio'); 3802 AppNavigation.navigateTo('inicio'); 3803 } 3804 3805 // Seta de voltar 3806 if (e.target.closest('.back-button')) { 3807 e.preventDefault(); 3808 console.log('Voltando'); 3809 AppNavigation.goBack(); 3810 } 3811 }); 3812 3813 // Sistema de Personalização 3814 const PersonalizationSystem = { 3815 originalColor: '#7D1B1A', 3816 originalLogo: 'assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp', 3817 currentColor: '#7D1B1A', // Rastrear cor atual 3818 targetElements: [], // Cache dos elementos que devem ter cor personalizada 3819 3820 // Inicializar e mapear elementos que devem ter cor personalizada 3821 init: function() { 3822 const phoneContainer = document.querySelector('#a
3822pp-content'); 3823 if (!phoneContainer) { 3824 console.warn('Container do smartphone não encontrado'); 3825 return; 3826 } 3827 3828 // Encontrar e marcar todos os elementos que têm a cor original 3829 const elementsWithOriginalColor = phoneContainer.querySelectorAll('[style*="background-color: #7D1B1A"], [style*="background-color:#7D1B1A"], [style*="background-color: rgb(125, 27, 26)"]'); 3830 //console.log('Elementos encontrados:', elementsWithOriginalColor); 3831 // Marcar elementos para fácil identificação posterior 3832 elementsWithOriginalColor.forEach(element => { 3833 element.setAttribute('data-customizable', 'true'); 3834 this.targetElements.push(element); 3835 }); 3836 3837 console.log('Elementos personalizáveis encontrados:', this.targetElements.length); 3838 }, 3839 3840 // Aplicar cor personalizada APENAS no mockup do celular 3841 applyCustomColor: function(newColor) { 3842 const phoneContainer = document.querySelector('#app-content'); 3843 if (!phoneContainer) { 3844 console.warn('Container do smartphone não encontrado'); 3845 return; 3846 } 3847 3848 // Buscar TODOS os elementos marcados como personalizáveis 3849 const elementsToUpdate = phoneContainer.querySelectorAll('[data-customizable="true"]'); 3850 3851 elementsToUpdate.forEach(element => { 3852 // Simplesmente definir a nova cor, independente da cor atual 3853 const currentStyle = element.getAttribute('style') || ''; 3854 3855 // Remover qualquer background-color existente e adicionar o novo 3856 let newStyle = currentStyle.replace(/background-color:\s*[^;]+;?/gi, ''); 3857 newStyle += `background-color: ${newColor};`; 3858 3859 element.setAttribute('style', newStyle); 3860 }); 3861 3862 // Atualizar cor atual 3863 this.currentColor = newColor; 3864 3865 console.log('Cor aplicada no mockup:', newColor, 'em', elementsToUpdate.length, 'elementos'); 3866 }, 3867 3868 // Aplicar logo personalizada APENAS no mockup 3869 applyCustomLogo: function(logoSrc) { 3870 const phoneContainer = document.querySelector('#app-content'); 3871 if (!phoneContainer) { 3872 console.warn('Container do smartphone não encontrado'); 3873 return; 3874 } 3875 3876 // Buscar logos apenas dentro do mockup 3877 const logoElements = phoneContainer.querySelectorAll('img[alt*="JMV News Logo"], img[alt*="JMV News"], img[src*="logo-jmv-news"]'); 3878 3879 logoElements.forEach(img => { 3880 img.src = logoSrc; 3881 // Garantir tamanho adequado da logo 3882 img.style.maxWidth = '120px'; 3883 img.style.maxHeight = '32px'; 3884 img.style.width = 'auto'; 3885 img.style.height = 'auto'; 3886 img.style.objectFit = 'contain'; 3887 img.style.objectPosition = 'center'; 3888 }); 3889 3890 console.log('Logo aplicada no mockup com dimensões otimizadas:', logoSrc); 3891 }, 3892 3893 // Restaurar configurações originais 3894 resetToOriginal: function() { 3895 this.applyCustomColor(this.originalColor); 3896 this.applyCustomLogo(this.originalLogo); 3897 this.currentColor = this.originalColor; 3898 3899 // Resetar controles 3900 const colorPicker = document.getElementById('colorPicker'); 3901 const colorHex = document.getElementById('colorHex'); 3902 const logoUpload = document.getElementById('logoUpload'); 3903 3904 if (colorPicker) colorPicker.value = this.originalColor; 3905 if (colorHex) colorHex.textContent = this.originalColor; 3906 if (logoUpload) logoUpload.value = ''; 3907 3908 console.log('Configurações restauradas para cor original:', this.originalColor); 3909 } 3910 }; 3911 3912 // Inicializar sistema quando a página carrega
3913 PersonalizationSystem.init(); 3914 3915 // Event Listeners para Personalização 3916 3917 // Seletor de Cor 3918 const colorPicker = document.getElementById('colorPicker'); 3919 const colorHex = document.getElementById('colorHex'); 3920 3921 if (colorPicker && colorHex) { 3922 colorPicker.addEventListener('input', function() { 3923 const newColor = this.value; 3924 colorHex.textContent = newColor; 3925 PersonalizationSystem.applyCustomColor(newColor); 3926 }); 3927 } 3928 3929 // Reset de Cor 3930 const resetColorBtn = document.getElementById('resetColor'); 3931 if (resetColorBtn) { 3932 resetColorBtn.addEventListener('click', function() { 3933 PersonalizationSystem.resetToOriginal(); 3934 }); 3935 } 3936 3937 // Upload de Logo 3938 const logoUpload = document.getElementById('logoUpload'); 3939 const previewLogoBtn = document.getElementById('previewLogo'); 3940 const resetLogoBtn = document.getElementById('resetLogo'); 3941 3942 if (previewLogoBtn && logoUpload) { 3943 previewLogoBtn.addEventListener('click', function() { 3944 const file = logoUpload.files[0]; 3945 if (file) { 3946 // Verificar tamanho do arquivo (max 2MB) 3947 if (file.size > 2 * 1024 * 1024) { 3948 alert('Arquivo muito grande! Máximo 2MB.'); 3949 return; 3950 } 3951 3952 // Criar URL do arquivo para preview 3953 const reader = new FileReader(); 3954 reader.onload = function(e) { 3955 PersonalizationSystem.applyCustomLogo(e.target.result); 3956 }; 3957 reader.readAsDataURL(file); 3958 } else { 3959 alert('Selecione um arquivo primeiro!'); 3960 } 3961 }); 3962 } 3963 3964 // Reset de Logo 3965 if (resetLogoBtn && logoUpload) { 3966 resetLogoBtn.addEventListener('click', function() { 3967 PersonalizationSystem.applyCustomLogo(PersonalizationSystem.originalLogo); 3968 logoUpload.value = ''; 3969 }); 3970 } 3971 3972 // Event Listeners para Botões de Navegação do Mockup 3973 const navigationButtons = { 3974 'nav-inicio': 'inicio', 3975 'nav-contato': 'contato', 3976 'nav-videos': 'videos', 3977 'nav-programacao': 'programacao', 3978 'nav-top10': 'top10', 3979 'nav-pedido': 'pedido', 3980 'nav-sorteios': 'sorteios', 3981 'nav-spotify': 'spotify' 3982 }; 3983 3984 // Adicionar event listeners para cada botão 3985 Object.keys(navigationButtons).forEach(buttonId => { 3986 const button = document.getElementById(buttonId); 3987 const pageId = navigationButtons[buttonId]; 3988 3989 if (button) { 3990 button.addEventListener('click', function() { 3991 // Remover classe ativa de todos os botões 3992 Object.keys(navigationButtons).forEach(id => { 3993 const btn = document.getElementById(id); 3994 if (btn) { 3995 btn.classList.remove('bg-white', 'text-black'); 3996 btn.classList.add('bg-transparent', 'border', 'border-white', 'text-white'); 3997 } 3998 }); 3999 4000 // Adicionar classe ativa ao botão clicado 4001 this.classList.remove('bg-transparent', 'border', 'border-white', 'text-white'); 4002 this.classList.add('bg-white', 'text-black'); 4003 4004 // Navegar para a página no mockup 4005 console.log('Navegando para:', pageId); 4006 AppNavigation.navigateTo(pageId); 4007 }); 4008 } 4009 }); 4010 4011 });
4012</script>
4012<section class="py-16 bg-gray-50" aria-labelledby="integracao-site-title"> 4013 <div class="container mx-auto px-4 lg:px-8"> 4014 <div class="grid items-center gap-10 lg:grid-cols-2"> 4015 <!-- Imagem --> 4016 <div class="relative hover-reflect" role="img" aria-label="Demonstração da integração entre aplicativo e site"> 4017 <img src="assets/images/mockup-app-site-jmv-news-integracao-radio-tv-streaming-web-noticias-jmv-technology.webp" 4018 alt="Mockup mostrando aplicativo Cross Media e site JMV News com integração completa entre rádio, TV, streaming e portal de notÃcias" 4019 class="w-full h-auto rounded-2xl shadow-lg" 4020 loading="lazy" 4021 width="600" 4022 height="400" /> 4023 </div> 4024 4025 <!-- Texto --> 4026 <article> 4027 <div class="mb-4"> 4028 <span class="inline-block text-sm font-semibold text-blue-600 uppercase tracking-wide bg-white px-3 py-1 rounded-full border border-blue-200 shadow-sm" 4029 role="note" 4030 aria-label="Recurso destacado"> 4031 <abbr title="Inteligência Artificial">COM TECNOLOGIA DE I.A</abbr> 4032 </span> 4033 </div> 4034 4035 <h2 id="integracao-site-title" class="text-3xl md:text-4xl font-bold text-gray-900 mb-6"> 4036 Integração Cross Media Completa 4037 </h2> 4038 <div class="text-gray-700 mb-6 leading-relaxed max-w-xl space-y-4"> 4039 <p> 4040 Seu aplicativo integrado com seu próprio <strong class="text-gray-900">site</strong> â é uma solução Cross Media que amplia alcance e engajamento. 4041 </p> 4042 <p> 4043 Publique conteúdos, organize programação e mantenha sua audiência sempre informada. 4044 </p> 4045 <p> 4046 O site pode ainda incluir <strong class="text-gray-900">notÃcias diárias automáticas geradas por <abbr title="Inteligência Artificial">IA</abbr></strong>, ampliando o alcance da sua marca sem esforço extra. 4047 </p> 4048 </div> 4049 4050 <div> 4051 <a href="https://jmvnews.com/" 4052 class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 4053 aria-label="Conhecer o site-modelo com integração completa" 4054 title="Visualizar exemplo de site integrado ao aplicativo"> 4055 <i class="fas fa-globe mr-3" aria-hidden="true"></i> 4056 Conhecer o Site-Modelo 4057 </a> 4058 </div> 4059 </article> 4060 </div> 4061 </div> 4062</section><section class="py-24 px-4 bg-black" aria-labelledby="cases-sucesso-title"> 4063 <div class="max-w-6xl mx-auto"> 4064 <!-- TÃtulo centralizado --> 4065 <h2 id="cases-sucesso-title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white text-center mb-16"> 4066 Cases de Sucesso 4067 </h2> 4068 4069 <div class="grid lg:grid-cols-2 items-center gap-12"> 4070 <!-- Player de vÃdeo --> 4071 <div class="relative" role="region" aria-label="VÃdeo demonstrativo da Univale TV"> 4072 <div class="w-full max-w-sm mx-auto"> 4073 <div class="relative rounded-xl overflow-hidden shadow-xl bg-black"> 4074 <iframe 4075 src="https://player.jmvstream.com/GABVbodAEtgzfslejLJCLmCTkVmc4I/32l5pw3v2111202" 4076 allow="autoplay; fullscreen;" 4077 allowfullscreen 4078 class="w-full h-[500px] md:h-[600px] border-0" 4079 title="VÃdeo demonstrativo dos serviços de streaming e tecnologia da JMV Technology para Univale TV" 4080 tabindex="0" 4081 frameborder="0" 4082 aria-label="Player de vÃdeo mostrando case de sucesso da Univale TV" 4083 width="400" 4084 height="600"> 4085 </iframe> 4086 </div> 4087 </div> 4088 </div> 4089 4090 <!-- Conteúdo do depoimento --> 4091 <article class="bg-white rounded-2xl p-8 shadow-xl" role="complementary"> 4092 <!-- Logo da Univale TV --> 4093 <div class="flex justify-center mb-6"> 4094 <img src="assets/images/logo-univale-tv-logomarca-oficial-canal-universitario-tv-educativa-streaming-jmv-technology.webp" 4095 alt="Logomarca oficial da Univale TV - Canal Universitário de TV Educativa" 4096 class="h-16 md:h-20 w-auto object-contain" 4097 loading="lazy" 4098 width="120" 4099 height="80"> 4100 </div> 4101 4102 <h3 class="text-xl font-bold text-gray-900 mb-6 text-center"> 4103 <abbr title="Universidade Vale do Rio Doce">Univale</abbr> TV - <span class="text-sm font-normal">FUNDAÃÃO PERCIVAL FARQUHAR</span> 4104 </h3> 4105 4106 <div class="rounded-lg p-6 mb-6">
4107 <p class="text-gray-700 mb-4 text-justify leading-relaxed"> 4108 A Univale TV é o canal universitário da <strong>Universidade Vale do Rio Doce</strong>. 4109 </p> 4110 4111 <p class="text-gray-700 mb-4 text-justify leading-relaxed"> 4112 Com conteúdo de <strong class="text-gray-900">alta qualidade</strong>, a emissora leva ao público <strong class="text-gray-900">notÃcias</strong>, 4113 <strong class="text-gray-900">programas e produções acadêmicas</strong> com foco em <strong class="text-gray-900">ensino, pesquisa e 4114 extensão</strong>. 4115 </p> 4116 4117 <p class="text-gray-700 text-justify leading-relaxed"> 4118 Com apoio de professores, cientistas e profissionais de referência, oferece 4119 informação contextualizada e programação que aproxima a comunidade do 4120 <strong class="text-gray-900">conhecimento</strong> produzido dentro da universidade. 4121 </p> 4122 </div> 4123 4124 <div class="text-center"> 4125 <a href="https://tv.univale.br/" 4126 class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 4127 aria-label="Conhecer mais sobre a Univale TV e nossos serviços" 4128 title="Saiba mais sobre o case de sucesso da Univale TV"> 4129 <i class="fas fa-play mr-3" aria-hidden="true"></i> 4130 Conheça a Univale TV 4131 </a> 4132 </div> 4133 </article> 4134 </div> 4135 </div> 4136</section><section 4137 class="w-full bg-gradient-to-b from-gray-50 to-white py-20 px-4" 4138 id="planos-app-radio-jmv" 4139 role="region" 4140 aria-labelledby="titulo-planos" 4141> 4142 <div class="max-w-6xl mx-auto"> 4143 4144 <header class="text-center mb-12 sm:mb-24"> 4145 <h2 4146 id="titulo-planos" 4147 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-red-600 mb-4 revealUp" 4148 > 4149 Escolha o plano ideal para sua rádio 4150 </h2> 4151 4152 <p class="text-gray-600 text-base sm:text-lg max-w-3xl mx-auto revealUp"> 4153 Do aplicativo exclusivo ao ecossistema Cross Media completo. Transforme sua rádio em uma plataforma digital de sucesso. 4154 </p> 4155 </header> 4156 4157 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 pb-8 sm:pb-12" role="list" aria-label="Planos disponÃveis"> 4158 4159 <!-- Plano Start (Só Aplicativo) --> 4160 <article 4161 class="bg-white rounded-2xl border border-gray-200 flex flex-col items-center px-6 py-8 shadow-lg transition duration-300 hover:shadow-xl hover:-translate-y-1 hover:border-red-500 mx-2 sm:mx-0 revealUp" 4162 role="listitem" 4163 aria-labelledby="plano-start-titulo" 4164 > 4165 <h3 id="plano-start-titulo" class="text-xl font-bold text-red-600 mb-1">Start</h3> 4166 <p class="text-gray-500 text-sm mb-4">Aplicativo personalizado para sua rádio</p> 4167 <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço de 270 reais por mês"> 4168 <span class="sr-only">R$</span>R$ 270<span class="text-base font-normal">/mês*</span> 4169 </div> 4170 <div class="text-xs text-gray-400 mb-6 text-center">12x de R$ 270,00 - Pacote anual</div> 4171 <a 4172 href="https://jmvtechnology.com/users/store/planos-personalizados/pacote-completo-radio-start" 4173 class="w-full max-w-[220px] text-center bg-white border-2 border-red-500 text-red-500 font-semibold rounded-lg py-3 mb-6 transition hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 4174 aria-label="Comprar plano Start" 4175 title="Comprar o Plano Start" 4176 target="_blank" 4177 rel="noopener noreferrer" 4178 > 4179 Comprar Agora 4180 </a> 4181 <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Start"> 4182 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>App exclusivo Android e iOS</li> 4183 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Streaming integrado (seu provedor atual)</li> 4184 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Spotify da Rádio (Biblioteca de Ãudio Integrada)</li> 4185 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Sistema de gestão de sorteios integrado</li> 4186 <!-- Removed notÃcias automáticas and push notifications from Start as requested --> 4187 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Personalização visual completa</li> 4188 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Suporte técnico incluso</li> 4189 </ul> 4190 </article> 4191 4192 <!-- Plano Cross Media (Ecossistema Cross Media) --> 4193 <article 4194 class="relative bg-white rounded-2xl border-2 border-red-500 flex flex-col items-center px-7 py-10 shadow-xl z-10 scale-105 md:scale-110 transition duration-300 hover:shadow-2xl hover:-translate-y-2 hover:border-red-700 mx-2 sm:mx-0" 4195 role="listitem" 4196 aria-labelledby="plano-crossmedia-titulo" 4197 aria-describedby="plano-popular-badge" 4198 >
4199 <span 4200 id="plano-popular-badge" 4201 class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white text-xs font-bold py-2 px-4 rounded-full shadow-lg z-20" 4202 role="note" 4203 aria-label="Plano mais popular" 4204 > 4205 MAIS POPULAR 4206 </span> 4207 <h3 id="plano-crossmedia-titulo" class="text-xl font-bold text-red-600 mb-1 mt-2">Cross Media</h3> 4208 <p class="text-gray-500 text-sm mb-4">Ecossistema Cross Media completo para sua rádio</p> 4209 <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço de 470 reais por mês"> 4210 <span class="sr-only">R$</span>R$ 470<span class="text-base font-normal">/mês*</span> 4211 </div> 4212 <div class="text-xs text-gray-400 mb-6 text-center">12x de R$ 470,00 - Pacote anual</div> 4213 <a 4214 href="https://jmvtechnology.com/users/store/planos-personalizados/pacote-completo-radio-full" 4215 class="w-full max-w-[220px] text-center bg-red-500 border-2 border-red-500 text-white font-semibold rounded-lg py-3 mb-6 transition hover:bg-white hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 4216 aria-label="Comprar o plano Cross Media" 4217 title="Comprar o Plano Cross Media" 4218 target="_blank" 4219 rel="noopener noreferrer" 4220 > 4221 Comprar Agora 4222 </a> 4223 <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Cross Media"> 4224 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Tudo do plano Start +</li> 4225 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>CockPit da Rádio â CRM completo para gestão de toda a operação da sua rádio</li> 4226 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Streaming de áudio profissional</li> 4227 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Sistema de pedidos musicais</li> 4228 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>NotÃcias automáticas com IA (Inteligência Artificial)</li> 4229 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Push notifications</li> 4230 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Skill Alexa personalizada</li> 4231 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Streaming de vÃdeo ao vivo/Câmera do Estúdio</li> 4232 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Gravação da Câmera do Estúdio</li> 4233 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Live Social integrado</li> 4234 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>JMV ADS (sistema de anúncios)</li> 4235 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Sistema de enquetes</li> 4236 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Hospedagem de vÃdeos</li> 4237 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Site administrável completo</li> 4238 </ul> 4239 </article> 4240 4241 <!-- Plano Enterprise --> 4242 <article 4243 class="bg-white rounded-2xl border border-gray-200 flex flex-col items-center px-6 py-8 shadow-lg transition duration-300 hover:shadow-xl hover:-translate-y-1 hover:border-red-500 mx-2 sm:mx-0 revealUp" 4244 role="listitem" 4245 aria-labelledby="plano-enterprise-titulo" 4246 > 4247 <h3 id="plano-enterprise-titulo" class="text-xl font-bold text-red-600 mb-1">Enterprise</h3> 4248 <p class="text-gray-500 text-sm mb-4">
4248Acompanhamento estratégico completo</p> 4249 <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço sob consulta"> 4250 Sob<span class="text-base font-normal"> consulta</span> 4251 </div> 4252 <div class="text-xs text-gray-400 mb-6 text-center">12 meses de acompanhamento incluso</div> 4253 <a 4254 href="#contato-jmv-news-ecossistema-crossmedia" 4255 class="w-full max-w-[220px] text-center bg-white border-2 border-red-500 text-red-500 font-semibold rounded-lg py-3 mb-6 transition hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect" 4256 aria-label="Solicitar orçamento para o plano Enterprise" 4257 title="Entrar em contato para solicitar orçamento do plano Enterprise" 4258 > 4259 Solicitar Orçamento 4260 </a> 4261 <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Enterprise"> 4262 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Tudo dos planos anteriores +</li> 4263 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Streaming de áudio profissional</li> 4264 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Plataforma JMV ADS</li> 4265 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Consultorias mensais especializadas</li> 4266 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Acompanhamento em ADS</li> 4267 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Treinamento de equipe</li> 4268 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Curso no Educating incluso</li> 4269 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Mentoria estratégica digital</li> 4270 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Suporte prioritário 24/7</li> 4271 <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">â</span>Análises de performance mensais</li> 4272 </ul> 4273 </article> 4274 4275 </div> 4276 4277 <!-- Informações adicionais --> 4278 <footer class="text-center mt-12"> 4279 <p class="text-gray-600 text-sm mb-2"> 4280 * Todos os planos possuem fidelidade mÃnima de 12 meses. 4281 </p> 4282 <p class="text-gray-600 text-base"> 4283 <span class="font-semibold text-red-600" role="img" aria-label="Presente">ð</span> 4284 <strong>Bônus especial:</strong> Consultoria gratuita para definir qual plano é ideal para sua rádio. 4285 </p> 4286 </footer> 4287 4288 <!-- Aviso sobre prazo de entrega e alinhamento --> 4289 <div class="mt-6 max-w-3xl mx-auto text-center text-gray-600 text-sm"> 4290 <p class="mb-2"><strong>Aviso:</strong> O aplicativo tem prazo de entrega de até <strong>60 dias</strong> após o pagamento da primeira parcela (válido para planos com fidelidade anual).</p> 4291 <p class="mb-0">Após a contratação será agendada uma reunião de alinhamento para definirmos as cores, módulos e demais requisitos do aplicativo.</p> 4292 </div> 4293 </div> 4294</section><section id="duvidas-frequentes-app-jmv-play" class="relative py-16 md:py-20 px-4 overflow-hidden" aria-labelledby="duvidas-title"> 4295 <!-- Background Image --> 4296 <div class="absolute inset-0 z-0" role="img" aria-label="Fundo com gradiente vermelho bordô"> 4297 <img src="assets/images/fundo-background-degrade-vermelho-bordo-gradiente-site-jmv-news-radio-streaming-app.webp" 4298 alt="Fundo com gradiente vermelho bordô para seção de dúvidas frequentes" 4299 class="w-full h-full object-cover" 4300 loading="lazy" 4301 width="1920" 4302 height="1080" /> 4303 <!-- Overlay para melhorar contraste se necessário --> 4304 <div class="absolute inset-0 bg-black/10" aria-hidden="true"></div> 4305 </div> 4306 4307 <div class="max-w-4xl mx-auto relative z-10"> 4308 <!-- TÃtulo e Descrição --> 4309 <header class="text-center mb-12 md:mb-16"> 4310 <h2 id="duvidas-title" class="revdown text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4" data-delay="100"> 4311 Tire Suas Dúvidas 4312 </h2> 4313 <p class="revup text-pink-100 text-base md:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed" data-delay="200"> 4314 Dúvidas mais comuns de usuários e parceiros sobre o JMV News 4315 </p> 4316 </header> 4317 4318 <!-- FAQ Accordion --> 4319 <div class="space-y-4 mb-12 md:mb-16" role="region" aria-label="Perguntas frequentes sobre o JMV News"> 4320 4321 <!-- FAQ Item 1 --> 4322 <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="300"> 4323 <h3> 4324 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4325 onclick="toggleFAQ(this)" 4326 aria-expanded="false" 4327 aria-controls="faq-1">
4328 <span class="text-white font-semibold text-base md:text-lg">1. Preciso mesmo do ECAD?</span> 4329 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4330 </button> 4331 </h3> 4332 <div id="faq-1" class="faq-content px-6 pb-6 hidden" role="region" aria-labelledby="faq-1"> 4333 <div class="text-pink-100 leading-relaxed"> 4334 O <abbr title="Escritório Central de Arrecadação e Distribuição">ECAD</abbr> é obrigatório para rádios que queriam o recurso do "Spotify da Rádio". Se você já possui uma rádio regular, provavelmente já contribui com o ECAD. Para o recurso de áudio on-demand, é necessário estar em dia com essa contribuição. Caso não possua o ECAD, o recurso de áudio on-demand não estará disponÃvel no aplicativo. 4335 </div> 4336 </div> 4337 </article> 4338 4339 <!-- FAQ Item 2 --> 4340 <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="350"> 4341 <h3> 4342 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4343 onclick="toggleFAQ(this)" 4344 aria-expanded="false" 4345 aria-controls="faq-2"> 4346 <span class="text-white font-semibold text-base md:text-lg">2. Já vem incluso o ECAD?</span> 4347 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4348 </button> 4349 </h3> 4350 <div id="faq-2" class="faq-content px-6 pb-6 hidden" role="region"> 4351 <div class="text-pink-100 leading-relaxed"> 4352 Não, o ECAD é uma contribuição que deve ser paga diretamente ao órgão responsável. Nosso sistema funciona integrado com rádios que já possuem essa regularização. 4353 </div> 4354 </div> 4355 </article> 4356 4357 <!-- FAQ Item 3 --> 4358 <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="400"> 4359 <h3> 4360 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4361 onclick="toggleFAQ(this)" 4362 aria-expanded="false" 4363 aria-controls="faq-3"> 4364 <span class="text-white font-semibold text-base md:text-lg">3. Já tenho tudo exceto o aplicativo, posso contratar somente o aplicativo?</span> 4365 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4366 </button> 4367 </h3> 4368 <div id="faq-3" class="faq-content px-6 pb-6 hidden" role="region"> 4369 <div class="text-pink-100 leading-relaxed"> 4370 Sim! Oferecemos o aplicativo de forma independente. Podemos integrar com sua infraestrutura existente, mantendo sua marca e identidade visual. 4371 </div> 4372 </div> 4373 </article> 4374 4375 <!-- FAQ Item 4 --> 4376 <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="450"> 4377 <h3> 4378 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4379 onclick="toggleFAQ(this)" 4380 aria-expanded="false" 4381 aria-controls="faq-4">
4382 <span class="text-white font-semibold text-base md:text-lg">4. Já tenho site, preciso migrar para vocês?</span> 4383 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4384 </button> 4385 </h3> 4386 <div id="faq-4" class="faq-content px-6 pb-6 hidden" role="region"> 4387 <div class="text-pink-100 leading-relaxed"> 4388 Não é necessário migrar! Porém, caso deseje o recurso de notÃcias geradas por <abbr title="Inteligência Artificial">IA</abbr> integradas automaticamente ao aplicativo, seu site precisa ser em WordPress. 4389 </div> 4390 </div> 4391 </article> 4392 4393 <!-- FAQ Item 5 --> 4394 <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="500"> 4395 <h3> 4396 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4397 onclick="toggleFAQ(this)" 4398 aria-expanded="false" 4399 aria-controls="faq-5"> 4400 <span class="text-white font-semibold text-base md:text-lg">5. Qual o prazo para liberação do site e do aplicativo?</span> 4401 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4402 </button> 4403 </h3> 4404 <div id="faq-5" class="faq-content px-6 pb-6 hidden" role="region"> 4405 <div class="text-pink-100 leading-relaxed"> 4406 O prazo médio é de até 60 dias úteis, dependendo da complexidade do projeto e dos recursos solicitados. 4407 </div> 4408 </div> 4409 </article> 4410 4411 <!-- FAQ Item 6 --> 4412 <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="550"> 4413 <h3> 4414 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4415 onclick="toggleFAQ(this)" 4416 aria-expanded="false" 4417 aria-controls="faq-6"> 4418 <span class="text-white font-semibold text-base md:text-lg">6. O que é skill da Alexa?</span> 4419 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4420 </button> 4421 </h3> 4422 <div id="faq-6" class="faq-content px-6 pb-6 hidden" role="region"> 4423 <div class="text-pink-100 leading-relaxed"> 4424 A skill da Alexa permite que seus ouvintes escutem sua rádio através de comandos de voz nos dispositivos Amazon Echo. Ainda não temos essa funcionalidade liberada, mas ela pode ser desenvolvida sob consulta. 4425 </div> 4426 </div> 4427 </article> 4428 4429 <!-- FAQ Item 7 --> 4430 <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="600"> 4431 <h3> 4432 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4433 onclick="toggleFAQ(this)" 4434 aria-expanded="false" 4435 aria-controls="faq-7"> 4436 <span class="text-white font-semibold text-base md:text-lg">7. Vocês vendem separado o site e aplicativo?</span> 4437 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4438 </button> 4439 </h3> 4440 <div id="faq-7" class="faq-content px-6 pb-6 hidden" role="region"> 4441 <div class="text-pink-100 leading-relaxed"> 4442 Sim! Você pode contratar apenas o site, apenas o aplicativo ou o pacote completo integrado. Oferecemos flexibilidade para atender diferentes necessidades e orçamentos. 4443 </div> 4444 </div> 4445 </article> 4446 4447 <!-- FAQ Item 8 --> 4448 <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="650"> 4449 <h3> 4450 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4451 onclick="toggleFAQ(this)" 4452 aria-expanded="false" 4453 aria-controls="faq-8">
4454 <span class="text-white font-semibold text-base md:text-lg">8. Tem como inserir também o vÃdeo ao vivo no aplicativo?</span> 4455 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4456 </button> 4457 </h3> 4458 <div id="faq-8" class="faq-content px-6 pb-6 hidden" role="region"> 4459 <div class="text-pink-100 leading-relaxed"> 4460 Sim! O aplicativo suporta transmissão de vÃdeo ao vivo. Você pode integrar sua transmissão ao vivo diretamente no app, oferecendo vÃdeo para seus usuários. 4461 </div> 4462 </div> 4463 </article> 4464 4465 <!-- FAQ Item 9 --> 4466 <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="700"> 4467 <h3> 4468 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4469 onclick="toggleFAQ(this)" 4470 aria-expanded="false" 4471 aria-controls="faq-9"> 4472 <span class="text-white font-semibold text-base md:text-lg">9. A galeria de vÃdeos é pelo YouTube ou privado?</span> 4473 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4474 </button> 4475 </h3> 4476 <div id="faq-9" class="faq-content px-6 pb-6 hidden" role="region"> 4477 <div class="text-pink-100 leading-relaxed"> 4478 Oferecemos ambas as opções! Você pode integrar vÃdeos do YouTube ou hospedar vÃdeos privativos em nossa plataforma, dependendo da sua preferência e estratégia de conteúdo. 4479 </div> 4480 </div> 4481 </article> 4482 4483 <!-- FAQ Item 10 --> 4484 <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="750"> 4485 <h3> 4486 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4487 onclick="toggleFAQ(this)" 4488 aria-expanded="false" 4489 aria-controls="faq-10"> 4490 <span class="text-white font-semibold text-base md:text-lg">10. Como funciona o sistema de sorteios?</span> 4491 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4492 </button> 4493 </h3> 4494 <div id="faq-10" class="faq-content px-6 pb-6 hidden" role="region"> 4495 <div class="text-pink-100 leading-relaxed"> 4496 O sistema de sorteios permite que você cadastre promoções diretamente no aplicativo. Os usuários se inscrevem através do app e você pode sortear automaticamente, aumentando o engajamento. 4497 </div> 4498 </div> 4499 </article> 4500 4501 <!-- FAQ Item 11 --> 4502 <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="800"> 4503 <h3> 4504 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4505 onclick="toggleFAQ(this)" 4506 aria-expanded="false" 4507 aria-controls="faq-11"> 4508 <span class="text-white font-semibold text-base md:text-lg">11. Posso inserir banners no aplicativo?</span> 4509 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4510 </button> 4511 </h3> 4512 <div id="faq-11" class="faq-content px-6 pb-6 hidden" role="region"> 4513 <div class="text-pink-100 leading-relaxed"> 4514 Sim! O aplicativo possui espaços dedicados para banners publicitários. Você pode monetizar com anúncios de parceiros locais e ter total controle sobre o conteúdo exibido. 4515 </div> 4516 </div> 4517 </article> 4518 4519 <!-- FAQ Item 12 --> 4520 <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="850"> 4521 <h3> 4522 <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 4523 onclick="toggleFAQ(this)" 4524 aria-expanded="false" 4525 aria-controls="faq-12">
4526 <span class="text-white font-semibold text-base md:text-lg">12. Já vem com hospedagem do site?</span> 4527 <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i> 4528 </button> 4529 </h3> 4530 <div id="faq-12" class="faq-content px-6 pb-6 hidden" role="region"> 4531 <div class="text-pink-100 leading-relaxed"> 4532 Temos três opções: <strong>Start</strong> â apenas o aplicativo (sem site); <strong>Cross Media</strong> â site + aplicativo + Cockpit da Rádio (CRM completo para profissionalizar a operação da sua rádio); e <strong>Enterprise</strong> â plano para monetização, com treinamento, cursos e estratégias para potencializar os resultados. A hospedagem do site está incluÃda apenas no Cross Media e no Enterprise. 4533 </div> 4534 </div> 4535 </article> 4536 4537 </div> 4538 4539 <!-- CTA Final --> 4540 <aside class="revup bg-black/20 backdrop-blur-sm rounded-2xl p-6 md:p-8 text-center border border-pink-300/20 cta-card" data-delay="800"> 4541 <h3 class="text-2xl md:text-3xl font-bold text-white mb-4"> 4542 Pronto para elevar o nÃvel da sua rádio? 4543 </h3> 4544 <p class="text-pink-100 text-base md:text-lg mb-6 max-w-2xl mx-auto"> 4545 Baixe nosso app de demonstração e veja na prática como sua rádio pode se transformar digitalmente 4546 </p> 4547 4548 <!-- Download Buttons Container --> 4549 <div class="flex flex-col lg:flex-row gap-4 justify-center items-center mb-6"> 4550 <!-- Android Download Button --> 4551 <a href="https://play.google.com/store/apps/details?id=com.jmvnews&hl=pt_BR" 4552 class="inline-flex items-center bg-gradient-to-r from-green-500 to-green-600 text-white font-bold py-4 px-6 md:px-8 rounded-full text-base md:text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-green-500/30 transform group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black" 4553 aria-label="Baixar aplicativo JMV News na Google Play Store" 4554 title="Download para Android - Google Play Store" 4555 target="_blank" 4556 rel="noopener noreferrer"> 4557 <i class="fab fa-google-play mr-3 text-xl group-hover:animate-bounce" aria-hidden="true"></i> 4558 <span class="flex flex-col items-start"> 4559 <span class="text-xs opacity-90">Baixar para</span> 4560 <span class="text-lg font-bold">Android</span> 4561 </span> 4562 </a> 4563 4564 <!-- iOS Download Button --> 4565 <a href="https://apps.apple.com/br/developer/jmv-technology-eirelli/id614109372" 4566 class="inline-flex items-center bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold py-4 px-6 md:px-8 rounded-full text-base md:text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30 transform group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black" 4567 aria-label="Baixar aplicativo JMV News na App Store" 4568 title="Download para iOS - App Store" 4569 target="_blank" 4570 rel="noopener noreferrer"> 4571 <i class="fab fa-apple mr-3 text-xl group-hover:animate-bounce" aria-hidden="true"></i> 4572 <span class="flex flex-col items-start"> 4573 <span class="text-xs opacity-90">Baixar para</span> 4574 <span class="text-lg font-bold">iPhone</span> 4575 </span> 4576 </a> 4577 </div> 4578 4579 <!-- Contact Button --> 4580 <div class="flex justify-center"> 4581 <a href="#contato-jmv-news-ecossistema-crossmedia" 4582 class="inline-block bg-transparent border-2 border-pink-300 text-pink-300 font-bold py-4 px-8 md:px-12 rounded-full text-lg md:text-xl transition-all duration-300 hover:bg-pink-300 hover:text-red-800 hover:scale-105 transform group focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 focus:ring-offset-black" 4583 aria-label="Entrar em contato com especialistas do JMV News" 4584 title="Falar com especialista sobre implementação"> 4585 <i class="fa-solid fa-handshake mr-2 group-hover:animate-pulse" aria-hidden="true"></i> 4586 Entrar em contato 4587 </a> 4588 </div> 4589 </aside> 4590 4591 </div> 4592</section> 4593
4594<script> 4595function toggleFAQ(button) { 4596 const faqItem = button.closest('.faq-item'); 4597 const content = faqItem.querySelector('.faq-content'); 4598 const icon = button.querySelector('.fa-chevron-down'); 4599 4600 // Close all other FAQ items 4601 document.querySelectorAll('.faq-item').forEach(item => { 4602 if (item !== faqItem) { 4603 item.querySelector('.faq-content').classList.add('hidden'); 4604 item.querySelector('.fa-chevron-down').classList.remove('rotate-180'); 4605 } 4606 }); 4607 4608 // Toggle current FAQ item 4609 content.classList.toggle('hidden'); 4610 icon.classList.toggle('rotate-180'); 4611} 4612</script>
4612<section id="contato-jmv-news-ecossistema-crossmedia" class="bg-black py-16 md:py-20 px-4 relative overflow-hidden" aria-labelledby="contato-title"> 4613 <!-- Background Pattern --> 4614 <div class="absolute inset-0 opacity-5" aria-hidden="true"> 4615 <div class="absolute top-10 left-10 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div> 4616 <div class="absolute top-32 right-20 w-1 h-1 bg-blue-400 rounded-full animate-bounce"></div> 4617 <div class="absolute bottom-20 left-1/4 w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse delay-300"></div> 4618 <div class="absolute bottom-40 right-1/3 w-1 h-1 bg-csyan-300 rounded-full animate-bounce delay-700"></div> 4619 </div> 4620 4621 <div class="max-w-7xl mx-auto relative z-10"> 4622 <!-- TÃtulo Principal --> 4623 <header class="revdown text-center mb-12 md:mb-16" data-delay="100"> 4624 <h2 id="contato-title" class="text-3xl md:text-4xl lg:text-4xl font-bold text-white mb-4"> 4625 Sua Rádio Não Nasceu Para Ser Só Mais Uma Frequência 4626 </h2> 4627 <p class="text-gray-300 text-base md:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed"> 4628 <span class="text-white font-semibold">Chegou a hora</span> de faturar no digital. Transforme sua rádio em uma plataforma exclusiva, aplicando estratégias de grandes players, com tecnologia própria e monetização 100% sua. 4629 </p> 4630 </header> 4631 4632 <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 items-start"> 4633 <!-- Formulário --> 4634 <div class="revleft flex-1 max-w-2xl mx-auto lg:mx-0" data-delay="200"> 4635 <div class="bg-white rounded-3xl p-8 md:p-10 shadow-2xl"> 4636 <h3 class="text-2xl md:text-3xl font-bold text-red-600 text-center mb-8"> 4637 <i class="fa-solid fa-file-lines mr-3" aria-hidden="true"></i> 4638 Entre em Contato 4639 </h3> 4640 4641 <!-- Mensagem de Status --> 4642 <div id="mensagemRetorno" 4643 class="text-lg font-semibold mt-4 hidden" 4644 role="alert" 4645 aria-live="polite" 4646 aria-atomic="true"> 4647 </div> 4648 4649 <form id="contatoForm" 4650 action="send-lead-jmvnews.php" 4651 method="POST" 4652 class="space-y-6" 4653 novalidate 4654 aria-label="Formulário de contato"> 4655 <!-- Campo honeypot (anti-spam) --> 4656 <input type="text" name="website" style="display: none;" tabindex="-1" autocomplete="off" aria-hidden="true"> 4657 4658 <!-- Nome --> 4659 <div class="form-group"> 4660 <label for="nome" class="block text-red-600 font-semibold mb-2 text-sm md:text-base"> 4661 Seu Nome <span aria-label="obrigatório">*</span> 4662 </label> 4663 <input type="text" 4664 id="nome" 4665 name="nome" 4666 class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300" 4667 placeholder="Digite seu nome completo" 4668 required 4669 autocomplete="name" 4670 aria-describedby="nome-error"> 4671 <div id="nome-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div> 4672 </div> 4673 4674 <!-- Email e Telefone --> 4675 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6"> 4676 <!-- Email --> 4677 <div class="form-group"> 4678 <label for="email" class="block text-red-600 font-semibold mb-2 text-sm md:text-base"> 4679 E-mail <span aria-label="obrigatório">*</span> 4680 </label> 4681 <input type="email" 4682 id="email" 4683 name="email" 4684 class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300" 4685 placeholder="[email protected]" 4686 required 4687 autocomplete="email" 4688 aria-describedby="email-error">
4689 <div id="email-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div> 4690 </div> 4691 4692 <!-- Telefone --> 4693 <div class="form-group"> 4694 <label for="telefone" class="block text-red-600 font-semibold mb-2 text-sm md:text-base"> 4695 Telefone <span aria-label="obrigatório">*</span> 4696 </label> 4697 <input type="tel" 4698 id="telefone" 4699 name="telefone" 4700 class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300" 4701 placeholder="(11) 99999-9999" 4702 required 4703 autocomplete="tel" 4704 aria-describedby="telefone-error"> 4705 <div id="telefone-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div> 4706 </div> 4707 </div> 4708 4709 <!-- Mensagem --> 4710 <div class="form-group"> 4711 <label for="mensagem" class="block text-red-600 font-semibold mb-2 text-sm md:text-base"> 4712 Mensagem (Opcional) 4713 </label> 4714 <textarea name="mensagem" 4715 id="mensagem" 4716 class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300 resize-none" 4717 rows="4" 4718 placeholder="Conte-nos mais sobre sua emissora, tipo de conteúdo, localização, audiência..." 4719 aria-describedby="mensagem-help"></textarea> 4720 <div id="mensagem-help" class="text-gray-500 text-xs mt-1"> 4721 Opcional: Conte mais sobre sua rádio para um atendimento personalizado 4722 </div> 4723 </div> 4724 4725 <!-- Botão Enviar --> 4726 <button type="submit" 4727 class="w-full bg-red-600 text-white font-bold py-4 px-8 rounded-xl text-lg transition-all duration-300 hover:bg-red-700 hover:scale-105 hover:shadow-2xl transform group submit-btn hover-reflect" 4728 aria-describedby="submit-help"> 4729 <span class="btn-text">Enviar Mensagem</span> 4730 </button> 4731 <div id="submit-help" class="text-gray-500 text-xs text-center"> 4732 Seus dados estão seguros e não serão compartilhados 4733 </div> 4734 4735 <!-- Campos ocultos --> 4736 <input type="hidden" name="_captcha" value="false"> 4737 </form> 4738 </div> 4739 </div> 4740 4741 <!-- BenefÃcios --> 4742 <aside class="revright flex-1 max-w-2xl mx-auto lg:mx-0" data-delay="300" aria-labelledby="beneficios-title"> 4743 <div class="bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-3xl p-8 md:p-10 border border-gray-700/50"> 4744 <h3 id="beneficios-title" class="text-2xl md:text-3xl font-bold text-white mb-8"> 4745 Por que sua rádio precisa disso 4746 </h3> 4747 4748 <p class="text-gray-300 mb-8 leading-relaxed"> 4749 Mais audiência, mais engajamento e novas formas de monetização em um só lugar. 4750 </p> 4751 4752 <ul class="space-y-4" role="list" aria-label="BenefÃcios do aplicativo"> 4753 <li class="revup flex items-start gap-4 benef
4753it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="400"> 4754 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4755 <i class="fa-solid fa-mobile-screen text-green-400 text-sm"></i> 4756 </div> 4757 <div> 4758 <p class="text-gray-200 text-sm leading-relaxed">Aplicativo exclusivo publicado nas lojas oficiais</p> 4759 </div> 4760 </li> 4761 4762 <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="450"> 4763 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4764 <i class="fa-solid fa-tower-broadcast text-green-400 text-sm"></i> 4765 </div> 4766 <div> 4767 <p class="text-gray-200 text-sm leading-relaxed">Ecossistema Cross Media: rádio ao vivo, músicas, notÃcias e sorteios</p> 4768 </div> 4769 </li> 4770 4771 <li class="revup flex items-start gap-4 benef
4771it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="500"> 4772 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4773 <i class="fa-solid fa-users text-green-400 text-sm"></i> 4774 </div> 4775 <div> 4776 <p class="text-gray-200 text-sm leading-relaxed">Engajamento real com ouvintes através de pedidos e interatividade</p> 4777 </div> 4778 </li> 4779 4780 <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="550"> 4781 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4782 <i class="fa-solid fa-chart-line text-green-400 text-sm"></i> 4783 </div> 4784 <div> 4785 <p class="text-gray-200 text-sm leading-relaxed">Mais visibilidade e credibilidade para sua emissora</p> 4786 </div> 4787 </li> 4788 4789 <li class="revup flex items-start gap-4 benef
4789it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="600"> 4790 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4791 <i class="fa-solid fa-headset text-green-400 text-sm"></i> 4792 </div> 4793 <div> 4794 <p class="text-gray-200 text-sm leading-relaxed">Suporte humano, sem robôs, todos os dias da semana</p> 4795 </div> 4796 </li> 4797 4798 <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="650"> 4799 <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true"> 4800 <i class="fa-solid fa-server text-green-400 text-sm"></i> 4801 </div> 4802 <div> 4803 <p class="text-gray-200 text-sm leading-relaxed">Tecnologia confiável usada por rádios e TVs de referência</p> 4804 </div> 4805 </li> 4806 </ul> 4807 </div> 4808 </aside> 4809 </div> 4810 </div> 4811</section> 4812
4813<script> 4814const form = document.getElementById("contatoForm"); 4815const mensagemRetorno = document.getElementById("mensagemRetorno"); 4816 4817form.addEventListener("submit", async function (e) { 4818 e.preventDefault(); 4819 mensagemRetorno.classList.add("hidden"); // oculta mensagem anterior 4820 4821 const submitBtn = form.querySelector('.submit-btn'); 4822 const btnText = submitBtn.querySelector('.btn-text'); 4823 4824 // Desabilita o botão e mostra loading 4825 submitBtn.disabled = true; 4826 btnText.textContent = 'Enviando...'; 4827 4828 const formData = new FormData(form); 4829 4830 try { 4831 const response = await fetch(form.action, { 4832 method: "POST", 4833 body: formData, 4834 }); 4835 4836 const result = await response.json(); 4837 4838 mensagemRetorno.textContent = result.message; 4839 mensagemRetorno.classList.remove("hidden"); 4840 mensagemRetorno.classList.remove("text-red-400", "text-green-400"); 4841 4842 if (result.status === "success") { 4843 mensagemRetorno.classList.add("text-green-400"); 4844 form.reset(); 4845 } else { 4846 mensagemRetorno.classList.add("text-red-400"); 4847 } 4848 } catch (err) { 4849 mensagemRetorno.textContent = "Erro inesperado. Tente novamente."; 4850 mensagemRetorno.classList.remove("hidden"); 4851 mensagemRetorno.classList.add("text-red-400"); 4852 } finally { 4853 // Reabilita o botão 4854 submitBtn.disabled = false; 4855 btnText.textContent = 'Enviar'; 4856 4857 // Remove mensagem após 5 segundos 4858 setTimeout(() => { 4859 mensagemRetorno.classList.add("hidden"); 4860 }, 5000); 4861 } 4862}); 4863</script>
4863 4864 4865<!-- Estilos mantidos --> 4866<style> 4867.form-container { 4868 position: relative; 4869 overflow: hidden; 4870 transition: all 0.6s ease; 4871} 4872 4873.form-container::before { 4874 content: ''; 4875 position: absolute; 4876 top: -50%; 4877 left: -50%; 4878 width: 200%; 4879 height: 200%; 4880 background: linear-gradient( 4881 45deg, 4882 transparent, 4883 rgba(220, 38, 38, 0.1), 4884 transparent 4885 ); 4886 transform: translateX(-100%) translateY(-100%) rotate(45deg); 4887 transition: all 0.8s ease; 4888 opacity: 0; 4889 z-index: 1; 4890 pointer-events: none; 4891} 4892 4893.form-container:hover::before { 4894 opacity: 1; 4895 transform: translateX(100%) translateY(100%) rotate(45deg); 4896} 4897 4898.form-group { 4899 position: relative; 4900 z-index: 2; 4901} 4902 4903.submit-btn { 4904 position: relative; 4905 overflow: hidden; 4906} 4907 4908.submit-btn::before { 4909 content: ''; 4910 position: absolute; 4911 top: -50%; 4912 left: -50%; 4913 width: 200%; 4914 height: 200%; 4915 background: linear-gradient( 4916 45deg, 4917 transparent, 4918 rgba(255, 255, 255, 0.1), 4919 transparent 4920 ); 4921 transform: translateX(-100%) translateY(-100%) rotate(45deg); 4922 transition: all 0.6s ease; 4923 opacity: 0; 4924 z-index: 1; 4925 pointer-events: none; 4926} 4927 4928.submit-btn:hover::before { 4929 opacity: 1; 4930 transform: translateX(100%) translateY(100%) rotate(45deg); 4931} 4932
4933.benefit-item:hover { 4934 transform: translateX(5px); 4935} 4936</style> 4937 4938 </main> 4939 4940 <!-- Footer --> 4941 <footer style="background:#111827;border-top:1px solid rgba(255,255,255,.08);" role="contentinfo"> 4942 <div style="max-width:1280px;margin:0 auto;padding:28px 32px;"> 4943 <div class="lp-footer-wrap"> 4944 <a href="https://jmvnews.com/pt-br/" aria-label="JMV News â Voltar ao portal"> 4945 <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 4946 alt="JMV News" 4947 style="height:28px;width:auto;opacity:.8;transition:opacity .2s;" 4948 onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.8"> 4949 </a> 4950 <nav class="lp-footer-nav" aria-label="Links do rodapé"> 4951 <a href="https://jmvnews.com/pt-br/">Portal</a> 4952 <a href="https://jmvnews.com/contato/">Contato</a> 4953 <a href="https://jmvtechnology.com/pt-br/privacy" target="_blank" rel="noopener noreferrer">Privacidade</a> 4954 <a href="https://jmvtechnology.com/pt-br/terms" target="_blank" rel="noopener noreferrer">Termos</a> 4955 </nav> 4956 <p class="lp-footer-copy">© 2025 JMV Technology</p> 4957 </div> 4958 </div> 4959 </footer> 4960
4960<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v833ccba57c9e4d2798f2e76cebdd09a11778172276447" integrity="sha512-57MDmcccJXYtNnH+ZiBwzC4jb2rvgVCEokYN+L/nLlmO8rfYT/gIpW2A569iJ/3b+0UEasghjuZH/ma3wIs/EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8a890f3cb29345a18750831e8ab9b763","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
vendor: 2 bytes, line 4960
4960
4961<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"8a890f3cb29345a18750831e8ab9b763","r":1,"spa":2}' crossorigin="anonymous"></script>
4961 4962</body> 4963</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.