🎨 Sistema de Marca PreparIA

Sistema de marca animada da PreparIA - Componente React reutilizável com animações CSS personalizadas.

📦 Instalação

npm install @preparia/brand-system
# ou
yarn add @preparia/brand-system
# ou
pnpm add @preparia/brand-system

🚀 Uso Básico

1. Importar o componente e estilos

import { BrandText, brandStyles } from '@preparia/brand-system';

// Adicione os estilos ao seu CSS global ou componente
// Se usar styled-components ou emotion:
const GlobalStyle = createGlobalStyle`${brandStyles}`;

// Ou adicione ao seu arquivo CSS global:
// @import '@preparia/brand-system/dist/styles.css';

2. Usar o componente

function App() {
  return (
    <div>
      {/* Header principal */}
      <BrandText variant="large" size="3xl" textOnly />
      
      {/* Destaque de IA */}
      <BrandText variant="ai-only" size="xl" dotVariant="large" />
      
      {/* Footer */}
      <BrandText variant="footer" size="md" dotVariant="subtle" />
    </div>
  );
}

🎯 Props da API

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | variant | "default" \| "large" \| "small" \| "footer" \| "ai-only" | "default" | Variação visual da marca | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" | "md" | Tamanho do texto | | showDot | boolean | true | Exibir o ponto animado | | dotVariant | "default" \| "large" \| "small" \| "subtle" | "default" | Variação do ponto animado | | textOnly | boolean | false | Usar apenas "PreparIA" completo | | customText | string | - | Texto customizado (substitui "PreparIA") | | className | string | "" | Classes CSS adicionais |

📖 Exemplos de Uso

Header/Navegação

<BrandText variant="large" size="3xl" textOnly />

Cards e Componentes

<BrandText variant="small" size="lg" showDot={false} />
<BrandText variant="ai-only" size="xl" dotVariant="large" />

Footer

<BrandText variant="footer" size="2xl" dotVariant="subtle" textOnly />

Padrões de Fundo

<div className="grid grid-cols-6 gap-4 opacity-10">
  {Array.from({ length: 12 }).map((_, i) => (
    <BrandText key={i} variant="ai-only" size="sm" showDot={false} />
  ))}
</div>

Texto Customizado

<BrandText 
  variant="large" 
  size="2xl" 
  customText="MinhaMarca" 
  dotVariant="large" 
/>

🎨 Variações Visuais

Variantes

• default: Gradiente padrão cinza → vermelho
• large: Mesmo que default, para headers principais
• small: Gradiente mais suave para componentes
• footer: Gradiente claro para fundos escuros
• ai-only: Gradiente vermelho intenso para destaque de IA

Pontos Animados

• default: Vermelho padrão com pulso de 2s
• large: Mesmo que default
• small: Tom mais claro com pulso de 3s
• subtle: Tom bem suave com pulso de 4s

🔧 Configuração com Frameworks

Next.js

// pages/_app.tsx ou app/layout.tsx
import { brandStyles } from '@preparia/brand-system';

export default function App({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{brandStyles}</style>
      <Component {...pageProps} />
    </>
  );
}

Vite + React

// src/main.tsx
import { brandStyles } from '@preparia/brand-system';

// Adicionar estilos dinamicamente
const styleSheet = document.createElement('style');
styleSheet.innerText = brandStyles;
document.head.appendChild(styleSheet);

Tailwind CSS

O componente é compatível com Tailwind CSS. Certifique-se de que as classes utilitárias estão disponíveis:

// tailwind.config.js
module.exports = {
  content: [
    // seus arquivos...
    "./node_modules/@preparia/brand-system/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // resto da config...
}

🎭 Customização

Sobrescrever Estilos

/* Customizar cores do gradiente */
.preparia-brand-text {
  background: linear-gradient(135deg, #your-color 0%, #your-color2 100%) !important;
}

/* Customizar velocidade da animação */
.preparia-brand-text {
  animation-duration: 5s !important;
}

Criar Variações Próprias

<BrandText 
  customText="SuaMarca"
  variant="default"
  size="2xl"
  className="minha-customizacao"
/>

🔄 Migrando de Versões Anteriores

Se você está migrando de uma implementação local:

1. Substitua importações:

// Antes
import { BrandText } from './components/ui/brand-text';

// Depois  
import { BrandText } from '@preparia/brand-system';

2. Atualize nomes de classes CSS (prefixo preparia-):

/* Antes */
.brand-text { }

/* Depois */
.preparia-brand-text { }

🤝 Contribuindo

1. Fork o repositório
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

🔗 Links

• Repositório GitHub
• NPM Package
• Documentação

Feito com ❤️ pela equipe PreparIA