ADVANCED LANDING PAGE DESIGN SYSTEM

OBJECTIVE

Criar landing pages com nível profissional, altamente visuais, modernas e com forte apelo de conversão.

O design NÃO deve parecer genérico ou gerado por IA.
Deve seguir padrões de UI avançados utilizados por designers experientes.

---

DESIGN PRINCIPLES

• Estética premium, limpa e moderna
• Forte uso de profundidade (Fake 3D)
• Hierarquia visual bem definida
• Interface fluida e responsiva
• Uso inteligente de espaços negativos
• Microinterações refinadas
• Nada robotizado ou excessivamente carregado

---

COLOR SYSTEM

Utilizar a paleta baseada na imagem fornecida:

• #1F4D2B (verde profundo)
• #2E6B3A (verde médio escuro)
• #4F7F3A (verde natural)
• #8FA77A (verde suave)
• #B7A97C (bege oliva)
• #D1C7A1 (bege claro)

Não especificar onde cada cor deve ser usada.
Aplicar com harmonia e contraste adequado.

---

TYPOGRAPHY

• Fonte moderna sans-serif (ex: Inter, Satoshi, General Sans)
• Headings com peso forte (600–800)
• Texto leve e legível
• Espaçamento consistente

---

HERO SECTION (MANDATÓRIO)

• Layout em duas colunas
• Lado esquerdo:
  • Texto "ATIVA DISTRIBUIDORA"
  • Aplicar efeitos modernos:
    • hover interactions
    • leve movimento (parallax ou transform)
    • destaque tipográfico
• Lado direito:
  • Espaço reservado para imagens/animações fluidas fornecidas pelo usuário
• Composição equilibrada e respirada

---

HEADER / NAVBAR

• Barra superior fixa
• Estilo glassmorphism:
  • background semi-transparente
  • backdrop blur
• Interativa e moderna
• Transições suaves ao scroll
• Links com hover elegante

---

SECTIONS

As seções devem:

• Ser visualmente distintas, porém consistentes
• Ter layouts modernos (grid, split, cards)
• Conteúdo simples, humano e direto
• Evitar textos longos e robóticos

---

COMPONENTS

CARDS

• Glassmorphism obrigatório
• Sombras suaves e profundidade
• Bordas levemente arredondadas
• Hover:
  • leve escala
  • glow sutil
  • mudança de iluminação

ICONS

• Utilizar Lucide Icons exclusivamente
• Integrar com animações leves
• Manter consistência visual

---

ANIMATIONS

• Transições suaves (ease-in-out)
• Scroll reveal (fade + translate)
• Microinterações em:
  • botões
  • cards
  • links
• Evitar exageros
• Priorizar fluidez e elegância

---

FAKE 3D

• Utilizar sombras, layers e transforms para simular profundidade
• Elementos com leve perspectiva
• Interações com movimento no eixo Z (scale + translate)

---

INTERACTIONS

• Hover effects refinados
• Feedback visual claro
• Botões com destaque e responsividade
• Elementos clicáveis bem definidos

---

TECH STACK

Utilizar HTML, CSS e JavaScript com bibliotecas modernas:

• GSAP (animações avançadas)
• Lenis ou Locomotive Scroll (scroll suave)
• Three.js (quando necessário para efeitos 3D leves)
• Vanilla JS bem estruturado ou modular
• CSS moderno:
  • grid
  • flexbox
  • backdrop-filter
  • variables

---

RESPONSIVENESS

• Mobile-first
• Layout fluido
• Ajustes inteligentes de espaçamento
• Manter estética premium em qualquer tela

---

UX PRINCIPLES

• Clareza acima de complexidade
• Navegação intuitiva
• Hierarquia bem definida
• Foco em conversão

---

RESTRIÇÕES

• NÃO usar emojis
• NÃO usar layouts genéricos
• NÃO exagerar em animações
• NÃO poluir visualmente
• NÃO usar cores fora da paleta definida

---

FINAL RESULT

A landing page deve parecer:

• Um produto premium
• Criado por um designer experiente
• Moderno, limpo e altamente profissional
• Visualmente impactante, porém elegante