// gm-sections-1.jsx — Capa, Composição, Vídeo (anatomia da tela).
// Exports: GMCover, GMComposition, GMVideoAnatomy.
function GMCover() {
const Mini = ({ ratio, kicker, children }) => (
{children}
{kicker}
);
return (
Guia de Mídia · v1.0
Como criar mídia que parece sua — toda vez.
O Manual define a marca. Este guia ensina a aplicá-la em movimento e em dados: onde pôr cada elemento, como animar, como desenhar diagramas e — principalmente — como exibir números sem mentir nem confundir.
$ deep-dive
Pipeline RAG
3 erros em RAG
);
}
function GMComposition() {
const Principle = ({ t, d }) => (
{t}
{d}
);
return (
16:9 · Horizontal
Título no terço inferior
Ponto focal no cruzamento
9:16 · Vertical
Texto curto, alto na tela
1:1 · Quadrado
Centro equilibrado
Comece toda peça pela grade e pela margem de segurança, decida o ponto focal, e só então adicione apoio. Estrutura primeiro, enfeite depois — é o mesmo raciocínio de arquitetar um sistema.
);
}
function GMVideoAnatomy() {
const zones = [
["Marca", "Canto superior — o nⁱ pequeno e constante. Presença, não protagonismo.", { top: "10%", right: "8%" }, T.cyan],
["Título / chamada", "Terço inferior esquerdo. O que a tela está dizendo agora.", { left: "8%", bottom: "14%" }, T.coral],
["Apoio / kicker", "Acima do título, em mono. Contexto curto.", { left: "8%", bottom: "32%" }, T.amber],
["Zona segura de legenda", "Faixa inferior central — deixe livre para captions.", { left: "30%", bottom: "6%" }, T.dim],
];
const Comp = ({ label, when, children }) => (
{children}
{label}
{when}
);
return (
{zones.map(([t, d, pos, c], i) => (
{t}
))}
{zones.map(([t, d, , c]) => (
{t}
{d}
))}
Componentes de tela — e quando usar cada um
O repertório fechado. Combine estes blocos em vez de inventar layout do zero a cada vídeo.