diff --git a/public/google.svg b/public/google.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c0669b38ff8d0b21fd6a0edbc1d2fddbe576d60f
--- /dev/null
+++ b/public/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 875c01e819b90038f0c3e4aee2a4dcc2086b0e14..b5c61c956711f981a41e95f7fcf0038436cfbb22 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,33 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
-}
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
-}
diff --git a/src/app/layout.js b/src/app/layout.js
index 9aef1df7d6c3d50515ab62f578c5cc963a1243a7..3027a355d51d75cfe0145eba5cbc1ab994b4b125 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,17 +1,14 @@
-import { Inter } from "next/font/google";
import "./globals.css";
-const inter = Inter({ subsets: ["latin"] });
-
export const metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
-};
+ title: 'MECRED',
+ description: 'Plataforma MEC de Recursos Educacionais Digitais',
+}
export default function RootLayout({ children }) {
- return (
- <html lang="en">
- <body className={inter.className}>{children}</body>
- </html>
- );
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ )
}
diff --git a/src/app/login/components/Highlights.js b/src/app/login/components/Highlights.js
new file mode 100644
index 0000000000000000000000000000000000000000..c50b5b2bfe51644c83af21f40e63edf3b724fbd8
--- /dev/null
+++ b/src/app/login/components/Highlights.js
@@ -0,0 +1,36 @@
+import Grid from "@mui/material/Unstable_Grid2";
+import { useEffect, useState } from "react";
+
+export default function Hightlights() {
+
+ const [statistics, setStatistics] = useState({});
+
+ useEffect(() => {
+ fetch('https://api.portalmec.c3sl.ufpr.br/v1/statistics')
+ .then(response => response.json())
+ .then(data => { console.log(data); setStatistics(data); });
+ }, [])
+
+ return (
+ <div className="flex flex-col text-center">
+ <h1 className="text-3xl font-bold text-[#00bacc] mb-3">
+ Plataforma MEC de Recursos Educacionais Digitais
+ </h1>
+ <h1 className="text-lg text-gray-400 mb-5">
+ Encontre e compartilhe vídeos, animações e muitos outros recursos.
+ </h1>
+ <h1 className="text-base">{statistics.count} recursos disponíveis
+ | {statistics.month_downloads} recursos baixados este mês</h1>
+ {/*<div className="flex flex-wrap justify-center max-w-[70%] items-center">
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ <div className="m-1 min-w-24 h-24 bg-black items-center"></div>
+ </div>*/}
+ </div>
+ );
+}
diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..212a7cfd0545c569ae4bcb27ea6451f6da0fa997
--- /dev/null
+++ b/src/app/login/components/LoginForm.js
@@ -0,0 +1,67 @@
+"use client";
+import Image from "next/image";
+import { Button, Paper, SvgIcon, TextField } from "@mui/material";
+import theme from "@/app/theme";
+import { ThemeProvider } from "@emotion/react";
+
+export default function LoginForm({
+ handleEmailChange,
+ handlePasswordChange,
+ handleButtonClick,
+}) {
+ return (
+ <ThemeProvider theme={theme}>
+ <div className="flex flex-col items-center justify-center">
+ <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"
+ />
+ <TextField
+ fullWidth
+ label="E-mail *"
+ className="m-5"
+ onChange={handleEmailChange}
+ />
+ <TextField
+ fullWidth
+ type="password"
+ label="Senha *"
+ className="mb-5"
+ onChange={handlePasswordChange}
+ />
+ <Button
+ fullWidth
+ disableElevation
+ className="bg-secondary text-white hover:bg-secondary"
+ onClick={handleButtonClick}
+ >
+ Entrar
+ </Button>
+ <p className="mt-2 text-gray-400 text-md">OU</p>
+ <Button
+ fullWidth
+ disableElevation
+ variant="outlined"
+ className="mt-2 border-main text-gray-500 normal-case flex gap-2"
+ >
+ <img class="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">Clique aqui.</a>
+ </p>
+ </Paper>
+ <p className="mt-5 text-xs text-gray-400">
+ Não tem uma conta? <a className="text-secondary">Cadastre-se.</a>
+ </p>
+ </div>
+ </ThemeProvider>
+ );
+}
diff --git a/src/app/login/page.js b/src/app/login/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3dee7304e840fd94a0d0034c68f767cc895ae81
--- /dev/null
+++ b/src/app/login/page.js
@@ -0,0 +1,48 @@
+"use client"
+import Grid from '@mui/material/Unstable_Grid2';
+import Paper from '@mui/material/Paper'
+import Hightlights from './components/Highlights';
+import LoginForm from './components/LoginForm';
+import { useState } from 'react';
+
+export default function Login() {
+
+ const [userEmail, setUserEmail] = useState("");
+ const [userPassword, setUserPassword] = useState("");
+
+ const handleEmailChange = (e) => {
+ setUserEmail(e.target.value);
+ console.log(e.target.value);
+ }
+
+ const handlePasswordChange = (e) => {
+ setUserPassword(e.target.value);
+ }
+
+ const userLogin = async (email, password) => {
+
+ fetch('https://api.portalmec.c3sl.ufpr.br/v1/auth/sign_in', {
+ method: "POST",
+ body: JSON.stringify({
+ email: userEmail,
+ password: userPassword
+ })
+ }).then(response => response.json())
+ .then(data => console.log(data))
+ }
+
+
+ return (
+ <Grid container className="min-h-screen bg-[#f5f9f9] items-center">
+ <Grid xs={12} md={7} lg={7} className="">
+ <Hightlights/>
+ </Grid>
+ <Grid xs={12} md={5} lg={5} >
+ <LoginForm handleEmailChange={handleEmailChange}
+ handlePasswordChange={handlePasswordChange}
+ handleButtonClick={userLogin}
+ />
+ </Grid>
+ </Grid>
+ )
+}
\ No newline at end of file
diff --git a/src/app/register/index.js b/src/app/register/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c3ae12236203526b553553c6c4f260b7152d64a
--- /dev/null
+++ b/src/app/register/index.js
@@ -0,0 +1,3 @@
+export default function Register() {
+ return <h1>REGIRTEAS</h1>
+}
\ No newline at end of file
diff --git a/src/app/theme.js b/src/app/theme.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6ffcc7acd8df7ea31cf9929946d4f3362ee3217
--- /dev/null
+++ b/src/app/theme.js
@@ -0,0 +1,14 @@
+"use client"
+import { createTheme } from "@mui/material"
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: "#00bacc",
+ light: "#33c7d6",
+ dark: "#00828e"
+ }
+ }
+})
+
+export default theme;
\ No newline at end of file