From c25bf9dc94af6661fc19692839c456073f87b779 Mon Sep 17 00:00:00 2001
From: Ricardo Carneiro <71648276+ricarneiro@users.noreply.github.com>
Date: Mon, 9 Jun 2025 23:16:00 -0300
Subject: [PATCH] feat: novo menu

---
 .../Controllers/MenuController.cs             |  40 +-
 OnlyOneAccessTemplate/Views/Home/Index.cshtml | 657 ++++++------
 .../Views/Shared/_Header.cshtml               | 111 +-
 OnlyOneAccessTemplate/wwwroot/css/site.css    | 962 +++++++-----------
 4 files changed, 786 insertions(+), 984 deletions(-)

diff --git a/OnlyOneAccessTemplate/Controllers/MenuController.cs b/OnlyOneAccessTemplate/Controllers/MenuController.cs
index 08f4894..ae5d968 100644
--- a/OnlyOneAccessTemplate/Controllers/MenuController.cs
+++ b/OnlyOneAccessTemplate/Controllers/MenuController.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Mvc;
+using OnlyOneAccessTemplate.Models;
 using OnlyOneAccessTemplate.Services;
 
 namespace OnlyOneAccessTemplate.Controllers
@@ -7,10 +8,12 @@ namespace OnlyOneAccessTemplate.Controllers
     public class MenuController : ControllerBase
     {
         private readonly IModuleService _moduleService;
+        private readonly ILogger<MenuController> _logger;
 
-        public MenuController(IModuleService moduleService)
+        public MenuController(IModuleService moduleService, ILogger<MenuController> logger)
         {
             _moduleService = moduleService;
+            _logger = logger;
         }
 
         [HttpGet("converters")]
@@ -21,31 +24,52 @@ namespace OnlyOneAccessTemplate.Controllers
                 var modules = await _moduleService.GetAllActiveModulesAsync();
 
                 var menuItems = modules
-                    .Where(m => m.ShowInMenu && m.IsActive && m.IsHealthy)
+                    .Where(m => m.ShowInMenu && m.IsActive)
                     .OrderBy(m => m.MenuOrder)
                     .ThenBy(m => m.MenuTitle)
-                    .GroupBy(m => m.MenuCategory)
+                    .GroupBy(m => m.MenuCategory ?? "Conversores")
                     .Select(g => new
                     {
                         category = g.Key,
                         items = g.Select(m => new
                         {
                             moduleId = m.ModuleId,
-                            title = m.SeoTitles.ContainsKey(language) ? m.SeoTitles[language] : m.MenuTitle,
-                            description = m.SeoDescriptions.ContainsKey(language) ? m.SeoDescriptions[language] : m.MenuDescription,
-                            icon = m.MenuIcon,
+                            title = GetLocalizedTitle(m, language),
+                            description = GetLocalizedDescription(m, language),
+                            icon = m.MenuIcon ?? "fas fa-exchange-alt",
                             url = $"/{language}/{m.RequestBy}",
                             order = m.MenuOrder,
-                            isNew = m.CreatedAt > DateTime.UtcNow.AddDays(-7) // Novos nos últimos 7 dias
+                            isNew = m.CreatedAt > DateTime.UtcNow.AddDays(-7),
+                            isHealthy = m.IsHealthy,
+                            version = m.Version
                         }).ToList()
-                    }).ToList();
+                    })
+                    .OrderBy(g => g.category)
+                    .ToList();
 
                 return Ok(new { success = true, menu = menuItems });
             }
             catch (Exception ex)
             {
+                _logger.LogError(ex, "Erro ao buscar menu de conversores");
                 return StatusCode(500, new { success = false, message = ex.Message });
             }
         }
+
+        private string GetLocalizedTitle(ModuleConfig module, string language)
+        {
+            if (module.SeoTitles?.ContainsKey(language) == true)
+                return module.SeoTitles[language];
+
+            return module.MenuTitle ?? module.Name ?? "Conversor";
+        }
+
+        private string GetLocalizedDescription(ModuleConfig module, string language)
+        {
+            if (module.SeoDescriptions?.ContainsKey(language) == true)
+                return module.SeoDescriptions[language];
+
+            return module.MenuDescription ?? "Ferramenta de conversão";
+        }
     }
 }
\ No newline at end of file
diff --git a/OnlyOneAccessTemplate/Views/Home/Index.cshtml b/OnlyOneAccessTemplate/Views/Home/Index.cshtml
index 901ea57..ded42a2 100644
--- a/OnlyOneAccessTemplate/Views/Home/Index.cshtml
+++ b/OnlyOneAccessTemplate/Views/Home/Index.cshtml
@@ -4,359 +4,380 @@
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
 
