Rachid Metalúrgica
Site institucional para empresa de metalurgia: página única com formulário de contato, hospedada na borda da Cloudflare, com um backend em Hono que valida o formulário e envia o e-mail.
Site institucional da Rachid Metalúrgica: uma landing page (página de destino) estática com formulário de contato, hospedada na borda da Cloudflare. O backend é um Worker em Hono que confere se o visitante é humano, valida o formulário e manda o e-mail. Repositório privado.
O site é HTML e JavaScript sem framework, e o backend é enxuto de propósito. Uma landing institucional precisa carregar rápido em rede móvel e não pedir manutenção de dependência.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| CTA (Call to Action, Chamada para Ação) | Elemento visual que direciona o usuário a realizar uma ação, como enviar mensagem ou entrar em contato. |
| Edge Deploy (implantação em borda) | Código distribuído em servidores próximos ao usuário, reduzindo a latência da requisição. |
| framework (plataforma) | Base pronta sobre a qual se constrói uma aplicação. Ela já resolve o trabalho comum e define as regras que o seu código segue. |
| Hono | Framework web minimalista para runtimes de borda como Cloudflare Workers. |
| Turnstile | Verificação anti-bot da Cloudflare. Substitui o CAPTCHA de clicar em semáforos: na maioria das vezes o visitante não faz nada, e o navegador prova sozinho que não é um robô. |
| Resend | Serviço que entrega e-mail transacional por API, no lugar de configurar um servidor SMTP próprio. |
| CORS (Cross-Origin Resource Sharing) | Regra do navegador que controla quais sites podem chamar a API. Aqui, só o domínio do próprio site é aceito. |
| Cloudflare Workers | Plataforma serverless que executa JavaScript na rede de borda da Cloudflare. |
Stack
| Tecnologia | Papel |
|---|---|
| Hono | Framework web minimalista: roteia e recebe o formulário de contato |
| TypeScript | Tipagem no backend e nos utilitários |
| Cloudflare Workers | Execução na rede de borda (edge) |
| Tecnologia | Papel |
|---|---|
| HTML5 + JavaScript vanilla | Site estático, sem peso de framework no cliente |
| Tailwind CSS v4 | Estilização utilitária, sem arquivo de configuração |
| Cloudflare Pages | Publicação e distribuição global pela rede de borda |
Destaques
| Padrão | Descrição | Detalhes |
|---|---|---|
| Formulário serverless | Processamento e envio de e-mail via Cloudflare Workers | sem servidor dedicado, sem custo de infraestrutura fixo |
| Zero framework no cliente | HTML5 + JavaScript vanilla, sem SPA | sem dependências de runtime no browser para um site estático |
| Stack no mesmo provedor | Pages (frontend) e Workers (backend) na Cloudflare | deploy unificado, sem latência de rede entre serviços |
| Roteamento tipado | Hono valida e roteia o formulário antes do envio | resposta estruturada em TypeScript antes de disparar o e-mail |
| CTA WhatsApp | Botão de contato direto via WhatsApp | link pré-preenchido com mensagem, sem formulário intermediário |
Formulário protegido em camadas
Formulário de contato em site institucional atrai robô de spam, e a resposta aqui é em camadas: verificação anti-bot da Cloudflare, restrição de origem por allowlist e envio por API, sem servidor SMTP para manter.
O site atende dois pedidos diferentes, o contato comum e a solicitação de catálogo, cada um com o seu template de e-mail. Os detalhes de implementação ficam no repositório, que é privado.
A build que não usa bundler de framework
A landing não tem framework, então também não tem Vite nem Next. A publicação é uma sequência de scripts npm, cada um com uma ferramenta de um propósito só:
| Etapa | Ferramenta | O que faz |
|---|---|---|
build:css | Tailwind CLI | Gera o CSS final já minificado, só com as classes usadas. |
build:js | esbuild | Empacota e minifica o JavaScript. |
build:html | html-minifier-terser | Remove espaço e comentário do HTML. |
build:replace | script próprio | Troca as referências de script pelas versões de produção. |
build:copy | script próprio | Copia imagens e ícones para dist/. |
O Tailwind aqui é a v4 e não existe tailwind.config.js: o tema fica declarado no próprio CSS.