# AEX HUB CAPITAL - Blueprint do Site Institucional Plataforma

## 1. Arquitetura do site

Objetivo: comunicar duas jornadas principais sem confundir o usuario.

- `index.html` - Home: proposta central, prova de valor, como funciona, oportunidades em destaque, beneficios para investidores/startups, diferenciais e CTA final.
- `investidores.html` - Para Investidores: beneficios, como investir, seguranca, FAQ e CTA para oportunidades.
- `startups.html` - Para Startups: beneficios de captacao, etapas, requisitos e formulario de aplicacao.
- `oportunidades.html` - Explorar Oportunidades: vitrine estilo plataforma com busca, filtros e cards de startups.
- `oportunidade.html` - Detalhe da Oportunidade: resumo da startup, progresso da rodada, dados-chave, tese, equipe, documentos e CTA de investimento.
- `sobre.html` - Sobre a AEX: posicionamento, tese institucional, valores e brand presence.
- `como-funciona.html` - Como Funciona: explicacao das duas jornadas e camadas da plataforma.
- `login.html` - Acesso: entrada para area segura.
- `cadastro.html` - Onboarding: segmentacao inicial entre investidor e startup.

## 2. Copywriting central

Proposta central:
Conectar capital com oportunidades.

Tagline:
Escolha. Invista. Transforme o Futuro.

Headline da Home:
Conecte capital com startups que podem transformar mercados.

Subheadline:
AEX HUB CAPITAL cria uma ponte segura entre investidores e empresas inovadoras, com oportunidades selecionadas, dados claros, documentacao centralizada e uma jornada digital feita para decisao.

CTA duplo:
- Quero investir
- Quero captar

Mensagens de confianca:
- Curadoria de oportunidades
- Fluxo digital de documentos
- Transparencia para decisao
- Leia os documentos antes de confirmar qualquer aporte.
- Investimentos em startups envolvem risco elevado.

## 3. Estrutura das paginas

### Home

Seções:
- Hero com canvas de fluxo de capital, headline, subheadline, CTA duplo e trust pills.
- Prova de valor com metricas de plataforma.
- Como funciona em 3 passos: escolher jornada, analisar dados/documentos, avancar com seguranca.
- Oportunidades em destaque com cards estilo marketplace.
- Para investidores com beneficios objetivos.
- Para startups com beneficios de captacao.
- Diferenciais: arquitetura de confianca, experiencia de plataforma, marca com presenca.
- CTA final: criar conta ou enviar startup.

### Explorar Oportunidades

Componentes:
- Barra de busca.
- Filtros por segmento, estagio e ticket.
- Cards com imagem visual, logo curta, segmento, estagio, descricao, valor alvo, minimo, captado, percentual e CTA.

### Detalhe da Oportunidade

Blocos:
- Header visual com nome, segmento e resumo.
- Box lateral de investimento com progresso e CTA.
- Dados: valuation, meta, minimo, participacao.
- Conteudo: sobre a empresa, problema, solucao, mercado, modelo de negocio, equipe, documentos.
- Microcopy de risco e confianca.

### Para Startups

Blocos:
- Hero de captacao.
- Beneficios para startup.
- Etapas: aplicacao, curadoria, preparacao, publicacao.
- Requisitos.
- Formulario de aplicacao.

### Para Investidores

Blocos:
- Hero de investimento.
- Beneficios.
- Como investir.
- Seguranca e transparencia.
- FAQ.

## 4. Direcao visual

Tokens principais:
- Fundo premium: `#101010`
- Painel: `#1d1d1b`
- Laranja principal: `#FF6A00`
- Laranja secundario: `#FF8A2B`
- Texto principal: `#f7f4ef`
- Texto secundario: `#bdb7ad`
- Linha: `rgba(255, 255, 255, 0.12)`

Tipografia:
- Headings: Montserrat/Poppins/Inter.
- Corpo: Inter/Montserrat.

Estilo:
- Dark premium.
- Glow laranja controlado.
- Grid tecnico de dados.
- Cards com raio de 8px.
- Layout denso, mas com respiro.
- Sem landing page generica: a primeira tela ja comunica plataforma real.

## 5. Componentes reutilizaveis

- Navbar: logo, links principais, login, CTA de cadastro e menu mobile.
- Footer: proposta, links de plataforma, institucional e acesso.
- StartupCard: imagem, logo curta, tags, descricao, progresso, estatisticas e CTA.
- Button: primary, secondary, ghost e small.
- MetricsGrid: prova de valor e indicadores.
- ProgressBar: percentual de captacao.
- BenefitCard: beneficio com titulo e texto curto.
- TimelineCard: etapas numeradas.
- FormPanel: formularios de aplicacao/login/cadastro com mensagem de sucesso.
- FAQItem: acordeao.
- TrustPill: mensagens curtas de seguranca e credibilidade.

## 6. UX e conversao

- A navegacao separa investidores e startups desde o topo.
- Todo caminho importante tem CTA visivel.
- A vitrine de oportunidades permite explorar antes de cadastrar, reduzindo friccao.
- O detalhe da oportunidade traz risco e documentos perto do CTA, aumentando confianca.
- O cadastro usa controle segmentado para indicar a jornada correta.
- O formulario de startup pede apenas o necessario para iniciar curadoria.

## 7. Interacoes e animacoes

- Canvas no hero simulando fluxo de capital/dados.
- Reveals no scroll com IntersectionObserver.
- Barras de progresso animadas apos carregamento.
- Hover em cards com elevacao e glow.
- Filtros da pagina de oportunidades funcionando no front-end.
- FAQ em acordeao.
- Formulario com feedback de envio demonstrativo.
- Segmented control no cadastro.
- Suporte a `prefers-reduced-motion`.

## 8. Microcopy pronta

Botões:
- Quero investir
- Quero captar
- Explorar oportunidades
- Ver detalhes
- Investir agora
- Enviar para curadoria
- Criar minha conta
- Acessar plataforma

Onboarding:
- Escolha sua jornada dentro da AEX.
- Investidores entram para analisar oportunidades.
- Startups entram para iniciar captacao.
- A proxima etapa e validar perfil e liberar a jornada adequada.

Confiança:
- Dados demonstrativos devem ser substituidos por informacoes reais antes da publicacao.
- Leia os documentos antes de confirmar qualquer aporte.
- Investimentos em startups envolvem risco elevado, inclusive perda total.
- O cadastro ajuda a adequar oportunidades ao seu perfil.

## 9. Notas para desenvolvimento

- Arquivos estaticos, sem build: abrir `index.html` no navegador funciona.
- `script.js` controla menu, filtros, progress bars, FAQ, forms e canvas.
- `styles.css` concentra tokens e componentes.
- Os assets da marca foram copiados para `assets/`.
- As metricas e startups do prototipo sao demonstrativas e devem ser substituidas por dados reais, regulatorios e aprovados antes de ir ao ar.

## 10. Skills usadas

- `frontend-design`: definiu o criterio de interface premium, nao generica, com experiencia de produto.
- `brand-guidelines`: usado como disciplina de consistencia visual; a fonte de verdade aplicada foi o brandbook/assets AEX.
- `design-system`: orientou tokens, componentes reutilizaveis e estados.
- `adapt`: guiou responsividade, menu mobile, grids fluidos e touch targets.
- `arrange`: guiou hierarquia, ritmo visual, uso de cards e distribuicao das secoes.
- `animate`: guiou microinteracoes, reveals, progress bars, canvas e respeito a reduced motion.