// REALIZE.CONTENT — Hero
const Hero = () => (
  <section className="hero" id="top">
    <img className="hero-bola"
         src="assets/graphics/Asset 0a.png"
         alt="" aria-hidden="true" />
    <div className="hero-content">
      <div className="hero-eyebrow">Produtora audiovisual · Brasília-DF</div>
      <h1 className="hero-headline">
        <span className="glitch">Histórias</span><br/>
        que ninguém<br/>
        contou ainda.
      </h1>
      <p className="hero-sub">
        Criação colaborativa em projetos audiovisuais com foco no
        protagonismo feminino, na equidade de gênero e na diversidade
        de vozes — incorporando estratégias transmídias.
      </p>
      <div className="hero-actions">
        <a href="projetos.html" className="btn">
          Ver portfólio
          <img src="assets/graphics/Asset 8.png" alt="" style={{ height: 14 }} />
        </a>
        <a href="#contato" className="btn btn-inverse">Realizar projeto</a>
      </div>
    </div>
  </section>
);

window.Hero = Hero;