const About = () => {
  const team = [
    { nm: "Rafael Torres", rl: "Fundador · Produto" },
    { nm: "Bruno Brito", rl: "Fundador · Tech" },
    { nm: "Larissa Reis", rl: "Design lead" },
    { nm: "Thiago Mattos", rl: "Tech lead" },
    { nm: "Camila Veiga", rl: "Brand & Social" },
    { nm: "+ você?", rl: "Estamos contratando" },
  ];
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Studio · 07</div>
            <h2 style={{marginTop:20}}>Time pequeno.<br/><em className="grad-text" style={{fontWeight:400}}>Vista larga.</em></h2>
          </div>
          <div className="body">
            Não somos uma agência full service e não queremos ser. Somos um studio de produto digital: um time enxuto, sênior e multidisciplinar, que pega projeto do começo ao fim sem precisar terceirizar as partes difíceis.
          </div>
        </div>

        <div className="team">
          {team.map((m,i)=>(
            <div className="mb" key={i}>
              <div className="ph"/>
              <div>
                <div className="nm">{m.nm}</div>
                <div className="rl">{m.rl}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.About = About;