diff --git a/src/app/about/page.js b/src/app/about/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..edc2d2040eaece4cb20a31ba9c4c9a54f01f3cae
--- /dev/null
+++ b/src/app/about/page.js
@@ -0,0 +1,12 @@
+"use client"
+import AboutComponent from "../components/About"
+import Overlay from "../components/Overlay"
+
+export default function About() {
+
+ return (
+ <Overlay>
+ <AboutComponent/>
+ </Overlay>
+ )
+}
\ No newline at end of file
diff --git a/src/app/components/About.js b/src/app/components/About.js
new file mode 100644
index 0000000000000000000000000000000000000000..abd7d06be83288b6cdfd7fb8dccdb69c13eb57b5
--- /dev/null
+++ b/src/app/components/About.js
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import mecredApi from "@/axiosConfig";
+import Title from "./Title";
+
+export default function AboutComponent() {
+ const [statistics, setStatistics] = useState({});
+
+ const StatisticInfo = ({ name, data, color }) => {
+ return (
+ <div className="flex flex-col items-center text-center">
+ <div
+ className={`h-20 w-20 my-5 mx-10 rounded-full ${color["bg"]}`}
+ ></div>
+ <h1 className={`text-xl font-bold ${color["text"]}`}>{data}</h1>
+ <h2 className={`text-sm font-bold ${color["text"]}`}>{name}</h2>
+ </div>
+ );
+ };
+
+ const Statistics = () => {
+ return (
+ <div className="flex max-sm:flex-col mb-10">
+ <StatisticInfo
+ name="Recursos Disponíveis"
+ data={statistics["count"]}
+ color={{ text: "text-orange", bg: "bg-orange" }}
+ />
+ <StatisticInfo
+ name="Recursos Baixados"
+ data={statistics["month_downloads"]}
+ color={{ text: "text-violet", bg: "bg-violet" }}
+ />
+ <StatisticInfo
+ name="Usuários Cadastrados"
+ data="13032"
+ color={{ text: "text-pink", bg: "bg-pink" }}
+ />
+ </div>
+ );
+ };
+
+ const ActorInfo = ({ name, description, color }) => {
+ return (
+ <div className="flex flex-col flex-wrap w-72 my-5 xl:m-5">
+ <div
+ className={`flex flex-col justify-end h-36 ${color} rounded-md mb-5`}
+ >
+ <h1 className="pl-3 pb-1 text-start text-lg font-bold text-main">
+ {name}
+ </h1>
+ </div>
+ <span className="text-balance text-main-text text-sm text-left">
+ {description}
+ </span>
+ </div>
+ );
+ };
+
+ const Actors = () => {
+ return (
+ <div className="w-[90%] flex flex-wrap max-xl:flex-col max-xl:items-center justify-center">
+ <ActorInfo
+ name="Professores"
+ description="Encontre recursos digitais que se encaixem aos objetivos das suas aulas! Aproveite para seguir outros professores, coleções e conhecer experiências de uso!"
+ color="bg-secondary"
+ />
+ <ActorInfo
+ name="Alunos"
+ description="Você pode complementar os seus estudos com recursos digitais que lhe interessem. Gosotu de algum recurso? Recomende ao seu professor ou professora."
+ color="bg-orange"
+ />
+ <ActorInfo
+ name="Gestores"
+ description="Desenvolva junto com o coletivo da escola ações e projetos pedagógicos com recursps digitais importantes para o seu contexto."
+ color="bg-pink"
+ />
+ <ActorInfo
+ name="Comunidade Acadêmica"
+ description="Encontre recursos digitais e materiais de formação que contribuam para a aprendizagem e práticas educativas na comunidade escolar."
+ color="bg-violet"
+ />
+ </div>
+ );
+ };
+
+ useEffect(() => {
+ mecredApi
+ .get("/statistics")
+ .then(({ data }) => {
+ setStatistics(data);
+ console.log(data);
+ })
+ .catch((error) => console.log(error));
+ }, []);
+
+ return (
+ <div className="flex flex-col text-center items-center m-10">
+ <div className="max-xl:hidden">
+ <Title/>
+ </div>
+ <Statistics />
+ <h1 className="text-xl text-secondary font-bold mb-3 mt-5">
+ A quem se destina?
+ </h1>
+ <h1 className="text-balance text-main-text xl:w-[50%] mb-5">
+ A plataforma é aberta e destina-se a todos e todas que se interessam
+ pela relação entre a escola e a Cultura Digital:
+ </h1>
+ <Actors />
+ </div>
+ );
+}
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index 4bfb3ba0d870c4c30c129abc1ce89214098f1ece..5f32df43e2e95e0969a20a1d7d6f3cebea933ad2 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -5,6 +5,7 @@ import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import SubjectIcon from '@mui/icons-material/Subject';
import LocalLibraryIcon from '@mui/icons-material/LocalLibrary';
import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
+import HelpIcon from '@mui/icons-material/Help';
import { useEffect, useState } from 'react';
import mecredApi from '@/axiosConfig';
import { Button } from '@mui/material';
@@ -25,6 +26,11 @@ const acessoRapido = [
title: 'Seguindo',
icon: PeopleAltIcon,
href: '/colections'
+ },
+ {
+ title: 'Sobre',
+ icon: HelpIcon,
+ href: '/about'
}
]
diff --git a/src/app/components/Teste.js b/src/app/components/Teste.js
new file mode 100644
index 0000000000000000000000000000000000000000..40e4350fe11b329bd0fe9658ec85506607db5f50
--- /dev/null
+++ b/src/app/components/Teste.js
@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+function useCustomFetch(url, options, onDataReceived) {
+ const router = useRouter();
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(url, options);
+
+ if (response.status === 401) {
+ // Redirect to the main page or login page
+ router.push('/');
+ } else {
+ // Continue processing the response
+ const data = await response.json();
+ console.log('Received data:', data);
+
+ // Run the provided callback on the received data
+ if (typeof onDataReceived === 'function') {
+ onDataReceived(data);
+ }
+
+ // Add your logic to handle the successful response here
+ }
+ } catch (error) {
+ console.error('Error processing request:', error);
+ // Add your logic to handle errors here
+ }
+ };
+
+ fetchData();
+ }, [url, options, router, onDataReceived]);
+
+ // You can return additional data or state here if needed
+}
\ No newline at end of file
diff --git a/src/app/components/Title.js b/src/app/components/Title.js
new file mode 100644
index 0000000000000000000000000000000000000000..724868c59172b4b9eacfc9252b714071a6704146
--- /dev/null
+++ b/src/app/components/Title.js
@@ -0,0 +1,14 @@
+export default function Title() {
+ return (
+ <div className="my-10">
+ <h1 className="text-3xl max-lg:text-xl font-bold text-secondary my-10 text-center">
+ Plataforma MEC de Recursos Educacionais Digitais
+ </h1>
+ <h1 className="text-lg max-lg:text-base text-main-text text-balance mb-5 text-center">
+ Construa conosco a plataforma e amplie sua rede de conhecimento
+ interagindo com pessoas envolvidas com experiências que ocorrem em todo
+ o Brasil!
+ </h1>
+ </div>
+ );
+}
diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js
index 10a14815676ddcd6064e6ceac1fddc3e22f469dc..96520b7a99fbd601c9917c8909a89b58f5988caf 100644
--- a/src/app/login/components/LoginForm.js
+++ b/src/app/login/components/LoginForm.js
@@ -10,8 +10,10 @@ import {
} from "@mui/material";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
-import { useState } from "react";
+import { use, useState } from "react";
import SignupModal from "./SignupModal";
+import Title from "@/app/components/Title";
+import { useRouter } from "next/navigation";
export default function LoginForm({
handleEmailChange,
@@ -24,77 +26,90 @@ export default function LoginForm({
const handleOpenModal = () => setOpenModal(true);
const handleCloseModal = () => setOpenModal(false);
+ const router = useRouter();
+
return (
<ThemeProvider theme={theme}>
- <div className="flex flex-col items-center justify-center">
- <form onSubmit={handleSubmit}>
- <Paper
- elevation={0}
- className="w-96 flex flex-col items-center p-5 rounded-xl"
- >
- <Image
- src="/mecred.svg"
- alt="MecRED Logo"
- width={60}
- height={24}
- className="m-5"
- />
- {errorMessage ? (
- <Alert severity="error">{errorMessage}</Alert>
- ) : null}
- <TextField
- fullWidth
- label="E-mail"
- className="m-5"
- onChange={handleEmailChange}
- error={errorMessage.length > 0}
- />
- <TextField
- fullWidth
- type="password"
- label="Senha"
- className="mb-5"
- onChange={handlePasswordChange}
- error={errorMessage != errorMessage.length > 0}
- />
- <Button
- fullWidth
- disableElevation
- className="bg-secondary text-white hover:bg-secondary-hover"
- type="submit"
+ <div className="xl:fixed">
+ <div className="flex xl:mx-24 xl:my-[50%] flex-col items-center">
+ <div className="xl:hidden mx-4">
+ <Title/>
+ </div>
+ <form onSubmit={handleSubmit} className="mb-5">
+ <Paper
+ elevation={0}
+ className="w-96 flex flex-col items-center p-5 rounded-xl"
>
- Entrar
- </Button>
- <Divider flexItem className="mt-2">
- <p className="text-gray-400 text-md">OU</p>
- </Divider>
- <Button
- fullWidth
- disableElevation
- variant="outlined"
- className="mt-2 border-main text-gray-500 normal-case flex gap-2"
- >
- <Image className="w-6 h-6" src="/google.svg" alt="google logo" />
- <span>Entrar com o Google</span>
- </Button>
- <p className="mt-5 text-xs text-gray-500">
- Esqueceu a senha?{" "}
- <a className="text-secondary cursor-pointer hover:font-bold">
- Clique aqui.
- </a>
- </p>
- </Paper>
- </form>
- <p className="mt-5 text-xs text-gray-400">
- Não tem uma conta?{" "}
+ <Image
+ src="/mecred.svg"
+ alt="MecRED Logo"
+ width="0"
+ height="0"
+ className="m-5 w-[60px] h-auto"
+ />
+ {errorMessage ? (
+ <Alert severity="error">{errorMessage}</Alert>
+ ) : null}
+ <TextField
+ fullWidth
+ label="E-mail"
+ className="m-5"
+ onChange={handleEmailChange}
+ error={errorMessage.length > 0}
+ />
+ <TextField
+ fullWidth
+ type="password"
+ label="Senha"
+ className="mb-5"
+ onChange={handlePasswordChange}
+ error={errorMessage != errorMessage.length > 0}
+ />
+ <Button
+ fullWidth
+ disableElevation
+ className="bg-secondary text-white hover:bg-secondary-hover"
+ type="submit"
+ >
+ Entrar
+ </Button>
+ <Divider flexItem className="mt-2">
+ <p className="text-gray-400 text-md">OU</p>
+ </Divider>
+ <Button
+ fullWidth
+ disableElevation
+ variant="outlined"
+ className="mt-2 border-main text-gray-500 normal-case flex gap-2"
+ >
+ <img className="w-6 h-6" src="/google.svg" alt="google logo" />
+ <span>Entrar com o Google</span>
+ </Button>
+ <p className="mt-5 text-xs text-gray-500">
+ Esqueceu a senha?{" "}
+ <a className="text-secondary cursor-pointer hover:font-bold">
+ Clique aqui.
+ </a>
+ </p>
+ </Paper>
+ </form>
<a
- onClick={handleOpenModal}
- className="text-secondary hover:font-bold cursor-pointer"
+ onClick={() => router.push("/collections")}
+ className="text-secondary lg:text-nowrap hover:font-bold cursor-pointer"
>
- Cadastre-se.
+ Entrar sem conta
</a>
- </p>
- <SignupModal open={openModal} handleClose={handleCloseModal} />
+ <p className="mt-5 text-xs text-gray-400 lg:text-nowrap">
+ Não tem uma conta?{" "}
+ <a
+ onClick={handleOpenModal}
+ className="text-secondary hover:font-bold cursor-pointer"
+ >
+ Cadastre-se.
+ </a>
+ </p>
+ <SignupModal open={openModal} handleClose={handleCloseModal} />
+ </div>
</div>
</ThemeProvider>
);
diff --git a/src/app/login/page.js b/src/app/login/page.js
index bcb3914e3a2637ec7e8c969de4dd0653f5f4a12d..19a577e9f62ceca2014ea72b3ba33cc58d747a6a 100644
--- a/src/app/login/page.js
+++ b/src/app/login/page.js
@@ -10,6 +10,9 @@ import {
} from "../handlers/localStorageHandler";
import { redirect, useRouter, useSearchParams } from "next/navigation";
import { Suspense } from 'react';
+import About from "../components/About";
+import { ThemeProvider } from "@emotion/react";
+import theme from "../theme";
function Login() {
const [userEmail, setUserEmail] = useState("");
@@ -62,19 +65,21 @@ function Login() {
});
return (
- <Grid container className="min-h-screen bg-[#f5f9f9] items-center">
- <Grid xs={12} md={7} lg={7}>
- <Hightlights />
+ <ThemeProvider theme={theme}>
+ <Grid container className="min-h-screen bg-[#f5f9f9]">
+ <Grid xs={12} xl={7} order={{ xs: 2, xl: 1 }}>
+ <About />
+ </Grid>
+ <Grid xs={12} xl={5} order={{ xs: 1, xl: 2 }}>
+ <LoginForm
+ handleEmailChange={handleEmailChange}
+ handlePasswordChange={handlePasswordChange}
+ handleSubmit={userLogin}
+ errorMessage={errorMessage}
+ />
+ </Grid>
</Grid>
- <Grid xs={12} md={5} lg={5}>
- <LoginForm
- handleEmailChange={handleEmailChange}
- handlePasswordChange={handlePasswordChange}
- handleSubmit={userLogin}
- errorMessage={errorMessage}
- />
- </Grid>
- </Grid>
+ </ThemeProvider>
);
}
diff --git a/src/app/theme.js b/src/app/theme.js
index fe85b8ed7be1fa7bda8b72f6bd555607087ff037..211ccca819fe48cd9fbfdf78117d6406bcaca87a 100644
--- a/src/app/theme.js
+++ b/src/app/theme.js
@@ -15,7 +15,7 @@ const theme = createTheme({
sm: 640,
md: 768,
lg: 1024,
- xl: 1280,
+ xl: 1280,
}
}
})
diff --git a/tailwind.config.js b/tailwind.config.js
index 32894d4ed397c3edd305ef5369f793e0f30ee4b8..19253078d569c9a825eb314b54e8492ce381a44d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,9 @@ module.exports = {
"secondary-hover": "#039EB7",
"orange-hover": "#DE5518",
"main-text": "#858585",
- "black-hover": "#0001"
+ "black-hover": "#0001",
+ "violet": "#56358C",
+ "pink": "#E62954"
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",