Log release HML: UEA-PRODEM

infra/releases/2026-06-10_11-39-21_HML.md

@@ -0,0 +1,45 @@
+# Release HML
+
+Data: qua 10 jun 2026 11:39:21 -03
+
+Ambiente:
+HML
+
+Descrição:
+UEA-PRODEM
+
+Branch:
+develop
+
+Arquivos alterados antes do commit:
+ D infra/releases/2026-06-08_23-50-57_HML.md
+ M src/App.tsx
+ M src/config/site.ts
+ M src/pages/Home.tsx
+ M src/sections/Navigation.tsx
+?? infra/releases/2026-06-10_11-39-21_HML.md
+?? public/uea-logo-1.jpg
+?? public/uea-logo-2.jpg
+?? src/pages/Status.tsx
+?? src/pages/area-cliente/UeaProdem.tsx
+
+Status:
+Preparado para publicação
+
+Commit:
+d420d334
+
+Arquivos no commit:
+infra/releases/2026-06-08_23-50-57_HML.md
+infra/releases/2026-06-10_11-39-21_HML.md
+public/uea-logo-1.jpg
+public/uea-logo-2.jpg
+src/App.tsx
+src/config/site.ts
+src/pages/Home.tsx
+src/pages/Status.tsx
+src/pages/area-cliente/UeaProdem.tsx
+src/sections/Navigation.tsx
+
+Status final:
+Publicado no Gitea / aguardando pipeline HML

src/App.tsx

@@ -11,6 +11,7 @@ import Login from './pages/Login';
 // Página inicial carrega direto
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
+import Status from './pages/Status';
 
 // Todas as outras páginas com lazy loading
 const Sobre = lazy(() => import('./pages/Sobre'));
