AGRI-FRAMEWORK

Framework CSS moderno especializado para o agronegócio brasileiro

⚡

100% CSS Puro

Sem dependências JavaScript. Performance máxima garantida.

🌱

Tema Agronegócio

Cores e componentes pensados especificamente para o setor rural.

📱

Mobile First

Design responsivo otimizado para todos os dispositivos.

🎨

Paralaxe CSS

Efeitos avançados de profundidade usando apenas CSS.

Visão Geral

Framework CSS especializado para o agronegócio brasileiro

🎯 Características Principais

✅ 100% CSS puro - Sem JavaScript
✅ Tema agronegócio - Cores e componentes especializados
✅ Responsivo - Mobile-first design
✅ Animações avançadas - Paralaxe CSS puro
✅ Performance - Otimizado para 60fps
✅ Naming único - Classes autorais diferenciadas

🌱

Gradiente Agro

Verde campo até amarelo colheita

💻

Gradiente Tech

Azul tecnológico urbano

🌾

Gradiente Harvest

Laranja dourado da colheita

🌅

Gradiente Sunset

Pôr do sol no campo

🌍

Gradiente Earth

Tons terrosos naturais

✨

Gradiente Aurora

Roxo tecnológico inovador

Instalação

Configure o AGRI-FRAMEWORK em seu projeto em segundos

1. Inclua o CSS

2. Estrutura de Arquivos

									framework/ ├── styles/ │ ├── variables.css # Custom Properties
									│ ├── components.css # Componentes │ ├── utilities.css #
									Utilitários │ ├── animations.css # Animações │ └──
									agri-framework.css # Arquivo principal └── docs.html # Esta
									documentação
								

Sistema de Cores

Paleta semântica inspirada no agronegócio brasileiro

Campo Verde

#2E7D32

Cidade Azul

#1976D2

Harvest Dourado

#FFA726

Terra Marrom

#8D6E63

Tech Roxo

#7B1FA2

Céu Azul

#03A9F4

Tipografia

Sistema de tipografia hierárquico e semântico

Hero Title (.hero-title)

Section Title (.section-title)

Mega Title (.mega-title)

Subtítulo (.subtitle) - Texto complementar com peso médio

Parágrafo normal (.body-text) - Texto principal do conteúdo, otimizado para leitura com espaçamento adequado e contraste ideal.

Caption (.caption) - Texto auxiliar para legendas e descrições

Small text (.small-text) - Texto pequeno para informações secundárias

Classes de Tipografia

									<h1 class="hero-title">Título Principal</h1>
									<h2 class="section-title">Título de Seção</h2>
									<h3 class="mega-title">Título Grande</h3> <p
									class="subtitle">Subtítulo</p> <p
									class="body-text">Texto do corpo</p> <p
									class="caption">Legenda</p>
								

Botões

Conjunto completo de botões com efeitos interativos

Uso dos Botões

									<button class="agri-btn">Botão Principal</button>
									<button class="agri-btn-campo">Botão
									Campo</button> <button
									class="agri-btn-cidade">Botão Cidade</button>
									<button class="agri-btn-harvest">Botão
									Harvest</button>
								

Cards

Componentes flexíveis para organizar conteúdo

Card Básico

Card padrão do framework com estilo limpo e moderno.

Padrão

Farm Card

Especializado para conteúdo rural e agrícola.

Campo

City Card

Voltado para conteúdo urbano e tecnológico.

Cidade

Badges/Etiquetas

Sistema único de etiquetas temáticas do agronegócio

Harvest Crescimento Atenção Praga Irrigação Solo

Classe	Uso Semântico	Contexto
`.etiqueta-harvest`	Colheita, resultados	Produtos finais, sucessos
`.etiqueta-crescimento`	Desenvolvimento, sucesso	Plantio, expansão
`.etiqueta-atencao`	Cuidado, monitoramento	Alertas, observação
`.etiqueta-praga`	Problemas, urgência	Doenças, correções

Formulários

Componentes de formulário estilizados para o agronegócio

Nome do Produto Categoria

Descrição

Componentes de Formulário

									<input type="text" class="agri-input"
									placeholder="Texto"> <select class="agri-select">
									<option>Opção 1</option> </select>
									<textarea class="agri-textarea"
									placeholder="Descrição"></textarea>
								

Grid System

Sistema de grid responsivo e flexível

Grid 2 Colunas (.grid-2)

Coluna 1

Coluna 2

Grid 3 Colunas (.grid-3)

Coluna 1

Coluna 2

Coluna 3

Uso do Grid

									<div class="grid-2"> <div>Conteúdo 1</div>
									<div>Conteúdo 2</div> </div> <div
									class="grid-3"> <div>Conteúdo 1</div>
									<div>Conteúdo 2</div> <div>Conteúdo
									3</div> </div>
								

Utilitários

Classes auxiliares para layout e estilização

Alinhamento de Texto

Texto Centralizado (.text-center)

Texto à Esquerda (.text-left)

Texto à Direita (.text-right)

Display

Flex 1

Flex 2

Categoria	Classes	Descrição
Texto	`.text-center, .text-left, .text-right`	Alinhamento de texto
Display	`.d-flex, .d-grid, .d-block, .d-none`	Controle de display CSS
Hover	`.hover-lift, .hover-scale, .hover-3d`	Efeitos de hover interativos

Animações

Sistema de animações CSS avançadas

Demonstrações de Animação

Pulse

.anim-pulse

Float

.anim-float

Rotate

.anim-rotate

Classes de Animação

									<div class="anim-pulse">Elemento com pulse</div>
									<div class="anim-float">Elemento flutuante</div>
									<div class="anim-rotate">Elemento rotativo</div>
									<div class="hover-lift">Hover lift effect</div>
								

Paralaxe CSS

Efeitos 3D avançados usando apenas CSS

Transform 3D Parallax

									<div class="parallax-scene"> <div
									class="parallax-layer
									parallax-layer-back">Fundo</div> <div
									class="parallax-layer parallax-layer-mid">Meio</div>
									<div class="parallax-layer
									parallax-layer-front">Frente</div> </div>
								

Efeitos de Profundidade

									<div class="depth-layers"> <div class="floating-card
									depth-layer-2">Camada 2</div> <div
									class="floating-card depth-layer-3">Camada 3</div>
									<div class="floating-card depth-layer-4">Camada
									4</div> </div>
								