Skip to main content
Frutjam logoFrutjam
v2.2.6
Theme

Herói

Última atualização:

Blocos de heróis Tailwind CSS somente CSS – seções de página de destino prontas com layouts centralizados, divididos e de imagem. Não é necessário JavaScript, WCAG AA acessível. Funciona com Django, HTMX, Laravel, React e qualquer pilha.

Layouts de heróis prontos construídos com o componente hero, button e badge.

Herói Centrado

Build something great

Start fast with accessible, themeable components that work with any stack.

Get started Learn more
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<section class="hero min-h-[60vh]">
  <div class="hero-content text-center">
    <div class="max-w-lg">
      <h1 class="heading-5xl mb-4">Build something great</h1>
      <p class="para opacity-60 mb-8">Start fast with accessible, themeable components that work with any stack.</p>
      <div class="flex flex-wrap justify-center gap-3">
        <a href="#" class="btn btn-primary btn-lg">Get started</a>
        <a href="#" class="btn btn-outline btn-lg">Learn more</a>
      </div>
    </div>
  </div>
</section>

Herói com distintivo

Now in v2.0

Ship UI that scales

Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.

Start building View docs
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<section class="hero min-h-[60vh] bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-xl">
      <div class="flex justify-center mb-5">
        <span class="badge badge-primary badge-soft badge-sm">Now in v2.0</span>
      </div>
      <h1 class="heading-5xl mb-4">Ship UI that scales</h1>
      <p class="para opacity-60 mb-8">Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.</p>
      <div class="flex flex-wrap justify-center gap-3">
        <a href="#" class="btn btn-primary btn-lg">Start building</a>
        <a href="#" class="btn btn-ghost btn-lg">View docs</a>
      </div>
    </div>
  </div>
</section>

Herói dividido

Components that scale with your product

From prototype to production — get the building blocks to ship faster without sacrificing quality.

Explore components See examples
Visual area
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<section class="hero min-h-[60vh]">
  <div class="hero-content flex-col lg:flex-row gap-12">
    <div class="max-w-md">
      <h1 class="heading-4xl mb-4">Components that scale with your product</h1>
      <p class="para opacity-60 mb-8">From prototype to production — get the building blocks to ship faster without sacrificing quality.</p>
      <div class="flex flex-wrap gap-3">
        <a href="#" class="btn btn-primary">Explore components</a>
        <a href="#" class="btn btn-outline">See examples</a>
      </div>
    </div>
    <div class="card card-lg w-full max-w-sm aspect-video flex items-center justify-center">
      <span class="para opacity-40">Visual area</span>
    </div>
  </div>
</section>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Herói e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP