frontend(info): criação da tela de informações para novos usuários (#140

)

* frontend(feature): criação da nova página de informações para usuários

* frontend(fixxing): ajustando tamanho do ícone de informação

* frontend(feature): add information page for new users

* web(info): organiza layout dos colaboradores

* web(info): adição da descrição de utilização do site.

* web(info): modulariza página de informações

* fix(web): fix information page for new users

---------

Co-authored-by: mateuvrs <[email protected]>

web/app/globals.css

@@ -4,8 +4,40 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --main-green: hsl(149, 80%, 38%);
+  --main-white: hsl(0, 0%, 96%);
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--main-white);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--main-green);
+  border-radius: 5px;
+}
+
+body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--main-green) var(--main-white);
+}
+
+body::-moz-scrollbar-thumb {
+  background-color: var(--main-green);
+  border-radius: 5px;
+}
+
+body::-moz-scrollbar-track {
+  background-color: var(--main-white);
 }

web/app/schedules/info/page.tsx

@@ -0,0 +1,100 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+function CollaboratorImage({ name, src }: { name: string, src: string }) {
+    return (
+        <div className="flex flex-col items-center justify-end text-center">
+            {name}
+            <br />
+            <Link target='_blank' href={src.split('.png')[0]}>
+                <Image
+                    src={src}
+                    alt={`Foto ${name}`}
+                    width={100}
+                    height={100}
+                    className="rounded-full"
+                />
+            </Link>
+        </div>
+
+    );
+}
+
+const Team = () => {
+    return (
+        <div className="flex flex-col gap-5">
+            <div className="grid grid-cols-3 gap-5">
+                <CollaboratorImage name="Arthur Ribeiro" src="https://github.com/artrsousa1.png" />
+                <CollaboratorImage name="Caio Habibe" src="https://github.com/CaioHabibe.png" />
+                <CollaboratorImage name="Caio Rodrigues" src="https://github.com/caio-felipee.png" />
+            </div>
+            <div className="grid grid-cols-3 gap-5">
+                <CollaboratorImage name="Gabriel Castelo" src="https://github.com/GabrielCastelo-31.png" />
+                <CollaboratorImage name="Henrique Camelo" src="https://github.com/henriquecq.png" />
+                <CollaboratorImage name="Mateus Vieira" src="https://github.com/mateusvrs.png" />
+            </div>
+        </div>
+    );
+};
+
+function About() {
+    return (
+        <>
+            <h2 className="text-3xl font-semibold pb-5">Sobre</h2>
+            <p className="text-justify">
+                O Sua Grade UnB é um projeto em desenvolvimento da matéria de <b>Desenvolvimento de Software</b>.
+                Seu propósito é proporcionar aos estudantes da Universidade de Brasília uma experiência simplificada e intuitiva na elaboração de suas grades horárias.
+                O projeto visa facilitar o processo de organização acadêmica, oferecendo uma ferramenta eficiente e amigável para a montagem de horários, otimizando assim a gestão do tempo dos alunos.
+            </p>
+        </>
+    );
+}
+
+function HowToUse() {
+    return (
+        <>
+            <h2 className="text-3xl font-semibold pt-5 pb-5">Como utilizar?</h2>
+            <p className="text-justify">
+                <p className="pb-5">Na página inicial, clique no botão <b>Buscar Matéria</b> para selecionar as disciplinas desejadas para a sua grade. Escolha o ano/período e insira o nome da disciplina para poder optar por turmas potenciais na criação da grade, permitindo a escolha de até quatro turmas para cada disciplina.</p>
+                <p className="pb-5">Após fazer suas escolhas, clique no botão <b>Gerar Grade</b> e defina a prioridade dos turnos que melhor se adequam à sua rotina. Em seguida, basta escolher a grade mais adequada entre as opções geradas para realizar o download e/ou salvar as disciplinas escolhidas.</p>
+                <p>Compartilhe suas experiências e sugestões. O aplicativo está em constante desenvolvimento, e seu feedback é valioso para aprimorar a experiência de todos os usuários.</p>
+            </p>
+        </>
+    );
+}
+
+function HowToContribute() {
+    return (
+        <>
+            <h2 className="text-3xl font-semibold  pt-5 pb-5">Como contribuir?</h2>
+            <p className="text-justify">
+                Se você é um programador e deseja contribuir com nosso projeto, basta <Link legacyBehavior href="https://unb-mds.github.io/2023-2-Squad11/contributing/" className=""><a target="_blank" className="text-primary hover:underline">clicar aqui</a></Link> para ter acesso a nossa documentação. Lá você encontrará todos os detalhes de como contribuir com novas funcionalidades e reportar possíveis erros.
+            </p>
+        </>
+    );
+}
+
+function Collaborators() {
+    return (
+        <>
+            <h2 className="text-3xl font-semibold  pt-5 pb-5">Colaboradores</h2>
+            <Team />
+        </>
+    );
+}
+
+export default function Info() {
+
+    return (
+        <div className="overflow-auto m-auto min-h-full max-h-full px-8 max-w-4xl">
+            <div className="flex flex-col items-center gap-5 py-0">
+                <div className="flex flex-col items-center gap-2">
+                    <About />
+                    <HowToUse />
+                    <HowToContribute />
+                    <Collaborators />
+                </div>
+            </div>
+        </div>
+    );
+}

web/app/schedules/layout.tsx

@@ -12,6 +12,7 @@ import { LoadingScreen } from '../components/LoadingScreen';
 import InfoHeader from '../components/InfoHeader';
 
 import homeIcon from '@/public/icons/home.jpg';
+import infoIcon from '@/public/icons/info.jpg';
 import logoIcon from '@/public/icons/logotipo.jpg';
 import scheduleIcon from '@/public/icons/schedule.jpg';
 import profileIcon from '@/public/icons/profile.jpg';
@@ -90,6 +91,7 @@ function AsideButtonsJSX() {
             <AsideButton innerRef={onRefChange} pageName='home' image={homeIcon} onClick={() => router.push('/schedules/home')} />
             <AsideButton innerRef={onRefChange} pageName='mygrades' image={scheduleIcon} onClick={() => router.push('/schedules/mygrades')} />
             {user.is_anonymous ? null : <AsideButton innerRef={onRefChange} pageName='profile' image={profileIcon} onClick={() => router.push('/schedules/profile')} />}
+            <AsideButton innerRef={onRefChange} pageName='info' image={infoIcon} onClick={() => router.push('/schedules/info')} />
         </div>
     );
 }

web/next.config.js

@@ -6,6 +6,10 @@ const nextConfig = {
                 protocol: 'https',
                 hostname: 'lh3.googleusercontent.com',
             },
+            {
+                protocol: 'https',
+                hostname: 'github.com',
+            },
         ],
     },
 }