function About(){
  return (
    <section className="about" id="sobre" data-screen-label="04 About">
      <div className="wrap">
        <div className="about-portrait reveal">
          <img src="assets/gustavo-2.png" alt="Gustavo Sousa" />
          <div className="cap">
            <span data-i18n="about.cap.l">{window.t('about.cap.l')}</span>
            <span data-i18n="about.cap.r">{window.t('about.cap.r')}</span>
          </div>
        </div>
        <div className="about-text">
          <span className="eyebrow reveal" data-i18n="about.eyebrow">{window.t('about.eyebrow')}</span>
          <div className="about-scroll-body reveal">
            {[1,2,3,4,5,6,7,8,9,10].map(n => (
              <p key={n} data-i18n-html={'about.p'+n} dangerouslySetInnerHTML={{__html: window.t('about.p'+n)}} />
            ))}
          </div>

          <div className="about-facts reveal">
            {[3,4].map(n => (
              <div className="about-fact" key={n}>
                <span className="k" data-i18n={'about.fact'+n+'.k'}>{window.t('about.fact'+n+'.k')}</span>
                <span className="v" data-i18n={'about.fact'+n+'.v'}>{window.t('about.fact'+n+'.v')}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;