ADR-0010: Componente Visual Modular - CaseStudy

Este documento especifica a decisão de design sobre a implementação do componente visual CaseStudy para o layout "Site" do gerador estático gbr_ssg.

1. Contexto e Motivação

O componente CaseStudy é voltado para apresentação de casos de uso institucionais B2B. Ele exibe em layout Flexbox de duas colunas: à esquerda, o contexto com crachá (kicker), título, descrição e tópicos (bullets); à direita, um bloco de código de demonstração em sintaxe Gleam/OTP.

2. Decisão Arquitetural

1. **Tipagem e Estrutura dos Dados (CaseStudyProps):** Mapearemos as propriedades extraídas da seção TOML para a estrutura CaseStudyProps: - kicker: Option(String) - Insígnia/Badge rosa acima do título. - title: String - Título principal do estudo de caso. - description: String - Descrição explicativa contextual. - bullets: List(CaseBullet) - Tópicos com title e description. - code_snippet: Option(String) - Bloco de código em string multilinha.

2. **Estratégia de Parsing para Tópicos (bullets):** Mantendo a consistência adotada no FeatureGrid (ADR-09), utilizaremos a busca por chaves indexadas sequencialmente: bullet_1_title, bullet_1_desc, bullet_2_... no dicionário da seção.

3. *Flexibilidade e Responsividade do Layout:* - **Duas Colunas (lg:flex-row):** Quando o code_snippet estiver presente (Some(code)), a coluna da esquerda ocupará metade da largura (lg:w-1/2) e a da direita ocupará a outra metade. - *Coluna Única Resiliente:* Quando o code_snippet for omitido (None), a coluna da esquerda se expandirá graciosamente para ocupação total (w-full), omitindo a coluna de código sem causar vácuo visual.

3. Requisitos EARS

*Requisitos Ubíquos (Ubiquitous Requirements)* - *UBQ-01 (Adaptação Resiliente de Layout):* Se a chave code_snippet for nula ou omitida no TOML (resolvida para None), a coluna de código DEVE ser omitida do HTML renderizado e a coluna de texto DEVE expandir-se para w-full. - *UBQ-02 (Parse de Tópicos Sequenciais):* O componente DEVE extrair a lista List(CaseBullet) iterando sobre as chaves indexadas bullet_N_title e bullet_N_desc até o primeiro índice omisso. - *UBQ-03 (Destaque Visual do Bloco de Código):* Quando o code_snippet for fornecido, a coluna da direita DEVE ser renderizada com um container bg-slate-950, borda border-slate-800, um gradiente decorativo de topo (from-pink-500 to-purple-500) e texto monospace (font-mono text-pink-300).