BentoGrid

Sistema de grid estilo Vercel/Linear para layouts de features e demonstrações de produto.

Visão Geral

O BentoGrid é um sistema de layout responsivo inspirado no estilo Vercel e Linear. Composto por 4 componentes que trabalham juntos para criar layouts de features visualmente impactantes.

Importação

import {
  BentoGrid,
  BentoCard,
  BentoFeature,
  BentoHeroCard
} from '@/components/linear/bento-grid'

Componentes

Container principal que organiza os cards em grid responsivo.

<BentoGrid className="max-w-6xl">
  {/* BentoCards aqui */}
</BentoGrid>

Prop	Tipo	Default	Descrição
`children`	`ReactNode`	—	Cards filhos
`className`	`string`	—	Classes adicionais

BentoCard

Card padrão para demonstrações de produto. Aceita qualquer mock como children.

<BentoCard
  title="Gestão de Tarefas"
  description="Kanban inteligente com sugestões de AI"
  number="FIG 0.1"
  colSpan={2}
>
  <MockKanban columns={demoColumns} />
</BentoCard>

Prop	Tipo	Default	Descrição
`title`	`string`	—	Título do card
`description`	`string`	—	Descrição opcional
`number`	`string`	—	Número/figura (ex: "FIG 0.1")
`children`	`ReactNode`	—	Conteúdo (mock)
`colSpan`	`1 \| 2 \| 3`	`1`	Colunas ocupadas
`rowSpan`	`1 \| 2`	`1`	Linhas ocupadas
`hoverEffect`	`boolean`	`true`	Efeito hover
`onClick`	`() => void`	—	Callback de click
`className`	`string`	—	Classes adicionais

BentoFeature

Card simplificado para listar features com ícone.

<BentoFeature
  icon={<IconRocket className="size-5" />}
  title="Deploy Instantâneo"
  description="Atualizações em produção em segundos"
/>

Prop	Tipo	Default	Descrição
`icon`	`ReactNode`	—	Ícone da feature
`title`	`string`	—	Título
`description`	`string`	—	Descrição
`className`	`string`	—	Classes adicionais

BentoHeroCard

Card hero que ocupa múltiplas colunas, ideal para demonstrações principais.

<BentoHeroCard gradient>
  <div className="p-8">
    <h2>Título Principal</h2>
    <MockDashboard {...props} />
  </div>
</BentoHeroCard>

Prop	Tipo	Default	Descrição
`children`	`ReactNode`	—	Conteúdo
`gradient`	`boolean`	`false`	Fundo com gradiente
`className`	`string`	—	Classes adicionais

Exemplo Completo

import { BentoGrid, BentoCard, BentoFeature } from '@/components/linear/bento-grid'
import { MockKanban, demoColumns } from '@/components/linear/mock-kanban'
import { MockDashboard, demoDashboardData } from '@/components/linear/mock-dashboard'

export function FeaturesSection() {
  return (
    <BentoGrid>
      {/* Card principal - 2 colunas */}
      <BentoCard
        title="Kanban Inteligente"
        description="Tarefas organizadas automaticamente com sugestões de AI"
        number="FIG 0.1"
        colSpan={2}
      >
        <MockKanban columns={demoColumns} compact />
      </BentoCard>

      {/* Card simples - 1 coluna */}
      <BentoCard
        title="Dashboard"
        description="Métricas em tempo real"
      >
        <MockDashboard {...demoDashboardData} />
      </BentoCard>

      {/* Features menores */}
      <BentoFeature
        icon={<IconBolt className="size-5" />}
        title="Rápido"
        description="Respostas em menos de 2s"
      />
      <BentoFeature
        icon={<IconShield className="size-5" />}
        title="Seguro"
        description="Dados criptografados"
      />
      <BentoFeature
        icon={<IconCloud className="size-5" />}
        title="Cloud"
        description="Infraestrutura escalável"
      />
    </BentoGrid>
  )
}

Grid Responsivo

O grid adapta automaticamente:

Mobile: 1 coluna
Tablet (md): 2 colunas
Desktop (lg): 3 colunas

Cards com colSpan={2} ocupam 2 colunas em tablet/desktop, mas voltam para 1 coluna em mobile.

Estilos

O BentoGrid usa o design system Linear-style da kodda:

Bordas sutis (border-border)
Hover com destaque primary (hover:border-primary/30)
Sombras suaves (shadow-lg shadow-primary/5)
Transições de 300ms

BentoGrid

On this page