Bento grid de funcionalidades

Grade bento com mini visual do produto em cada bloco, desenhado só em CSS e SVG. Mostra o software funcionando em vez de listar recursos.

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

Criado por FlowCore Soluções LTDA.

Arquivos

• src/BentoFeatures.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/BentoFeatures.tsx Copie o conteúdo de src/BentoFeatures.tsx deste repositório. Ele é um arquivo só, sem dependência além de React.

3. Use na sua página

   import BentoFeatures from "./components/BentoFeatures";
   
   <BentoFeatures tema="claro" accent="#0057FF" title="Tudo que a operação precisa" />

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:

<BentoFeatures tema="claro" accent="#0057FF" title="Tudo que a operação precisa" />

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.