ADR-0011: Componente Visual Modular - TeamGrid

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

1. Contexto e Motivação

O componente TeamGrid apresenta os membros da equipe (fundadores, engenheiros, colaboradores), exibindo foto/avatar, nome, cargo e um link opcional para o perfil profissional (LinkedIn/GitHub/Site).

2. Decisão Arquitetural

1. **Tipagem e Estrutura (TeamGridProps e TeamMember):** - TeamMember(name: String, role: String, photo: Option(String), link: Option(String)) - TeamGridProps(title: Option(String), members: List(TeamMember))

2. **Estratégia de Parsing Indexado (member_N_...):** Para manter paridade com o FeatureGrid e CaseStudy, os membros serão lidos de forma iterativa usando as chaves member_1_name, member_1_role, member_1_photo, member_1_link, etc., no dicionário da seção.

3. *Renderização de Avatar Fail-Soft (Fallback de Iniciais):* - Se member_N_photo for informado (Some(url)), renderiza uma imagem circular <img> com object-cover. - Se member_N_photo for omisso ou nulo (None), o componente renderizará uma div com avatar gradiente gerando as *iniciais maiúsculas* extraídas do nome do membro (ex: "Paulo Sales" -> "PS", "Lucia" -> "L").

4. *Acoplamento Opcional de Link:* Se member_N_link possuir valor (Some(url)), o card do membro será envelopado em um elemento âncora <a>, tornando o card clicável.

3. Requisitos EARS

*Requisitos Ubíquos (Ubiquitous Requirements)* - *UBQ-01 (Avatar Fallback com Iniciais):* Se a propriedade photo for omissa (None), a interface DEVE gerar um elemento visual circular com as iniciais do nome do membro em letras maiúsculas. - *UBQ-02 (Envelopamento Dinâmico por Âncora):* Se a propriedade link for resolvida para Some(url), o card do membro DEVE ser encapsulado por uma tag <a> com atributo href, caso contrário DEVE ser renderizado como um contêiner <div> estático sem comportamento de link. - *UBQ-03 (Responsividade em 4 Colunas):* O contêiner de membros DEVE responder adaptativamente em layout de grade: 1 coluna em móbiles (grid-cols-1), 2 colunas em telas pequenas (sm:grid-cols-2) e 4 colunas em telas grandes (lg:grid-cols-4).