Criação da página de fluxogramas

FGA0138-MDS-Ajax · Nov 28, 2023 · 47ad369 · 47ad369
1 parent 2052a17
commit 47ad369
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 15 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -13,6 +13,7 @@ import Perfil from "./pages/Perfil";
 import Materias from "./pages/Materias";
 import Grade from "./pages/Grade";
 import FluxogramaAero from "./pages/FluxogramaAero"
+import Fluxogramas from "./pages/Fluxograma" 
 
 function App() {
   const { access_token } = useSelector(state => state.auth)
@@ -33,6 +34,7 @@ function App() {
           <Route exact path="fluxogramaSoft" element={<FluxogramaSoft/>} />
           <Route exact path="perfil" element={<Perfil/>} />
           <Route exact path="Materias" element={<Materias/>} />      <Route exact path="fluxogramaAero" element={<FluxogramaAero/>} />
+          <Route exact path="Fluxogramas" element={<Fluxogramas/>} />
 
 
         </Routes>

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -15,18 +15,8 @@ const Navbar = () => {
           <Button component={NavLink} to='/contact' style={({ isActive }) => { return { backgroundColor: isActive ? '#0f467e' : '' } }} sx={{ color: 'white', textTransform: 'none' }}>Contato</Button>
 
           <Button component={NavLink} to='/Fluxogramas' style={({ isActive }) => { return { backgroundColor: isActive ? '#0f467e' : '' } }} sx={{ color: 'white', textTransform: 'none' }}>Fluxogramas</Button>
-          {access_token && (
-  <Button
-    component={NavLink}
-    to='/Materias'
-    style={({ isActive }) => {
-      return { backgroundColor: isActive ? '#0f467e' : '' };
-    }}
-    sx={{ color: 'white', textTransform: 'none' }}
-  >
-    Matérias
-  </Button>
-)}
+
+          {access_token && ( <Button component={NavLink} to='/Materias' style={({ isActive }) => { return { backgroundColor: isActive ? '#0f467e' : '' };}} sx={{ color: 'white', textTransform: 'none' }}>Matérias </Button> )}
 
           {access_token ? <Button component={NavLink} to='/dashboard' style={({ isActive }) => { return { backgroundColor: isActive ? '#0f467e' : '' } }} sx={{ color: 'white', textTransform: 'none' }}>Perfil</Button> : <Button component={NavLink} to='/login' style={({ isActive }) => { return { backgroundColor: isActive ? '#0f467e' : '' } }} sx={{ color: 'white', textTransform: 'none' }}>Entrar/Registrar</Button>}
 

diff --git a/frontend/src/images/pic3.png b/frontend/src/images/pic3.png
diff --git a/frontend/src/pages/Fluxograma.js b/frontend/src/pages/Fluxograma.js
@@ -0,0 +1,65 @@
+import React from "react";
+import { Grid, Button } from "@mui/material";
+import Pic3 from '../images/pic3.png';
+import Navbar from "../components/Navbar";
+import { Box } from "@mui/material";
+import { Link } from "react-router-dom";
+
+const Home = () => {
+  return (
+    <Box>
+      <Navbar />
+      <Grid container justifyContent="center">
+        <Grid item sm={10}>
+
+          <h1>Fluxogramas de Cursos</h1>
+
+          <br />
+          <hr />
+          <p style={{ textAlign: "justify" }}>
+            Bem-vindo à nossa seção de Fluxogramas de Cursos! Aqui, você encontrará informações detalhadas sobre a estrutura dos cursos da FGA. Os fluxogramas são mapas visuais que destacam a sequência de disciplinas e atividades ao longo do período do curso.
+          </p>
+        <p style={{ textAlign: "justify"}}>
+            Escolha o curso que deseja visualizar:
+        </p>
+          <Grid container spacing={2} justifyContent="center">
+            <Grid item>
+              <Button component={Link} to="/FluxogramaSoft" variant="contained" color="primary">
+                Software
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button component={Link} to="/FluxogramaAero" variant="contained" color="primary">
+                Aeroespacial
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button variant="contained" color="primary">
+                Eletrônica
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button variant="contained" color="primary">
+                Energia
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button variant="contained" color="primary">
+                Automotiva
+              </Button>
+            </Grid>
+          </Grid>
+
+          <img
+            src={Pic3}
+            alt="imagem"
+            style={{ width: "36%", maxWidth: "1000px", margin: "0 auto", display: "block" }}
+          />
+
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Home;
diff --git a/frontend/src/styleheets/FluxogramaSoft.css b/frontend/src/styleheets/FluxogramaSoft.css
@@ -3,16 +3,16 @@
 .container {
   width: 2450px;
   height: 1080px;
-  background: #0b0b0b; 
+  background: #ffffff; 
   position: relative;
 } 
 .course-card {
   width: 210px;
   height: 120px;
   position: absolute;
-  background: rgba(30, 30, 30, 0.51);
+  background: rgb(255, 255, 255);
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(13, 13, 13, 0.5);
+  box-shadow: 0px 0px 10px rgb(255, 255, 255)
 }
 
 .course-info {