feature: button oo the navbar file + herosectionv2

components/navbar-components/NavBar.jsx

@@ -2,11 +2,17 @@ import React, { useState, useEffect } from 'react';
 import NavHeader from './NavHeader';
 import NavMenu from './NavMenu';
 import style from 'styles/NavBar.module.css';
+import { Button } from '@mui/material';
+import useTranslation from 'next-translate/useTranslation';
 
 function NavBar(props) {
   const [menu, setMenuState] = useState(false);
   const [scrollDir, setScrollDir] = useState('top');
 
+  const { t } = useTranslation();
+  const projectPageLabel = t('common:navigation.backToProjects');
+  const projectPageHref = t('common:navigation.projectsPageLink');
+
   const toggleMenu = (open) => {
     setMenuState(open);
   };
@@ -74,7 +80,20 @@ function NavBar(props) {
         toggleMenu={toggleMenu}
         isMenuOpen={menu}
       />
+
       <NavMenu isMenuOpen={menu} />
+
+      {props.isProjectSubpage && (
+        <Button
+          variant="contained"
+          color="primary"
+          className={style.fixedButton}
+          href={projectPageHref}
+        >
+          {projectPageLabel}
+        </Button>
+      )}
+
     </div>
   );
 }

components/projects-components/projectsv2/CubeSats.jsx

@@ -4,21 +4,24 @@ import React, { useState } from 'react';
 export default function CubeSats() {
     return (
         <>
+
             {/* 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 item xs={12} md={12} sx={{ border: 1, borderColor: 'red', padding: 2 }}>
                 </Grid>
             </Grid>
 
             <Grid container sx={{ minHeight: '100vh', padding: 2 }}>
-                <Grid item xs={12} md={6} sx={{ border: 1, borderColor: 'blue', padding: 2 }}>
+                <Grid item xs={12} md={12} sx={{ border: 1, borderColor: 'blue', padding: 2 }}>
                 </Grid>
             </Grid>
 
             <Grid container sx={{ minHeight: '100vh', padding: 2 }}>
-                <Grid item xs={12} md={6} sx={{ border: 1, borderColor: 'green', padding: 2 }}>
+                <Grid item xs={12} md={12} sx={{ border: 1, borderColor: 'green', padding: 2 }}>
                 </Grid>
             </Grid>
         </>
     );
-}
+}
+
+export function getServerSideProps() { return { props: {} }; }

components/projects-components/projectsv2/HeroSectionV2.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from 'styles/projects/HeroSectionV2.module.css';
+
+export default function HeroSectionV2(props) {
+  const backgroundImage = {
+    backgroundImage: `${props.backgroundImage}`,
+    backgroundColor: `${props.backgroundColor}`,
+  };
+
+  const { path } = props
+
+  return (
+    <div style={backgroundImage} className={styles.heroContainer}>
+
+      <div className={styles.textContainer}>
+        <h1>{props.title}</h1>
+      </div>
+
+    </div>
+  );
+}

i18n.json

@@ -8,6 +8,7 @@
 		"/processo-seletivo": ["processoSeletivo"],
 		"/projetos"        : ["projetos"],
 		"/projetos/sondas-aeroespaciais": ["projetos"],
+		"/projetos/cubesats": ["projetos"],
 		"/zenith"          : ["oZenith"]
 	}
 }

locales/en/common.json

@@ -1,5 +1,11 @@
 {
     "navBar": ["ABOUT US", "PROJECTS", "KURUMIM", "SELECTION PROCESS", "OBSAT"],
+
+    "navigation": {
+        "backToProjects": "Back to Projects Page",
+        "projectsPageLink": "/projetos"
+    },
+
     "footer": {
         "copyright": "© 2024  Zenith Aerospace",
         "easterEgg": "MADE WITH TONS OF JAVASCRIPT AND CONFUSION ON DISCORD"

locales/es/common.json

@@ -1,5 +1,11 @@
 {
     "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "OBSAT"],
+
+    "navigation": {
+        "backToProjects": "Back to Projects Page",
+        "projectsPageLink": "/projetos"
+    },
+
     "footer": {
         "copyright": "© 2024  Zenith Aerospace",
         "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD"

locales/pt/common.json

@@ -1,5 +1,11 @@
 {
     "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "OBSAT"],
+
+    "navigation": {
+        "backToProjects": "Voltar para página de projetos",
+        "projectsPageLink": "/projetos"
+    },
+
     "footer": {
         "copyright": "© 2024  Zenith Aerospace",
         "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD"

pages/projetos/cubesats.jsx

@@ -2,18 +2,28 @@ import React from 'react';
 import CubeSats from 'components/projects-components/projectsv2/CubeSats';
 import Footer from '../../components/Footer';
 import useTranslation from 'next-translate/useTranslation';
-import NavBarProjects from '../../components/navbar-components/NavBarProjects';
+import NavBar from '../../components/navbar-components/NavBar';
+import HeroSectionV2 from 'components/projects-components/projectsv2/HeroSectionV2';
 
-
-export default function cubesats() {
-    const { t } = useTranslation();
+export default function cubesats(props) {
+    const { t } = useTranslation('projetos');
+
+    const title = t('projetos:cubeSats.title');
+    const subtitle = t('projetos:cubeSats.subtitle');
+
     return (
         <>
-            <NavBarProjects/>
-            <CubeSats />
-            <Footer />
+            <NavBar isProjectSubpage={true}/>
+            <HeroSectionV2
+                backgroundColor="#000000"
+                backgroundImage="url(../images/Projetos/Cubesats/imagem1.jpg)"
+                title="Cubesats"
+            />
+
+            <CubeSats/>
+            <Footer/>
         </>
     );
 }
 
-
+export function getServerSideProps() { return { props: {} }; }

styles/NavBar.module.css

@@ -135,6 +135,21 @@
 
 }
 
+.fixedButton {
+    position: absolute;
+    top: 100%;
+    left: 20px;
+    z-index: 101;
+    transform: translateY(+50%);
+    background-color: #F28705;
+
+}
+
+.fixedButton:hover {
+    background-color: #0193ED; 
+    /*color: #000000;*/
+}
+
 @media screen and (min-width: 768px) {
     .navBarHeaderContainer {
         padding-left: 2em;