Skip to content
Monk BusinessMonk BusinessMonk Business Design System

Hero

The opening of the home page: eyebrow, headline, lead, two calls to action and a strip of technologies, over a faint orbit drawing.

Home heroDark · Grafite

Telecom · Nuvem · IA

Integrações de telecom, software e IA para quem não pode parar.

Portabilidade numérica, Origem Verificada (STIR/SHAKEN) e agentes de IA, com engenheiros que já trabalharam em escala na IBM e no Pinterest.

Pedir orçamentoFalar no WhatsApp
  • AWS
  • Google Cloud
  • IBM Cloud
  • Claude · OpenAI · Gemini
Home heroLight · Gelo

Telecom · Nuvem · IA

Integrações de telecom, software e IA para quem não pode parar.

Portabilidade numérica, Origem Verificada (STIR/SHAKEN) e agentes de IA, com engenheiros que já trabalharam em escala na IBM e no Pinterest.

Pedir orçamentoFalar no WhatsApp
  • AWS
  • Google Cloud
  • IBM Cloud
  • Claude · OpenAI · Gemini

Usage

Section titled “Usage”

Provide an eyebrow (three topics separated by “ · “), a headline in display-xl of up to about ten words, a lead of one or two sentences in lead/muted, the primary action “Pedir orçamento” and the secondary “Falar no WhatsApp” (or “Conversar com o assistente” when WhatsApp is not set up), and a strip of technology names in mono/eyebrow. The orbit drawing is the logo symbol at 14% opacity in symbol, cropped by the top-right corner; it is decoration (aria-hidden). The hero is a size container: the headline and the orbit scale with its width.

Do

  • Keep the headline to about ten words and the lead to two sentences.
  • Use one primary and one secondary action, in the ctas slot.
  • Use the hero once, on the home page.

Don't

  • Use photos or gradients.
  • Set a 100vh height: keep the hero sized to its content.
  • Add a third call to action.

Astro

Section titled “Astro”
---
import Button from '@monk-business/astro/Button.astro';
import Hero from '@monk-business/astro/Hero.astro';
---


<Hero
  eyebrow="Telecom · Nuvem · IA"
  title="Integrações de telecom, software e IA para quem não pode parar."
  lead="Portabilidade numérica, Origem Verificada (STIR/SHAKEN) e agentes de IA."
  strip={['AWS', 'Google Cloud', 'IBM Cloud', 'Claude · OpenAI · Gemini']}
>
  <Fragment slot="ctas">
    <Button href="/contato/">Pedir orçamento</Button>
    <Button href="https://wa.me/55…" variant="secondary" external>Falar no WhatsApp</Button>
  </Fragment>
</Hero>

HTML

Section titled “HTML”
<section class="mb-hero" aria-labelledby="hero-title">
  <div class="mb-orbit mb-hero__orbit" aria-hidden="true"><!-- symbol-mono.svg inline --></div>
  <div class="mb-container">
    <div class="mb-hero__body">
      <p class="mb-eyebrow">Telecom · Nuvem · IA</p>
      <h1 id="hero-title">Integrações de telecom, software e IA para quem não pode parar.</h1>
      <p>Portabilidade numérica, Origem Verificada (STIR/SHAKEN) e agentes de IA.</p>
      <div class="mb-hero__ctas">
        <a class="mb-btn mb-btn--primary" href="/contato/">Pedir orçamento</a>
        <a class="mb-btn mb-btn--secondary" href="https://wa.me/55…">Falar no WhatsApp</a>
      </div>
    </div>
    <ul class="mb-hero__strip" role="list" aria-label="Tecnologias">
      <li>AWS</li>
      <li>Google Cloud</li>
    </ul>
  </div>
</section>

Props

Section titled “Props”
Hero props · also accepts the attributes of <section>
PropTypeDefaultDescription
eyebrowstring—Three topics separated by " · ", e.g. "Telecom · Nuvem · IA".
title *string—The headline (h1, display-xl).
leadstring—One or two sentences under the headline (lead, muted).
stripstring[]—Technology names for the strip under the hero (mono, eyebrow color).
stripLabelstring'Tecnologias'Accessible name of the technology strip.
orbitbooleantrueDraw the orbit motif behind the content.
titleIdstring'hero-title'id of the headline; the section is labelled by it.

* required.