diff --git a/src/app/components/About.js b/src/app/components/About.js index 79952341350e0dacca9e685b82c403a77773733f..4715b00a8cb68d37e9e0a37e763d1bdde76ba7b4 100644 --- a/src/app/components/About.js +++ b/src/app/components/About.js @@ -35,7 +35,7 @@ export default function AboutComponent() { > <Image className={`rounded-lg w-14 h-14 invertIcon-HC-black`} - style={{ }} + style={{}} alt={name} src={icon} width={10} @@ -60,14 +60,14 @@ export default function AboutComponent() { icon="/redigitais.svg" /> <StatisticInfo - name={<p>Recursos <br /> Visualizados <br /> por mês</p>} + name={<p>Recursos <br /> Acessados <br /> por mês</p>} data={statistics["month_downloads"]} color={{ text: "text-violet-HC-white", bg: "bg-violet-HC-white" }} icon="/download.svg" /> <StatisticInfo name={<p>Usuários <br /> Cadastrados </p>} - data="31207" + data={statistics["unique_users"]} color={{ text: "text-pink-HC-white", bg: "bg-pink-HC-white" }} icon="/seguir.svg" /> @@ -92,6 +92,30 @@ export default function AboutComponent() { ); }; + const MecredStats = () => { + + return ( + <div> + <div className="mx-8 my-10"> + <h1 className="flex justify-center font-bold text-2xl text-darkGray-HC-white mx-10"> + A MEC RED é uma rede para você se conectar com pessoas interessadas em Educação! + </h1> + </div> + <div> + <h1 className="flex text-xl justify-center text-darkGray-HC-white text-wrap max-md:mx-10 mx-[100px] my-7"> + Construa conosco a sua rede de conhecimentos, interagindo com pessoas envolvidas com experiência educacionais que ocorrem em todo o Brasil! + </h1> + </div> + <div> + <div className="flex flex-row justify-center"> + < Statistics /> + </div> + </div> + </div> + + ); + } + const Actors = () => { return ( <> @@ -136,7 +160,7 @@ export default function AboutComponent() { className={`flex h-24 w-24 my-2 mx-10 rounded-full items-center justify-center ${color}`} > <Image - className={` invertIcon-HC-black rounded-lg w-12 h-12 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180` }`} + className={` invertIcon-HC-black rounded-lg w-12 h-12 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180`}`} alt={title} src={icon} width={10} @@ -333,6 +357,9 @@ export default function AboutComponent() { <Title /> </div> </div> + <div className="flex flex-col mt-12 text-center items-center rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white "> + <MecredStats /> + </div> <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark max-sm:hidden outline outline-1 outline-ice-HC-white"> <Actors /> </div> diff --git a/src/app/components/numbers.js b/src/app/components/numbers.js new file mode 100644 index 0000000000000000000000000000000000000000..5dc9889ce67b61b5f1ac2fb3f534825779a33337 --- /dev/null +++ b/src/app/components/numbers.js @@ -0,0 +1,52 @@ +export default function ({ profileData }) { + + const data = [ + { + name: "Recursos disponíveis", + src: "/redigitais.svg", + value: "444", + }, + { + name: "Recursos Acessados", + src: "/download.svg", + value: "444", + }, + { + name: "Usuários Cadastrados", + src: "/seguir.svg", + value: "444", + }, + ] + + return ( + <> + <div> + <div> + <h1 className="flex font-bold text-3xl text-darkGray-HC-white my-10 mx-8"> + A MEC RED é uma rede para você se coonectar com pessoas interessadas em Educação! + </h1> + </div> + <div> + <h1 className="flex-xl text-darkTurquoise-HC-white text-wrap text-center "> + Construa conosco a sua rede de conhecimentos, interagindo com pessoas envolvidas com experiência educacionais que ocorrem em todo o Brasil! + </h1> + </div> + <div> + <div className="flex flex-row"> + {data.map ((item, index) => { + <div key={index} className=""> + <img + src={item.src} + alt={item.name} + /> + <h1> + {item.value} + </h1> + </div> + })} + </div> + </div> + </div> + </> + ) +} \ No newline at end of file