mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 15:13:07 +00:00
style(plans S1-S4): prettier nos planos e no rascunho UI (format pós-commit do lote)
This commit is contained in:
Francisco Solla
parent
02c922eac8
commit
8854fcb85b
4 changed files with 115 additions and 45 deletions
|
|
@ -49,7 +49,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
|
|||
|
||||
- **Vou apresentar dados?** Sim, superfície neste item — mas são **conteúdos** (artigos), não métricas.
|
||||
- **Decisões desbloqueadas:** o visitante decide qual artigo ler (clique); nenhum número novo de campanha é inventado aqui.
|
||||
- **Forma:** *adiada ao plano de implementação* — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
|
||||
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
|
|||
|
||||
- **Vou apresentar dados?** Sim, superfície neste item — metadados do post (imagem, legenda, data) vindos da plataforma.
|
||||
- **Decisões desbloqueadas:** o visitante decide qual post abrir; nada de métricas inventadas.
|
||||
- **Forma:** *adiada ao plano de implementação* — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
|
||||
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-5xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Visitante da home pública de campanha (jorgesolla1313). Seção 3 da página: logo após a
|
||||
prova social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo
|
||||
generalizado (Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
|
||||
Visitante da home pública de campanha (jorgesolla1313). Seção 3 da página: logo após a prova
|
||||
social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo generalizado
|
||||
(Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
|
||||
</p>
|
||||
|
||||
<!-- ============ CENA: desktop (estado final, 3 fontes) ============ -->
|
||||
|
|
@ -30,16 +30,16 @@
|
|||
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-500 uppercase">
|
||||
Acompanhe de perto
|
||||
</p>
|
||||
<h2 class="mt-1 text-2xl font-extrabold text-zinc-900">
|
||||
A caminhada, em tempo real
|
||||
</h2>
|
||||
<h2 class="mt-1 text-2xl font-extrabold text-zinc-900">A caminhada, em tempo real</h2>
|
||||
<p class="mt-1 text-sm text-zinc-500">
|
||||
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das redes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-4 text-sm font-bold">
|
||||
<a href="#" class="text-red-700 underline-offset-4 hover:underline">Ver artigos →</a>
|
||||
<a href="#" class="text-red-700 underline-offset-4 hover:underline">Seguir no Instagram →</a>
|
||||
<a href="#" class="text-red-700 underline-offset-4 hover:underline"
|
||||
>Seguir no Instagram →</a
|
||||
>
|
||||
<a href="#" class="text-red-700 underline-offset-4 hover:underline">YouTube →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,17 +47,26 @@
|
|||
<!-- bento: 1 grande + 4 pequenos -->
|
||||
<div class="mt-5 grid gap-4 md:grid-cols-4">
|
||||
<!-- card grande: artigo destaque -->
|
||||
<a href="#" class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-[16/9] overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
Artigo
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
capa 16:9 (placeholder)
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<h3 class="text-base leading-snug font-extrabold text-zinc-900 group-hover:underline">
|
||||
<h3
|
||||
class="text-base leading-snug font-extrabold text-zinc-900 group-hover:underline"
|
||||
>
|
||||
Título do artigo em destaque, duas ou três linhas para caber
|
||||
</h3>
|
||||
<p class="text-xs leading-relaxed text-zinc-500">
|
||||
|
|
@ -68,12 +77,19 @@
|
|||
</a>
|
||||
|
||||
<!-- pequeno: vídeo YouTube -->
|
||||
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
YouTube
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
thumb 16:9
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -84,12 +100,19 @@
|
|||
</a>
|
||||
|
||||
<!-- pequeno: vídeo YouTube -->
|
||||
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
YouTube
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
thumb 16:9
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -100,12 +123,19 @@
|
|||
</a>
|
||||
|
||||
<!-- pequeno: Instagram -->
|
||||
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-square overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
Instagram
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
post 1:1
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -116,12 +146,19 @@
|
|||
</a>
|
||||
|
||||
<!-- pequeno: Instagram -->
|
||||
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-square overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
Instagram
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
post 1:1
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -146,7 +183,10 @@
|
|||
</section>
|
||||
|
||||
<!-- ============ CENA: mobile (carrossel — 1 conteúdo por tela) ============ -->
|
||||
<section data-shot="mobile" class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl">
|
||||
<section
|
||||
data-shot="mobile"
|
||||
class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl"
|
||||
>
|
||||
<!-- contexto: prova social -->
|
||||
<div class="flex items-center justify-center gap-6 rounded-xl bg-zinc-100 py-2.5">
|
||||
<span class="text-xs font-bold text-zinc-400">3.333 proposições</span>
|
||||
|
|
@ -167,12 +207,19 @@
|
|||
<!-- carrossel: 1 card por tela + dots -->
|
||||
<div class="mt-4 overflow-hidden rounded-xl">
|
||||
<!-- card ativo -->
|
||||
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
YouTube
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
thumb 16:9
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -191,23 +238,34 @@
|
|||
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
|
||||
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
|
||||
</div>
|
||||
<p class="mt-2 text-center text-xs font-semibold text-zinc-500">1 de 5 · deslize para ver os próximos</p>
|
||||
<p class="mt-2 text-center text-xs font-semibold text-zinc-500">
|
||||
1 de 5 · deslize para ver os próximos
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CENA: card com compartilhar (S4 — WhatsApp) ============ -->
|
||||
<section data-shot="compartilhar" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
|
||||
<section
|
||||
data-shot="compartilhar"
|
||||
class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl"
|
||||
>
|
||||
<p class="text-sm font-bold text-zinc-700">
|
||||
Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com
|
||||
o CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
|
||||
Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com o
|
||||
CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
|
||||
</p>
|
||||
<div class="mt-4 grid max-w-3xl grid-cols-3 gap-4">
|
||||
<div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<div
|
||||
class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
YouTube
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
thumb 16:9
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -223,12 +281,18 @@
|
|||
↗
|
||||
</button>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
|
||||
<div
|
||||
class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
|
||||
>
|
||||
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
|
||||
<span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
|
||||
<span
|
||||
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
|
||||
>
|
||||
Artigo
|
||||
</span>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
|
||||
>
|
||||
capa 16:9
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -244,15 +308,21 @@
|
|||
↗
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3">
|
||||
<div
|
||||
class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3"
|
||||
>
|
||||
<p class="text-xs font-semibold text-zinc-500">
|
||||
Menu aberto (v1): "Compartilhar no WhatsApp" (mensagem pré-configurada com título +
|
||||
link) e "Copiar link".
|
||||
</p>
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
|
||||
<div
|
||||
class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
|
||||
>
|
||||
WhatsApp ↗
|
||||
</div>
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
|
||||
<div
|
||||
class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
|
||||
>
|
||||
Copiar link
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -263,8 +333,8 @@
|
|||
<section data-shot="vazio" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
|
||||
<p class="text-sm font-bold text-zinc-700">
|
||||
Vazio / fail-closed — nenhuma fonte com conteúdo disponível (artigos invisíveis ou APIs
|
||||
sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo
|
||||
Prova → Por que essa eleição importa, sem zona morta.
|
||||
sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo Prova →
|
||||
Por que essa eleição importa, sem zona morta.
|
||||
</p>
|
||||
<div class="mt-4 flex items-center justify-center gap-10 rounded-xl bg-zinc-100 py-3">
|
||||
<span class="text-sm font-bold text-zinc-400">3.333 proposições</span>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
|
|||
|
||||
- **Vou apresentar dados?** Sim, superfície neste item — metadados do vídeo (título, thumbnail, data, visualizações) vindos da plataforma.
|
||||
- **Decisões desbloqueadas:** o visitante decide qual vídeo assistir (clique); visualizações são fato da plataforma (não inventar).
|
||||
- **Forma:** *adiada ao plano de implementação* — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
|
||||
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue