Issue #287: UPDATE mecred statistics on about page

src/app/components/About.js

@@ -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 (
       <>
@@ -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>

src/app/components/numbers.js

+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