// Hero.jsx
const Hero = () => (
  <section id="top" className="hero-wrap">
    <div className="bv-container">
      <div className="hero-grid">
        <div>
          <h1 className="hero-title">
            Um sonho da<br/>nossa região,<br/><em>realidade desde 2023.</em>
          </h1>
          <p className="hero-sub">
            Esta página existe para quem quer ajudar a Faculdade Belavista a crescer —
            e ainda não sabe como.
          </p>
          <div className="hero-cta">
            <a href="#contribuir" className="btn btn-primary">
              Como eu posso contribuir? <Icon.ArrowDown size={16}/>
            </a>
            <a href="#sonho" className="btn btn-ghost">
              Sobre o sonho
            </a>
          </div>
        </div>

        <div className="hero-image">
          <div className="frame">
            <img src="assets/photos/hero-fachada.jpg" alt="Fachada da Faculdade Belavista" />
          </div>
        </div>
      </div>
    </div>
  </section>
);
window.Hero = Hero;