Seção de herói Tailwind CSS somente CSS para páginas de destino. Layout de largura total com título centralizado, descrição e CTA. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes Hero criam seções atraentes e de largura total que apresentam sua página ou produto com imagens e mensagens atraentes. Construídas com HTML semântico e layouts flexíveis, as seções principais dão o tom para o envolvimento do usuário. O sistema herói Frutjam oferece suporte a vários planos de fundo, sobreposições e alinhamentos responsivos – ideal para páginas de destino, lançamentos de produtos e anúncios importantes.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| hero | Base | Seção de largura total com conteúdo centralizado |
| hero-content | Modificador | Área de conteúdo interna com layout flexível |
| hero-overlay | Modificador | Sobreposição semitransparente para imagens de fundo |
Uso Básico
Crie uma seção de herói simples com conteúdo de texto centralizado e frase de chamariz.
Hello there
Introduce your product or service with compelling messaging that resonates with your audience.
1 2 3 4 5 6 7 8 9 | <div class="hero min-h-screen bg-base-200"> <div class="hero-content text-center"> <div class="max-w-md"> <h1 class="text-5xl font-bold">Hello there</h1> <p class="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p> <button class="btn btn-primary">Get Started</button> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 | <div className="hero min-h-screen bg-base-200"> <div className="hero-content text-center"> <div className="max-w-md"> <h1 className="text-5xl font-bold">Hello there</h1> <p className="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p> <button className="btn btn-primary">Get Started</button> </div> </div> </div> |
Herói com sobreposição
Adicione uma sobreposição de cores às seções principais com imagens de fundo para melhorar a legibilidade do texto.
Featured Content
Combine gradient backgrounds with overlay effects for visual depth.
1 2 3 4 5 6 7 8 9 10 | <div class="hero min-h-screen bg-base-200"> <div class="hero-overlay bg-opacity-60"></div> <div class="hero-content text-center text-on-neutral"> <div class="max-w-md"> <h1 class="mb-5 text-5xl font-bold">Featured Content</h1> <p class="mb-5">Combine gradient backgrounds with overlay effects for visual depth.</p> <button class="btn btn-primary">Explore</button> </div> </div> </div> |
Layouts de heróis
Crie seções de heróis responsivas com diferentes arranjos de conteúdo.
Herói com Imagem (Conteúdo + Imagem)
Amazing Product
Display product images alongside descriptive content for engaging hero sections on larger screens.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="hero bg-base-200 min-h-screen"> <div class="hero-content flex-col lg:flex-row"> <picture> <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=320&height=240"> <img src="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=480&height=360" alt="Product" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" /> </picture> <div> <h1 class="text-5xl font-bold">Amazing Product</h1> <p class="py-6">Display product images alongside descriptive content for engaging hero sections on larger screens.</p> <button class="btn btn-primary">Learn More</button> </div> </div> </div> |
Herói com imagem (reverso)
Showcase
Reverse layout places image on the right side for alternative visual hierarchy.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="hero bg-base-200 min-h-screen"> <div class="hero-content flex-col lg:flex-row-reverse"> <picture> <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=320&height=240"> <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=480&height=360" alt="Showcase" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" /> </picture> <div> <h1 class="text-5xl font-bold">Showcase</h1> <p class="py-6">Reverse layout places image on the right side for alternative visual hierarchy.</p> <button class="btn btn-primary">View Details</button> </div> </div> </div> |
Herói com Forma
Combine seções principais com formulários de inscrição ou contato para páginas de destino focadas em conversão.
Subscribe Now
Join our community and get updates on the latest features and news.
Get Started
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="hero bg-base-200 min-h-screen"> <div class="hero-content flex-col lg:flex-row-reverse"> <div class="text-center lg:text-left max-w-md"> <h1 class="text-5xl font-bold">Subscribe Now</h1> <p class="py-6">Join our community and get updates on the latest features and news.</p> </div> <div class="card bg-base-100 shadow-xl shrink-0 w-full max-w-sm"> <div class="card-content"> <h2 class="card-title">Get Started</h2> <input type="email" placeholder="Enter your email" class="input input-outline w-full mb-4"> <button class="btn btn-primary w-full">Subscribe</button> </div> </div> </div> </div> |
Empilhamento responsivo ao herói
As seções principais são empilhadas automaticamente no celular e organizadas horizontalmente em telas maiores.
Responsive Hero
This layout automatically adapts to different screen sizes for optimal viewing on all devices.
1 2 3 4 5 6 7 8 9 10 | <div class="hero bg-base-200 min-h-screen"> <div class="hero-content flex-col"> <div class="text-center max-w-lg"> <h1 class="text-4xl md:text-5xl font-bold">Responsive Hero</h1> <p class="py-6">This layout automatically adapts to different screen sizes for optimal viewing on all devices.</p> <button class="btn btn-primary">Get Started</button> <button class="btn btn-ghost">Learn More</button> </div> </div> </div> |
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.