Vitalis - Agro forte, futuro sustentável

Tema do Agrinho 2026: Agro forte, futuro sustentável: equilíbrio entre produção e meio ambiente.

Autor: Victor Daniel dos Santos Lima
Projeto: site educativo front-end para apresentar, de forma visual e interativa, como o campo pode produzir mais e melhor cuidando do solo, da água, da biodiversidade e das pessoas.

Visão Geral

Vitalis é uma experiência web sobre sustentabilidade no agro. O site mostra que produção agrícola, tecnologia e preservação ambiental não precisam competir entre si: quando caminham juntas, fortalecem a segurança alimentar, reduzem desperdícios e ajudam a construir um futuro rural mais equilibrado.

O conteúdo foi pensado para chamar atenção sem cansar o visitante. Em vez de uma página cheia de textos longos, o projeto usa cards curtos, carrossel com fotos locais, mapa interativo, glossário pesquisável, comparador antes/depois, quiz, conquistas e o minijogo Fazenda em Equilíbrio.

Objetivo

O objetivo do Vitalis é explicar o tema do Agrinho 2026 com linguagem clara, visual moderno e interações feitas em HTML, CSS e JavaScript puro. O projeto valoriza o protagonismo estudantil, a pesquisa com fontes reais e a organização do código para que o avaliador consiga entender como cada parte foi construída.

Páginas Do Site

Página	Função
index.html	Abertura do site, carrossel inicial, dados reais, curiosidades, comparador, girassol interativo, conquistas e quiz.
sobre.html	Explica o propósito do Vitalis, a relação com o Agrinho e os recursos usados no projeto.
jornada.html	Apresenta trilhas do agro sustentável e um mapa interativo do Brasil por regiões.
pesquisa.html	Reúne um glossário pesquisável com filtros e cards expansíveis sobre tecnologias e práticas sustentáveis.
minijogo.html	Traz o jogo Fazenda em Equilíbrio, com decisões de plantio, água, solo, biodiversidade e lucro.
galeria.html	Mostra temas essenciais e fotos locais do projeto, com filtros por categoria.
contato.html	Apresenta a autoria, GitHub e o passaporte/compromisso Vitalis.

Funcionalidades De Destaque

• Carrossel inicial moderno: usa fotos locais do projeto com texto sobreposto no canto inferior esquerdo, bolinhas de navegação e setas.
• Cards de leitura rápida: resumem solo vivo, água protegida, energia limpa, bioinsumos, tecnologia e segurança alimentar.
• Dados reais com fonte: cards indicam estimativas, metas, marcos legais e referências técnicas.
• Comparador antes/depois: mostra visualmente recuperação e degradação de paisagens, mantendo créditos da Wikimedia Commons.
• Cena do girassol: interação visual para conectar água, luz, cuidado e crescimento.
• Mapa do Brasil: regiões clicáveis com painel de informações e desafio regional.
• Glossário pesquisável: busca local, filtros por tema e cards expansíveis.
• Quiz final: testa o aprendizado de forma leve e salva conquistas no navegador.
• Conquistas Vitalis: registra ações como explorar o mapa, abrir dicas e jogar.
• Passaporte do projeto: gera um compromisso sustentável localmente.
• Modo offline: o sw.js guarda os principais arquivos em cache depois da primeira visita em localhost ou HTTPS.

Minijogo Fazenda Em Equilíbrio

O minijogo coloca o visitante no papel de administrador de uma fazenda durante 12 meses. A cada rodada, é preciso equilibrar:

• dinheiro;
• produção;
• água;
• solo;
• biodiversidade;
• meio ambiente;
• reputação.

O jogador pode plantar culturas, irrigar, colher, construir reservatórios, usar adubo orgânico, expandir a fazenda e tomar decisões que afetam os indicadores. O jogo tem missões, eventos aleatórios, salvamento local e modo estendido.

Tecnologias Usadas

O código próprio do projeto utiliza:

• HTML5: estrutura semântica das páginas.
• CSS3: layout, responsividade, animações, cards, modo escuro e estilos do minijogo.
• JavaScript puro: interações, i18n, menu mobile, carrossel, mapa, pesquisa, quiz, conquistas, acessibilidade e jogo.
• Service Worker: cache offline em sw.js.
• LocalStorage e SessionStorage: preferências, conquistas, progresso do jogo e splash screen.
• Web Speech API: leitura em voz alta pelo navegador.
• SVG: mapa interativo e recursos visuais leves.

Recursos externos usados com crédito:

• Google Fonts: famílias Montserrat e Open Sans.
• Font Awesome: ícones visuais.
• Wikimedia Commons: apenas nas imagens externas do comparador antes/depois.

Acessibilidade E Experiência

O Vitalis inclui cuidados para diferentes formas de navegação e leitura:

• navegação por teclado em botões, cards, mapa e controles;
• aria-label, aria-expanded, aria-pressed, aria-live e descrições acessíveis;
• painel de acessibilidade com ajuste de fonte;
• modo claro e modo escuro;
• leitura em voz alta com Web Speech API;
• troca de idioma entre português, inglês e espanhol;
• textos alternativos nas imagens;
• respeito a prefers-reduced-motion para reduzir animações fortes;
• layout responsivo para desktop, tablet e celular.

Responsividade

O layout foi construído para se adaptar a telas grandes e pequenas. Cards, galerias, mapa, quiz e minijogo usam grades flexíveis, clamp(), grid, flex, media queries e limites de largura para manter leitura confortável em diferentes dispositivos.

