feat: amplia página do Nextcloud

[henmohr]

Os preços são exemplos, devem ser alterados se o layout for aprovado.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://librecodecoop.github.io/site-preview/pr-preview/pr-343/
Built to branch main at 2026-07-28 22:33 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[YvesCesar]

@henmohr

Analise a responsividade, parece necessitar de ajustes.

Importante que a página esteja responsiva com todos os tipos de tela.

[YvesCesar]

Qual critério você usou para definir as perguntas frequentes?

[henmohr]

Olhei os sites de quem oferece Nextcloud e o site da própria Nextcloud. Acredito que deveria ter mais perguntas frequentes.

[vitormattos]

Este PR tem algumas dependências:

• Lançamento do SaaS
• Integrar com o WooCommerce
• Definir qual será o domínio que vamos utilizar
• Validar jornada do usuário.

Seria bom também que ele utilizasse a mesma lógica de criação da página de produtos do LibreSign que está em:

• LibreSign/site#419

[henmohr]

1. 📱 Gap de responsividade entre 560px e 720px
A tabela de planos tem min-width: 790px, mas entre 560px e 720px de viewport não há ajuste — o container fica menor que a tabela, gerando scroll horizontal indesejado. Sugestão: descer o min-width: 0 e o layout de cards mobile já para 720px (o breakpoint já existe no @media (max-width: 720px)).

2. ♿ Acessibilidade: thead { display: none } no mobile
Esconder o <thead> com display: none remove os cabeçalhos para leitores de tela também. Os ::before CSS não são lidos como headers. Sugestão usar visually-hidden em vez de display: none:

.nc-plan-table thead {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

3. 📐 Sticky entre 720px–980px
O .nc-managed .lc-head ainda é sticky com top: 110px nesse range, mas o layout já está em 2 colunas com a tabela ao lado. Em viewports mais baixos, o sticky pode sobrepor a tabela. Considerar position: static já no breakpoint de 720px.

4. 🔤 Squash de commits
O @use "responsive" foi movido para o final (correto!), mas o diff mostra remoção + adição em commits separados. Squashar deixa o histórico mais limpo.

Fora isso, código bem estruturado — boa semântica na tabela, FAQ com <details> é acessível, e os estilos do Nextcloud bem encapsulados no _nextcloud.scss. 👍

[henmohr]

Status update — o que foi feito e o que falta

✅ Resolvido

• Preços e armazenamento removidos da tabela de planos — agora os botões levam para "Saiba mais" / contato (commit 9d97524)
• Acessibilidade no mobile: thead usa sr-only em vez de display: none para leitores de tela
• Sticky em telas intermediárias (720px–980px): .nc-managed .lc-head agora é static nesse range
• Comentários separadores já removidos no commit c3da4ed
• "Recursos" mantido como label (consenso entre @YvesCesar e @henmohr)

⏳ Pendente — aguardando decisões do time

1. Integração com WooCommerce (@vitormattos)
As dependências listadas (lançamento do SaaS, WooCommerce, domínio, jornada do usuário) são pré-requisitos externos. Quando estiverem prontos, posso ajudar a adaptar a página seguindo o padrão do LibreSign PR #419 (pricing dinâmico via WooCommerce + classes dedicated).

2. FAQ — mais perguntas (@YvesCesar)
As atuais foram baseadas em sites de concorrentes e no site oficial do Nextcloud. @henmohr concordou que deveria ter mais. Sugiro listar as FAQs que fazem sentido para o público-alvo (empresas, cooperativas, operações com dados sensíveis) e eu implemento.

---

Preview atualizado: https://librecodecoop.github.io/site-preview/pr-preview/pr-343/