avanzato/avz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UEA-PRODEM

Browse Source
This commit is contained in:
Cleber Pereira
2026-06-10 11:39:21 -03:00
parent 47b753b5f1
commit d420d33415
10 changed files with 891 additions and 14217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
infra/releases/2026-06-08_23-50-57_HML.md
-13950
View File
File diff suppressed because it is too large Load Diff
infra/releases/2026-06-10_11-39-21_HML.md
+27
View File
@@ -0,0 +1,27 @@
# 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
public/uea-logo-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

public/uea-logo-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

src/App.tsx
+8
View File
@@ -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
+81 -137
View File
@@ -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: 'Avaliacao TI', href: '/avaliacao' },
{ name: 'Ferramentas', href: '/ferramentas' },
{ name: 'Onde Atuamos', href: '/onde-atuamos' },
{ name: 'Ferramentas Gratuitas', href: '/ferramentas' },
{ name: 'Avaliacao de TI', href: '/avaliacao' },
{ name: 'Tecnologia para Condominios', href: '/tecnologia-para-condominios' },
],
},
{ 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
+13 -14
View File
@@ -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
+191
View File
@@ -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
+424
View File
@@ -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
+109 -78
View File
@@ -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 ? (
{/* Desktop Menu */}
<div className="hidden lg:flex items-center gap-1">
{NAV_LINKS.map((item: NavItem) => (
<div
key={item.name}
className="relative"
onMouseEnter={() => setIsServicesOpen(true)}
onMouseLeave={() => setIsServicesOpen(false)}
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.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={`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={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={`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'
}`}
>
{link.name}
{item.name}
</Link>
)}
</div>
))}
</div>
{/* Desktop CTA - importado de config/site.ts */}
<div className="hidden lg:flex items-center gap-4">
<a
href={`tel:${CONTACT.phoneRaw}`}
className="flex items-center gap-2 text-sm text-gray-400 hover:text-[#cbf400] transition-colors"
{/* 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}
</a>
</Link>
</div>
{/* Mobile Menu Button */}
{/* Mobile Toggle */}
<button
className="lg:hidden p-2 text-gray-300 hover:text-white"
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 - importado de config/site.ts */}
{/* Mobile Menu */}
{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>
<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={() => setIsServicesOpen(!isServicesOpen)}
className="flex items-center justify-between w-full text-gray-300 hover:text-[#cbf400] transition-colors py-2"
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">{link.name}</span>
<ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`} />
<span className="font-medium">{item.name}</span>
<ChevronDown className={`w-4 h-4 transition-transform ${mobileOpenSubmenu === item.name ? 'rotate-180' : ''}`} />
</button>
{isServicesOpen && (
<div className="pl-4 mt-2 space-y-2">
{link.submenu.map((sub) => (
{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 text-sm text-gray-400 hover:text-[#cbf400] py-1"
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={`block py-2 font-medium transition-colors ${
isActive(link.href) ? 'text-[#cbf400]' : 'text-gray-300 hover:text-[#cbf400]'
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>
))}
{/* Mobile CTA */}
<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"
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>
</div>
)}
</div>
</nav>
);
};