Com base no projeto de UI já aprovado e definido, "recortar" para html conforme requisitos abaixo:

- Utilizar como base o projeto de UI aprovado nesse link https://1mc.co/960znnla
- Será entregue o arquivo do Figma para facilitar os recortes ou o link para acesso ao Figma online.
- A página deve ser responsiva, mas o formato padrão é para usar numa tela de celular. Não precisa adaptar o conteúdo para telas maiores. Nesse caso, exibir o conteúdo no meio da tela.
- Deve ser usado somente 1 arquivo html.
- Todos os estilos (css) e javascrips (js) devem fazer parte do mesmo html, isto é, no head do arquivo. Não usar arquivos externos.
- Deve ser evitado usar frameworks Javascript, mas se usar, respeitar o requisito acima.
- As imagens sempre que possível usar SVG embedado no próprio HTML como base64.
- Quando não for possível usar SVG, usar PNG. Esse é o único caso permitido usar arquivos externos usados no html.
- A imagem da foto da pessoa (redonda no meio da tela) deve ser cortada por CSS ou JS, pois a foto original poderá não ser redonda. Bem como a borda branca deve fazer parte do HTML (via CSS ou outro recurso).
- Os blocos Sobre e Conquistas deve ter um div próprio e parâmetro via uma classe css para exibir ou esconder, pois é um dado dinâmico.
- A imagem ícone dos itens no bloco Conquistas devem ter o tamanho ajustado na classe CSS, pois a imagem original terá um tamanho bem maior.
- No bloco Conquistas, programar o "botão" Ver mais para abrir todos os itens.
- As ações dos botões que abrem um Bottom Sheet deve ser com uma tag de link.
- As imagens ícones das redes sociais devem ter um parâmetro para exibir ou esconder, pois é dinâmico. Algumas pessoas poderá ter ou não algum dos links. Assim como pode não ter nenhum.

A proposta deve ter o valor total com preço fixo e estimativa de horas. Estamos à disposição para tirar todas as dúvidas.