Redesign da pagina de projetos

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "jsxBracketSameLine": false,
+    "bracketSpacing": true
+}

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/NavBar.jsx

@@ -2,81 +2,93 @@ 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 [menu, setMenuState] = useState(false);
+    const [scrollDir, setScrollDir] = useState('top');
 
-  const toggleMenu = (open) => {
-    setMenuState(open);
-  };
+    const { t } = useTranslation();
+    const projectPageLabel = t('common:navigation.backToProjects');
+    const projectPageHref = t('common:navigation.projectsPageLink');
 
-  useEffect(() => {
-    const closeMenu = () => {
-      toggleMenu(false);
+    const toggleMenu = (open) => {
+        setMenuState(open);
     };
 
-    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;
-    };
+    useEffect(() => {
+        const closeMenu = () => {
+            toggleMenu(false);
+        };
 
-    const onScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateScrollDir);
-        ticking = true;
-      }
-    };
+        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;
+        };
 
-    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} />
-    </div>
-  );
+        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} />
+
+            {props.isProjectSubpage && (
+                <Button
+                    variant="contained"
+                    color="primary"
+                    className={menu === true ? style.navBarContainerDeactive : style.fixedButton}
+                    href={projectPageHref}
+                >
+                    {projectPageLabel}
+                </Button>
+            )}
+        </div>
+    );
 }
 
 export default NavBar;
+
+// teste de preview

components/projects-components/HeroSection.jsx

@@ -17,9 +17,6 @@ export default function HeroSection(props) {
           {props.subtitle}
         </h2>
       </div>
-      <div className={styles.imgContainer}>
-        <img alt={"Projeto explodido do cubesat zensat mostrando cada uma de suas placase os paineis laterais"} src={`/images/Projetos/${path}`} />
-      </div>
 
     </div>
   );

components/projects-components/projects-structure/ProjectsCarousel.jsx

@@ -1,66 +1,64 @@
 import React, { useEffect, useState, useRef } from 'react';
 import style from 'styles/projects/ProjectCarousel.module.css';
-import ReactPlayer from "react-player"
+import ReactPlayer from 'react-player';
 import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { Carousel } from 'react-responsive-carousel';
 
 function CarouselImage(props) {
-  const { path } = props;
+    const { path } = props;
 
-  return (
-    <div className={style.carouselImageDiv}>
-      <img className={style.carouselImage} src={`/images/Projetos/${path}`} alt = "Carousel image" />
-    </div>
-  )
+    return (
+        <div className={style.carouselImageDiv}>
+            <img className={style.carouselImage} src={`/images/Projetos/${path}`} alt="Carousel image" />
+        </div>
+    );
 }
 
 function CarouselYoutubeVideo({ url, isSelected }) {
-
-  return (
-    <div className={style.carouselYoutubeVideoDiv}>
-      <ReactPlayer width="100%" height="100%" url={url} controls={true} />
-    </div>
-  )
+    return (
+        <div className={style.carouselYoutubeVideoDiv}>
+            <ReactPlayer width="100%" height="100%" url={url} controls={true} />
+        </div>
+    );
 }
 
 function CarouselVideo({ path }) {
+    const videoElement = useRef(null);
 
-  const videoElement = useRef(null);
-
-  return (
-    <video className={style.carouselVideoDiv} ref={videoElement}  autoPlay loop muted playsInline preload="auto">
-      <source src={`/images/Projetos/${path}`}/>
-    </video>
-  )
+    return (
+        <video className={style.carouselVideoDiv} ref={videoElement} autoPlay loop muted playsInline preload="auto">
+            <source src={`/images/Projetos/${path}`} />
+        </video>
+    );
 }
 
 export default function ProjectsCarousel(props) {
-  const { paths, autoPlay, center } = props;
-  const customRenderItem = (item, props) => <item.type {...item.props} {...props} />;
-
-  return (
-    <Carousel
-      width='85%'
-      className={`${center ? style.projectsCarouselCenter : ''} ${style.projectsCarousel}`}
-      showStatus={false}
-      showThumbs={false}
-      renderItem={customRenderItem}
-      showIndicators={paths.length > 1}
-      autoPlay={autoPlay}
-      infiniteLoop={autoPlay}
-      emulateTouch={autoPlay}
-    >
-
-      {paths.map((path, index) => {
-        {
-          return (path.endsWith(".webp")) ?
-            <CarouselImage path={path} key={index} /> :
-            (path.startsWith("https://")) ?
-              <CarouselYoutubeVideo url={path} key={index} /> :
-              <CarouselVideo path={path} key={index} />
+    const { paths, autoPlay, center } = props;
+    const customRenderItem = (item, props) => <item.type {...item.props} {...props} />;
 
-        }
-      })}
-    </Carousel>
-  );
+    return (
+        <Carousel
+            width="100%"
+            className={`${center ? style.projectsCarouselCenter : ''} ${style.projectsCarousel}`}
+            showStatus={false}
+            showThumbs={false}
+            renderItem={customRenderItem}
+            showIndicators={paths.length > 1}
+            autoPlay={autoPlay}
+            infiniteLoop={autoPlay}
+            emulateTouch={autoPlay}
+        >
+            {paths.map((path, index) => {
+                {
+                    return path.endsWith('.webp') ? (
+                        <CarouselImage path={path} key={index} />
+                    ) : path.startsWith('https://') ? (
+                        <CarouselYoutubeVideo url={path} key={index} />
+                    ) : (
+                        <CarouselVideo path={path} key={index} />
+                    );
+                }
+            })}
+        </Carousel>
+    );
 }

components/projects-components/projectsv2/CubeSats.jsx

@@ -0,0 +1,29 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import React, { useState } from 'react';
+import SondasAeroespaciais from 'components/projects-components/projectsv2/SondasAeroespaciais';
+
+export default function CubeSats() {
+    return (
+        <>
+
+            <SondasAeroespaciais/>
+            {/* Espaços vazios so pra testar mesmo*/}
+            <Grid container sx={{ minHeight: '100vh', 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={12} sx={{ border: 1, borderColor: 'blue', padding: 2 }}>
+                </Grid>
+            </Grid>
+
+            <Grid container sx={{ minHeight: '100vh', 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/Educacional.jsx

@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import React, { useState } from 'react';
+
+export default function Educacional() {
+    // precisa colocar a navbar aqui
+    return (
+        <Grid container>
+            <Grid sm={12} md={6} p={2}>
+                <Typography gutterBottom variant="h2" component="div" >
+                    Educacional
+                </Typography>
+            </Grid>
+        </Grid>
+    )
+}

components/projects-components/projectsv2/Hardware.jsx

@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import React, { useState } from 'react';
+
+export default function Hardware() {
+    // precisa colocar a navbar aqui
+    return (
+        <Grid container>
+            <Grid sm={12} md={6} p={2}>
+                <Typography gutterBottom variant="h2" component="div" >
+                    Hardware
+                </Typography>
+            </Grid>
+        </Grid>
+    )
+}

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>
+  );
+}