Merge branch 'issue-287/change-counter-about-page' into 'develop'

Issue #287: UPDATE mecred statistics on about page

See merge request !271

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>