Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions .github/workflows/preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: Deploy PR preview

on:
pull_request:
types:
- opened
- reopened
- synchronize
- closed

concurrency:
group: preview-${{ github.event.pull_request.number }}
cancel-in-progress: true

permissions:
contents: write
issues: write
pull-requests: write

jobs:
deploy-preview:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Deploy preview
uses: rossjrw/pr-preview-action@v1
with:
source-dir: ./
preview-branch: gh-pages
wait-for-pages-deployment: true
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
# nextcloud.librecode.coop
# nextcloud.librecode.coop

Preview de PRs:
- GitHub Pages precisa estar configurado para `Deploy from branch`.
- A branch de preview usada pelo workflow é `gh-pages`.
- O workflow está em [`.github/workflows/preview.yml`](/home/mohr/git/librecode/nextcloud.librecode.coop/.github/workflows/preview.yml).
166 changes: 166 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,104 @@
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: 0.95rem; opacity: 0.9; }
.trust span { display: flex; align-items: center; gap: 6px; }

/* Preview */
.preview { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #eef6fc 100%); }
.preview-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; margin-top: 40px; }
.preview-copy h2 { text-align: left; margin-bottom: 14px; }
.preview-copy .section-subtitle { text-align: left; margin-left: 0; margin-right: 0; margin-bottom: 24px; }
.preview-points { list-style: none; display: grid; gap: 14px; }
.preview-points li {
background: var(--nc-white);
border-radius: 14px;
padding: 14px 16px;
box-shadow: var(--shadow);
border-left: 4px solid var(--nc-blue);
}
.browser-frame {
background: #0f172a;
border-radius: 22px;
padding: 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
transform: perspective(1400px) rotateY(-10deg) rotateX(4deg);
}
.browser-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 14px;
color: rgba(255,255,255,0.72);
font-size: 0.82rem;
}
.browser-dots { display: flex; gap: 6px; margin-right: 8px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; }
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-bar {
flex: 1;
background: rgba(255,255,255,0.08);
border-radius: 999px;
padding: 8px 14px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.browser-content {
background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
border-radius: 16px;
padding: 24px;
color: #e5eef8;
}
.preview-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
.preview-brand { font-weight: 800; letter-spacing: 0.02em; }
.preview-pill {
background: rgba(0, 130, 201, 0.18);
color: #9bd8ff;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
}
.preview-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr);
gap: 18px;
align-items: stretch;
}
.preview-panel {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 20px;
min-height: 100%;
}
.preview-panel h3 { font-size: 1.35rem; margin-bottom: 10px; }
.preview-panel p { color: rgba(229,238,248,0.82); margin-bottom: 0; }
.preview-stats { display: grid; gap: 14px; }
.preview-stat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 14px 16px;
}
.preview-stat strong { display: block; font-size: 1.15rem; margin-bottom: 4px; color: #fff; }
.preview-cards {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid squeezing preview cards into three fixed columns

On desktop/tablet widths this grid sits inside the left column of .preview-hero, which itself is inside the narrower right column of .preview-wrap; even at the 1140px max container the panel is only about 160px wide before padding, so three card columns leave roughly a few dozen pixels per card and text like “Proposta comercial” overflows/overlaps. Collapse these cards or make the parent preview layout wider so the new preview section remains readable.

Useful? React with 👍 / 👎.

gap: 14px;
}
.preview-card {
background: rgba(255,255,255,0.05);
border-radius: 14px;
padding: 14px;
min-height: 96px;
border: 1px solid rgba(255,255,255,0.08);
}
.preview-card .label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.preview-card .value { font-size: 1rem; font-weight: 700; color: #fff; }

/* Solutions */
.apps { padding: 80px 0; background: var(--nc-white); }
.section-title { text-align: center; font-size: 2.2rem; margin-bottom: 12px; font-weight: 700; }
Expand Down Expand Up @@ -141,6 +239,12 @@
.hero h2 { font-size: 1.1rem; }
.nav-links { display: none; }
.hero-ctas { flex-direction: column; align-items: center; }
.preview-wrap { grid-template-columns: 1fr; }
.preview-copy h2 { text-align: center; }
.preview-copy .section-subtitle { text-align: center; margin-left: auto; margin-right: auto; }
.browser-frame { transform: none; }
.preview-hero { grid-template-columns: 1fr; }
.preview-cards { grid-template-columns: 1fr; }
.consulting-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
Expand Down Expand Up @@ -197,6 +301,68 @@ <h2 class="section-title">Ganhos claros para a operação</h2>
</div>
</section>

<section id="preview" class="preview">
<div class="container">
<div class="preview-wrap">
<div class="preview-copy">
<h2 class="section-title">Preview do site</h2>
<p class="section-subtitle">Uma prévia visual da proposta: comercial, direta e com foco em conversão para consultoria sob medida.</p>
<ul class="preview-points">
<li>Hierarquia clara para orçamento e contato.</li>
<li>Blocos de benefício e prova de valor antes do formulário.</li>
<li>Visual mais premium para reforçar confiança comercial.</li>
</ul>
</div>
<div class="browser-frame" aria-label="Preview visual do site">
<div class="browser-chrome">
<div class="browser-dots"><span></span><span></span><span></span></div>
<div class="browser-bar">https://librecode.coop</div>
</div>
<div class="browser-content">
<div class="preview-header">
<div class="preview-brand">LibreCode</div>
<div class="preview-pill">Consultoria Nextcloud</div>
</div>
<div class="preview-hero">
<div class="preview-panel">
<h3>Reduza custos e acelere a adoção</h3>
<p>Estratégia Nextcloud desenhada para sua operação, com escopo, implantação e suporte claros.</p>
<div class="preview-cards">
<div class="preview-card">
<span class="label">Benefício</span>
<span class="value">Mais controle</span>
</div>
<div class="preview-card">
<span class="label">Entrega</span>
<span class="value">Proposta comercial</span>
</div>
<div class="preview-card">
<span class="label">Canal</span>
<span class="value">CRM + Formulário</span>
</div>
</div>
</div>
<div class="preview-stats">
<div class="preview-stat">
<strong>Diagnóstico</strong>
Escopo baseado em maturidade, risco e prioridade.
</div>
<div class="preview-stat">
<strong>Implementação</strong>
Caminho claro de migração e adoção.
</div>
<div class="preview-stat">
<strong>Contato</strong>
Formulário integrado ao SuiteCRM.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="consultoria" class="consulting">
<div class="container">
<h2 class="section-title">Consultoria personalizada para sua realidade</h2>
Expand Down
Loading