Feature/expandir secao solucoes

[henmohr]

Expansão da Seção de Soluções e Melhorias do Site

📋 Resumo

Este PR expande significativamente a seção de soluções do site, adicionando todos os serviços oferecidos pela LibreCode, melhorando a acessibilidade, adicionando chat ao vivo e implementando preview automático de PRs.

🎯 Principais Mudanças

1. ✨ Expansão da Seção de Soluções

Antes: Apenas 2 serviços (Nextcloud e LibreSign)
Depois: 9 serviços organizados em 6 categorias

Novos Serviços Adicionados:

• 📊 Gestão e Produtividade

  • Nextcloud (gestão de documentos e colaboração)
  • Kimai (controle de tempo e horas)
  • Akaunting (gestão financeira)

• 📝 Assinaturas e Documentos

  • LibreSign (assinatura digital)

• 📈 Analytics e Dados

  • Matomo (analytics privado)
  • LimeSurvey (pesquisas e formulários)

• 🤝 CRM e Relacionamento

  • SuiteCRM (gestão de relacionamento com clientes)

• 🔗 Ferramentas Web

  • Yourls (encurtador de URLs)

• 📚 Publicação Acadêmica

  • OJS (Open Journal Systems)

2. 🎨 Melhorias de Acessibilidade e Legibilidade

Problema: Fundo vermelho dificultava a leitura
Solução: Redesign completo seguindo padrões WCAG

