# LA CASA TALENT: modelos de layout do website institucional Propostas de layout estáticas (HTML/CSS/JS) para o website institucional da LA CASA TALENT, preparadas para o cliente escolher uma direção. Cada proposta tem **três páginas**: início, candidatura e contactos. - **Segunda ronda (atual): modelos 5 a 8**, a partir das casas de pessoas do modelo Casa e do azul-noite do modelo Órbita, com quatro tipografias novas e bem diferentes entre si. - **Primeira ronda: modelos 1 a 4**, mantidos como opções anteriores. Ao todo são **24 páginas**. Todas cobrem o âmbito da proposta (empresa, serviços, setores, recrutamento com envio de CV e contactos) e estão adaptadas a computador, tablet e telemóvel. A plataforma de gestão interna faz parte deste mesmo projeto, mas fica para uma fase posterior. Não foi desenhada aqui. ## Como abrir Não é preciso instalar nada nem arrancar um servidor. Os HTML gerados incluem as imagens, fontes, estilos e JavaScript no próprio ficheiro. Assim, as imagens também carregam numa pré-visualização isolada, sem depender da pasta `assets/`. As ligações entre páginas continuam relativas: para navegar fora da pré-visualização, mantenha a estrutura de pastas ao copiar o projeto. 1. Abra `templates/index.html` no navegador (`file:///var/www/node/lacasa-rh/templates/index.html`). É a galeria dos modelos 5 a 8, com uma amostra real de cada tipografia. A primeira ronda está em `templates/previous.html`. 2. Em cada modelo, abra **Início**, **Candidatura** ou **Contactos**: | Modelo | Início | Candidatura | Contactos | |---|---|---|---| | 1 · Duas Entradas | `01-entradas/index.html` | `01-entradas/candidatura.html` | `01-entradas/contactos.html` | | 2 · Escala | `02-escala/index.html` | `02-escala/candidatura.html` | `02-escala/contactos.html` | | 3 · Casa | `03-casa/index.html` | `03-casa/candidatura.html` | `03-casa/contactos.html` | | 4 · Órbita | `04-orbita/index.html` | `04-orbita/candidatura.html` | `04-orbita/contactos.html` | | **5 · Lar** | `05-lar/index.html` | `05-lar/candidatura.html` | `05-lar/contactos.html` | | **6 · Soleira** | `06-soleira/index.html` | `06-soleira/candidatura.html` | `06-soleira/contactos.html` | | **7 · Bairro** | `07-bairro/index.html` | `07-bairro/candidatura.html` | `07-bairro/contactos.html` | | **8 · Encontro** | `08-encontro/index.html` | `08-encontro/candidatura.html` | `08-encontro/contactos.html` | 3. `templates/comparison.html` é uma página autónoma com os modelos 5 a 8 lado a lado: seletor Início / Candidatura / Contactos, a mesma frase em cada tipografia e uma pequena animação de cada direção. Tem tudo embutido (imagens, fontes, estilos e script); ao mudar de página reaproveita as imagens de um banco escondido no próprio ficheiro. A comparação da primeira ronda está em `templates/comparison-previous.html`. A descrição de cada direção (conceito, paleta, tipografia, movimento e conteúdos provisórios) está em `docs/DESIGN-DIRECTIONS.md`. ## Gerar as páginas As 24 páginas, as duas galerias e as duas comparações são geradas a partir de `templates/_src/`. Depois de alterar uma fonte, corra: ``` python3 scripts/build_templates.py ``` Só usa a biblioteca padrão do Python. `python3 scripts/build_templates.py 05-lar` gera só os modelos indicados (sem galerias). `tools/build_templates.py` é o build antigo (páginas únicas com recursos embutidos) e agora só reencaminha para `scripts/build_templates.py`. ## Estrutura ``` templates/ index.html galeria dos modelos 5 a 8 (gerada) previous.html galeria da primeira ronda, modelos 1 a 4 (gerada) comparison.html comparação autónoma dos modelos 5 a 8 (gerada) comparison-previous.html comparação autónoma dos modelos 1 a 4 (gerada) 01-entradas/ … 08-encontro/ index.html, candidatura.html, contactos.html (geradas) + style.css _src/ 01-entradas.html … página inicial de cada modelo (cabeçalho, secções, rodapé) pages/NN-candidatura.html página de candidatura de cada modelo pages/NN-contactos.html página de contactos de cada modelo pages/NN-coda.html fecho da página inicial, com ligações para as duas páginas partials/ peças comuns: head, faixa de demonstração, formulários, passos, contactos, textos legais gallery.html fonte da galeria (modelos 5 a 8); gallery-previous.html para 1 a 4 comparison.html fonte da comparação (5 a 8); comparison-previous.html para 1 a 4 scripts/build_templates.py build das 24 páginas, galerias e comparações assets/ css/base.css base comum: formulários, foco, diálogo css/fonts-round1.css fontes dos modelos 1 a 4 (os modelos 5 a 8 declaram as suas no style.css) css/fonts-round2.css fontes dos modelos 5 a 8 para a galeria e a comparação css/pages.css candidatura, contactos e fecho do início dos modelos 1 a 4 (os 5 a 8 têm tudo no style.css) css/motion.css pausa, movimento reduzido, entradas comuns e animações dos modelos 1 a 4 js/site.js menu móvel, pausa das animações, validação local, pré-seleções, quadro de turnos, diálogo legal, carril fonts/ WOFF2 locais (SIL OFL 1.1) + licenses/ img/brand/ logótipo do cliente (original e recorte de margens) + favicon img/photos/ 16 fotografias livres da Unsplash, guardadas localmente previews/ capturas atuais: --desktop.jpg, -mobile.jpg e -desktop-full.jpg docs/ DESIGN-DIRECTIONS.md as quatro direções, o movimento e o conteúdo provisório IMAGE-CREDITS.md origem, autor e licença de cada imagem e fonte proposal-source.txt texto extraído da proposta (referência) ``` Os ficheiros `docs/BACKLOG.md` e `docs/backlog.csv` pertencem ao planeamento do projeto. ## O que está implementado - **Início** (por modelo): mensagem principal, escolha do caminho (candidatos ou empresas), empresa, serviços, setores e um fecho com ligações para a candidatura e para os contactos. A página inicial não tem formulários. - **Candidatura**: título próprio, passos depois do envio, formulário com envio de CV e ligação para os contactos de empresas. Campos: nome, email, telefone, localidade, área, disponibilidade, CV (PDF/DOC/DOCX até 5 MB), mensagem e consentimento. - **Contactos**: título próprio, dados de contacto (por preencher), o que indicar num pedido de proposta, formulário e ligação para a candidatura. Campos: nome, empresa, email, telefone, assunto, mensagem (mínimo de 10 caracteres) e consentimento. - **Navegação entre páginas**: o menu marca a página atual (`aria-current`), há um percurso "Início / página" e o logótipo volta ao início. As ligações para empresa, serviços e setores levam às secções da página inicial. - **Pré-seleções por endereço**: cada setor abre `candidatura.html?area=#form-candidatura` com a área escolhida. "Pedir proposta" abre `contactos.html?assunto=proposta#form-contacto`. Só são aceites valores que existem na lista. Valores desconhecidos são ignorados. - **Movimento**: cada direção tem uma assinatura própria (ver `docs/DESIGN-DIRECTIONS.md`), entradas ao carregar, revelações ao percorrer e microinterações nos botões e ligações. Os formulários não se mexem enquanto são preenchidos. - O botão **Pausar animações** (na faixa do topo e no rodapé) para tudo e volta a ligar. Não guarda a escolha. - Com `prefers-reduced-motion` ativo (no início ou durante a visita), as animações desligam-se e o botão indica que estão reduzidas pelo sistema. - Ao pausar não fica nada escondido nem a meio. As fotografias em forma de casa mantêm o recorte. - **Modo demonstração**: a validação é feita só no navegador. Um formulário válido mostra *"… não foram enviados nem guardados"* e é limpo. Não há pedidos de rede, cookies nem armazenamento local. - **Textos legais**: as ligações do rodapé e do consentimento abrem uma janela a explicar que os textos serão fornecidos pelo cliente. - **Acessibilidade**: ligação para saltar para o conteúdo, foco visível, etiquetas em todos os campos, erros ligados aos campos e resumo de erros com foco no primeiro campo errado. Menu móvel acessível (Esc fecha), ilustrações decorativas com `aria-hidden` e contraste AA nas combinações principais. - **SEO básico**: `lang="pt-PT"`, um único `h1` por página, `title` e descrição próprios em cada página, Open Graph, JSON-LD mínimo e `alt` nas imagens. Os protótipos levam `noindex` de propósito. - Sem dependências externas: fontes, imagens e scripts são todos locais e nenhuma biblioteca de animação é usada. ## O que não está implementado (de propósito) - Envio real dos formulários, armazenamento de CV, emails de confirmação e anti-spam. Fica para o desenvolvimento. - Textos finais, contactos, textos legais e lista final de serviços e setores. Serão fornecidos pelo cliente; os que existem estão marcados como provisórios. - Páginas próprias para empresa, serviços e setores, sitemap e URL canónico. Ficam para o site final, depois de escolhido o modelo e o domínio. - Fora do âmbito público da proposta: área pessoal para candidatos ou clientes, bolsa de emprego, registo de ponto, emparelhamento por IA, blog, processamento salarial e faturação. ## Validação feita ### Segunda ronda (modelos 5 a 8), novembro de 2026 Playwright (`playwright-core`) com o Google Chrome em modo headless, a partir de uma pasta temporária fora do projeto. 287 verificações, todas aprovadas: - **Páginas isoladas**: as 24 páginas, as duas galerias e as duas comparações foram abertas com `page.setContent()`, sem pasta de base. Todas as imagens são `data:` e descodificam. Não houve pedidos de rede nem erros na consola. Os modelos 1 a 4 continuam com as suas fontes depois de as declarações passarem para `fonts-round1.css`. - **Fontes reais**: com `CSS.getPlatformFontsForNode`, cada título e texto dos modelos 5 a 8 usa o ficheiro local esperado: Alegreya Sans / Source Sans 3, Newsreader / Mulish, Schibsted Grotesk, Nunito. Não há recurso a fontes do sistema, também nos títulos com acentos. O mesmo foi verificado nas amostras da galeria e da comparação. - **Navegação e estrutura** (1440, 768 com movimento reduzido e 360 px): sem deslocamento horizontal, um `h1`, sem IDs repetidos, âncoras válidas. O início não tem formulários e cada página interior tem só o seu. O menu marca a página atual e as três páginas ligam entre si. - **Telemóvel**: o formulário começa no primeiro ecrã e meio de cada página interior, e "Preencher candidatura" / "Escrever mensagem" leva até ele. O menu abre e fecha com Esc, com o foco de volta no botão. - **Pré-seleções**: o setor Limpeza no início abre `candidatura.html?area=limpeza#form-candidatura` com a área escolhida. "Pedir proposta" e `contactos.html?assunto=proposta#form-contacto` escolhem o assunto. `?area=LIMPEZA` é ignorado. - **Formulários**: - resumo de erros com foco no primeiro campo; - email inválido, telefone com 8 dígitos, CV `.txt` e CV com mais de 5 MB recusados; - mensagem curta recusada; - mensagem de demonstração ("não foram enviados nem guardados") e formulário limpo; - posição do formulário estável; - sem cookies nem storage; - diálogo legal abre e fecha. - **Movimento**: o segundo Tab é o botão de pausa. Pausar para todas as animações sem deixar conteúdo escondido, e retomar volta a animar. Com movimento reduzido, nada corre e o botão fica desativado. - **Comparação**: sem deslocamento a 728 e a 360 px, sem fundo nem margens laterais em `html`, `body` e no invólucro. A troca Início / Candidatura / Contactos usa as imagens do banco embutido, sem pedidos. As capturas dos modelos 5 a 8 em `assets/previews/` foram tiradas depois destas alterações. ### Primeira ronda (modelos 1 a 4) Os testes foram automatizados com Playwright (`playwright-core`) e o Google Chrome em modo headless, a partir de uma pasta temporária fora do projeto. Correram nas 12 páginas a 1440 px, a 768 px (com movimento reduzido) e a 360 px, num total de 959 verificações, todas aprovadas: - **Cada página**: sem erros na consola, sem pedidos externos e sem imagens em falta. Todas as âncoras e ficheiros ligados existem, sem IDs duplicados. Um `h1` antes dos restantes títulos, etiquetas em todos os campos, nenhum deslocamento horizontal e nenhum conteúdo invisível depois das animações. - **Estrutura**: o início não tem formulários e cada página interior tem só o seu. O menu marca a página certa e nenhum botão leva `aria-current`. Todas as páginas ligam ao início, à candidatura e aos contactos. - **Pré-seleções**: a ligação de setor no início abre a candidatura com a área escolhida (e marca-a no quadro do modelo 2). "Pedir proposta" escolhe o assunto. Valores inválidos ou com maiúsculas trocadas são ignorados. - **Formulários**: - resumo de erros com foco no primeiro campo; - erros de email, de CV com formato errado e de CV com mais de 5 MB; - telefone com 8 dígitos recusado e `(+351) 912 345 678` aceite; - mensagem com menos de 10 caracteres recusada; - mensagem de demonstração e formulário limpo quando é válido; - a posição do formulário não muda depois das entradas e não há animações a correr sobre ele. - **Menus e diálogo**: o menu móvel abre e fecha com Esc. A janela legal abre a partir do rodapé e do consentimento e fecha com Esc. Nada fica guardado em cookies nem em storage. - **Teclado e movimento**: - o primeiro Tab vai para "Saltar para o conteúdo" e o segundo para o botão de pausa; - pausar para todas as animações sem esconder conteúdo, com as barras de turnos completas e os recortes das casas intactos; - retomar volta a animar; - ligar e desligar o movimento reduzido durante a visita é respeitado. A galeria e a comparação também foram verificadas (ligações, imagens, sem deslocamento horizontal a 1440/390 e a 728/360 px). As capturas em `assets/previews/` foram tiradas depois destas alterações.