-<!-- Google AdSense - Script Global -->
 @section Head {
+    <!-- Google AdSense Script -->
     @if (ViewBag.GoogleAdsEnabled == true && !string.IsNullOrEmpty(ViewBag.GoogleAdsPublisher))
     {
         <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=@ViewBag.GoogleAdsPublisher"
                 crossorigin="anonymous"></script>
     }
-    
-    <style>
-        .ad-container { margin: 15px 0; text-align: center; min-height: 50px; }
-        .ad-banner { min-height: 90px; }
-        .ad-rectangle { min-height: 250px; }
-        .ad-sidebar { min-height: 600px; }
-        .ad-sticky { position: sticky; top: 20px; z-index: 100; }
-        .converter-section { background: #f8f9fa; }
-        
-        @@media (max-width: 768px) {
-            .ad-sidebar { display: none !important; }
-            .ad-rectangle { min-height: 200px; }
-            .main-content { padding: 0 10px; }
-        }
-        
-        @@media (min-width: 1200px) {
-            .ad-sidebar { min-height: 600px; }
-        }
-    </style>
 }
 
-<!-- Banner Superior -->
-@{
-    ViewBag.AdPosition = "banner-top";
-    ViewBag.AdSlotId = ViewBag.AdSlots?.BannerTop ?? "1234567890";
-    ViewBag.AdFormat = "auto";
-    ViewBag.AdCssClass = "ad-container ad-banner";
-    ViewBag.ShowOnMobile = true;
-    ViewBag.ShowOnDesktop = true;
-}
-@await Html.PartialAsync("_AdUnit")
+<!-- Hero Section -->
+<section class="hero-section">
+    <div class="container">
+        <div class="hero-content text-center">
+            <h1 class="hero-title">
+                @(ViewBag.MainTitle ?? "FERRAMENTAS DE CONVERSÃO")
+            </h1>
+            <p class="hero-subtitle">
+                @(ViewBag.MainDescription ?? "Converta seus arquivos de forma rápida e segura")
+            </p>
 
-<div class="container-fluid">
+            <div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
+                <span class="feature-badge">
+                    <i class="fas fa-code me-2"></i> Standalone
+                </span>
+                <span class="feature-badge">
+                    <i class="fas fa-globe me-2"></i> Multi-idioma
+                </span>
+                <span class="feature-badge">
+                    <i class="fas fa-bolt me-2"></i> API Ready
+                </span>
+                <span class="feature-badge">
+                    <i class="fas fa-shield-alt me-2"></i> Seguro
+                </span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Banner Superior Ads -->
+<div class="container-fluid mt-3">
+    <div class="ad-placeholder banner">
+        <i class="fas fa-rectangle-ad"></i>
+        <div>
+            <strong>Anúncio Banner Superior</strong><br>
+            <small>728x90 ou responsivo</small>
+        </div>
+    </div>
+</div>
+
+<!-- Layout Principal -->
+<div class="container-fluid main-layout">
     <div class="row">
-        <!-- Sidebar Esquerda com Anúncios -->
+        <!-- Sidebar Esquerda - Anúncios -->
         <div class="col-xl-2 col-lg-2 d-none d-lg-block">
-            @{
-                ViewBag.AdPosition = "sidebar-left";
-                ViewBag.AdSlotId = ViewBag.AdSlots?.SidebarLeft ?? "2345678901";
-                ViewBag.AdFormat = "vertical";
-                ViewBag.AdSize = "; width: 300px; height: 600px;";
-                ViewBag.AdCssClass = "ad-container ad-sidebar";
-                ViewBag.IsSticky = true;
-                ViewBag.ShowOnMobile = false;
-                ViewBag.ShowOnDesktop = true;
-            }
-            @await Html.PartialAsync("_AdUnit")
+            <div class="ad-placeholder sidebar">
+                <i class="fas fa-rectangle-ad"></i>
+                <div>
+                    <strong>Anúncio Vertical</strong><br>
+                    <small>160x600 ou 300x600</small>
+                </div>
+            </div>
         </div>
 
-        <!-- Conteúdo Principal -->
-        <div class="col-xl-8 col-lg-8 col-md-12 main-content">
-            <!-- Seção Principal do Conversor -->
-            <section class="converter-section py-4">
-                <div class="container">
-                    <div class="row justify-content-center">
-                        <div class="col-lg-11">
-                            <!-- Título e Descrição -->
-                            <div class="text-center mb-4">
-                                <h1 class="display-4 fw-bold text-gradient mb-3">
-                                    @(ViewBag.ConverterTitle ?? "CONVERSOR ONLINE")
-                                </h1>
-                                <p class="lead text-green-light mb-4">
-                                    @(ViewBag.ConverterDescription ?? "Converta seus arquivos de forma rápida e segura")
-                                </p>
-                            </div>
+        <!-- Menu de Módulos -->
+        <div class="col-xl-3 col-lg-3 col-md-4">
+            <div class="modules-sidebar">
+                <h5 class="fw-bold mb-3 d-flex align-items-center">
+                    <i class="fas fa-puzzle-piece text-primary me-2"></i>
+                    Conversores Disponíveis
+                </h5>
 
-                            <!-- Anúncio Retangular Antes do Conversor -->
-                            @{
-                                ViewBag.AdPosition = "rectangle-pre-converter";
-                                ViewBag.AdSlotId = ViewBag.AdSlots?.RectanglePre ?? "3456789012";
-                                ViewBag.AdFormat = "rectangle";
-                                ViewBag.AdSize = "; width: 300px; height: 250px;";
-                                ViewBag.AdCssClass = "ad-container ad-rectangle mb-4";
-                                ViewBag.IsSticky = false;
-                                ViewBag.ShowOnMobile = true;
-                                ViewBag.ShowOnDesktop = true;
-                            }
-                            @await Html.PartialAsync("_AdUnit")
-
-                            <!-- Card do Conversor -->
-                            <div class="card shadow-lg border-0 rounded-3">
-                                <div class="card-body p-4">
-                                    <!-- Steps do Processo -->
-                                    <div class="row text-center mb-4">
-                                        <div class="col-md-4 mb-3">
-                                            <div class="step-indicator">
-                                                <span class="badge bg-gradient-green rounded-circle p-3 fs-5 mb-2 text-white">1</span>
-                                                <h6 class="fw-bold text-green-light">@(ViewBag.Step1Title ?? "Digite")</h6>
-                                                <small class="text-muted">@(ViewBag.Step1Description ?? "Digite seu texto")</small>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-4 mb-3">
-                                            <div class="step-indicator">
-                                                <span class="badge bg-gradient-green rounded-circle p-3 fs-5 mb-2 text-white">2</span>
-                                                <h6 class="fw-bold text-green-light">@(ViewBag.Step2Title ?? "Converter")</h6>
-                                                <small class="text-muted">@(ViewBag.Step2Description ?? "Clique para converter")</small>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-4 mb-3">
-                                            <div class="step-indicator">
-                                                <span class="badge bg-gradient-green rounded-circle p-3 fs-5 mb-2 text-white">3</span>
-                                                <h6 class="fw-bold text-green-light">@(ViewBag.Step3Title ?? "Copiar")</h6>
-                                                <small class="text-muted">@(ViewBag.Step3Description ?? "Copie o resultado")</small>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <!-- Área do Conversor -->
-                                    <div id="converter-container">
-                                        @await Html.PartialAsync("_ConverterWidget")
-                                    </div>
-
-                                    <!-- Informações Adicionais -->
-                                    <div class="row mt-4">
-                                        <div class="col-md-6">
-                                            <div class="d-flex align-items-center mb-2">
-                                                <i class="fas fa-shield-alt text-success me-2"></i>
-                                                <small class="text-green-light fw-bold">@(ViewBag.SecurityText ?? "Seus dados estão seguros")</small>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6">
-                                            <div class="d-flex align-items-center mb-2">
-                                                <i class="fas fa-bolt text-success me-2"></i>
-                                                <small class="text-green-light fw-bold">@(ViewBag.FileInfoText ?? "Processamento rápido e seguro")</small>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Anúncio Retangular Após o Conversor -->
-                            @{
-                                ViewBag.AdPosition = "rectangle-post-converter";
-                                ViewBag.AdSlotId = ViewBag.AdSlots?.RectanglePost ?? "4567890123";
-                                ViewBag.AdFormat = "rectangle";
-                                ViewBag.AdSize = "; width: 300px; height: 250px;";
-                                ViewBag.AdCssClass = "ad-container ad-rectangle mt-4";
-                                ViewBag.IsSticky = false;
-                                ViewBag.ShowOnMobile = true;
-                                ViewBag.ShowOnDesktop = true;
-                            }
-                            @await Html.PartialAsync("_AdUnit")
-                        </div>
-                    </div>
+                <div id="modules-list" class="modules-list">
+                    <!-- Loading state -->
+                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
+                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
+                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                 </div>
-            </section>
 
-            <!-- Anúncio In-Feed Entre Seções -->
-            @{
-                ViewBag.AdPosition = "in-feed";
-                ViewBag.AdSlotId = ViewBag.AdSlots?.InFeed ?? "5678901234";
-                ViewBag.AdFormat = "fluid";
-                ViewBag.AdCssClass = "ad-container";
-                ViewBag.IsSticky = false;
-                ViewBag.ShowOnMobile = true;
-                ViewBag.ShowOnDesktop = true;
-            }
-            @await Html.PartialAsync("_AdUnit")
-
-            <!-- Seção de Benefícios -->
-            <section class="benefits-section py-5">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-10 mx-auto text-center mb-5">
-                            <h2 class="h3 fw-bold mb-3 text-gradient">@(ViewBag.BenefitsTitle ?? "Por Que Usar Nossa Ferramenta?")</h2>
-                            <p class="text-green-light">@(ViewBag.BenefitsSubtitle ?? "Descubra os benefícios de nossa solução")</p>
-                        </div>
-                    </div>
-
-                    <div class="row g-4 justify-content-center">
-                        <!-- Features (código existente) -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="text-center p-3">
-                                <div class="feature-icon mb-3">
-                                    <i class="fas fa-rocket fa-2x text-success"></i>
-                                </div>
-                                <h6 class="fw-bold text-green-light">@(ViewBag.Feature1Title ?? "Rápido e Fácil")</h6>
-                                <small class="text-muted">@(ViewBag.Feature1Description ?? "Conversão instantânea")</small>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3">
-                            <div class="text-center p-3">
-                                <div class="feature-icon mb-3">
-                                    <i class="fas fa-shield-alt fa-2x text-success"></i>
-                                </div>
-                                <h6 class="fw-bold text-green-light">@(ViewBag.Feature2Title ?? "Seguro")</h6>
-                                <small class="text-muted">@(ViewBag.Feature2Description ?? "Dados protegidos")</small>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3">
-                            <div class="text-center p-3">
-                                <div class="feature-icon mb-3">
-                                    <i class="fas fa-users fa-2x text-success"></i>
-                                </div>
-                                <h6 class="fw-bold text-green-light">@(ViewBag.Feature3Title ?? "Confiável")</h6>
-                                <small class="text-muted">@(ViewBag.Feature3Description ?? "Resultados precisos")</small>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3">
-                            <div class="text-center p-3">
-                                <div class="feature-icon mb-3">
-                                    <i class="fas fa-clock fa-2x text-success"></i>
-                                </div>
-                                <h6 class="fw-bold text-green-light">Rápido</h6>
-                                <small class="text-muted">Conversão em segundos</small>
-                            </div>
-                        </div>
-                    </div>
+                <div class="text-center mt-3">
+                    <button class="btn btn-outline-primary btn-sm" onclick="refreshModulesList()">
+                        <i class="fas fa-sync me-1"></i> Atualizar
+                    </button>
                 </div>
-            </section>
+            </div>
+        </div>
 
-            <!-- Anúncio Multiplex -->
-            @{
-                ViewBag.AdPosition = "multiplex";
-                ViewBag.AdSlotId = ViewBag.AdSlots?.Multiplex ?? "6789012345";
-                ViewBag.AdFormat = "autorelaxed";
-                ViewBag.AdCssClass = "ad-container";
-                ViewBag.IsSticky = false;
-                ViewBag.ShowOnMobile = true;
-                ViewBag.ShowOnDesktop = true;
-            }
-            @await Html.PartialAsync("_AdUnit")
-
-            <!-- Seção CTA Final -->
-@* 
-            <section class="final-cta py-5">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-8 mx-auto text-center">
-                            <h2 class="h3 fw-bold mb-3 text-gradient">@(ViewBag.FinalCtaTitle ?? "Pronto para Converter?")</h2>
-                            <p class="text-green-light mb-4">@(ViewBag.FinalCtaSubtitle ?? "Use nossa ferramenta gratuita agora mesmo")</p>
-                            <a href="#converter-container" class="btn btn-primary btn-lg hover-lift">
-                                @(ViewBag.FinalCtaButtonText ?? "Começar Conversão")
-                            </a>
-                        </div>
-                    </div>
+        <!-- Área Principal do Conversor -->
+        <div class="col-xl-5 col-lg-5 col-md-8">
+            <!-- Anúncio Retangular Pré-Conversor -->
+            <div class="ad-placeholder rectangle">
+                <i class="fas fa-rectangle-ad"></i>
+                <div>
+                    <strong>Anúncio Retangular</strong><br>
+                    <small>300x250</small>
                 </div>
-            </section>
-
- *@
             </div>
 
-        <!-- Sidebar Direita com Anúncios -->
-        <div class="col-xl-2 col-lg-2 d-none d-lg-block">
-            @{
-                ViewBag.AdPosition = "sidebar-right";
-                ViewBag.AdSlotId = ViewBag.AdSlots?.SidebarRight ?? "7890123456";
-                ViewBag.AdFormat = "vertical";
-                ViewBag.AdSize = "; width: 300px; height: 600px;";
-                ViewBag.AdCssClass = "ad-container ad-sidebar";
-                ViewBag.IsSticky = true;
-                ViewBag.ShowOnMobile = false;
-                ViewBag.ShowOnDesktop = true;
-            }
-            @await Html.PartialAsync("_AdUnit")
+            <!-- Card do Conversor -->
+            <div class="converter-area fade-in">
+                <div class="converter-header">
+                    <h2 class="h3 mb-3">
+                        <i class="fas fa-exchange-alt me-2"></i>
+                        <span id="converter-title">Selecione um Conversor</span>
+                    </h2>
+                    <p class="mb-0" id="converter-description">
+                        Escolha uma ferramenta de conversão no menu ao lado
+                    </p>
+                </div>
 
-            <!-- Anúncio Quadrado Adicional na Sidebar -->
-            <div class="mt-4">
-                @{
-                    ViewBag.AdPosition = "sidebar-square";
-                    ViewBag.AdSlotId = ViewBag.AdSlots?.SidebarSquare ?? "8901234567";
-                    ViewBag.AdFormat = "square";
-                    ViewBag.AdSize = "; width: 250px; height: 250px;";
-                    ViewBag.AdCssClass = "ad-container";
-                    ViewBag.IsSticky = false;
-                    ViewBag.ShowOnMobile = false;
-                    ViewBag.ShowOnDesktop = true;
-                }
-                @await Html.PartialAsync("_AdUnit")
+                <!-- Steps do Processo -->
+                <div class="step-indicators">
+                    <div class="step-indicator">
+                        <div class="step-number">1</div>
+                        <h6 class="step-title">Entrada</h6>
+                        <p class="step-description">Selecione ou cole seu conteúdo</p>
+                    </div>
+                    <div class="step-indicator">
+                        <div class="step-number">2</div>
+                        <h6 class="step-title">Processar</h6>
+                        <p class="step-description">Aguarde o processamento</p>
+                    </div>
+                    <div class="step-indicator">
+                        <div class="step-number">3</div>
+                        <h6 class="step-title">Resultado</h6>
+                        <p class="step-description">Baixe ou copie o resultado</p>
+                    </div>
+                </div>
+
+                <!-- Área do Módulo -->
+                <div id="converter-container" class="p-4">
+                    <div class="text-center py-5">
+                        <i class="fas fa-arrow-left fa-2x text-muted mb-3"></i>
+                        <h5 class="text-muted">Selecione um conversor</h5>
+                        <p class="text-muted">Escolha uma ferramenta no menu ao lado para começar</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Anúncio Retangular Pós-Conversor -->
+            <div class="ad-placeholder rectangle">
+                <i class="fas fa-rectangle-ad"></i>
+                <div>
+                    <strong>Anúncio Pós-Conversão</strong><br>
+                    <small>300x250</small>
+                </div>
+            </div>
+        </div>
+
+        <!-- Sidebar Direita - Anúncios -->
+        <div class="col-xl-2 col-lg-2 d-none d-lg-block">
+            <div class="ad-placeholder sidebar">
+                <i class="fas fa-rectangle-ad"></i>
+                <div>
+                    <strong>Anúncio Vertical</strong><br>
+                    <small>160x600 ou 300x600</small>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Banner Inferior Mobile -->
-@{
-    ViewBag.AdPosition = "mobile-bottom";
-    ViewBag.AdSlotId = ViewBag.AdSlots?.MobileBottom ?? "9012345678";
-    ViewBag.AdFormat = "banner";
-    ViewBag.AdSize = "; width: 320px; height: 50px;";
-    ViewBag.AdCssClass = "fixed-bottom d-block d-md-none";
-    ViewBag.IsSticky = false;
-    ViewBag.ShowOnMobile = true;
-    ViewBag.ShowOnDesktop = false;
-}
-<div class="@ViewBag.AdCssClass bg-white border-top p-2" style="z-index: 1050;" id="mobile-bottom-ad">
-    <div class="d-flex justify-content-between align-items-center">
-        @await Html.PartialAsync("_AdUnit")
-        <button type="button" class="btn-close ms-2" onclick="document.getElementById('mobile-bottom-ad').style.display='none'"></button>
+<!-- Anúncio In-Feed -->
+<div class="container my-4">
+    <div class="ad-placeholder" style="min-height: 120px;">
+        <i class="fas fa-rectangle-ad"></i>
+        <div>
+            <strong>Anúncio In-Feed</strong><br>
+            <small>Responsivo ou 728x90</small>
+        </div>
+    </div>
+</div>
+
+<!-- Seção de Benefícios -->
+<div class="container">
+    <section class="benefits-section">
+        <div class="text-center mb-5">
+            <h2 class="h3 fw-bold mb-3">Por Que Usar Nossas Ferramentas?</h2>
+            <p class="text-muted">Descubra os benefícios de nossas soluções</p>
+        </div>
+
+        <div class="feature-grid">
+            <div class="feature-item">
+                <div class="feature-icon">
+                    <i class="fas fa-rocket"></i>
+                </div>
+                <h6 class="fw-bold mb-2">Rápido e Fácil</h6>
+                <p class="text-muted small mb-0">Conversão instantânea com poucos cliques</p>
+            </div>
+            <div class="feature-item">
+                <div class="feature-icon">
+                    <i class="fas fa-shield-alt"></i>
+                </div>
+                <h6 class="fw-bold mb-2">Seguro</h6>
+                <p class="text-muted small mb-0">Seus dados estão protegidos</p>
+            </div>
+            <div class="feature-item">
+                <div class="feature-icon">
+                    <i class="fas fa-users"></i>
+                </div>
+                <h6 class="fw-bold mb-2">Confiável</h6>
+                <p class="text-muted small mb-0">Milhares de usuários satisfeitos</p>
+            </div>
+            <div class="feature-item">
+                <div class="feature-icon">
+                    <i class="fas fa-clock"></i>
+                </div>
+                <h6 class="fw-bold mb-2">24/7 Disponível</h6>
+                <p class="text-muted small mb-0">Acesso a qualquer hora</p>
+            </div>
+        </div>
+    </section>
+</div>
+
+<!-- Anúncio Multiplex -->
+<div class="container my-4">
+    <div class="ad-placeholder" style="min-height: 200px;">
+        <i class="fas fa-th"></i>
+        <div>
+            <strong>Anúncio Multiplex</strong><br>
+            <small>Formato flexível</small>
+        </div>
     </div>
 </div>
 
-<!-- Scripts específicos -->
 @section Scripts {
-    <script src="~/js/converter.js"></script>
-    @{
-        var converterType = ViewBag.ConverterType ?? "generic";
-        var jsFileName = $"~/js/converters/{converterType.ToString().ToLower()}-converter.js";
-    }
-    <script src="@jsFileName"></script>
-    
-    <!-- Inicialização dos Anúncios -->
+    <script src="~/js/module-loader.js"></script>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Inicializar conversor
-            if (typeof initializeConverter === 'function') {
-                initializeConverter();
-            }
-            
-            // Inicializar anúncios do Google
-            @if (ViewBag.GoogleAdsEnabled == true)
-            {
-                @Html.Raw("initializeGoogleAds();")
-            }
-        });
-        
-        function initializeGoogleAds() {
-            try {
-                // Encontrar todos os anúncios na página
-                const adElements = document.querySelectorAll('.adsbygoogle');
-                
-                // Inicializar cada anúncio
-                adElements.forEach(ad => {
-                    if (!ad.dataset.adsbygoogleStatus) {
-                        (adsbygoogle = window.adsbygoogle || []).push({});
-                    }
-                });
-                
-                console.log(`Initialized ${adElements.length} ad units`);
-            } catch (e) {
-                console.log('AdSense initialization error:', e);
-            }
-        }
-        
-        // Refresh anúncios após conversão bem-sucedida
-        function refreshAdsAfterConversion() {
+        let currentModuleId = null;
+
+        document.addEventListener('DOMContentLoaded', function () {
+            loadModulesList();
+
+            // Auto-carregar primeiro módulo se não houver seleção
             setTimeout(() => {
-                try {
-                    const adElements = document.querySelectorAll('.adsbygoogle[data-ad-position="rectangle-post-converter"]');
-                    adElements.forEach(ad => {
-                        (adsbygoogle = window.adsbygoogle || []).push({});
-                    });
-                } catch (e) {
-                    console.log('Ad refresh error:', e);
+                const firstModule = document.querySelector('.module-item');
+                if (firstModule && !currentModuleId) {
+                    firstModule.click();
                 }
             }, 2000);
+        });
+
+        async function loadModulesList() {
+            try {
+                console.log('🔄 Carregando lista de módulos...');
+                const response = await fetch('/api/menu/converters?language=pt');
+                const data = await response.json();
+
+                if (data.success && data.menu) {
+                    renderModulesList(data.menu);
+                } else {
+                    showModulesError('Não foi possível carregar os módulos');
+                }
+            } catch (error) {
+                console.error('❌ Erro ao carregar módulos:', error);
+                showModulesError('Erro de conexão');
+            }
         }
+
+        function renderModulesList(menuData) {
+            const container = document.getElementById('modules-list');
+            let html = '';
+
+            menuData.forEach(category => {
+                html += `<div class="category-header">${category.category}</div>`;
+
+                category.items.forEach(item => {
+                    const isNew = item.isNew ? '<span class="badge bg-warning badge-sm ms-1">Novo</span>' : '';
+
+                    html += `
+                                <a href="#" class="module-item" data-module-id="${item.moduleId}" onclick="loadModule('${item.moduleId}', '${item.title}', '${item.description}')">
+                                    <div class="module-icon">
+                                        <i class="${item.icon || 'fas fa-exchange-alt'}"></i>
+                                    </div>
+                                    <div class="module-title">${item.title}${isNew}</div>
+                                    <div class="module-description">${item.description || 'Ferramenta de conversão'}</div>
+                                </a>
+                            `;
+                });
+            });
+
+            if (html === '') {
+                html = `
+                            <div class="text-center py-4 text-muted">
+                                <i class="fas fa-puzzle-piece fa-2x mb-3"></i>
+                                <p>Nenhum módulo disponível</p>
+                            </div>
+                        `;
+            }
+
+            container.innerHTML = html;
+            console.log('✅ Lista de módulos carregada');
+        }
+
+        function showModulesError(message) {
+            const container = document.getElementById('modules-list');
+            container.innerHTML = `
+                        <div class="text-center py-4 text-danger">
+                            <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
+                            <p>${message}</p>
+                            <button class="btn btn-outline-primary btn-sm" onclick="loadModulesList()">
+                                Tentar Novamente
+                            </button>
+                        </div>
+                    `;
+        }
+
+        async function loadModule(moduleId, title, description) {
+            if (currentModuleId === moduleId) return;
+
+            // Atualizar UI
+            document.querySelectorAll('.module-item').forEach(item => {
+                item.classList.remove('active');
+            });
+            document.querySelector(`[data-module-id="${moduleId}"]`).classList.add('active');
+
+            // Atualizar título
+            document.getElementById('converter-title').textContent = title;
+            document.getElementById('converter-description').textContent = description;
+
+            // Carregar módulo
+            const container = document.getElementById('converter-container');
+            container.innerHTML = `
+                        <div class="text-center py-4">
+                            <div class="spinner-border text-primary mb-3" role="status">
+                                <span class="visually-hidden">Carregando...</span>
+                            </div>
+                            <p>Carregando ${title}...</p>
+                        </div>
+                    `;
+
+            try {
+                const success = await window.ModuleLoader.loadModule(moduleId, 'converter-container', `/modules/${moduleId}`);
+                if (success) {
+                    currentModuleId = moduleId;
+                    console.log(`✅ Módulo ${moduleId} carregado com sucesso`);
+
+                    // Analytics
+                    if (typeof gtag !== 'undefined') {
+                        gtag('event', 'module_loaded', {
+                            'module_id': moduleId,
+                            'module_title': title
+                        });
+                    }
+                } else {
+                    throw new Error('Falha ao carregar módulo');
+                }
+            } catch (error) {
+                console.error('❌ Erro ao carregar módulo:', error);
+                container.innerHTML = `
+                            <div class="text-center py-4 text-danger">
+                                <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
+                                <h6>Erro ao carregar ${title}</h6>
+                                <p class="text-muted">${error.message}</p>
+                                <button class="btn btn-outline-primary" onclick="loadModule('${moduleId}', '${title}', '${description}')">
+                                    Tentar Novamente
+                                </button>
+                            </div>
+                        `;
+            }
+        }
+
+        function refreshModulesList() {
+            const container = document.getElementById('modules-list');
+            container.innerHTML = `
+                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
+                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
+                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
+                    `;
+            loadModulesList();
+        }
+
+        // Event listener para módulos carregados
+        document.addEventListener('moduleLoaded', function (event) {
+            console.log('🎯 Evento moduleLoaded:', event.detail);
+        });
     </script>
 }
\ No newline at end of file
diff --git a/OnlyOneAccessTemplate/Views/Shared/_Header.cshtml b/OnlyOneAccessTemplate/Views/Shared/_Header.cshtml
index b8433a4..fd86674 100644
--- a/OnlyOneAccessTemplate/Views/Shared/_Header.cshtml
+++ b/OnlyOneAccessTemplate/Views/Shared/_Header.cshtml
@@ -1,70 +1,91 @@
-<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
     <div class="container">
-        <a class="navbar-brand d-flex align-items-center" href="@ViewBag.HomeUrl">
-            <img src="@ViewBag.LogoUrl" alt="?" height="40" class="me-2">
-            <span class="fw-bold text-gradient">@ViewBag.SiteName</span>
+        <a class="navbar-brand d-flex align-items-center" href="/@ViewBag.Language">
+            <!-- Usando seu logo existente -->
+            <img src="~/img/logo-white.png" alt="Convert-it" height="32" class="me-2">
+            <strong>Convert-it</strong>
         </a>
 
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
             <span class="navbar-toggler-icon"></span>
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav me-auto">
                 <li class="nav-item">
-                    <a class="nav-link @(ViewBag.CurrentPage == "home" ? "active" : "")"
-                       href="@ViewBag.HomeUrl">
-                        @ViewBag.MenuHome
+                    <a class="nav-link" href="/@ViewBag.Language">
+                        <i class="fas fa-home me-1"></i>
+                        @(ViewBag.Language == "pt" ? "Início" : ViewBag.Language == "es" ? "Inicio" : "Home")
                     </a>
                 </li>
-@* 
-                <li class="nav-item">
-                    <a class="nav-link @(ViewBag.CurrentPage == "about" ? "active" : "")"
-                       href="@ViewBag.AboutUrl">
-                        @ViewBag.MenuAbout
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link @(ViewBag.CurrentPage == "contact" ? "active" : "")"
-                       href="@ViewBag.ContactUrl">
-                        @ViewBag.MenuContact
-                    </a>
-                </li>
-
- *@
             </ul>
 
+            <!-- Status dos Módulos -->
+            <div class="navbar-nav me-3">
+                <span class="navbar-text d-flex align-items-center">
+                    <span class="status-indicator me-2" id="modules-status"></span>
+                    <small id="modules-count">Carregando...</small>
+                </span>
+            </div>
+
             <!-- Language Switcher -->
-            <div class="dropdown me-3">
-                <button class="btn btn-outline-success btn-sm dropdown-toggle" type="button"
-                        id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            <div class="dropdown">
+                <button class="btn btn-outline-light dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
                     <i class="fas fa-globe me-1"></i>
-                    @ViewBag.CurrentLanguageDisplay
+                    @ViewBag.Language?.ToUpper()
                 </button>
-                <ul class="dropdown-menu" aria-labelledby="languageDropdown">
+                <ul class="dropdown-menu dropdown-menu-end">
                     <li>
-                        <a class="dropdown-item @(ViewBag.Language == "pt" ? "active" : "")"
-                           href="@ViewBag.PtUrl">🇧🇷 Português</a>
+                        <a class="dropdown-item" href="/pt@(ViewContext.RouteData.Values["converter"] != null ? "/" + ViewContext.RouteData.Values["converter"] : "")">
+                            <i class="flag-icon flag-icon-br me-2"></i>Português
+                        </a>
                     </li>
                     <li>
-                        <a class="dropdown-item @(ViewBag.Language == "en" ? "active" : "")"
-                           href="@ViewBag.EnUrl">🇺🇸 English</a>
+                        <a class="dropdown-item" href="/en@(ViewContext.RouteData.Values["converter"] != null ? "/" + ViewContext.RouteData.Values["converter"] : "")">
+                            <i class="flag-icon flag-icon-us me-2"></i>English
+                        </a>
                     </li>
                     <li>
-                        <a class="dropdown-item @(ViewBag.Language == "es" ? "active" : "")"
-                           href="@ViewBag.EsUrl">🇪🇸 Español</a>
+                        <a class="dropdown-item" href="/es@(ViewContext.RouteData.Values["converter"] != null ? "/" + ViewContext.RouteData.Values["converter"] : "")">
+                            <i class="flag-icon flag-icon-es me-2"></i>Español
+                        </a>
                     </li>
                 </ul>
             </div>
-
-            
-@*          
-            <!-- CTA Button -->
-            <a href="#conversion-form" class="btn btn-primary btn-sm scroll-to-form hover-lift">
-                @ViewBag.CtaButtonText
-            </a>
- *@
-            </div>
+        </div>
     </div>
-</header>
\ No newline at end of file
+</nav>
+
+<script>
+    // Atualizar status dos módulos no header
+    async function updateModulesStatus() {
+        try {
+            const response = await fetch('/api/menu/converters?language=@ViewBag.Language');
+            const data = await response.json();
+
+            const statusIndicator = document.getElementById('modules-status');
+            const countElement = document.getElementById('modules-count');
+
+            if (data.success && data.menu) {
+                const totalModules = data.menu.reduce((total, category) => total + category.items.length, 0);
+                const activeModules = data.menu.reduce((total, category) =>
+                    total + category.items.filter(item => item.isHealthy !== false).length, 0);
+
+                statusIndicator.className = `status-indicator me-2 ${activeModules === totalModules ? 'bg-success' : 'bg-warning'}`;
+                statusIndicator.style.width = '8px';
+                statusIndicator.style.height = '8px';
+                statusIndicator.style.borderRadius = '50%';
+                statusIndicator.style.display = 'inline-block';
+
+                countElement.textContent = `${activeModules}/${totalModules} módulos`;
+            } else {
+                statusIndicator.className = 'status-indicator me-2 bg-danger';
+                countElement.textContent = 'Erro ao carregar';
+            }
+        } catch (error) {
+            console.error('Erro ao atualizar status:', error);
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', updateModulesStatus);
+</script>
\ No newline at end of file
diff --git a/OnlyOneAccessTemplate/wwwroot/css/site.css b/OnlyOneAccessTemplate/wwwroot/css/site.css
index ad2a1c3..95b4d43 100644
--- a/OnlyOneAccessTemplate/wwwroot/css/site.css
+++ b/OnlyOneAccessTemplate/wwwroot/css/site.css
@@ -1,237 +1,51 @@
-/* Custom CSS for Conversion Template */
-
+/* Reset e Variáveis */
 :root {
-    --primary-color: #28a745;
-    --secondary-color: #20c997;
-    --success-color: #28a745;
-    --accent-color: #34ce57;
-    --light-green: #e8f5e8;
-    --dark-green: #1e7e34;
-    --warning-color: #ffc107;
-    --danger-color: #dc3545;
-    --info-color: #17a2b8;
-    --dark-color: #343a40;
-    --light-color: #f8f9fa;
-    --border-radius: 0.5rem;
-    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-    --transition: all 0.3s ease;
+    --primary-color: #2563eb;
+    --primary-dark: #1d4ed8;
+    --secondary-color: #059669;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --dark-color: #111827;
+    --light-color: #f8fafc;
+    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-/* Global Styles */
 * {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     line-height: 1.6;
-    color: #333;
-    overflow-x: hidden;
+    color: #374151;
+    background-color: #f8fafc;
 }
 
-.scroll-smooth {
-    scroll-behavior: smooth;
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
-    line-height: 1.2;
-    margin-bottom: 1rem;
-}
-
-.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
-    font-weight: 800;
-    line-height: 1.1;
-}
-
-/* Animations */
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
-    }
-
-    40% {
-        transform: translateY(-10px);
-    }
-
-    60% {
-        transform: translateY(-5px);
-    }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.05);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.animate-bounce {
-    animation: bounce 2s infinite;
-}
-
-.animate-fadeInUp {
-    animation: fadeInUp 0.6s ease-out;
-}
-
-.animate-pulse {
-    animation: pulse 2s infinite;
-}
-
-/* Utility Classes */
-.hover-lift {
-    transition: var(--transition);
-}
-
-    .hover-lift:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--box-shadow-lg);
-    }
-
-.bg-gradient-primary {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-}
-
-.bg-gradient-green {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
-}
-
-.text-gradient {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.text-green-light {
-    color: var(--accent-color) !important;
-}
-
-.shadow-custom {
-    box-shadow: 0 10px 25px rgba(40, 167, 69, 0.15);
-}
-
-/* Header Styles */
-.navbar {
-    transition: var(--transition);
-    backdrop-filter: blur(10px);
-    background-color: #ffffff !important;
-    border-bottom: 1px solid var(--light-green);
-}
-
-    .navbar.scrolled {
-        background: rgba(255, 255, 255, 0.98) !important;
-        box-shadow: var(--box-shadow);
-    }
-
+/* Header Moderno */
 .navbar-brand {
     font-weight: 800;
     font-size: 1.5rem;
+    color: white !important;
 }
 
-.nav-link {
-    font-weight: 500;
-    transition: var(--transition);
-    position: relative;
-    color: #666 !important;
-}
-
-    .nav-link:hover,
-    .nav-link.active {
-        color: var(--primary-color) !important;
-    }
-
-    .nav-link::after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: 50%;
-        width: 0;
-        height: 2px;
-        background: var(--primary-color);
-        transition: var(--transition);
-        transform: translateX(-50%);
-    }
-
-    .nav-link:hover::after,
-    .nav-link.active::after {
-        width: 100%;
-    }
-
-/* Melhorar dropdown */
-.dropdown-menu {
-    border: 1px solid var(--light-green);
-    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.1);
-}
-
-.dropdown-item {
-    color: #666;
-    transition: var(--transition);
-}
-
-    .dropdown-item:hover {
-        background-color: var(--light-green);
-        color: var(--primary-color);
-    }
-
-    .dropdown-item.active {
-        background-color: var(--primary-color);
-        color: white;
-    }
-
-/* Melhorar botão do idioma */
-.btn-outline-success {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-}
-
-    .btn-outline-success:hover {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color);
-        color: white;
-    }
-
-/* Melhorar navbar toggler */
-.navbar-toggler {
-    border-color: var(--primary-color);
-    padding: 4px 8px;
-}
-
-    .navbar-toggler:focus {
-        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
-        border-color: var(--primary-color);
-    }
-
-.navbar-toggler-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2840, 167, 69, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+.navbar {
+    box-shadow: var(--shadow-sm);
+    backdrop-filter: blur(10px);
 }
 
 /* Hero Section */
 .hero-section {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
+    background: var(--gradient-primary);
+    color: white;
+    padding: 4rem 0;
     position: relative;
     overflow: hidden;
 }