• ✅ Fundo cinza claro (#f8f9fa) para melhor legibilidade
• ✅ Cards brancos com bordas suaves e sombras discretas
• ✅ Alto contraste em textos (4.5:1 mínimo - WCAG AA)
• ✅ Hierarquia visual clara: títulos em #333, descrições em #555
• ✅ Efeitos hover com elevação e destaque da borda vermelha
• ✅ Botões com feedback visual aprimorado
• ✅ Identidade visual vermelha mantida nos elementos interativos

3. 🖼️ Logos Oficiais de Alta Qualidade

Todos os serviços agora possuem seus logos oficiais:

• ✅ Kimai (31KB)
• ✅ Akaunting (17KB)
• ✅ LimeSurvey (14KB)
• ✅ Matomo (38KB)
• ✅ SuiteCRM (22KB)
• ✅ Yourls (12KB)
• ✅ OJS (8.4KB)

Layout uniforme com logos de 120px de largura para consistência visual.

4. 💬 Integração do Chatwoot

Implementação de chat ao vivo para suporte em tempo real:

• ✅ Widget em todas as páginas
• ✅ Carregamento assíncrono (não impacta performance)
• ✅ Conectado à instância própria: https://chatwoot.librecode.coop
• ✅ Melhora conversão e atendimento ao cliente

5. 🔍 GitHub Action para Preview de PRs

Sistema automático de preview para facilitar revisões:

• ✅ Build automático em cada PR
• ✅ Deploy em https://librecode.coop/pr-preview/pr-{número}/
• ✅ Comentário automático no PR com link
• ✅ Atualização em cada novo commit
• ✅ Branch separada (gh-pages-preview)

📊 Impacto Esperado

Para Visitantes:

• ✅ Descoberta completa de todos os serviços oferecidos
• ✅ Navegação mais fácil com categorização clara
• ✅ Melhor legibilidade e experiência visual
• ✅ Suporte imediato via chat
• ✅ Maior taxa de conversão

Para o Time:

• ✅ Preview automático facilita revisão de mudanças visuais
• ✅ Menos bugs em produção
• ✅ Processo de deploy mais seguro
• ✅ Melhor colaboração com stakeholders

Para Acessibilidade:

• ✅ Compliance com WCAG 2.1 AA
• ✅ Melhor experiência para usuários com deficiências visuais
• ✅ Contraste adequado em todos os textos
• ✅ Interface mais profissional e moderna

🔧 Detalhes Técnicos

Commits Incluídos:

1. c40dd13 - Expandir seção de soluções com 9 serviços organizados por categorias
2. 21a03e2 - Adicionar logos oficiais dos serviços
3. 022021c - Atualizar logos do SuiteCRM, LimeSurvey e Akaunting
4. 22933b9 - Melhorar legibilidade e acessibilidade da seção de soluções
5. 49f25c5 - Adicionar widget de chat Chatwoot
6. 6dbf3b6 - Adicionar GitHub Action para preview de Pull Requests

Arquivos Modificados:

• source/index.blade.php - Expansão da seção de soluções
• source/_assets/sass/main.scss - Melhorias de CSS e acessibilidade
• source/_layouts/main.blade.php - Integração do Chatwoot
• source/assets/images/solucoes/*.png - Novos logos
• .github/workflows/preview.yml - Nova action de preview

Tecnologias Utilizadas:

• PHP 8.4 + Jigsaw (gerador de site estático)
• Node.js 20 + Laravel Mix
• Bootstrap 4 + SASS
• Chatwoot (chat open-source)
• GitHub Actions

📸 Screenshots

Nota: O preview estará disponível automaticamente quando este PR for aberto.

✅ Checklist

• Código testado localmente
• Logos de alta qualidade adicionados
• Acessibilidade validada (contraste, hierarquia)
• Chat Chatwoot funcionando
• GitHub Action de preview configurada
• Commits bem documentados
• README atualizado (se necessário)

🚀 Deploy

Após aprovação e merge:

1. O workflow deploy.yml irá buildar automaticamente
2. Site será publicado em librecode.coop
3. Preview do PR será removido automaticamente

📝 Notas Adicionais

• Esta implementação está alinhada com as sugestões de melhoria do site
• Prioriza acessibilidade e experiência do usuário
• Mantém a identidade visual da LibreCode
• Facilita futuras expansões da seção de soluções

---

Criado por: GitHub Copilot & Warp AI
Data: 09/12/2025
Branch: feature/expandir-secao-solucoes

[github-actions]

🔍 Preview do Site

✅ O preview foi gerado com sucesso!

Como visualizar:

1. Acesse a página da Action
2. Role até a seção "Artifacts"
3. Baixe o arquivo preview-pr-291
4. Descompacte e abra index.html no navegador

🔄 O preview é atualizado automaticamente a cada novo commit neste PR.

---

_{Preview gerado pela GitHub Action • Artefato disponível por 7 dias}

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://LibreCodeCoop.github.io/site-preview/pr-preview/pr-291/
Built to branch main at 2026-05-07 19:26 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[henmohr]

@samuelsonbrito

[henmohr]

Adicionar seção de comunicação e adicionar:

• Nextcloud Talk: chat e videochamadas
• Mailcow: hospedagem de emails

[henmohr]

@vitormattos

[DaianeAlvesRJ]

Oi, @henmohr dei uma olhada rápida e:

• Links dos cards apontando para o grupo do Telegram, deveriam apontar para a landing page do produto.
• Vários produtos que não são da nossa dominância. Se for só instalar para o cliente, beleza, mas normalmente não é só isso.
• A seção Apoie não está legal
• O botão "enviar" do formulário de contato também não está linkando para nada.

Nós precisamos fazer um trabalho mais estruturado com o site da LibreCode e um caminho pode ser:

• Estrutura de páginas
• Design
• Conteúdo
• Árvore do site
• Landign page de cada produto: Se tivermos 2 landing pages prontas, vamos colocar apenas essas duas na nossa home.
• Banner principal fraco

Neste momento ainda nem conseguimos finalizar o desenvolvimento do site do LibreSign, que é uma prioridade.
Qualquer coisa fora isso, desvia o nosso foco, então o desenvolvimento do site da LibreCode deve ficar em segundo plano.

[henmohr]

* Links dos cards apontando para o grupo do Telegram, deveriam apontar para a landing page do produto.

Não tem landing page pra cada produto.

* Vários produtos que não são da nossa dominância. Se for só instalar para o cliente, beleza, mas normalmente não é só isso.

Quais?

* A seção Apoie não está legal

Verdade.

* O botão "enviar" do formulário de contato também não está linkando para nada.

Sim, pq é um template

Nós precisamos fazer um trabalho mais estruturado com o site da LibreCode e um caminho pode ser:

Fato. Fiquei pensando que se colocarmos os produtos que trabalhamos acabamos por nos restringir apenas a eles. Talvez na landing page seja interessante algo mais mostrando a cooperativa e em páginas secundárias os produtos.

* Banner principal fraco

Demais.

Neste momento ainda nem conseguimos finalizar o desenvolvimento do site do LibreSign, que é uma prioridade. Qualquer coisa fora isso, desvia o nosso foco, então o desenvolvimento do site da LibreCode deve ficar em segundo plano.

Fato. Vou fechar esse PR aqui.