Estrutura Do Projeto

teste/
  index.html
  sobre.html
  jornada.html
  pesquisa.html
  minijogo.html
  galeria.html
  contato.html
  sw.js
  README.md

  css/
    style.css
    transitions.css

  js/
    script.js

  assets/
    area-verde-mangueira.jpeg
    energia-solar-rural.jpeg
    integracao-rural-urbana.jpg
    paineis-solares-campo.jpeg
    pitangueira-na-fazenda.jpg
    trabalho-no-campo-gado.jpg
    trator-na-propriedade.jpg

Organização Do Código

• Os arquivos HTML possuem comentários antes dos blocos principais, como header, hero, carrossel, seções de conteúdo, footer, acessibilidade e scripts.
• css/style.css está organizado por blocos de tema, base, header, hero, carrossel, cards, páginas internas, minijogo, responsividade e modo escuro.
• js/script.js possui separadores para internacionalização, conquistas, mapa, filtros, pesquisa, carrossel, quiz, acessibilidade, inicialização e jogo.
• O projeto mantém HTML, CSS e JavaScript em arquivos separados, facilitando avaliação e manutenção.

Checklist visual:

• abrir a home;
• navegar pelo carrossel;
• conferir cards, comparador, quiz e minijogo;
• alternar modo claro/escuro;
• trocar idioma;
• testar leitura em voz alta;
• verificar imagens locais;
• testar desktop e mobile;
• conferir funcionamento offline em localhost ou HTTPS.

Fontes De Dados

• FAO, World Food Summit: https://www.fao.org/4/w3548e/w3548e00.htm
• Conab, 9º levantamento da safra de grãos 2025/26: https://www.gov.br/conab/pt-br/atuacao/informacoes-agropecuarias/safras/safra-de-graos/boletim-da-safra-de-graos/9o-levantamento-safra-2025-26/e-book_boletim-de-safras-9o-levantamento_2026.pdf
• ConabCast sobre 358,6 mi t: https://cast.conab.gov.br/post/2026-06-11_9_lev_graos
• RenovaPR, Paraná Energia Rural Renovável: https://www.agricultura.pr.gov.br/Pagina/Parana-Energia-Rural-Renovavel
• Irriga Paraná: https://www.agricultura.pr.gov.br/Pagina/Irriga-Parana
• Programa Segurança Hídrica: https://www.agricultura.pr.gov.br/Pagina/Programa-Seguranca-Hidrica
• MAPA, Bioinsumos: https://www.gov.br/agricultura/pt-br/assuntos/inovacao/bioinsumos
• MAPA, Agricultura Digital e de Precisão: https://www.gov.br/agricultura/pt-br/assuntos/sustentabilidade/tecnologia-agropecuaria/agricultura-de-precisao-1
• Embrapa, Automação e Agricultura de Precisão: https://www.embrapa.br/tema-automacao-e-agricultura-de-precisao/perguntas-e-respostas
• Embrapa, Sistemas Agroflorestais: https://www.embrapa.br/agrobiologia/fazendinha-agroecologica/sistemas-agroflorestais
• Embrapa Agrobiologia, Tecnologias: https://www.embrapa.br/agrobiologia/fazendinha-agroecologica/tecnologias
• IDR-Paraná, Grãos Sustentáveis: https://www.idrparana.pr.gov.br/Pagina/Graos-Sustentaveis
• MapBiomas Brasil: https://brasil.mapbiomas.org/

Créditos Das Imagens

Fotos locais usadas na galeria e no carrossel inicial:

• paineis-solares-campo.jpeg
• energia-solar-rural.jpeg
• trator-na-propriedade.jpg
• pitangueira-na-fazenda.jpg
• area-verde-mangueira.jpeg
• integracao-rural-urbana.jpg
• trabalho-no-campo-gado.jpg

Essas fotos locais foram tiradas pelo autor Victor Daniel dos Santos Lima e estão organizadas em teste/assets.

Imagens externas mantidas no comparador antes/depois:

• Loess landscape china.jpg, Till Niermann, Wikimedia Commons, licença CC BY-SA 3.0/GFDL: https://commons.wikimedia.org/wiki/File:Loess_landscape_china.jpg
• Shaanxi landscape IGP4862.jpg, w0zny, Wikimedia Commons, licença CC BY-SA 3.0: https://commons.wikimedia.org/wiki/File:Shaanxi_landscape_IGP4862.jpg

Aderência Ao Regulamento

O projeto foi revisado pensando na subcategoria Programação Front-End: HTML, CSS e JavaScript do Agrinho 2026.

• O tema central segue: Agro forte, futuro sustentável: equilíbrio entre produção e meio ambiente.
• As páginas usam HTML para estrutura, CSS para visual e JavaScript para comportamento.
• O código principal está separado em css/style.css, css/transitions.css e js/script.js.
• Não há backend obrigatório.
• As imagens locais estão dentro do próprio projeto em teste/assets.
• O README documenta tecnologias, fontes, créditos e forma de teste.
• Os comentários de seção ajudam a explicar a estrutura do HTML, os blocos do CSS e as funções do JavaScript.

Por Que O Vitalis Chama Atenção

Vitalis não apresenta sustentabilidade como uma ideia distante. Ele transforma o tema em experiência: o visitante vê, clica, compara, joga, pesquisa e toma decisões. A proposta une conteúdo educativo, visual responsivo e programação front-end para mostrar que o futuro do agro depende de equilíbrio.