Sites corporativos

O que tem dentro

O ciclo de vida completo de um produto digital — da vitrine à entrega do arquivo após o pagamento.

• Catálogo de produtos digitais e páginas de produto; a home exibe as publicações mais recentes vindas do banco.
• Área do cliente: cadastro, login e recuperação de senha.
• Pagamento online com assinatura da transação (HMAC) e entrega automática do arquivo após a compra.
• Seção de artigos (blog) e FAQ, termos de oferta e política de tratamento de dados.

Arquitetura

Renderização no servidor em PHP com banco MySQL (PDO), sem CMS nem frameworks.

• Produtos e artigos ficam no banco e a publicação é controlada por uma flag — só o que está publicado chega ao site.
• O código está dividido em includes reutilizáveis (cabeçalho, rodapé, popups) e helpers de navegação.
• Sessões para autenticação, com proteção nas páginas internas e no fluxo de pagamento.

Painel administrativo próprio

Um painel totalmente próprio para gerenciar conteúdo e vendas: catálogo de produtos, artigos (publicar e despublicar) e tratamento de pedidos.

Performance (PageSpeed 100 / 99)

A home saiu de 48 para 100 pontos no mobile e 99 no desktop.

• CSS crítico embutido no head e fontes migradas para self-hosting (subsets woff2, cirílico + latino, font-display: optional) — todas as requisições render-blocking de estilo e do Google Fonts foram eliminadas.
• O vídeo passou a usar uma “fachada”: em vez de carregar sempre o player de terceiros, há um placeholder leve e o player real só é carregado no clique. Isso tirou o principal JS de terceiros do carregamento inicial e reduziu drasticamente o tempo de bloqueio.
• A imagem do hero é WebP com carregamento prioritário (preload + fetchpriority); as demais têm lazy-load e dimensões explícitas (zero deslocamento de layout).
• O LCP caiu de 8,2 s para a faixa rápida, e o script usa defer.

Acessibilidade e SEO

• Landmark main semântico, contraste adequado e navegação acessível — Acessibilidade 100.
• Title keyword-first, meta description, Open Graph e marcação significativa.
• A página de demonstração no portfólio está fechada para indexação (noindex), como as demais demos.

Por que o projeto é interessante

• O maior dos projetos corporativos: uma plataforma de produto completa, com área do cliente, pagamento e painel — em PHP + MySQL puro, sem CMS.
• 100 pontos de PageSpeed no mobile mesmo com muitas funcionalidades — performance sem abrir mão de recursos.
• Ciclo completo por uma única pessoa: arquitetura → back-end e banco → front-end → pagamento → painel → SEO → otimização → deploy.

O que tem dentro

Uma estrutura multi-seção com foco na capacidade produtiva.

• Hero e um bloco de métricas da empresa: anos de experiência, parque de máquinas e pedidos entregues.
• Slider de equipamentos e portfólio de projetos entregues (slider no desktop, grid no mobile).
• Serviços e tipos de operações de fresamento, com vídeo explicativo.
• Formulário modal “Solicitar orçamento” e animações de entrada das seções no scroll.

Formulário de orçamento feito para a indústria

O elemento central é receber um pedido com desenhos técnicos, e não apenas “nome + telefone”.

• Upload de até 10 arquivos em formatos de produção (DXF, DWG, PDF, ZIP, imagens, documentos), enviados por e-mail com anexos.
• Três camadas de proteção antispam: captcha aritmético no servidor, honeypot e uma armadilha de tempo contra envios instantâneos de bots.
• Validação no cliente e no servidor, envio por AJAX sem recarregar a página.

Nove idiomas

O site está totalmente traduzido para nove idiomas: inglês (principal), russo, alemão, francês, italiano, espanhol, polonês, romeno e sérvio.

• Cada idioma tem seu próprio conteúdo e seu próprio handler de formulário no servidor.
• Um seletor de idiomas personalizado com bandeiras.
• hreflang + x-default em todas as nove versões.

Performance

A velocidade está no projeto da página, não foi acoplada depois.

