Componente reutilizável

Validação de Documentos por IA

Animação em loop pronta para colar em qualquer projeto Lovable. Configurável por props, sem dependências do design system desta landing.

Criar novo documento

Documento

documento-exemplo.pdf

Documento correto

Vigência válida

Vínculo confirmado

Dados extraídos pela IA. Revise os campos e confirme.

Tipo

•••••••••••••

Número

•••••••••••••

Emissor

•••••••••••••

Válido até

•••••••••••••

Como usar em outro projeto Lovable

1. Copie o arquivo src/components/shared/AIValidationAnimation.tsx para o mesmo caminho no projeto destino.
2. Garanta as dependências (já presentes em qualquer projeto Lovable): react, lucide-react e Tailwind + tokens shadcn padrão.
3. Importe e use:

import AIValidationAnimation from "@/components/shared/AIValidationAnimation";
import { FileText, ShieldCheck, FileCheck2 } from "lucide-react";

<AIValidationAnimation
  eyebrow="IA aplicada"
  title="Validação de documentos com"
  highlight="Inteligência Artificial"
  description="A IA lê o documento, valida e preenche o cadastro."
  fileName="contrato-fornecedor.pdf"
  checks={[
    { icon: FileText,    label: "Documento correto", detail: "Tipo identificado",    startAt: 0.15, endAt: 0.4 },
    { icon: ShieldCheck, label: "Vigência válida",   detail: "Datas conferidas",     startAt: 0.35, endAt: 0.6 },
    { icon: FileCheck2,  label: "Vínculo confirmado", detail: "Bate com o cadastro", startAt: 0.55, endAt: 0.8 },
  ]}
  fields={[
    { label: "Tipo", value: "Contrato" },
    { label: "Número", value: "0001-2026" },
    { label: "Emissor", value: "Fornecedor X" },
    { label: "Válido até", value: "31/12/2026" },
  ]}
/>

Props principais

eyebrow, title, highlight, description, badgeText, fileName, ctaLabel, successMessage, cycleMs.

checks[]

Lista de validações. Cada uma tem icon (lucide), label, detail e janela startAt/endAt (0..1) no ciclo.

fields[]

Campos que aparecem preenchidos ao final da animação. Apenas label e value.