Hero de produto B2B

Hero com headline, dupla de CTAs, prova social e o próprio produto na tela com KPIs animados. A primeira dobra que vende software.

Ver ao vivo, com preview e manual: https://flowcoresolucoes.com.br/codigos/hero-produto

Criado por FlowCore Soluções LTDA.

Arquivos

• src/HeroProduto.tsx

Como instalar

1. Tenha um projeto React com Tailwind Já tem (Vite, Next.js, Remix)? Pule este passo. Se não, crie um em 1 minuto e adicione ./src/**/*.{ts,tsx} ao content do tailwind.config.

   npm create vite@latest minha-app -- --template react-ts
   cd minha-app
   npm install -D tailwindcss@3 postcss autoprefixer
   npx tailwindcss init -p

2. Crie o arquivo src/components/HeroProduto.tsx Copie o conteúdo de src/HeroProduto.tsx deste repositório. Ele é um arquivo só, sem dependência além de React.

3. Use na sua página

   import HeroProduto from "./components/HeroProduto";
   
   <HeroProduto tema="claro" accent="#0057FF" title="A operação inteira" highlight="em uma tela só" />

4. Personalize Textos, dados e a cor de destaque (prop accent) são props com valor padrão. Troque pelos da sua marca ou ligue na sua API.

Tema e cor

Abre em tema claro. Use tema="escuro" para o escuro e accent para a cor de destaque:

<HeroProduto tema="claro" accent="#0057FF" title="A operação inteira" highlight="em uma tela só" />

Licença

MIT. Pode usar em projeto pessoal ou comercial, de graça. A única condição é manter a linha “Criado por FlowCore Soluções LTDA” (ou o crédito de adaptação) onde ela está.

---

Precisa disso integrado no seu sistema? A FlowCore desenvolve sob medida.