• O CSS crítico está embutido no head — não há requisição render-blocking por folha de estilo externa.
• A fonte Inter é self-hosted: subsets woff2 (cirílico, latino, latin-ext), font-display: optional — zero requisições ao Google Fonts e nenhuma repintura tardia.
• Todos os gráficos em WebP; o hero é servido de forma responsiva — versões separadas para desktop e mobile, com carregamento prioritário (preload + fetchpriority).
• width/height explícitos nas imagens → zero deslocamento de layout.
• PageSpeed: 96 no desktop, 97 no mobile.

Acessibilidade (nota 100)

• Landmark main semântico e rótulos aria nos elementos interativos (menu hambúrguer, seletor de idiomas).
• Hierarquia de headings correta e textos alt significativos.
• Contraste e navegação por foco conforme a WCAG.

Por que o projeto é interessante

• Um site B2B sério, com um formulário complexo desenhado para um processo produtivo real — recebimento de desenhos em formatos de engenharia.
• Suporte multilíngue completo em nove locales, em stack puro e sem frameworks de i18n.
• Alta performance e acessibilidade mesmo com uma interface rica, com sliders e animações.
• Ciclo completo por uma única pessoa: design → maquetação → back-end do formulário → localização → otimização → deploy.

Estrutura e stack

Um site multi-página em HTML/CSS/JS puro, com includes PHP no servidor para as partes comuns.

• Páginas: catálogo (home), “Leilões”, “Carros”, “Como funciona”, “Entrega”.
• Cabeçalho e rodapé comuns foram extraídos para includes PHP — mesma navegação e mesmos contatos em todas as páginas.
• Um design system em variáveis CSS (cores, raios, padrão de UI único), layout responsivo, menu hambúrguer e um ticker de marketing no cabeçalho.

Catálogo e filtro

Um catálogo de carros com cards mostrando foto, ano, quilometragem, potência e preço em ienes.

• Um filtro no cliente em JS puro — por preço, ano, quilometragem e potência, com botões “Aplicar” e “Limpar”.
• Os parâmetros dos carros ficam nos data-attributes dos cards, então a filtragem é instantânea e não recarrega a página.
• Um estado de “nada encontrado com esses filtros” para resultados vazios.

Formulários modais de contato

Os pedidos são enviados por janelas modais (“Deixar pedido” no card, “Fale conosco” no cabeçalho).

• Formulário de nome + telefone com validação personalizada e mensagens de erro inline.
• O campo de telefone usa inputmode numérico e autocomplete para facilitar no mobile.
• Um diálogo acessível: role=dialog, aria-modal, botão de fechar com aria-label e gerenciamento de foco.

Performance (PageSpeed 99 / 94)

A home foi levada a 99 pontos no desktop e 94 no mobile (era 82).

• Todas as imagens do catálogo foram convertidas para WebP e redimensionadas para o tamanho real de exibição — 78% menos peso no total (1,3 MB → 0,28 MB).
• A imagem de LCP do primeiro card carrega com prioridade (preload + fetchpriority); as demais usam lazy-load.
• width/height explícitos em todas as imagens — zero deslocamento de layout.
• O CSS crítico está embutido no head — a requisição render-blocking de estilo foi eliminada (−0,9 s).
• Os scripts usam defer para não bloquear o parsing.

Acessibilidade e SEO

• Acessibilidade 100: títulos semânticos ocultos, aria-labelledby e aria-label no filtro, na navegação e nos diálogos, contraste WCAG AA.
• SEO 100: title keyword-first, meta description, canonical, Open Graph; a página está aberta para indexação.
• Marcação semântica: main, hierarquia de headings correta e textos alt significativos.

Por que o projeto é interessante

• Um site multi-página com design system e includes PHP reutilizáveis — estilo e navegação consistentes sem CMS.
• Filtro ao vivo no cliente e formulários modais acessíveis em JS puro, sem bibliotecas.
• 100 em acessibilidade e SEO, 99/94 em velocidade — trabalho cuidadoso em todas as métricas do Lighthouse.
• Ciclo completo por uma única pessoa: design → maquetação → interatividade → otimização → SEO.