@@ -86,6 +87,7 @@ const Microsoft365Analyzer = lazy(() => import('./pages/ferramentas/Microsoft365
 // Area do Cliente
 const AdminAreaCliente = lazy(() => import('./pages/area-cliente/Admin'));
 const FormularioPublico = lazy(() => import('./pages/area-cliente/FormularioPublico'));
+const UeaProdem = lazy(() => import('./pages/area-cliente/UeaProdem'));
 
 import './App.css';
 
@@ -216,6 +218,9 @@ function App() {
               {/* Formulario Publico */}
               <Route path="/formulario/:code" element={<FormularioPublico />} />
 
+              {/* UEA-PRODEM Ambiente Personalizado */}
+              <Route path="/uea-prodem-angola" element={<UeaProdem />} />
+
               {/* Contato */}
               <Route path="/contato" element={<Contato />} />
 
@@ -223,6 +228,9 @@ function App() {
               <Route path="/privacidade" element={<Privacidade />} />
               <Route path="/termos" element={<Termos />} />
 
+              {/* Status / Versionamento */}
+              <Route path="/status" element={<Status />} />
+
               {/* 404 */}
               <Route path="*" element={<NotFound />} />
             </Routes>

src/config/site.ts

@@ -1,119 +1,59 @@
 // ============================================================================
-// CONFIGURACAO CENTRAL DO SITE - AVANZATO
-// ============================================================================
-// EDITE ESTE ARQUIVO para alterar logo, redes sociais, contatos, etc.
-// NAO PRECISA editar Navigation.tsx, Footer.tsx ou outros componentes.
-// Apenas este arquivo controla todos os dados do site.
+// CONFIGURACAO CENTRAL - Avanzato Tecnologia
 // ============================================================================
 
 // --- LOGO -------------------------------------------------------------------
-// Opcao 1: SVG inline (digite o codigo SVG aqui)
-// Opcao 2: URL da imagem (deixe svgInline vazio e preencha imageUrl)
 
 export const LOGO = {
-  // Opcao 1: SVG inline (deixe vazio se for usar imagem)
-  svgInline: '',
-
-  // Opcao 2: URL da imagem
-  // Use '/logo.png' para carregar da pasta public/ (funciona em qualquer ambiente)
-  // Use 'https://avanzato.com.br/logo.png' apenas se for carregar de servidor externo
-  imageUrl: '/logo.png',
-
-  // Texto ao lado do logo (deixe vazio se o logo ja tiver texto)
-  text: '',
-  textHighlight: '',
-
-  // Link do logo (para onde vai quando clica)
+  text: 'Avanzato',
+  textHighlight: 'Tecnologia',
   href: '/',
+  imageUrl: 'https://avanzato.com.br/logo.png',
+  svgInline: '',
 };
 
-// --- REDES SOCIAIS ----------------------------------------------------------
-// Defina apenas as redes que quer mostrar. Para ocultar, deixe a url vazia.
+// --- EMPRESA ----------------------------------------------------------------
 
-export const SOCIAL_LINKS = {
-  facebook: {
-    url: 'https://www.facebook.com/avanzatotec',
-    label: 'Facebook',
-    // Se quiser icone customizado, coloque SVG aqui. Deixe vazio para usar padrao.
-    iconSvg: '',
-  },
-  youtube: {
-    url: 'https://www.youtube.com/@AvanzatoTecnologia',
-    label: 'YouTube',
-    iconSvg: '',
-  },
-  linkedin: {
-    url: 'https://www.linkedin.com/company/avanzato-tecnologia-e-informatica/',
-    label: 'LinkedIn',
-    iconSvg: '',
-  },
-  instagram: {
-    url: 'https://www.instagram.com/avanzato.tecnologia/',
-    label: 'Instagram',
-    iconSvg: '',
-  },
-  // Adicione mais redes se quiser:
-  // twitter: { url: '', label: 'Twitter', iconSvg: '' },
-  // tiktok: { url: '', label: 'TikTok', iconSvg: '' },
-};
-
-// --- CONTATOS ----------------------------------------------------------------
-
-export const CONTACT = {
-  // Telefone principal (usado no WhatsApp widget e CTAs)
-  phone: '(11) 4810-1704',
-  phoneRaw: '551148101704', // Com codigo do pais, sem espacos
-
-  // E-mails
-  email: 'leads@avanzato.com.br',
-  emailGeneral: 'contato@avanzato.com.br',
-
-  // WhatsApp
-  whatsappNumber: '551148101704',
-
-  // Link do suporte (area do cliente)
-  supportUrl: 'https://suporte.avanzato.com.br/',
+export const COMPANY = {
+  name: 'Avanzato Tecnologia e Informatica Ltda',
+  description: 'Ha mais de 23 anos transformando a tecnologia em resultados concretos para empresas.',
+  cnpj: '05.542.560/0001-38',
 };
 
 // --- ENDERECOS --------------------------------------------------------------
 
 export const ADDRESSES = [
-  {
-    label: 'Escritorio Principal',
-    street: 'Rua Juiz de Fora, 76',
-    city: 'Guarulhos',
-    state: 'SP',
-    cep: '',
-  },
-  {
-    label: 'Sao Paulo',
-    street: 'Rua Dom Estevao Pimentel, 165',
-    city: 'Sao Paulo',
-    state: 'SP',
-    cep: '',
-  },
-  {
-    label: 'Mogi das Cruzes',
-    street: 'Rua Professor Flaviano de Melo, 250',
-    city: 'Mogi das Cruzes',
-    state: 'SP',
-    cep: '',
-  },
+  { street: 'Rua Juiz de Fora, 76', city: 'Guarulhos', state: 'SP', cep: '07020-080' },
 ];
 
-// --- DESCRICAO DA EMPRESA ---------------------------------------------------
+// --- CONTATOS ---------------------------------------------------------------
 
-export const COMPANY = {
-  name: 'Avanzato Tecnologia',
-  tagline: 'Solucoes em TI Gerenciada, Cloud e Seguranca para empresas que nao podem parar.',
-  description: 'Solucoes em TI Gerenciada, Cloud e Seguranca para empresas que nao podem parar. Seu parceiro estrategico em transformacao digital.',
-  fullDescription: 'Há mais de 23 anos, a Avanzato Tecnologia é referência em TI Gerenciada, Cloud Computing e Segurança da Informação. Atendemos empresas de todos os portes em Guarulhos, São Paulo e região.',
-  foundingYear: '2001',
-  cnpj: '',
+export const CONTACT = {
+  phone: '(11) 4810-1704',
+  phoneRaw: '551148101704',
+  email: 'contato@avanzato.com.br',
+  whatsapp: '551148101704',
+  address: 'Rua Juiz de Fora, 76 - Guarulhos/SP',
 };
 
-// --- NAVEGACAO (MENU) -------------------------------------------------------
-// Defina os links do menu principal aqui
+// --- REDES SOCIAIS ----------------------------------------------------------
+
+export const SOCIAL = {
+  facebook: 'https://www.facebook.com/avanzatotec',
+  youtube: 'https://www.youtube.com/@AvanzatoTecnologia',
+  linkedin: 'https://www.linkedin.com/company/avanzato-tecnologia-e-informatica/',
+  instagram: 'https://www.instagram.com/avanzato.tecnologia/',
+};
+
+// LEGADO - formato usado pelo Footer.tsx
+export const SOCIAL_LINKS: Record<string, { url: string; iconSvg?: string; label: string }> = {
+  facebook: { url: SOCIAL.facebook, label: 'Facebook' },
+  youtube: { url: SOCIAL.youtube, label: 'YouTube' },
+  linkedin: { url: SOCIAL.linkedin, label: 'LinkedIn' },
+  instagram: { url: SOCIAL.instagram, label: 'Instagram' },
+};
+
+// --- NOVO MENU COMPACTO COM SUBMENUS ----------------------------------------
 
 export const NAV_LINKS = [
   { name: 'Home', href: '/' },
@@ -126,16 +66,27 @@ export const NAV_LINKS = [
       { name: 'Cloud Computing', href: '/servicos/cloud-computing' },
       { name: 'Seguranca', href: '/servicos/seguranca' },
       { name: 'Suporte Tecnico', href: '/servicos/suporte' },
+      { name: 'Redes e Infraestrutura', href: '/servicos/redes' },
+      { name: 'Backup e DR', href: '/servicos/backup' },
+      { name: 'PABX VoIP', href: '/servicos/pabx' },
+      { name: 'Servidores', href: '/servicos/servidores' },
+      { name: 'Consultoria', href: '/servicos/consultoria' },
+      { name: 'NOC', href: '/servicos/noc' },
+    ],
+  },
+  {
+    name: 'Solucoes',
+    href: '#',
+    submenu: [
+      { name: 'Tecnologias', href: '/tecnologias' },
+      { name: 'Ferramentas Gratuitas', href: '/ferramentas' },
+      { name: 'Avaliacao de TI', href: '/avaliacao' },
+      { name: 'Tecnologia para Condominios', href: '/tecnologia-para-condominios' },
     ],
   },
-  { name: 'Tecnologias', href: '/tecnologias' },
-  { name: 'Avaliacao TI', href: '/avaliacao' },
-  { name: 'Ferramentas', href: '/ferramentas' },
-  { name: 'Onde Atuamos', href: '/onde-atuamos' },
   { name: 'Cases', href: '/cases' },
   { name: 'Blog', href: '/blog' },
   { name: 'Contato', href: '/contato' },
-  { name: 'Area do Cliente', href: '/area-do-cliente' },
 ];
 
 // --- LINKS DO FOOTER --------------------------------------------------------
@@ -146,6 +97,12 @@ export const FOOTER_LINKS = {
     { name: 'Cloud Computing', href: '/servicos/cloud-computing' },
     { name: 'Seguranca da Informacao', href: '/servicos/seguranca' },
     { name: 'Suporte Tecnico', href: '/servicos/suporte' },
+    { name: 'Redes e Infraestrutura', href: '/servicos/redes' },
+    { name: 'Backup e DR', href: '/servicos/backup' },
+    { name: 'PABX VoIP', href: '/servicos/pabx' },
+    { name: 'Servidores', href: '/servicos/servidores' },
+    { name: 'Consultoria', href: '/servicos/consultoria' },
+    { name: 'NOC', href: '/servicos/noc' },
   ],
   empresa: [
     { name: 'Sobre nos', href: '/sobre' },
@@ -155,56 +112,43 @@ export const FOOTER_LINKS = {
     { name: 'Trabalhe conosco', href: '/contato' },
   ],
   suporte: [
-    { name: 'Central de ajuda', href: '/contato' },
-    { name: 'Area do cliente', href: 'https://suporte.avanzato.com.br/' },
+    { name: 'Central de ajuda', href: 'https://suporte.avanzato.com.br/' },
+    { name: 'Area do cliente', href: '/area-do-cliente' },
     { name: 'Contato', href: '/contato' },
   ],
-  legais: [
+  legal: [
     { name: 'Politica de Privacidade', href: '/privacidade' },
     { name: 'Termos de Uso', href: '/termos' },
   ],
 };
 
-// --- CORES DO TEMA ----------------------------------------------------------
-// Se quiser mudar a cor principal do site, altere aqui
-
-export const THEME = {
-  primary: '#cbf400',      // Verde-limao (cor principal)
-  primaryDark: '#b8e000',  // Hover
-  background: '#0e0e0e',   // Fundo escuro
-  surface: '#1a1a1a',      // Cards
-  surfaceLight: '#141414', // Secoes alternadas
-  text: '#ffffff',
-  textMuted: '#9ca3af',
-  textDim: '#6b7280',
-};
-
-// --- SEO / META TAGS --------------------------------------------------------
-
-export const SEO = {
-  title: 'Avanzato Tecnologia | TI Gerenciada, Cloud e Seguranca em Guarulhos/SP',
-  description: 'Solucoes em TI Gerenciada, Cloud Computing e Seguranca da Informacao. +23 anos de experiencia, +500 clientes atendidos. Suporte 24/7 em Guarulhos e regiao.',
-  keywords: 'TI Gerenciada, Cloud Computing, Seguranca da Informacao, Suporte Tecnico, Guarulhos, Sao Paulo',
-  author: 'Avanzato Tecnologia',
-  siteUrl: 'https://avanzato.com.br',
-  ogImage: 'https://avanzato.com.br/og-image.jpg',
-};
-
 // --- WHATSAPP WIDGET --------------------------------------------------------
 
 export const WHATSAPP_CONFIG = {
   enabled: true,
   phoneNumber: '551148101704',
-  defaultMessage: 'Ola! Vi no site sobre tecnologia para condominios. Gostaria de mais informacoes.',
-  greetingText: 'Ola! Como podemos ajudar? Temos solucoes de VOIP e infraestrutura para condominios.',
-  showAfterSeconds: 3, // Segundos ate aparecer
+  defaultMessage: 'Ola! Vim pelo site e gostaria de mais informacoes.',
+  greetingText: 'Ola! Como podemos ajudar? Escolha uma opcao abaixo ou envie sua mensagem.',
   options: [
-    { label: 'Quero saber sobre VOIP', message: 'Ola! Quero saber mais sobre VOIP para condominios.' },
-    { label: 'Quero um diagnostico gratuito', message: 'Ola! Quero um diagnostico gratuito do meu condominio.' },
-    { label: 'Quero saber sobre CPD/Infraestrutura', message: 'Ola! Quero informacoes sobre gestao de CPD e infraestrutura.' },
+    { label: 'Quero uma proposta comercial', message: 'Ola! Gostaria de receber uma proposta comercial.' },
+    { label: 'Suporte tecnico', message: 'Ola! Preciso de suporte tecnico.' },
+    { label: 'Avanzato Tools', message: 'Ola! Gostaria de saber mais sobre as ferramentas gratuitas.' },
+    { label: 'Outro assunto', message: 'Ola! Gostaria de conversar sobre outro assunto.' },
   ],
 };
 
-// ============================================================================
-// FIM DA CONFIGURACAO
-// ============================================================================
+// --- DADOS UEA-PRODEM-ANGOLA ------------------------------------------------
+
+export const UEA_PRODEM = {
+  name: 'UEA-PRODEM-ANGOLA',
+  fullName: 'Uniao dos Empresarios de Angola - PRODEM',
+  slogan: 'Juntos por uma Angola Melhor',
+  logo1: '/uea-logo-1.jpg',
+  logo2: '/uea-logo-2.jpg',
+  colors: {
+    primary: '#C41E3A',    // Vermelho Angola
+    secondary: '#1a1a1a',  // Preto
+    accent: '#D4AF37',     // Dourado
+    light: '#F5F5DC',      // Bege claro
+  },
+};

src/pages/Home.tsx

@@ -1,20 +1,19 @@
-import { useState } from 'react'
-import '../App.css'
+import Hero from '../sections/Hero';
+import Services from '../sections/Services';
+import About from '../sections/About';
+import Testimonials from '../sections/Testimonials';
+import CondominiosCTA from '../sections/CondominiosCTA';
+import Contact from '../sections/Contact';
 
 export default function Home() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
+      <Hero />
+      <Services />
+      <About />
+      <Testimonials />
+      <CondominiosCTA />
+      <Contact />
     </>
-  )
+  );
 }

src/pages/Status.tsx

@@ -0,0 +1,191 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Download, Globe, AlertTriangle, CheckCircle, Server, Database, Shield } from 'lucide-react';
+
+interface VersionInfo {
+  version: string;
+  date: string;
+  environment: string;
+}
+
+const versions = [
+  { version: "1.5.0", date: "2026-06-05", title: "Area do Cliente", status: "em-desenvolvimento", changes: ["Formularios com codigo aleatorio", "Painel admin", "Seed UEA-PRODEM"] },
+  { version: "1.4.1", date: "2026-06-04", title: "PageSpeed Otimizado", status: "estavel", changes: ["WebP -98%", "Code-splitting -54%", "Acessibilidade"] },
+  { version: "1.4.0", date: "2026-06-02", title: "Avanzato Tools", status: "estavel", changes: ["7 ferramentas gratuitas", "DNS/SSL checkers", "Lead scoring"] },
+  { version: "1.3.4", date: "2026-05-28", title: "SEO Completo", status: "estavel", changes: ["Prerender 32 paginas", "Schema.org", "Sitemap"] },
+];
+
+export default function Status() {
+  const [version, setVersion] = useState<VersionInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/version.json?t=' + Date.now())
+      .then(r => r.json())
+      .then(data => { setVersion(data); setLoading(false); })
+      .catch(() => { setLoading(false); });
+  }, []);
+
+  const currentVersion = version?.version || "1.5.0";
+  const isDev = version?.environment === "auto-detect" || !version;
+
+  return (
+    <div className="min-h-screen bg-[#0e0e0e] text-white flex flex-col">
+      {/* Header */}
+      <header className="border-b border-[#2a2a2a] bg-[#0e0e0e]/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-[#cbf400] rounded-lg flex items-center justify-center">
+              <span className="text-[#0e0e0e] font-black text-sm">A</span>
+            </div>
+            <span className="font-semibold">Avanzato Status</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <div className={`w-2 h-2 rounded-full ${isDev ? 'bg-yellow-400 animate-pulse' : 'bg-green-400'}`} />
+            <span className={isDev ? 'text-yellow-400' : 'text-green-400'}>
+              {isDev ? 'Em desenvolvimento' : 'Produção'}
+            </span>
+          </div>
+        </div>
+      </header>
+
+      <div className="flex-1 max-w-6xl mx-auto px-6 py-12 w-full">
+        {/* Hero Status */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">
+            <span className="text-[#cbf400]">Avanzato</span> Tecnologia
+          </h1>
+          <p className="text-gray-400 max-w-2xl mx-auto">
+            Sistema em desenvolvimento. Versão atual e histórico de releases.
+          </p>
+        </div>
+
+        {/* Status Cards */}
+        <div className="grid md:grid-cols-3 gap-6 mb-12">
+          {/* Versão */}
+          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a]">
+            <div className="flex items-center gap-3 mb-4">
+              <Server className="w-5 h-5 text-[#cbf400]" />
+              <h3 className="font-semibold">Versão Atual</h3>
+            </div>
+            {loading ? (
+              <div className="w-8 h-8 border-2 border-[#cbf400] border-t-transparent rounded-full animate-spin" />
+            ) : (
+              <>
+                <div className="text-3xl font-bold text-[#cbf400] mb-1">{currentVersion}</div>
+                <p className="text-gray-500 text-sm">{version?.date || '2026-06-05'}</p>
+              </>
+            )}
+          </div>
+
+          {/* Ambiente */}
+          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a]">
+            <div className="flex items-center gap-3 mb-4">
+              <Database className="w-5 h-5 text-blue-400" />
+              <h3 className="font-semibold">Ambiente</h3>
+            </div>
+            <div className="text-3xl font-bold text-blue-400 mb-1">
+              {isDev ? 'Dev' : 'Prod'}
+            </div>
+            <p className="text-gray-500 text-sm">
+              {isDev ? 'localhost:3000' : 'avanzato.com.br'}
+            </p>
+          </div>
+
+          {/* Status */}
+          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a]">
+            <div className="flex items-center gap-3 mb-4">
+              <Shield className="w-5 h-5 text-green-400" />
+              <h3 className="font-semibold">Status</h3>
+            </div>
+            <div className="text-3xl font-bold text-green-400 mb-1">
+              {isDev ? 'Dev' : 'Online'}
+            </div>
+            <p className="text-gray-500 text-sm">
+              {isDev ? 'Backend em desenvolvimento' : 'Todos os sistemas operacionais'}
+            </p>
+          </div>
+        </div>
+
+        {/* Alerta Dev */}
+        {isDev && (
+          <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-2xl p-6 mb-12">
+            <div className="flex items-start gap-4">
+              <AlertTriangle className="w-6 h-6 text-yellow-400 shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-semibold text-yellow-400 mb-2">Modo Desenvolvimento Ativo</h3>
+                <p className="text-gray-400 text-sm mb-4">
+                  O sistema está rodando em ambiente de desenvolvimento. O backend (tRPC + MySQL) precisa estar configurado para todas as funcionalidades trabalharem.
+                </p>
+                <div className="flex flex-wrap gap-3">
+                  <Link
+                    to="/"
+                    className="inline-flex items-center gap-2 bg-[#cbf400] text-[#0e0e0e] px-5 py-2.5 rounded-xl font-semibold hover:bg-[#b8e000] transition-colors"
+                  >
+                    <Globe className="w-4 h-4" />
+                    Acessar Site
+                  </Link>
+                  <a
+                    href="/avanzato-site-v1.5.0-FINAL.zip"
+                    download
+                    className="inline-flex items-center gap-2 bg-[#1a1a1a] border border-[#2a2a2a] text-white px-5 py-2.5 rounded-xl hover:bg-[#2a2a2a] transition-colors"
+                  >
+                    <Download className="w-4 h-4" />
+                    Download v1.5.0
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Histórico de Versões */}
+        <h2 className="text-xl font-bold mb-6">Histórico de Versões</h2>
+        <div className="space-y-4">
+          {versions.map((v, i) => (
+            <div key={v.version} className={`bg-[#1a1a1a] rounded-2xl p-6 border ${i === 0 ? 'border-[#cbf400]/50' : 'border-[#2a2a2a]'}`}>
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  <span className={`text-lg font-bold ${i === 0 ? 'text-[#cbf400]' : 'text-white'}`}>
+                    v{v.version}
+                  </span>
+                  <span className="text-gray-500 text-sm">{v.date}</span>
+                  {v.status === 'em-desenvolvimento' && (
+                    <span className="px-2 py-0.5 bg-yellow-500/20 text-yellow-400 rounded text-xs font-medium">
+                      Em desenvolvimento
+                    </span>
+                  )}
+                  {v.status === 'estavel' && (
+                    <span className="px-2 py-0.5 bg-green-500/20 text-green-400 rounded text-xs font-medium flex items-center gap-1">
+                      <CheckCircle className="w-3 h-3" />
+                      Estável
+                    </span>
+                  )}
+                </div>
+                <span className="text-gray-400 font-medium">{v.title}</span>
+              </div>
+              <ul className="space-y-1">
+                {v.changes.map((change, j) => (
+                  <li key={j} className="text-gray-400 text-sm flex items-center gap-2">
+                    <span className="w-1 h-1 bg-[#cbf400] rounded-full" />
+                    {change}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <footer className="mt-16 pt-8 border-t border-[#2a2a2a] text-center">
+          <p className="text-gray-600 text-sm">
+            Avanzato Tecnologia &copy; 2026 - Sistema Interno
+          </p>
+          <p className="text-gray-700 text-xs mt-1">
+            v{currentVersion} - {version?.date || '2026-06-05'}
+          </p>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/pages/area-cliente/UeaProdem.tsx

@@ -0,0 +1,424 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowLeft, Shield, FileText, Users, BarChart3, BookOpen, Award, Globe, ChevronRight, CheckCircle } from 'lucide-react';
+
+const UEA_PRODEM = {
+  name: 'UEA-PRODEM-ANGOLA',
+  fullName: 'Uniao dos Empresarios de Angola - PRODEM',
+  slogan: 'Juntos por uma Angola Melhor',
+  logo1: '/uea-logo-1.jpg',
+  logo2: '/uea-logo-2.jpg',
+  colors: {
+    primary: '#C41E3A',
+    secondary: '#1a1a1a',
+    accent: '#D4AF37',
+    light: '#F5F5DC',
+  },
+};
+
+const modules = [
+  { icon: Globe, title: 'Portal Institucional', desc: 'Website oficial com identidade visual da UEA' },
+  { icon: Users, title: 'Gestao de Associados', desc: 'Cadastro, categorias e niveis de adesao' },
+  { icon: Database, title: 'Banco Central de Dados', desc: 'Consolidacao de dados de todos os membros' },
+  { icon: Shield, title: 'Area Restrita', desc: 'Acesso exclusivo para membros validados' },
+  { icon: FileText, title: 'Pagamento de Cotas', desc: 'Integracao com Multicaixa e referencias' },
+  { icon: BookOpen, title: 'Biblioteca Digital', desc: 'Documentos, estatutos e regulamentos' },
+  { icon: Award, title: 'Formacao e Certificacao', desc: 'Cursos online com certificados validados' },
+  { icon: BarChart3, title: 'Dashboard Executivo', desc: 'Relatorios e indicadores em tempo real' },
+];
+
+function Database(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>
+    </svg>
+  );
+}
+
+export default function UeaProdemPage() {
+  const [activeTab, setActiveTab] = useState<'visao' | 'formulario'>('visao');
+
+  return (
+    <div className="min-h-screen bg-[#0e0e0e] text-white">
+      {/* Header UEA */}
+      <header className="border-b border-[#C41E3A]/30 bg-[#0e0e0e]">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <Link to="/" className="flex items-center gap-2 text-gray-400 hover:text-[#cbf400] transition-colors text-sm">
+            <ArrowLeft className="w-4 h-4" />
+            avanzato.com.br
+          </Link>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-[#C41E3A] font-medium">Ambiente Personalizado</span>
+            <span className="text-gray-600">|</span>
+            <span className="text-[#D4AF37]">{UEA_PRODEM.name}</span>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero UEA */}
+      <section className="relative overflow-hidden">
+        {/* Background gradient */}
+        <div className="absolute inset-0 bg-[#C41E3A]/5" />
+        <div className="absolute top-0 right-0 w-96 h-96 bg-[#D4AF37]/5 rounded-full blur-3xl" />
+
+        <div className="relative max-w-7xl mx-auto px-6 py-16 text-center">
+          {/* Logos */}
+          <div className="flex justify-center items-center gap-8 mb-8">
+            <img src={UEA_PRODEM.logo1} alt="UEA Logo" className="h-32 w-auto rounded-xl shadow-2xl" />
+            <img src={UEA_PRODEM.logo2} alt="PRODEM Logo" className="h-32 w-auto rounded-xl shadow-2xl" />
+          </div>
+
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            <span className="text-[#C41E3A]">{UEA_PRODEM.fullName}</span>
+          </h1>
+          <p className="text-xl text-[#D4AF37] font-semibold mb-6">{UEA_PRODEM.slogan}</p>
+          <p className="text-gray-400 max-w-2xl mx-auto text-lg">
+            Levantamento de requisitos para desenvolvimento do Portal Institucional e Plataforma Digital
+          </p>
+
+          {/* Tabs */}
+          <div className="flex justify-center gap-4 mt-10">
+            <button
+              onClick={() => setActiveTab('visao')}
+              className={`px-6 py-3 rounded-xl font-semibold transition-all ${
+                activeTab === 'visao'
+                  ? 'bg-[#C41E3A] text-white shadow-lg shadow-[#C41E3A]/30'
+                  : 'bg-[#1a1a1a] text-gray-400 hover:text-white border border-[#2a2a2a]'
+              }`}
+            >
+              Visao Geral do Projeto
+            </button>
+            <button
+              onClick={() => setActiveTab('formulario')}
+              className={`px-6 py-3 rounded-xl font-semibold transition-all ${
+                activeTab === 'formulario'
+                  ? 'bg-[#C41E3A] text-white shadow-lg shadow-[#C41E3A]/30'
+                  : 'bg-[#1a1a1a] text-gray-400 hover:text-white border border-[#2a2a2a]'
+              }`}
+            >
+              Formulario de Requisitos
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Conteudo */}
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {activeTab === 'visao' ? (
+          <>
+            {/* Ecossistema */}
+            <div className="mb-16">
+              <h2 className="text-2xl font-bold text-center mb-2">Ecossistema Digital</h2>
+              <p className="text-gray-500 text-center mb-10">14 modulos integrados para transformacao digital</p>
+
+              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {modules.map((mod, i) => (
+                  <div
+                    key={i}
+                    className="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a] hover:border-[#C41E3A]/30 transition-all group"
+                  >
+                    <div className="w-12 h-12 bg-[#C41E3A]/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                      <mod.icon className="w-6 h-6 text-[#C41E3A]" />
+                    </div>
+                    <h3 className="font-semibold mb-2">{mod.title}</h3>
+                    <p className="text-gray-500 text-sm">{mod.desc}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Modulos adicionais */}
+            <div className="grid md:grid-cols-3 gap-4 mb-16">
+              {[
+                { title: 'Incubadora Empresarial', desc: 'Funil de evolucao: Ideia → Planeamento → MVP → Operacao → Crescimento → Escala' },
+                { title: 'Gestao de Mentorias', desc: 'Conexao entre mentores e empreendedores com acompanhamento' },
+                { title: 'Marketplace B2B', desc: 'Produtos e servicos entre membros com avaliacoes' },
+                { title: 'Gestao de Eventos', desc: 'Ingressos, transmissao online e certificados' },
+                { title: 'Relatorios Gerenciais', desc: 'Dashboards provinciais e nacionais em tempo real' },
+                { title: 'Sistema de Certificacao', desc: 'Certificados digitais com QR Code de validacao' },
+              ].map((item, i) => (
+                <div key={i} className="flex items-start gap-3 bg-[#1a1a1a]/50 rounded-xl p-4 border border-[#2a2a2a]">
+                  <CheckCircle className="w-5 h-5 text-[#D4AF37] shrink-0 mt-0.5" />
+                  <div>
+                    <h4 className="font-medium text-sm">{item.title}</h4>
+                    <p className="text-gray-500 text-xs mt-1">{item.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Proximos passos */}
+            <div className="bg-[#C41E3A]/5 border border-[#C41E3A]/20 rounded-2xl p-8 text-center">
+              <h3 className="text-xl font-bold mb-4">Proximo Passo</h3>
+              <p className="text-gray-400 mb-6 max-w-xl mx-auto">
+                Complete o formulario de levantamento de requisitos para que possamos apresentar a arquitetura da solucao, escopo funcional, cronograma e proposta financeira.
+              </p>
+              <button
+                onClick={() => setActiveTab('formulario')}
+                className="inline-flex items-center gap-2 bg-[#C41E3A] text-white px-8 py-4 rounded-xl font-semibold hover:bg-[#a01830] transition-all shadow-lg shadow-[#C41E3A]/30"
+              >
+                <FileText className="w-5 h-5" />
+                Preencher Formulario
+                <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
+          </>
+        ) : (
+          /* Formulario de Requisitos */
+          <div className="max-w-3xl mx-auto">
+            <div className="bg-[#1a1a1a] rounded-2xl border border-[#2a2a2a] p-8">
+              <div className="text-center mb-8">
+                <h2 className="text-2xl font-bold mb-2">Formulario de Requisitos</h2>
+                <p className="text-gray-400">Preencha todos os campos para podermos preparar a proposta completa.</p>
+              </div>
+
+              {/* 13 Secoes */}
+              <UeaFormSections />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Footer UEA */}
+      <footer className="border-t border-[#2a2a2a] mt-16">
+        <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <img src={UEA_PRODEM.logo1} alt="UEA" className="h-10 w-auto rounded" />
+            <div>
+              <p className="text-sm font-medium">{UEA_PRODEM.fullName}</p>
+              <p className="text-gray-600 text-xs">{UEA_PRODEM.slogan}</p>
+            </div>
+          </div>
+          <div className="text-center md:text-right">
+            <p className="text-gray-500 text-sm">Desenvolvido por <span className="text-[#cbf400]">Avanzato Tecnologia</span></p>
+            <p className="text-gray-600 text-xs mt-1">Plataforma em desenvolvimento - 2026</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+/* Secoes do formulario UEA */
+function UeaFormSections() {
+  const [openSection, setOpenSection] = useState<number | null>(0);
+
+  const sections = [
+    {
+      title: '1. Dados Institucionais',
+      fields: [
+        { label: 'Quantidade atual de membros individuais ativos', type: 'number' },
+        { label: 'Quantidade atual de empresas associadas', type: 'number' },
+        { label: 'Quantidade total de cadastros existentes', type: 'number' },
+        { label: 'Quantidade de membros pagantes', type: 'number' },
+        { label: 'Quantidade de membros inadimplentes', type: 'number' },
+        { label: 'Quantidade de provincias representadas', type: 'number' },
+        { label: 'Colaboradores administrativos da UEA', type: 'number' },
+        { label: 'Utilizadores com acesso administrativo', type: 'number' },
+      ],
+    },
+    {
+      title: '2. Projecao de Crescimento',
+      fields: [
+        { label: 'Membros previstos - 12 meses', type: 'number' },
+        { label: 'Membros previstos - 24 meses', type: 'number' },
+        { label: 'Membros previstos - 36 meses', type: 'number' },
+        { label: 'Empresas previstas - 12 meses', type: 'number' },
+        { label: 'Empresas previstas - 24 meses', type: 'number' },
+        { label: 'Empresas previstas - 36 meses', type: 'number' },
+        { label: 'Novos cadastros esperados/mes', type: 'number' },
+        { label: 'Acessos simultaneos em eventos', type: 'number' },
+      ],
+    },
+    {
+      title: '3. Registo e Validacao',
+      fields: [
+        { label: 'Quem aprovara os novos membros?', type: 'textarea' },
+        { label: 'Existirao administradores provinciais?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Existirao administradores municipais?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Validacao: centralizada ou descentralizada?', type: 'select', options: ['Centralizado', 'Descentralizado', 'Misto', 'A definir'] },
+        { label: 'Documentos obrigatorios por categoria', type: 'textarea' },
+        { label: 'Assinatura digital necessaria?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'QR Code de validacao nos certificados?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+      ],
+    },
+    {
+      title: '4. Estrutura de Membros',
+      fields: [
+        { label: 'Categorias de membros', type: 'textarea' },
+        { label: 'Niveis de adesao (Bronze, Prata, Ouro, Platina)', type: 'textarea' },
+        { label: 'Beneficios por categoria', type: 'textarea' },
+        { label: 'Valor de quota diferente por categoria?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Alteracao de categoria pela plataforma?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+      ],
+    },
+    {
+      title: '5. Pagamentos',
+      fields: [
+        { label: 'Plataformas de pagamento', type: 'multiselect', options: ['Multicaixa Express', 'Referencia Bancaria', 'Transferencia', 'Cartao', 'Outras'] },
+        { label: 'Fornecedor homologado?', type: 'textarea' },
+        { label: 'Sistema de faturacao definido?', type: 'select', options: ['Sim', 'Nao', 'Em desenvolvimento'] },
+        { label: 'Emissao automatica de:', type: 'multiselect', options: ['Faturas', 'Recibos', 'Declaracoes de pagamento'] },
+        { label: 'Regra de bloqueio por inadimplencia', type: 'textarea' },
+      ],
+    },
+    {
+      title: '6. Incubadora Empresarial',
+      fields: [
+        { label: 'Etapas do funil (Ideia, Planeamento, MVP, Operacao, Crescimento, Escala)', type: 'multiselect', options: ['Ideia', 'Planeamento', 'MVP', 'Operacao', 'Crescimento', 'Escala'] },
+        { label: 'Quem acompanhara os incubados?', type: 'textarea' },
+        { label: 'Metas obrigatorias?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'KPIs?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Relatorios necessarios', type: 'textarea' },
+      ],
+    },
+    {
+      title: '7. Formacao e Certificacao',
+      fields: [
+        { label: 'Quantidade estimada de cursos', type: 'number' },
+        { label: 'Hospedagem dos cursos', type: 'select', options: ['Plataforma propria', 'Ambiente externo', 'Misto', 'A definir'] },
+        { label: 'Quem produzira os conteudos?', type: 'textarea' },
+        { label: 'Certificados com validacao online?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Historico academico dos membros?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+      ],
+    },
+    {
+      title: '8. Marketplace B2B',
+      fields: [
+        { label: 'Tipos de produtos/servicos anunciados', type: 'textarea' },
+        { label: 'Intermediacao financeira pela UEA?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Avaliacoes dos fornecedores?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Sistema de mensagens entre membros?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+      ],
+    },
+    {
+      title: '9. Eventos',
+      fields: [
+        { label: 'Quantidade media de eventos/ano', type: 'number' },
+        { label: 'Venda de ingressos?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Transmissao online?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Certificados por participacao?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+      ],
+    },
+    {
+      title: '10. Banco Central de Dados (BCD)',
+      fields: [
+        { label: 'Objetivo operacional do BCD', type: 'textarea' },
+        { label: 'Dados a serem consolidados', type: 'textarea' },
+        { label: 'Quem tera acesso aos dados?', type: 'textarea' },
+        { label: 'Dashboards provinciais?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Dashboards nacionais?', type: 'select', options: ['Sim', 'Nao', 'A definir'] },
+        { label: 'Indicadores em tempo real', type: 'textarea' },
+      ],
+    },
+    {
+      title: '11. Documentacao Legal',
+      fields: [
+        { label: 'Estatuto completo da UEA', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Certidao de Registo', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Regulamentos internos', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Organograma oficial', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Politica de privacidade', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Politica de protecao de dados', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Manual de identidade visual', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+        { label: 'Logotipos em formato vetorial', type: 'select', options: ['Ja disponivel', 'Sera enviado', 'Nao disponivel'] },
+      ],
+    },
+    {
+      title: '12. Infraestrutura e Hospedagem',
+      fields: [
+        { label: 'Hospedagem: Angola ou internacional?', type: 'select', options: ['Angola', 'Internacional', 'Hibrido', 'A definir'] },
+        { label: 'Provedor cloud preferido', type: 'multiselect', options: ['AWS', 'Azure', 'Google Cloud', 'Digital Ocean', 'Infraestrutura propria', 'A definir'] },
+        { label: 'Orcamento para hospedagem mensal', type: 'text' },
+        { label: 'Equipa tecnica interna?', type: 'select', options: ['Sim', 'Nao', 'Parcial'] },
+      ],
+    },
+    {
+      title: '13. Relatorios Executivos',
+      fields: [
+        { label: 'Novos associados por periodo', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Associados por provincia', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Empresas incubadas', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Quotas recebidas', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Quotas em atraso', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Participacao em cursos', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Participacao em eventos', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Crescimento por sector economico', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Crescimento por provincia', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Indicadores de empregabilidade', type: 'select', options: ['Sim', 'Nao'] },
+        { label: 'Indicadores de impacto economico', type: 'select', options: ['Sim', 'Nao'] },
+      ],
+    },
+  ];
+
+  return (
+    <form className="space-y-4">
+      {sections.map((section, idx) => (
+        <div key={idx} className="bg-[#0e0e0e] rounded-xl border border-[#2a2a2a] overflow-hidden">
+          <button
+            type="button"
+            onClick={() => setOpenSection(openSection === idx ? null : idx)}
+            className="w-full flex items-center justify-between p-4 text-left hover:bg-[#1a1a1a] transition-colors"
+          >
+            <span className="font-semibold text-sm">{section.title}</span>
+            <ChevronRight className={`w-4 h-4 text-gray-500 transition-transform ${openSection === idx ? 'rotate-90' : ''}`} />
+          </button>
+
+          {openSection === idx && (
+            <div className="px-4 pb-4 space-y-4">
+              {section.fields.map((field, fidx) => (
+                <div key={fidx}>
+                  <label className="block text-xs text-gray-400 mb-1.5">{field.label}</label>
+                  {field.type === 'textarea' ? (
+                    <textarea
+                      rows={3}
+                      className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-[#C41E3A] focus:outline-none resize-none"
+                      placeholder="Responda aqui..."
+                    />
+                  ) : field.type === 'select' ? (
+                    <select className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-3 py-2 text-sm text-white focus:border-[#C41E3A] focus:outline-none appearance-none cursor-pointer">
+                      <option value="">Selecione...</option>
+                      {field.options?.map(opt => (
+                        <option key={opt} value={opt}>{opt}</option>
+                      ))}
+                    </select>
+                  ) : field.type === 'multiselect' ? (
+                    <div className="flex flex-wrap gap-2">
+                      {field.options?.map(opt => (
+                        <button
+                          key={opt}
+                          type="button"
+                          className="px-3 py-1.5 rounded-lg text-xs border border-[#2a2a2a] text-gray-400 hover:border-[#C41E3A]/50 hover:text-[#C41E3A] transition-colors"
+                        >
+                          {opt}
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <input
+                      type="number"
+                      className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-[#C41E3A] focus:outline-none"
+                      placeholder="0"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+
+      {/* Submit */}
+      <button
+        type="submit"
+        className="w-full bg-[#C41E3A] text-white py-4 rounded-xl font-bold hover:bg-[#a01830] transition-all shadow-lg shadow-[#C41E3A]/30 mt-6"
+      >
+        Enviar Respostas
+      </button>
+
+      <p className="text-center text-gray-600 text-xs mt-4">
+        Ao enviar, voce concorda com o processamento dos dados pela Avanzato Tecnologia.
+      </p>
+    </form>
+  );
+}

src/sections/Navigation.tsx

@@ -1,176 +1,207 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Menu, X, Phone, ChevronDown } from 'lucide-react';
+import { Menu, X, Phone, ChevronDown, ArrowRight } from 'lucide-react';
 import { LOGO, NAV_LINKS, CONTACT } from '../config/site';
 
+type NavItem = {
+  name: string;
+  href: string;
+  submenu?: { name: string; href: string }[];
+};
+
 const Navigation = () => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isServicesOpen, setIsServicesOpen] = useState(false);
+  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+  const [mobileOpenSubmenu, setMobileOpenSubmenu] = useState<string | null>(null);
   const location = useLocation();
+  const submenuTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 50);
-    };
-
+    const handleScroll = () => setIsScrolled(window.scrollY > 50);
     window.addEventListener('scroll', handleScroll, { passive: true });
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Fechar menu mobile ao mudar de rota
   useEffect(() => {
     setIsMobileMenuOpen(false);
-    setIsServicesOpen(false);
+    setOpenSubmenu(null);
+    setMobileOpenSubmenu(null);
   }, [location]);
 
   const isActive = (path: string) => {
-    if (path === '/') {
-      return location.pathname === '/';
-    }
+    if (path === '/') return location.pathname === '/';
     return location.pathname.startsWith(path);
   };
 
-  // Renderiza o logo (SVG inline ou imagem)
+  const handleSubmenuEnter = (name: string) => {
+    if (submenuTimeout.current) clearTimeout(submenuTimeout.current);
+    setOpenSubmenu(name);
+  };
+
+  const handleSubmenuLeave = () => {
+    submenuTimeout.current = setTimeout(() => setOpenSubmenu(null), 200);
+  };
+
   const renderLogo = () => {
     if (LOGO.imageUrl) {
       return <img src={LOGO.imageUrl} alt={LOGO.text} className="h-10 w-auto" />;
     }
-    return (
-      <div dangerouslySetInnerHTML={{ __html: LOGO.svgInline }} className="flex-shrink-0" />
-    );
+    return <div dangerouslySetInnerHTML={{ __html: LOGO.svgInline }} className="flex-shrink-0" />;
   };
 
   return (
-    <nav className={`nav-sticky ${isScrolled ? 'scrolled' : ''}`}>
-      <div className="container-custom">
-        <div className="flex items-center justify-between h-20">
-          {/* Logo - importado de config/site.ts */}
-          <Link to={LOGO.href} className="flex items-center" aria-label="Avanzato Tecnologia - Pagina inicial">
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled
+          ? 'bg-[#0e0e0e]/95 backdrop-blur-md shadow-lg shadow-black/20 border-b border-[#2a2a2a]/50'
+          : 'bg-transparent'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 lg:px-6">
+        <div className="flex items-center justify-between h-[72px]">
+          {/* Logo */}
+          <Link to={LOGO.href} className="flex items-center shrink-0" aria-label="Avanzato Tecnologia">
             {renderLogo()}
           </Link>
 
-          {/* Desktop Navigation - importado de config/site.ts */}
-          <div className="hidden lg:flex items-center gap-8">
-            {NAV_LINKS.map((link) => (
-              <div key={link.name} className="relative">
-                {link.submenu ? (
-                  <div
-                    className="relative"
-                    onMouseEnter={() => setIsServicesOpen(true)}
-                    onMouseLeave={() => setIsServicesOpen(false)}
-                  >
+          {/* Desktop Menu */}
+          <div className="hidden lg:flex items-center gap-1">
+            {NAV_LINKS.map((item: NavItem) => (
+              <div
+                key={item.name}
+                className="relative"
+                onMouseEnter={() => item.submenu && handleSubmenuEnter(item.name)}
+                onMouseLeave={handleSubmenuLeave}
+              >
+                {item.submenu ? (
+                  <>
                     <button
-                      className={`flex items-center gap-1 nav-link text-sm font-medium transition-colors ${
-                        link.submenu.some(s => location.pathname.startsWith(s.href))
-                          ? 'text-[#cbf400]'
-                          : 'text-gray-300 hover:text-white'
+                      className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                        isActive(item.href) || item.submenu.some(s => isActive(s.href))
+                          ? 'text-[#cbf400] bg-[#cbf400]/10'
+                          : 'text-gray-300 hover:text-white hover:bg-white/5'
                       }`}
                     >
-                      {link.name}
-                      <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`} />
+                      {item.name}
+                      <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${openSubmenu === item.name ? 'rotate-180' : ''}`} />
                     </button>
-                    {isServicesOpen && (
-                      <div className="absolute top-full left-0 mt-2 w-56 bg-[#1a1a1a] rounded-xl border border-white/10 shadow-xl py-2 z-50">
-                        {link.submenu.map((sub) => (
+
+                    {/* Submenu Dropdown */}
+                    {openSubmenu === item.name && (
+                      <div className="absolute top-full left-0 mt-1 w-64 bg-[#1a1a1a] rounded-xl border border-[#2a2a2a] shadow-2xl shadow-black/40 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
+                        <div className="p-2">
+                          {item.submenu.map((sub) => (
+                            <Link
+                              key={sub.href}
+                              to={sub.href}
+                              className={`flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-all duration-150 ${
+                                isActive(sub.href)
+                                  ? 'text-[#cbf400] bg-[#cbf400]/10'
+                                  : 'text-gray-300 hover:text-white hover:bg-white/5'
+                              }`}
+                            >
+                              {sub.name}
+                              <ArrowRight className="w-3.5 h-3.5 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <Link
+                    to={item.href}
+                    className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                      isActive(item.href)
+                        ? 'text-[#cbf400] bg-[#cbf400]/10'
+                        : 'text-gray-300 hover:text-white hover:bg-white/5'
+                    }`}
+                  >
+                    {item.name}
+                  </Link>
+                )}
+              </div>
+            ))}
+
+            {/* CTA Button */}
+            <Link
+              to="/contato"
+              className="ml-3 bg-[#cbf400] text-[#0e0e0e] px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-[#b8e000] transition-all duration-200 hover:shadow-lg hover:shadow-[#cbf400]/20 flex items-center gap-2"
+            >
+              <Phone className="w-4 h-4" />
+              {CONTACT.phone}
+            </Link>
+          </div>
+
+          {/* Mobile Toggle */}
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="lg:hidden p-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/5 transition-colors"
+            aria-label="Menu"
+          >
+            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMobileMenuOpen && (
+        <div className="lg:hidden bg-[#0e0e0e]/98 backdrop-blur-lg border-t border-[#2a2a2a]">
+          <div className="max-w-7xl mx-auto px-4 py-4 space-y-1">
+            {NAV_LINKS.map((item: NavItem) => (
+              <div key={item.name}>
+                {item.submenu ? (
+                  <>
+                    <button
+                      onClick={() => setMobileOpenSubmenu(mobileOpenSubmenu === item.name ? null : item.name)}
+                      className="w-full flex items-center justify-between px-4 py-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/5 transition-colors"
+                    >
+                      <span className="font-medium">{item.name}</span>
+                      <ChevronDown className={`w-4 h-4 transition-transform ${mobileOpenSubmenu === item.name ? 'rotate-180' : ''}`} />
+                    </button>
+                    {mobileOpenSubmenu === item.name && (
+                      <div className="pl-4 space-y-1 pb-2">
+                        {item.submenu.map((sub) => (
                           <Link
-                            key={sub.name}
+                            key={sub.href}
                             to={sub.href}
-                            className="block px-4 py-2.5 text-sm text-gray-300 hover:text-[#cbf400] hover:bg-white/5 transition-colors"
+                            className={`block px-4 py-2.5 rounded-xl text-sm transition-colors ${
+                              isActive(sub.href) ? 'text-[#cbf400] bg-[#cbf400]/10' : 'text-gray-400 hover:text-white hover:bg-white/5'
+                            }`}
                           >
                             {sub.name}
                           </Link>
                         ))}
                       </div>
                     )}
-                  </div>
+                  </>
                 ) : (
                   <Link
-                    to={link.href}
-                    className={`nav-link text-sm font-medium transition-colors ${
-                      isActive(link.href) ? 'text-[#cbf400]' : 'text-gray-300 hover:text-white'
+                    to={item.href}
+                    className={`block px-4 py-3 rounded-xl font-medium transition-colors ${
+                      isActive(item.href) ? 'text-[#cbf400] bg-[#cbf400]/10' : 'text-gray-300 hover:text-white hover:bg-white/5'
                     }`}
                   >
-                    {link.name}
+                    {item.name}
                   </Link>
                 )}
               </div>
             ))}
-          </div>
 
-          {/* Desktop CTA - importado de config/site.ts */}
-          <div className="hidden lg:flex items-center gap-4">
+            {/* Mobile CTA */}
             <a
-              href={`tel:${CONTACT.phoneRaw}`}
-              className="flex items-center gap-2 text-sm text-gray-400 hover:text-[#cbf400] transition-colors"
+              href={`https://wa.me/${CONTACT.phoneRaw}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-center gap-2 bg-[#cbf400] text-[#0e0e0e] px-5 py-3.5 rounded-xl font-bold mt-3"
             >
               <Phone className="w-4 h-4" />
-              {CONTACT.phone}
+              WhatsApp {CONTACT.phone}
             </a>
           </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            className="lg:hidden p-2 text-gray-300 hover:text-white"
-            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            aria-label="Menu"
-          >
-            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-          </button>
         </div>
-
-        {/* Mobile Menu - importado de config/site.ts */}
-        {isMobileMenuOpen && (
-          <div className="lg:hidden py-4 border-t border-white/10">
-            <div className="flex flex-col gap-4">
-              {NAV_LINKS.map((link) => (
-                <div key={link.name}>
-                  {link.submenu ? (
-                    <div>
-                      <button
-                        onClick={() => setIsServicesOpen(!isServicesOpen)}
-                        className="flex items-center justify-between w-full text-gray-300 hover:text-[#cbf400] transition-colors py-2"
-                      >
-                        <span className="font-medium">{link.name}</span>
-                        <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`} />
-                      </button>
-                      {isServicesOpen && (
-                        <div className="pl-4 mt-2 space-y-2">
-                          {link.submenu.map((sub) => (
-                            <Link
-                              key={sub.name}
-                              to={sub.href}
-                              className="block text-sm text-gray-400 hover:text-[#cbf400] py-1"
-                            >
-                              {sub.name}
-                            </Link>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <Link
-                      to={link.href}
-                      className={`block py-2 font-medium transition-colors ${
-                        isActive(link.href) ? 'text-[#cbf400]' : 'text-gray-300 hover:text-[#cbf400]'
-                      }`}
-                    >
-                      {link.name}
-                    </Link>
-                  )}
-                </div>
-              ))}
-              <a
-                href={`tel:${CONTACT.phoneRaw}`}
-                className="flex items-center gap-2 text-sm text-gray-400 hover:text-[#cbf400] pt-4 border-t border-white/10"
-              >
-                <Phone className="w-4 h-4" />
-                {CONTACT.phone}
-              </a>
-            </div>
-          </div>
-        )}
-      </div>
+      )}
     </nav>
   );
 };