@@ -243,473 +57,395 @@ h1, h2, h3, h4, h5, h6 {
         left: 0;
         right: 0;
         bottom: 0;
-        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><polygon fill="%23ffffff" points="1000,100 1000,0 0,100"/></svg>') no-repeat bottom;
-        background-size: 100% 100px;
-        pointer-events: none;
+        background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="30" cy="30" r="1"/></g></svg>') repeat;
+        animation: float 20s infinite linear;
     }
 
-.hero-content h1 {
-    font-size: clamp(2.5rem, 5vw, 4rem);
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+
+    100% {
+        transform: translateY(-60px);
+    }
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 800;
     margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, #ffffff, #e0e7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-.hero-features .fas {
-    color: var(--accent-color);
+.hero-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
 }
 
-.scroll-indicator {
-    position: absolute;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
+/* Badges */
+.feature-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50px;
+    margin: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-/* Feature Cards */
-.feature-card {
-    transition: var(--transition);
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    height: 100%;
+/* Layout Principal */
+.main-layout {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
 }
 
-    .feature-card:hover {
-        transform: translateY(-10px);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-        border-color: var(--primary-color);
+/* Menu de Módulos */
+.modules-sidebar {
+    background: white;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    padding: 1.5rem;
+    height: fit-content;
+    position: sticky;
+    top: 2rem;
+}
+
+.modules-list {
+    max-height: 600px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+    .modules-list::-webkit-scrollbar {
+        width: 6px;
     }
 
-.feature-icon {
-    transition: var(--transition);
-}
-
-.feature-card:hover .feature-icon {
-    transform: scale(1.1);
-}
-
-/* Conversion Form */
-.conversion-form-wrapper {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.conversion-section {
-    background: linear-gradient(135deg, var(--light-green) 0%, #f8f9fa 100%);
-}
-
-.form-control,
-.form-select {
-    border: 2px solid #e9ecef;
-    transition: var(--transition);
-    font-size: 1.1rem;
-    padding: 0.75rem 1rem;
-}
-
-    .form-control:focus,
-    .form-select:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+    .modules-list::-webkit-scrollbar-track {
+        background: #f1f5f9;
+        border-radius: 3px;
     }
 
-.form-control-lg {
-    font-size: 1.2rem;
-    padding: 1rem 1.25rem;
-}
-
-.btn {
-    font-weight: 600;
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-    position: relative;
-    overflow: hidden;
-}
-
-    .btn::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-        transition: left 0.5s;
+    .modules-list::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
     }
 
-    .btn:hover::before {
-        left: 100%;
-    }
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-    border: none;
-    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
-}
-
-    .btn-primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
-        background: linear-gradient(135deg, var(--dark-green), var(--primary-color));
-    }
-
-.btn-lg {
-    padding: 1rem 2rem;
-    font-size: 1.1rem;
-}
-
-/* Loading States */
-.btn-loading .spinner-border-sm {
-    width: 1rem;
-    height: 1rem;
-}
-
-/* Security Badge */
-.security-badges {
-    opacity: 0.8;
-}
-
-    .security-badges i {
-        color: var(--success-color);
-    }
-
-/* Benefits Side */
-.benefits-content {
-    position: relative;
-}
-
-.benefit-list .fas {
-    font-size: 1.2rem;
-}
-
-.stars {
-    font-size: 0.9rem;
-}
-
-/* Testimonials */
-.testimonial-card {
-    transition: var(--transition);
-    border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-    .testimonial-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--box-shadow-lg);
-    }
-
-    .testimonial-card blockquote {
-        font-style: italic;
-        position: relative;
-    }
-
-        .testimonial-card blockquote::before {
-            content: '"';
-            font-size: 3rem;
-            color: var(--primary-color);
-            position: absolute;
-            top: -1rem;
-            left: -1rem;
-            opacity: 0.3;
+        .modules-list::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
         }
 
-/* CTA Section */
-.cta-section {
-    position: relative;
-    overflow: hidden;
+.module-item {
+    display: block;
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    border-radius: 12px;
+    border: 2px solid transparent;
+    background: #f8fafc;
+    color: #374151;
+    text-decoration: none;
+    transition: all 0.2s ease;
 }
 
-    .cta-section::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><polygon fill="%23ffffff" points="0,0 0,100 1000,0"/></svg>') no-repeat top;
-        background-size: 100% 100px;
-        pointer-events: none;
+    .module-item:hover {
+        background: var(--gradient-primary);
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-md);
+        border-color: rgba(255, 255, 255, 0.2);
     }
 
-/* Countdown Timer */
-.countdown-timer {
-    font-family: 'Courier New', monospace;
-}
+    .module-item.active {
+        background: var(--gradient-success);
+        color: white;
+        box-shadow: var(--shadow-md);
+    }
 
-.countdown-number {
-    min-width: 60px;
-    min-height: 60px;
+.module-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: rgba(59, 130, 246, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-weight: bold;
-    box-shadow: var(--box-shadow);
+    margin-bottom: 0.75rem;
+    font-size: 1.2rem;
+    color: var(--primary-color);
 }
 
-/* Footer */
-.footer {
-    background: var(--dark-color);
-}
-
-.social-links a {
-    display: inline-block;
-    width: 40px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 50%;
-    text-align: center;
-    line-height: 40px;
-    transition: var(--transition);
-}
-
-    .social-links a:hover {
-        background: var(--primary-color);
-        transform: translateY(-3px);
-    }
-
-/* Modals */
-.modal-content {
-    border: none;
-    border-radius: 1rem;
-    overflow: hidden;
-}
-
-.modal-header {
-    background: var(--light-color);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-/* Success Modal */
-.success-icon {
-    color: var(--success-color);
-    animation: pulse 2s infinite;
-}
-
-/* Progress Bar */
-.scroll-progress {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 3px;
-    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-    z-index: 9999;
-    transition: width 0.3s ease;
-}
-
-/* Scroll to Top Button */
-#scrollToTop {
-    transition: var(--transition);
-    box-shadow: var(--box-shadow-lg);
-}
-
-    #scrollToTop:hover {
-        transform: translateY(-3px) scale(1.1);
-    }
-
-/* Language Switcher */
-.dropdown-item.active {
-    background: var(--primary-color);
+.module-item:hover .module-icon {
+    background: rgba(255, 255, 255, 0.2);
     color: white;
 }
 
-/* Form Validation */
-.was-validated .form-control:valid,
-.was-validated .form-select:valid {
-    border-color: var(--success-color);
+.module-title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    margin-bottom: 0.25rem;
 }
 
-    .was-validated .form-control:valid:focus,
-    .was-validated .form-select:valid:focus {
-        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+.module-description {
+    font-size: 0.8rem;
+    opacity: 0.8;
+    line-height: 1.4;
+}
+
+.category-header {
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #6b7280;
+    margin: 1.5rem 0 0.75rem 0;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+    .category-header:first-child {
+        margin-top: 0;
     }
 
-.was-validated .form-control:invalid,
-.was-validated .form-select:invalid {
-    border-color: var(--danger-color);
+/* Área do Conversor */
+.converter-area {
+    background: white;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    padding: 2rem;
+    margin-bottom: 2rem;
 }
 
-    .was-validated .form-control:invalid:focus,
-    .was-validated .form-select:invalid:focus {
-        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
-    }
-
-.invalid-feedback {
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
+.converter-card {
+    border: none;
+    border-radius: 16px;
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
 }
 
-.valid-feedback {
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-    color: var(--success-color);
+.converter-header {
+    background: var(--gradient-primary);
+    color: white;
+    padding: 2rem;
+    text-align: center;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-    .hero-section {
-        min-height: 80vh;
-        padding: 2rem 0;
-    }
+.step-indicators {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin: 2rem 0;
+}
 
-    .hero-content h1 {
-        font-size: 2.5rem;
+.step-indicator {
+    text-align: center;
+    flex: 1;
+    max-width: 200px;
+}
+
+.step-number {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--gradient-success);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin: 0 auto 1rem;
+    box-shadow: var(--shadow-md);
+}
+
+.step-title {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--dark-color);
+}
+
+.step-description {
+    font-size: 0.9rem;
+    color: #6b7280;
+}
+
+/* Anúncios Placeholder */
+.ad-placeholder {
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+    border: 2px dashed #d1d5db;
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    color: #6b7280;
+    min-height: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem 0;
+}
+
+    .ad-placeholder i {
+        font-size: 2rem;
         margin-bottom: 1rem;
+        opacity: 0.5;
     }
 
-    .conversion-form-wrapper .row {
-        flex-direction: column-reverse;
+    .ad-placeholder.banner {
+        min-height: 90px;
+        flex-direction: row;
+        gap: 1rem;
     }
 
-    .countdown-number {
-        min-width: 50px;
-        min-height: 50px;
-        font-size: 1.2rem;
+    .ad-placeholder.sidebar {
+        min-height: 600px;
+        position: sticky;
+        top: 2rem;
     }
 
-    .feature-card {
-        margin-bottom: 1.5rem;
+    .ad-placeholder.rectangle {
+        min-height: 250px;
+        max-width: 300px;
+        margin: 1rem auto;
     }
 
-    .btn-lg {
-        padding: 0.75rem 1.5rem;
-        font-size: 1rem;
+/* Seção de Benefícios */
+.benefits-section {
+    background: white;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    padding: 3rem 2rem;
+    margin: 2rem 0;
+}
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.feature-item {
+    text-align: center;
+    padding: 2rem 1rem;
+    border-radius: 16px;
+    background: #f8fafc;
+    transition: all 0.3s ease;
+}
+
+    .feature-item:hover {
+        transform: translateY(-4px);
+        box-shadow: var(--shadow-lg);
+        background: white;
+    }
+
+.feature-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 16px;
+    background: var(--gradient-success);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    font-size: 1.5rem;
+}
+
+/* Responsivo */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .modules-sidebar {
+        margin-bottom: 2rem;
+        position: static;
+    }
+
+    .modules-list {
+        max-height: 300px;
+    }
+
+    .step-indicators {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .converter-area {
+        padding: 1rem;
+    }
+
+    .ad-placeholder.sidebar {
+        display: none;
     }
 }
 
-@media (max-width: 576px) {
-    .hero-content h1 {
-        font-size: 2rem;
-    }
-
-    .display-5 {
-        font-size: 2rem;
-    }
-
-    .lead {
-        font-size: 1rem;
-    }
-
-    .countdown-timer .d-flex {
-        gap: 1rem !important;
-    }
-
-    .countdown-number {
-        min-width: 40px;
-        min-height: 40px;
-        font-size: 1rem;
-    }
-
-    .navbar-brand {
-        font-size: 1.25rem;
+@media (min-width: 1200px) {
+    .hero-title {
+        font-size: 4rem;
     }
 }
 
-/* Print Styles */
-@media print {
-    .navbar,
-    .scroll-indicator,
-    #scrollToTop,
-    .scroll-progress,
-    .cta-section,
-    footer {
-        display: none !important;
-    }
+/* Animações */
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease forwards;
+}
 
-    .hero-section {
-        min-height: auto;
-        padding: 2rem 0;
-    }
-
-    * {
-        box-shadow: none !important;
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
-    :root {
-        --primary-color: #0000ff;
-        --secondary-color: #000080;
-        --border-radius: 0;
+.loading-shimmer {
+    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
     }
 
-    .btn,
-    .form-control,
-    .form-select,
-    .card {
-        border: 2px solid #000;
+    100% {
+        background-position: 200% 0;
     }
 }
 
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-
-    .animate-bounce,
-    .animate-pulse {
-        animation: none;
-    }
+/* Melhorias de Acessibilidade */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 }
 
-/* Dark Mode Support */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --dark-color: #ffffff;
-        --light-color: #1a1a1a;
-    }
-
-    body {
-        background-color: #1a1a1a;
-        color: #ffffff;
-    }
-
-    .bg-white {
-        background-color: #2a2a2a !important;
-        color: #ffffff;
-    }
-
-    .bg-light {
-        background-color: #2a2a2a !important;
-    }
-
-    .text-dark {
-        color: #ffffff !important;
-    }
-
-    .text-muted {
-        color: #cccccc !important;
-    }
-
-    .form-control,
-    .form-select {
-        background-color: #2a2a2a;
-        border-color: #404040;
-        color: #ffffff;
-    }
-
-        .form-control:focus,
-        .form-select:focus {
-            background-color: #2a2a2a;
-            border-color: var(--primary-color);
-            color: #ffffff;
-        }
-
-    .modal-content {
-        background-color: #2a2a2a;
-        color: #ffffff;
-    }
-
-    .dropdown-menu {
-        background-color: #2a2a2a;
-        border-color: #404040;
-    }
-
-    .dropdown-item {
-        color: #ffffff;
-    }
-
-        .dropdown-item:hover {
-            background-color: #404040;
-        }
+/* Focus states */
+.module-item:focus,
+button:focus,
+.btn:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
 }