C Comunicação — Site Institucional

Site institucional da C Comunicação, agência de marketing, publicidade e comunicação que atua na indústria do conteúdo desenvolvendo ações que fundamentam valor para marcas diante de indivíduos, governo e sociedade.

O site apresenta a empresa, lista clientes e projetos (carrossel de cases) e oferece um formulário de contato que envia as mensagens por e-mail.

---

✨ Stack

• Nuxt 4 — framework full-stack baseado em Vue 3
• Nuxt UI v4 — biblioteca de componentes
• Nuxt Content v3 — gerenciamento de conteúdo em Markdown
• Nuxt Image — otimização de imagens
• Tailwind CSS 4 — estilização
• Valibot — validação de schemas (formulário e collections)
• Resend — envio transacional de e-mails
• TypeScript — tipagem estática
• pnpm — gerenciador de pacotes

---

📁 Estrutura do projeto

.
├── app/                       # Camada de aplicação (Nuxt 4 app dir)
│   ├── app.vue                # Layout raiz (header + main + footer)
│   ├── app.config.ts          # Configuração dos componentes Nuxt UI
│   ├── assets/                # CSS global e imagens (logo, clientes, projetos)
│   ├── components/
│   │   └── app/               # Componentes da página (Hero, Sobre, Projetos, ...)
│   │       └── projetos/      # Componentes específicos do carrossel de projetos
│   └── pages/
│       └── index.vue          # Página única (one-page)
├── content/                   # Conteúdo em Markdown (Nuxt Content)
│   └── projetos/              # Cases de projetos (collection `projetos`)
├── server/
│   └── api/
│       └── send.ts            # Endpoint POST /api/send (formulário de contato)
├── shared/
│   └── schemas/
│       └── contato.ts         # Schema Valibot do formulário
├── public/                    # Arquivos estáticos servidos na raiz
├── content.config.ts          # Definição das collections do Nuxt Content
├── nuxt.config.ts             # Configuração do Nuxt
├── eslint.config.mjs          # Configuração do ESLint
├── Dockerfile                 # Build multi-stage para produção
└── compose.yml                # Compose para subir a imagem publicada

Coleções de conteúdo

Os cases exibidos no carrossel de Projetos são arquivos Markdown em content/projetos/ e seguem o schema:

---
link: https://www.instagram.com/reel/...   # URL do case
image: honda.png                            # Imagem dentro de app/assets/img/projetos/
type: instagram                             # instagram | youtube | youtube-shorts
date: 2024-03-05                            # Data usada para ordenar
---

Para adicionar um novo projeto basta criar um arquivo .md nesse diretório. O componente app/projetos.vue consulta a collection automaticamente e renderiza os itens de acordo com o type.

---

🚀 Setup

Pré-requisitos

• Node.js 20+ (recomendado 24, conforme Dockerfile)
• pnpm (habilite com corepack enable)

Instalação

pnpm install

Variáveis de ambiente

Crie um arquivo .env na raiz com a chave da API do Resend (usada pelo endpoint de contato):

# Obrigatório para o envio do formulário de contato
RESEND_API_KEY=re_xxxxxxxxxxxxxxxx

# Opcional — sobrescrevem os valores padrão de nuxt.config.ts
NUXT_CONTATO_SUBJECT="Nova mensagem enviada pelo site"
NUXT_CONTATO_FROM="C Comunicação <contato@seudominio.com>"
NUXT_CONTATO_TO="contato@ccomunicacao.com.br;outro@ccomunicacao.com.br"

Os destinatários suportam múltiplos endereços separados por ;.

---

💻 Desenvolvimento

Inicia o servidor em http://localhost:3000:

pnpm dev

Outros scripts

pnpm lint         # ESLint (Nuxt + stylistic)
pnpm lint:fix     # ESLint com --fix
pnpm build        # Build de produção (Nitro)
pnpm generate     # Geração estática
pnpm preview      # Preview do build de produção

---

🐳 Docker

A imagem é construída em dois estágios e publicada em code.5ms.dev/ccomunicacao/site:latest.

Subir a imagem publicada

docker compose up -d
# disponível em http://localhost:3000

A porta pode ser ajustada via PORT no ambiente (padrão 3000).

Build local

docker build -t ccomunicacao-site .
docker run --rm -p 3000:3000 -e RESEND_API_KEY=re_xxx ccomunicacao-site

---

🌐 Deploy

A imagem final é gerada pelo Dockerfile (multi-stage: build com node:24-slim → runtime enxuto apenas com .output). O container expõe a porta 3000 e responde em 0.0.0.0, pronto para ser colocado atrás de um reverse proxy (Traefik, Caddy, Nginx, etc.) que cuide de HTTPS e do domínio ccomunicacao.com.br.

---

📬 Formulário de contato

O componente app/components/app/contato.vue envia POST /api/send com os campos nome, email, whatsapp e mensagem. O endpoint:

1. Valida o payload com o schema Valibot em shared/schemas/contato.ts.
2. Encaminha o e-mail via Resend usando o from/to/subject configurados em nuxt.config.ts (com possibilidade de override por env).
3. Retorna { success, error } para o cliente exibir o toast adequado.

---

📝 Licença

Projeto privado — © C Comunicação. Todos os direitos reservados.