diff --git a/public/images/slide-1.png b/public/images/slide-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f470c7f7a46a73a61f4b56e3fd70b12c06c3fe8e
Binary files /dev/null and b/public/images/slide-1.png differ
diff --git a/public/images/slide-2.png b/public/images/slide-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dbcd7bfcc951e810fb8571af40d2f7df837f7de
Binary files /dev/null and b/public/images/slide-2.png differ
diff --git a/public/images/slide-3.png b/public/images/slide-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..871cdd11147f76b91db45d46b6daaec530a7a1b7
Binary files /dev/null and b/public/images/slide-3.png differ
diff --git a/public/images/slide-4.png b/public/images/slide-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef08474d3293dbab303eaa23bba18c870f5c8030
Binary files /dev/null and b/public/images/slide-4.png differ
diff --git a/src/app/ajuda/page.js b/src/app/ajuda/page.js
index 6d564ed0916628a95f7b44bbb9fc33678adb61cd..26b13a3cc6f981095957394a81967d055baee327 100644
--- a/src/app/ajuda/page.js
+++ b/src/app/ajuda/page.js
@@ -93,7 +93,7 @@ export default function Help() {
onClick={() =>
router.push(`/topicosAjuda?section=${item.sectionPos}&pos=${idx}`)
}
- className="flex text-start text-sm mt-4 ml-3 hover:turquoise-HC-underline underline"
+ className="flex text-start text-sm mt-4 ml-3 hover:text-turquoise-HC-white-underline"
>
{question}
</button>
diff --git a/src/app/components/About.js b/src/app/components/About.js
index 3d5280c3770988b223b627660967c93ce5072ca7..40a476aab059b82426718a40c5c1f04a3f495323 100644
--- a/src/app/components/About.js
+++ b/src/app/components/About.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
import mecredApi from "@/axiosConfig";
import Title from "./Title";
import Image from "next/image";
@@ -18,6 +18,7 @@ import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
export default function AboutComponent() {
const [statistics, setStatistics] = useState({});
+
useEffect(() => {
mecredApi
.get("/statistics")
@@ -74,10 +75,13 @@ export default function AboutComponent() {
</div>
);
};
+
+
+
const ActorInfo = ({ name, description, nameImage }) => {
return (
- <div className={`flex flex-col justify-start w-full items-center rounded-md`}>
+ <div className={`flex flex-col justify-start max-xl:w-full w-[500px] items-center rounded-md`}>
<Image
className="rounded-lg"
alt={name}
@@ -85,7 +89,7 @@ export default function AboutComponent() {
width={500}
height={10}
/>
- <span className="text-light text-darkGray-HC-white mt-4 text-base text-left">
+ <span className="text-light text-darkGray-HC-white mt-10 mb-12 text-base text-start">
{description}
</span>
</div>
@@ -119,14 +123,13 @@ export default function AboutComponent() {
const Actors = () => {
return (
<>
- <h1 className="text-2xl text-darkGray-HC-white font-bold mb-3 mt-10">
+ <h1 className="text-2xl text-darkGray-HC-white font-bold 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 className="text-xl text-center text-darkGray-HC-white lg:w-2/5 my-10 max-sm:hidden">
+ A MEC RED é 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 ">
+ <div className="w-full grid grid-rows-2 max-sm:grid-rows-4 px-10 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!"
@@ -259,11 +262,11 @@ export default function AboutComponent() {
const Differences = () => {
return (
<>
- <h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-2 mt-10 max-sm:py-2">
+ <h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-6 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="flex w-full align-middle xl:px-60 lg:px-28 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`}
@@ -316,7 +319,7 @@ export default function AboutComponent() {
<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">
+ <div className="grid grid-cols-2 xl:mx-36 md:mx-20 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."
@@ -346,13 +349,87 @@ export default function AboutComponent() {
)
}
+
+ const SlideInfo = ({ name, description, nameImage, link }) => {
+ return (
+ <a href={link} className="block">
+ <div className="flex mt-2 flex-row items-center w-full">
+ <div className="relative border border-white w-[calc(20vw+8px)] max-xl:w-[248px] h-[550px] max-xl:h-[420px] max-md:h-[332px] overflow-hidden rounded-lg ">
+ <Image
+ className="object-cover object-[60%_75%]"
+ alt={name}
+ src={nameImage}
+ fill
+ />
+ <div className="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-black to-transparent">
+ <span className="absolute bottom-0 left-0 w-full bg-transparent bg-opacity-60 font-bold text-white text-xl max-lg:text-base pl-4 pb-8 max-md:pb-6">
+ {description}
+ </span>
+ </div>
+ </div>
+ </div>
+ </a>
+ );
+ };
+
+ const Slides = () => {
+ const slidesRef = useRef(null);
+
+ useEffect(() => {
+ const handleWheel = (e) => {
+ if (e.deltaY !== 0) {
+ slidesRef.current.scrollLeft += e.deltaY*2; // Usa o scroll para horizontal
+ e.preventDefault(); // Impede o comportamento padrão
+ }
+ };
+ const slidesContainer = slidesRef.current;
+ slidesContainer.addEventListener("wheel", handleWheel); // O evento wheel dispara quando o usuário gira o scroll do mouse
+
+ // Limpeza do evento
+ return () => slidesContainer.removeEventListener("wheel", handleWheel);
+ }, []);
+
+ return (
+ <>
+ <div className="w-full px-1 xl:grid xl:grid-rows-1 xl:grid-flow-col gap-4 justify-between mb-10 pb-2 flex flex-nowrap overflow-x-auto scrollbar-none max-xl:animate-scrollHint scroll-smooth"
+ ref={slidesRef}
+ >
+ <SlideInfo
+ name="Professores"
+ description="Como publicar um recurso?"
+ nameImage="/images/slide-1.png"
+ link="/topicosAjuda?section=0&pos=1"
+ />
+ <SlideInfo
+ name="Alunos"
+ description="Como fazer uma busca?"
+ nameImage="/images/slide-2.png"
+ link="/topicosAjuda?section=1&pos=0"
+ />
+ <SlideInfo
+ name="troca"
+ description="Por que se cadastrar?"
+ nameImage="/images/slide-3.png"
+ link="/topicosAjuda?section=3&pos=0"
+ />
+ <SlideInfo
+ name="Comunidade Acadêmica"
+ description="Como fazer meu cadastro?"
+ nameImage="/images/slide-4.png"
+ link="/topicosAjuda?section=3&pos=1"
+ />
+ </div>
+ </>
+ );
+ };
+
return (
<>
<div className="overflow-y-auto scrollbar-none">
- <div className="flex max-lg:col-span-3 col-span-2">
+ <div className="flex 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 ">
+ <Slides />
+ <div className="flex flex-col w-full text-center items-center rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white ">
<div>
<Title />
</div>
@@ -389,23 +466,6 @@ export default function AboutComponent() {
</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>
</>
);
}
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 7ae1eaf4445ff27a41c6c3017139531c9dc3009f..b90f9a66d38fee8b9f91b05e2d4c1eb60c829d6f 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -103,7 +103,7 @@ function DefaultContent({
) : (
<button
type="button"
- className="group bg-orange-HC-white hover:bg-darkOrange-HC-dark px-4 h-10 mr-14 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0 hover:text-white-HC-underline outline outline-1 outline-ice-HC-white"
+ className="group bg-orange-HC-white hover:bg-darkOrange-HC-dark px-4 h-10 mr-8 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0 hover:text-white-HC-underline outline outline-1 outline-ice-HC-white"
onClick={loginBarrier}
>
Entrar
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index bbe24532c1d1f5730aa01414fe7067c590636058..d6cb93882ca9cddd010fb44680a3318d3ab3d9bd 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -120,7 +120,7 @@ export default function AccountMenu() {
return (
<>
{logged ? (
- <Box className="mr-14 flex align-center">
+ <Box className="mr-5 flex align-center">
<IconButton
onClick={handleClick}
size="large"
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 7b961e05fe5dccf35eb5df731a0ca8e4aa92b2bc..4561355f603d9b50ebfa9f84e9d905607e23a0b5 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -80,7 +80,7 @@ export default function Overlay({
<SideBar setFilterState={setFilterState} filterState={filterState} />
</div>
- <div className=" flex-grow pt-[150px] min-w-0 h-full ml-[120px]">
+ <div className=" flex-grow pt-[150px] min-w-0 h-full ml-[150px] mr-14">
{children}
</div>
</div>
diff --git a/src/app/components/Title.js b/src/app/components/Title.js
index fa511547c01e614c22166a36389fcf1b4bce9aaa..746152c677805d6934639230cbae819e24c8c557 100644
--- a/src/app/components/Title.js
+++ b/src/app/components/Title.js
@@ -1,10 +1,10 @@
export default function Title() {
return (
- <div className="my-10 mx-8">
+ <div className="my-10 mx-8 justify-center ">
<h1 className="text-3xl max-lg:text-xl font-bold text-darkGray-HC-white my-10 text-center">
MEC RED - A Rede Social da Educação
</h1>
- <h1 className="text-xl max-lg:text-base text-darkGray-HC-white text-balance mb-5 text-center">
+ <h1 className="text-xl lg:px-44 max-lg:text-base text-darkGray-HC-white text-balance mb-5 justify-center text-center">
Aqui você pode se conectar com pessoas interessadas na área da educação,
acessar e compartilhar recursos Educacionais Digitais (REDs)!
</h1>
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index 422a1d68b734078510c0d60e89e0931baaf7dff6..376ece91a6181e81aafa18ead7d2b2ccc67b395d 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -248,7 +248,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
return (
- <div className='overflow-y-auto min-h-dvh ml-[30px] mr-[80px] max-md:mx-[20px] max-md:mb-24 '>
+ <div className='overflow-y-auto min-h-dvh max-md:mx-[20px] max-md:mb-24 '>
<div className='flex flex-col'>
<div className='flex max-md:mx-1 mx-0.5 mt-2 max-lg:flex-col rounded-2xl gap-4 max-sm:gap-0 max-lg:items-center bg-white-HC-dark outline outline-1 outline-ice-HC-white' >
<div className='p-10 max-sm:p-0 h-full items-center'>
diff --git a/src/app/sobre/page.js b/src/app/sobre/page.js
index d07aa59c20feba92c0e9899e7065669f2aaedf5b..39fb675d5ec7e872ee98143f2a954f62760ea9fc 100644
--- a/src/app/sobre/page.js
+++ b/src/app/sobre/page.js
@@ -6,7 +6,7 @@ import { ContinueNavigation } from "../components/ContinueNavigation"
export default function About() {
return (
- <Overlay>
+ <Overlay type="twoColumns">
<AboutComponent />
<ContinueNavigation />
</Overlay>