feature: example of a button on the cubesats page + fixes

components/Footer.jsx

@@ -77,7 +77,7 @@ function Footer() {
           </a>
         </div>
         <a href="http://vercel.com/?utm_source=zenith-aerospace&utm_campaign=oss">
-          <img alt="Vercel Logo" src={'images/Footer/Vercel.svg'} />
+          <img src={'images/Footer/Vercel.svg'} alt="Vercel Logo" />
         </a>
       </div>
     </div>

components/navbar-components/NavBarProjects.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import NavHeader from './NavHeader';
+import NavMenu from './NavMenu';
+import style from 'styles/NavBarProjects.module.css';
+import { Button } from '@mui/material';
+
+function NavBarProjects(props) {
+  const [menu, setMenuState] = useState(false);
+  const [scrollDir, setScrollDir] = useState('top');
+
+  const toggleMenu = (open) => {
+    setMenuState(open);
+  };
+
+  useEffect(() => {
+    const closeMenu = () => {
+      toggleMenu(false);
+    };
+
+    window.addEventListener('resize', closeMenu);
+
+    return () => window.removeEventListener('resize', closeMenu);
+  }, []);
+
+  useEffect(() => {
+    toggleMenu(false);
+    const threshold = 5;
+    const topThreshHold = 90;
+
+    let lastYPos = window.pageYOffset;
+    let ticking = false;
+
+    const updateScrollDir = () => {
+      const currYPos = window.pageYOffset;
+
+      if (currYPos > topThreshHold) {
+        if (Math.abs(currYPos - lastYPos) < threshold) {
+          ticking = false;
+          return;
+        }
+        setScrollDir(currYPos > lastYPos ? 'down' : 'up');
+        lastYPos = currYPos > 0 ? currYPos : 0;
+      } else {
+        setScrollDir('top');
+      }
+      ticking = false;
+    };
+
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDir);
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [scrollDir]);
+
+  return (
+
+    <div
+      className={
+        scrollDir === 'down'
+          ? style.navBarContainerDeactive
+          : style.navBarContainerActive
+      }>
+      <div
+        className={style.navBarContainerBackground}
+        style={{
+          backgroundColor: scrollDir === 'top' ? 'transparent' : 'black',
+        }}
+      />
+      <NavHeader
+        toggleMenu={toggleMenu}
+        isMenuOpen={menu}
+      />
+      <NavMenu isMenuOpen={menu} />
+
+      <Button
+        variant="contained"
+        color="primary"
+        className={style.fixedButton}
+        href='/projetos'
+      >
+         Voltar para página de projetos
+      </Button>
+    </div>
+  );
+}
+
+export default NavBarProjects;

components/projects-components/projectsv2/CubeSats.jsx

@@ -1,22 +1,24 @@
-import { Button, Typography } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import React, { useState } from 'react';
 
 export default function CubeSats() {
-    // precisa colocar a navbar aqui
     return (
-        <Grid container sx={{border: 1, borderColor: 'red'}}>
-            <Grid sm={12} md={12} p={2}>
-                <Button size="small" color="primary" href='/projetos'>
-                    Voltar para página de projetos
-                </Button>
+        <>
+            {/* Espaços vazios so pra testar mesmo*/}
+            <Grid container sx={{ minHeight: '100vh', padding: 2 }}>
+                <Grid item xs={12} md={6} sx={{ border: 1, borderColor: 'red', padding: 2 }}>
+                </Grid>
             </Grid>
 
-            <Grid sm={12} md={6} p={2} sx={{border:1}}>
-                <Typography gutterBottom variant="h2" component="div" >
-                    Cubesats
-                </Typography>
+            <Grid container sx={{ minHeight: '100vh', padding: 2 }}>
+                <Grid item xs={12} md={6} sx={{ border: 1, borderColor: 'blue', padding: 2 }}>
+                </Grid>
             </Grid>
-        </Grid>
-    )
+
+            <Grid container sx={{ minHeight: '100vh', padding: 2 }}>
+                <Grid item xs={12} md={6} sx={{ border: 1, borderColor: 'green', padding: 2 }}>
+                </Grid>
+            </Grid>
+        </>
+    );
 }