diff --git a/src/app/components/About.js b/src/app/components/About.js index 79952341350e0dacca9e685b82c403a77773733f..3d5280c3770988b223b627660967c93ce5072ca7 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} @@ -52,23 +52,23 @@ export default function AboutComponent() { const Statistics = () => { return ( - <div className="flex max-sm:flex-col mb-10"> + <div className="flex max-sm:flex-col mb-10 gap-x-[60px]"> <StatisticInfo - name={<p>Recursos <br /> Disponíveis</p>} + name={<p>Recursos Disponíveis</p>} data={statistics["count"]} - color={{ text: "text-orange-HC-white", bg: "bg-orange-HC-white" }} + color={{ text: "text-darkGray-HC-white", bg: "bg-orange-HC-white" }} icon="/redigitais.svg" /> <StatisticInfo - name={<p>Recursos <br /> Visualizados <br /> por mês</p>} + name={<p>Recursos Acessados <br /> por mês</p>} data={statistics["month_downloads"]} - color={{ text: "text-violet-HC-white", bg: "bg-violet-HC-white" }} + color={{ text: "text-darkGray-HC-white", bg: "bg-violet-HC-white" }} icon="/download.svg" /> <StatisticInfo - name={<p>Usuários <br /> Cadastrados </p>} - data="31207" - color={{ text: "text-pink-HC-white", bg: "bg-pink-HC-white" }} + name={<p>Usuários Cadastrados </p>} + data={statistics["unique_users"]} + color={{ text: "text-darkGray-HC-white", bg: "bg-pink-HC-white" }} icon="/seguir.svg" /> </div> @@ -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>