import { useEffect, useState } from "react";
import mecredApi from "@/axiosConfig";
import Title from "./Title";
import Image from "next/image";
import packageInfo from "../../../package.json";
import Link from "next/link";
import { Accordion, Button, AccordionDetails, AccordionSummary } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Carousel } from "./AboutCarousel";
import { ActorsCarousel } from "./ActorsCarousel";
import { FunctionalitiesCarousel } from "./FunctionalitiesCarousel";
import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
/**
*
* @returns tela de sobre
*/
export default function AboutComponent() {
const [statistics, setStatistics] = useState({});
useEffect(() => {
mecredApi
.get("/statistics")
.then(({ data }) => {
setStatistics(data);
})
.catch((error) => console.error(error));
}, []);
const StatisticInfo = ({ name, data, color, icon }) => {
return (
<div className="flex flex-col items-center text-center max-sm:flex-row">
<div
className={`h-24 w-24 my-5 mx-10 pt-5 flex justify-center rounded-full ${color["bg"]}`}
>
<Image
className={`rounded-lg w-14 h-14 invertIcon-HC-black`}
style={{}}
alt={name}
src={icon}
width={10}
height={10}
/>
</div>
<div>
<h1 className={`text-xl mb-1 font-bold max-sm:text-left ${color["text"]}`}>{data}</h1>
<h2 className={`text-base leading-tight font-bold max-sm:text-left ${color["text"]}`}>{name}</h2>
</div>
</div>
);
};
const Statistics = () => {
return (
<div className="flex max-sm:flex-col mb-10 gap-x-[60px]">
<StatisticInfo
name={<p>Recursos Disponíveis</p>}
data={statistics["count"]}
color={{ text: "text-darkGray-HC-white", bg: "bg-orange-HC-white" }}
icon="/redigitais.svg"
/>
<StatisticInfo
name={<p>Recursos Acessados <br /> por mês</p>}
data={statistics["month_downloads"]}
color={{ text: "text-darkGray-HC-white", bg: "bg-violet-HC-white" }}
icon="/download.svg"
/>
<StatisticInfo
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>
);
};
const ActorInfo = ({ name, description, nameImage }) => {
return (
<div className={`flex flex-col justify-start w-full items-center rounded-md`}>
<Image
className="rounded-lg"
alt={name}
src={nameImage}
width={500}
height={10}
/>
<span className="text-light text-darkGray-HC-white mt-4 text-base text-left">
{description}
</span>
</div>
);
};
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 (
<>
<h1 className="text-2xl text-darkGray-HC-white font-bold mb-3 mt-10">
A quem se destina?
</h1>
<h1 className="flex text-xl text-balance text-darkGray-HC-white xl:w-[80%] mb-10">
A plataforma é aberta e destina-se a todos e todas que se interessam
pela relação entre a escola e a Cultura Digital:
</h1>
<div className="w-full grid grid-rows-2 max-sm:grid-rows-4 grid-flow-col gap-10 justify-center mb-10 ">
<ActorInfo
name="Professores"
description="Encontre recursos digitais que atendem aos objetivos das suas aulas! Aproveite para seguir outros professores, acessar coleções e conhecer novas experiências de uso!"
nameImage="/images/prof.png"
/>
<ActorInfo
name="Alunos"
description="Você pode complementar seus estudos com recursos digitais que lhe interessem. Gostou de algum recurso? Recomende-o ao seu professor ou professora."
nameImage="/images/aluno.png"
/>
<ActorInfo
name="troca"
description="Desenvolva, junto com o coletivo da escola, ações e projetos pedagógicos utilizando recursos digitais importantes para o seu contexto."
nameImage="/images/gest.png"
/>
<ActorInfo
name="Comunidade Acadêmica"
description="Encontre recursos digitais e materiais de formação que contribuam para a aprendizagem e para práticas educativas na comunidade escolar."
nameImage="/images/com_acad.png"
/>
</div>
</>
);
};
const FunctionalityInfo = ({ title, description, color, icon }) => {
return (
<div className="flex max-xl:flex-col max-xl:items-center my-5">
<div>
<div
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`}`}
alt={title}
src={icon}
width={10}
height={10}
/>
</div>
</div>
<div className="flex flex-col">
<h1 className="pb-1 max-xl:mb-3 text-start max-xl:text-center text-lg font-bold text-darkGray-HC-white">
{title}
</h1>
<span className=" text-darkGray-HC-white text-base text-left max-xl:text-center w-full">
{description}
</span>
</div>
</div>
);
};
const Functionalities = () => {
return (
<>
<h1 className="text-2xl text-darkGray-HC-white font-bold mb-3 mt-5">
O que você pode fazer aqui?
</h1>
<div className="grid grid-cols-2 my-5 ml-6 mr-10 gap-x-4">
<FunctionalityInfo
title="Buscar e Baixar Recursos"
color="bg-turquoise-HC-white"
description="São mais de 20 mil recursos educacionais à sua disposição, provenientes de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
icon="/pesquisa.svg"
/>
<FunctionalityInfo
title="Colecionar Recursos"
color="bg-pink-HC-white"
description="Guarde e organize em coleções os recursos que você considera interessantes para elaborar a sua aula. Aproveite para indicá-los aos colegas pelas redes sociais ou e-mail."
icon="/colecionar.svg"
/>
<FunctionalityInfo
title="Encontrar Materiais de Formação"
color="bg-orange-HC-white"
description="A plataforma disponibiliza um conjunto de materiais de formação recomendados pelo Ministério da Educação com diversidade de temas e recursos educacionais."
icon="/verificado.svg"
/>
<FunctionalityInfo
title="Compartilhar suas Experiências"
color="bg-turquoise-HC-white"
description="Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso."
icon="/compartilhar.svg"
/>
<FunctionalityInfo
title="Publicar o seu Recurso"
color="bg-violet-HC-white"
description="Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!"
icon="/download.svg"
/>
<FunctionalityInfo
title="Faça novos Amigos"
color="bg-orange-HC-white"
description="Você vai descobrir pessoas interessadas nos mesmos assuntos que você. Aproveite para explorar a rede de usuários da MEC RED para fazer novos amigos e enriquecer suas relações."
icon="/seguir.svg"
/>
</div>
</>
);
};
const DifferencesInfo = ({ title, description }) => {
return (
<div>
<h1 className="text-base text-darkGray-HC-white text-start font-semibold mb-3 mt-5 max-sm:hidden ">
{title}
</h1>
<h1 className="text-base text-start text-darkGray-HC-white mb-5 max-sm:hidden">
{description}
</h1>
{/*Mobile: */}
<Accordion className="sm:hidden text-base">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="text-gray-500 font-semibold text-left"
>
{title}
</AccordionSummary>
<AccordionDetails className="text-darkGray-HC-white-underline text-left">
{description}
</AccordionDetails>
</Accordion>
</div>
);
};
const Differences = () => {
return (
<>
<h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-2 mt-10 max-sm:py-2">
O que nos faz diferentes?
</h1>
<div>
<div className="flex w-full align-middle px-16 max-sm:px-0 mt-4 mb-10 justify-center max-xl:flex-col max-xl:items-center space-x-2">
<div className="w-64 grid grid-cols-1 place-content-center xl:mr-4">
<Image
className={` -mt-4 rounded-lg`}
alt="imagem"
src="/images/aluna.png"
width={260}
height={10}
/>
</div>
<div className="w-[60%] pb-8 pt-2 max-sm:w-[80%]">
<DifferencesInfo
title="Espaço construído por e para professores"
description="São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
/>
<DifferencesInfo
title="Ambiente de colaboração"
description="A Plataforma é um espaço onde você pode colaborar ao publicar seus recursos e compartilhar os de outros autores. Além disso, pode contribuir relatando suas experiências de uso com os Recursos disponíveis. Participe desta rede colaborativa!"
/>
<DifferencesInfo
title="Todos os recursos em um só lugar"
description="Aqui você consegue otimizar o seu tempo! A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos."
/>
</div>
</div>
</div>
</>
);
};
const DevelopmentInfo = ({ title, description, link, access }) => {
return (
<div className="flex flex-col">
<h1 className="pb-1 max-xl:mb-3 text-start text-lg font-bold text-darkGray-HC-white">
{title}
</h1>
<span className=" text-darkGray-HC-white text-base text-left w-full">
{description}
</span>
<a href={link} className="text-turquoise-HC-white-underline text-base text-left w-full mt-4">{access}</a>
</div>
)
}
const Development = () => {
return (
<>
<h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-6 mt-10 max-sm:py-2 max-md:px-4">
Desenvolvimento da Plataforma
</h1>
<h1 className="flex text-xl text-balance text-darkGray-HC-white xl:w-[80%] mb-10 max-md:px-4">
A MEC RED é construída de forma colaborativa por uma comunidade, seguindo os princípios do software livre, com atualizações frequentes e licenciada sob GNU AGP.
</h1>
<div className="grid grid-cols-2 mx-24 gap-x-16 gap-y-8 mb-16 mt-4 max-md:grid-cols-1 max-md:ml-10 max-md:mr-4 max-md:mt-0">
<DevelopmentInfo
title="Software Livre"
description="A MEC RED é um software livre, permitindo acesso, modificação e distribuição do código. Isso promove transparência, colaboração e inovação aberta. Com essa abordagem, a plataforma cresce de forma coletiva e acessível."
access="Clique aqui para acessar o código fonte."
link="https://gitlab.c3sl.ufpr.br/mecred/source"
/>
<DevelopmentInfo
title="Licenças GPL 3.0"
description="A Licença GPL 3.0 (GNU General Public License, versão 3) é um modelo de licenciamento de software livre que garante que qualquer pessoa possa usar, modificar e distribuir um programa sem restrições, desde que mantenha essas mesmas liberdades para os outros."
access="Clique aqui para ler mais sobre essa licença."
link=" https://www.gnu.org/licenses/quick-guide-gplv3.pt-br.html"
/>
<DevelopmentInfo
title="Versão"
description="A MEC RED está em constante evolução! Atualizações frequentes trazem novas funcionalidades, melhorias de desempenho e correções, sempre priorizando a melhor experiência para os usuários."
access="Clique aqui para acessar o histórico de atualizações"
link="https://gitlab.c3sl.ufpr.br/mecred/frontend-mecred/-/blob/develop/CHANGELOG.md?ref_type=heads"
/>
<DevelopmentInfo
title="Desenvolvedores"
description="A plataforma é desenvolvida por uma comunidade de bolsistas, professores e estudantes que trabalham juntos para criar e aprimorar soluções educacionais acessíveis e eficientes."
access="Clique aqui para conhecer o time de desenvolvimento."
link="/equipe"
/>
</div>
</>
)
}
return (
<>
<div className="overflow-y-auto scrollbar-none">
<div className="flex max-lg:col-span-3 col-span-2">
<div className="flex flex-col px-3 w-full">
<Carousel />
<div className="flex flex-col text-center items-center rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white ">
<div>
<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>
<div className="flex flex-col w-full text-center items-center mt-12 rounded-lg bg-white-HC-dark sm:hidden">
<ActorsCarousel />
</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">
<Functionalities />
</div>
<div className="flex flex-col z-0 text-center items-center mt-12 rounded-lg bg-white-HC-dark sm:hidden">
<FunctionalitiesCarousel />
</div>
<div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white">
<Differences />
</div>
<div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white">
<Development />
</div>
<div className="flex justify-center flex-col items-center mt-8 max-md:mt-0 max-md:mb-8">
<div className="text-darkGray-HC-white mt-5 text-2xl font-bold">Quer saber mais?</div>
<div className="text-darkGray-HC-white text-lg mt-4 ml-3">Acesse a página de Ajuda e Suporte!</div>
<a href="/ajuda" className="mt-4 bg-turquoise-HC-white text-lg text-white-HC-dark-underline p-2 px-4 rounded-lg hover:bg-darkTurquoise-HC-dark hover:text-white outline outline-1">Ir para a página de Ajuda</a>
</div>
<h6 className="text-center pt-5 text-darkGray-HC-white pb-[100px]">
Versão {packageInfo.version}
</h6>
</div>
</div>
</div>
<div className="max-xl:hidden col-span-1 my-3 ">
<div className="flex flex-col items-center gap-6 bg-white-HC-dark text-darkGray-HC-white rounded-xl px-10 py-7 mx-20 outline outline-1 outline-ice-HC-white">
<p className="font-bold text-3xl w-full text-center">Tudo certo?</p>
<p className="text-base text-darkGray-HC-white tracking-tight text-justify">
Ao terminar de ler sobre a Plataforma MEC RED você pode clicar no
botão abaixo para continuar navegando e explorar as ferramentas
disponíveis.
</p>
<Button
href="/busca?page=LearningObject"
className="bg-turquoise-HC-white mt-2 text-xl text-white-HC-dark-underline py-4 w-full text-center rounded-lg hover:bg-darkTurquoise-HC-dark hover:text-white font-bold normal-case outline outline-1 outline-white"
>
Continuar
</Button>
</div>
</div>
</>
);
}