feat: Adiciona documento de análise descritiva do projeto

Cria um documento Markdown (`ANALISE_PROJETO.md`) que contém uma análise descritiva e detalhada da estrutura do projeto Quarto.

O documento inclui:
- Análise da estrutura de arquivos e diretórios.
- Análise visual e de componentes (barra de navegação, rodapé, botões, cards).
- Análise da estrutura das páginas, com foco na página inicial.
- Análise do comportamento e uso de imagens no projeto.

A análise foi aprimorada para ser auto-contida e compreensível para leitores sem acesso direto ao código-fonte.

Author: google-labs-jules[bot]

ANALISE_PROJETO.md

@@ -0,0 +1,78 @@
+# Análise Descritiva e Detalhada da Estrutura do Projeto Quarto
+
+Este documento oferece uma análise aprofundada da estrutura do site do Quarto, detalhando a arquitetura dos arquivos, os componentes visuais, a organização das páginas e o uso de imagens. A análise foi elaborada para ser compreensível por si só, sem a necessidade de acesso direto ao código-fonte.
+
+## 1. Estrutura de Arquivos e Diretórios
+
+O projeto é construído sobre o Quarto, um sistema de publicação técnica, e sua estrutura de arquivos reflete uma clara separação entre configuração, conteúdo, estilo e funcionalidade.
+
+- **`_quarto.yml`**: Este é o arquivo central de configuração. Ele dita o comportamento e a aparência de todo o site. Dentro dele, são definidos:
+    - **Tipo de Projeto**: `type: website` especifica que o resultado final é um site.
+    - **Metadados do Site**: Título ("Quarto"), imagem de compartilhamento em redes sociais (`quarto-dark-bg.jpeg`), e ícone do navegador (`favicon.png`).
+    - **Navegação Principal (`navbar`)**: Configura a barra de navegação superior, incluindo o logo, os links de texto (Overview, Get Started, Guide, etc.) e os ícones de redes sociais (GitHub, Bluesky, RSS).
+    - **Rodapé (`page-footer`)**: Define a estrutura do rodapé em três colunas, com o logo do patrocinador (Posit) à esquerda, links de navegação (About, FAQ, License) no centro e ícones de redes sociais à direita.
+    - **Estrutura de Conteúdo (`sidebar`)**: Organiza a navegação lateral para as seções de documentação. Cada `sidebar` (como `guide` ou `reference`) é definido aqui, criando uma estrutura de menu hierárquico que corresponde à organização dos arquivos na pasta `/docs`.
+    - **Formato de Saída**: Na seção `format`, são definidas opções globais para a saída HTML, como os temas a serem usados (claro e escuro) e a inclusão de arquivos CSS e JavaScript customizados.
+
+- **`index.qmd`**: O arquivo de conteúdo para a página inicial. Utiliza Quarto Markdown, que é uma extensão do Pandoc Markdown. O cabeçalho (YAML frontmatter) deste arquivo define metadados específicos da página:
+    - `page-layout: custom`: Indica que a página não seguirá o layout padrão, permitindo uma estrutura de design única.
+    - `css: index.css`: Aplica uma folha de estilo específica para a página inicial.
+    - O corpo do arquivo usa uma sintaxe de Divs (`:::{.hero-banner}`) para criar seções de layout customizadas, como o banner principal e a grade de funcionalidades.
+
+- **`styles.css`**, **`theme.scss`**, **`theme-dark.scss`**: Estes três arquivos gerenciam a aparência do site.
+    - **`theme.scss`**: Define as variáveis de estilo (cores, fontes) para o tema claro padrão, usando a sintaxe SCSS. Por exemplo, `$link-color: #39729E;` define a cor padrão dos links.
+    - **`theme-dark.scss`**: Sobrescreve as variáveis do tema claro para adaptar o site ao modo escuro. Por exemplo, `$body-bg: $gray-900;` e `$body-color: $gray-100;` alteram o fundo para quase preto e o texto para quase branco.
+    - **`styles.css`**: Contém regras de CSS que não são variáveis de tema, mas sim estilos estruturais aplicados a componentes específicos, como o tamanho dos botões, o layout dos cards e ajustes de responsividade.
+
+- **`images/`**: Um diretório central que contém todos os ativos visuais. Isso inclui o logo (`quarto.png`), a imagem de fundo para compartilhamento (`quarto-dark-bg.jpeg`), as imagens de exemplo de código (`demo-jupyter-output.png`) e os vídeos de animação da página inicial (`hero_animation.mp4`, `hero_animation_dark.mp4`).
+
+- **`docs/`**: Este diretório abriga o conteúdo principal do site: a documentação. A estrutura de subdiretórios (ex: `/docs/guide`, `/docs/authoring`) corresponde diretamente à estrutura de navegação definida nos sidebars no `_quarto.yml`. Cada página é um arquivo `.qmd`.
+
+- **`filters/`**: Contém scripts Lua que funcionam como filtros. Um filtro intercepta o documento durante a renderização e pode modificá-lo programaticamente. Por exemplo, o filtro `tools-tabset.lua` (ativado no `_quarto.yml`) provavelmente é usado para criar os painéis com abas que exibem informações para diferentes ferramentas (VS Code, RStudio, etc.).
+
+## 2. Análise Visual e de Componentes
+
+O design do site é limpo, moderno e focado na legibilidade.
+
+- **Barra de Navegação**: Fixa no topo da página, possui um fundo claro no tema padrão e escuro no tema noturno. O logo à esquerda é seguido por links de texto. À direita, há uma caixa de busca e ícones de redes sociais. Em telas menores, os links de texto são colapsados em um menu "hambúrguer".
+
+- **Rodapé**: Discreto, dividido em três colunas. O uso de logos e ícones é consistente com o resto do site, e os links de texto oferecem acesso rápido a páginas institucionais.
+
+- **Botões**: Existem dois estilos principais de botões de ação, definidos em `styles.css`:
+    - **Primário (`.btn-action-primary`)**: Usado para as chamadas à ação mais importantes ("Get Started"). É um botão grande, com cantos totalmente arredondados (`border-radius: 30px`), um fundo de cor sólida (`#447099`) e texto branco. Ao passar o mouse, a cor de fundo escurece para fornecer feedback visual.
+    - **Secundário (`.btn-secondary`)**: Usado para ações alternativas ("Guide"). No tema claro, tem um fundo transparente, borda e texto na cor primária.
+
+- **Cards (`.link-cards`)**: Usados principalmente nas páginas de documentação e exemplos para apresentar uma coleção de links de forma visual. Cada card não tem borda, o que dá uma aparência limpa, e contém uma imagem ou ícone, um título e, opcionalmente, uma breve descrição. Eles são organizados em um layout de grade flexível que se adapta a diferentes larguras de tela.
+
+## 3. Estrutura das Páginas
+
+A página inicial (`index.qmd`) serve como um excelente exemplo da estrutura de página do site.
+
+- **Banner de Herói (`.hero-banner`)**: A primeira coisa que um visitante vê. É uma seção de altura total dividida em duas colunas. À esquerda, texto de marketing: o título "Welcome to Quarto", um subtítulo e uma lista de pontos-chave. Abaixo, os botões de ação primário e secundário. À direita, um vídeo de animação abstrata é reproduzido em loop, adicionando um elemento dinâmico à página.
+
+- **Seção "Hello, Quarto" (`.hello-quarto`)**: Esta seção interativa é projetada para demonstrar a versatilidade do Quarto. Possui um conjunto de abas no topo para diferentes linguagens (Python, R, Julia, Observable). Clicar em uma aba revela um conteúdo específico para aquela linguagem, geralmente mostrando um trecho de código em uma coluna e uma imagem do resultado final na outra. Isso permite que os usuários vejam rapidamente como o Quarto funciona com sua ferramenta preferida.
+
+- **Seção de Funcionalidades (`.features`)**: Apresenta os principais recursos do Quarto em uma grade de seis itens. Cada item tem um título, um parágrafo descritivo e um link "Learn more »". O layout em grade torna a informação fácil de escanear.
+
+- **Chamada à Ação Final (`.get-started`)**: No final da página, uma seção de largura total com um fundo alternativo contém um único botão "Get Started" centralizado, reforçando o próximo passo para o usuário.
+
+## 4. Comportamento das Imagens
+
+O uso de imagens e mídias é cuidadosamente implementado para ser funcional e esteticamente agradável.
+
+- **Imagens e Vídeos Dependentes do Tema**: O site implementa uma troca de ativos visuais com base no tema (claro/escuro). Isso é feito no Markdown usando Divs especiais:
+    ```markdown
+    ::: light-content
+    <video src="images/hero_animation.mp4"></video>
+    :::
+    ::: dark-content
+    <video src="images/hero_animation_dark.mp4"></video>
+    :::
+    ```
+    Isso renderiza o HTML apropriado para que apenas o vídeo correspondente ao tema ativo seja exibido. A mesma técnica é usada para o logo da Posit no rodapé, que tem uma versão para fundos claros e outra para fundos escuros.
+
+- **Imagens de Demonstração**: Imagens de alta qualidade são usadas para mostrar a saída de código (por exemplo, `hello-knitr.png`, `hello-julia.png`). Elas são cruciais para comunicar o valor do produto de forma rápida e visual.
+
+- **Acessibilidade**: Os arquivos de conteúdo mostram o uso de texto alternativo (`fig-alt="..."`) nas imagens, o que é uma boa prática de acessibilidade, garantindo que o conteúdo visual possa ser entendido por leitores de tela.
+
+- **Responsividade**: As imagens são configuradas para serem responsivas, o que significa que sua largura se ajusta para não exceder a do contêiner em que estão, garantindo uma boa visualização em dispositivos móveis e desktops.