New partner footer on some pages and adjustments to the banner

frontend/components/Header.js

@@ -16,9 +16,9 @@ import { useRouter } from 'next/router'
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-  GitHub,
-  Twitter,
-  YouTube,
+  // GitHub,
+  // Twitter,
+  // YouTube,
   Brightness4,
   Brightness7,
   Logout
@@ -171,7 +171,7 @@ function Header({ darkMode, setDarkMode }) {
               </Typography>
             </Grid>
           </Grid>
-          <div className={classes.socialWrapper}>
+          {/* <div className={classes.socialWrapper}>
             <MuiLink
               className={classes.social}
               href="https://www.youtube.com/user/lineamcti"
@@ -199,7 +199,7 @@ function Header({ darkMode, setDarkMode }) {
             >
               <GitHub />
             </MuiLink>
-          </div>
+          </div> */}
         </Grid>
       )}
       <TokenDialog open={open} onClose={handleTokenClose}></TokenDialog>

frontend/components/Partnersfooter.js

@@ -0,0 +1,170 @@
+import React from 'react'
+import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material'
+import useStyles from '../styles/components/Partnersfooter'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import InstagramIcon from '@mui/icons-material/Instagram'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import FacebookIcon from '@mui/icons-material/Facebook'
+
+const XIcon = () => (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' height='20'>
+        <path
+            fill='#263663'
+            d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'
+        />
+    </svg>
+)
+
+function Partnersfooter() {
+    const classes = useStyles()
+
+    return (
+        <footer className={classes.footer}>
+            <div className={classes.footerDivider}></div>
+
+            <Container>
+                <Grid container spacing={4} alignItems='center'>
+                    <Grid md={5}>
+                        <Box className={classes.logoContainer}>
+                            <a href='https://www.linea.org.br/' target='_blank' rel='noreferrer'>
+                                <img src='/linea-logo.png' alt='LIneA logo' width={145} height={120} />
+                            </a>
+                            <Typography className={classes.title} sx={{ fontSize: '24px', color: '#000', fontWeight: 'normal', paddingLeft: '24px' }}>
+                                Associação Laboratório
+                                <br />
+                                Interinstitucional de
+                                <br />
+                                e-Astronomia LIneA
+                            </Typography>
+                        </Box>
+                        <Typography variant='body2' className={classes.address} sx={{ marginTop: '32px' }}>
+                            Av. Pastor Martin Luther King Jr, 126 - Del Castilho
+                            <br />
+                            Nova América Offices, Torre 3000 / sala 817.
+                            <br />
+                            CEP: 20765-000 – Rio de Janeiro - RJ, Brasil
+                        </Typography>
+                        <Typography variant='body1' className={classes.futureText} sx={{ marginTop: '32px' }}>
+                            #PeloFuturoDaCiência &nbsp; #PeloFuturoDaAstronomia
+                        </Typography>
+                    </Grid>
+
+                    <Grid item xs={12} md={1}>
+                        <Box className={classes.verticalDivider}></Box>
+                    </Grid>
+
+                    <Grid md={6} className={classes.partnerSection}>
+                        <Box>
+                            <Typography variant='body2' className={classes.apoioText}>
+                                Support:
+                            </Typography>
+                            <Link href='https://www.linea.org.br/inct#inct' target='_blank'>
+                                <img src='/inct-logo.png' alt='INCT' className={classes.inctLogo} />
+                            </Link>
+                            <Link href='https://www.gov.br/capes/pt-br' target='_blank'>
+                                <img src='/capes-logo.png' alt='CAPES' className={classes.partnerLogo} />
+                            </Link>
+                            <Link href='https://www.gov.br/cnpq/pt-br' target='_blank'>
+                                <img src='/cnpq-logo.png' alt='CNPq' className={classes.partnerLogo} />
+                            </Link>
+                            <Link href='https://www.faperj.br' target='_blank'>
+                                <img src='/faperj-logo.png' alt='FAPERJ' className={classes.partnerLogo} />
+                            </Link>
+                            <Link href='http://www.finep.gov.br' target='_blank'>
+                                <img src='/finep-logo.png' alt='FINEP' className={classes.partnerLogo} />
+                            </Link>
+                        </Box>
+
+                        <Box className={classes.contactSection}>
+                            <Typography variant='body1' className={classes.contactInfo}>
+                                e-mail:{' '}
+                                <Link
+                                    href='mailto:[email protected]'
+                                    sx={{
+                                        textDecoration: 'none',
+                                        color: '#000',
+                                        mr: '16px',
+                                        '&:hover': { textDecoration: 'underline' }
+                                    }}
+                                    className={classes.link}
+                                >
+                                    [email protected]
+                                </Link>
+                            </Typography>
+                            <Typography variant='body1' className={classes.contactInfo}>
+                                tel:{' '}
+                                <Link
+                                    href='tel:+5521969379224'
+                                    sx={{
+                                        fontWeight: 'bold',
+                                        textDecoration: 'none',
+                                        color: '#000',
+                                        '&:hover': { textDecoration: 'underline' }
+                                    }}
+                                    className={classes.link}
+                                >
+                                    +55 21 96937 9224
+                                </Link>
+                            </Typography>
+                        </Box>
+
+                        <Box className={classes.socialIcons}>
+                            <IconButton
+                                href='https://www.linkedin.com/company/linea-astronomia'
+                                target='_blank'
+                                sx={{ color: '#283664' }}
+                                className={`${classes.socialIcon} ${classes.linkedinHover}`}
+                            >
+                                <LinkedInIcon />
+                            </IconButton>
+                            <IconButton href='https://x.com/linea_org' target='_blank' className={`${classes.socialIcon}`}>
+                                <XIcon />
+                            </IconButton>
+                            <IconButton
+                                href='https://www.instagram.com/linea_org/'
+                                target='_blank'
+                                sx={{ color: '#283664' }}
+                                className={`${classes.socialIcon} ${classes.instagramHover}`}
+                            >
+                                <InstagramIcon />
+                            </IconButton>
+                            <IconButton
+                                href='https://www.youtube.com/@linea_org'
+                                target='_blank'
+                                sx={{ color: '#283664' }}
+                                className={`${classes.socialIcon} ${classes.youtubeHover}`}
+                            >
+                                <YouTubeIcon />
+                            </IconButton>
+                            <IconButton
+                                href='https://www.facebook.com/linea.org'
+                                target='_blank'
+                                sx={{ color: '#283664' }}
+                                className={`${classes.socialIcon} ${classes.facebookHover}`}
+                            >
+                                <FacebookIcon />
+                            </IconButton>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Container>
+
+            <Typography variant='body2' className={classes.bottomText} sx={{ marginTop: '40px' }}>
+                LIneA - 2024 - All rights reserved |{' '}
+                <Link
+                    href='https://www.linea.org.br/politica-de-privacidade'
+                    target='_blank'
+                    sx={{
+                        color: '#000',
+                        textDecoration: 'none',
+                        '&:hover': { textDecoration: 'underline' }
+                    }}
+                    className={classes.link}
+                >
+                    Privacy Policy
+                </Link>
+            </Typography>
+        </footer>
+    )
+}
+export default Partnersfooter

frontend/pages/about.js

@@ -8,6 +8,7 @@ import CardContent from '@mui/material/CardContent'
 
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/about'
+import Partnersfooter from '../components/Partnersfooter'
 
 export default function About() {
   const classes = useStyles()
@@ -130,6 +131,7 @@ export default function About() {
               </Typography>
             </CardContent>
           </Card>
+      <Partnersfooter />
         </Grid>
       </Grid>
     </Container>

frontend/pages/contact.js

@@ -8,6 +8,7 @@ import CardContent from '@mui/material/CardContent'
 
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/contact'
+import Partnersfooter from '../components/Partnersfooter'
 
 export default function Contact() {
   const classes = useStyles()
@@ -47,6 +48,7 @@ export default function Contact() {
               </Typography>
             </CardContent>{' '}
           </Card>
+          <Partnersfooter />
         </Grid>
       </Grid>
     </Container>

frontend/pages/tutorials.js

@@ -9,6 +9,7 @@ import Divider from '@mui/material/Divider'
 
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/tutorials'
+import Partnersfooter from '../components/Partnersfooter'
 
 export default function Tutorials() {
   const classes = useStyles()
@@ -153,6 +154,7 @@ export default function Tutorials() {
           </Card>
         </Grid>
       </Grid>
+      <Partnersfooter />
     </Container>
   )
 }

frontend/styles/components/Header.js

@@ -49,6 +49,7 @@ const useStyles = makeStyles(theme => ({
     background: 'url(/header.jpg)',
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
+    height: '40vh',
     // backgroundPositionY: '-400px'
     // height: '30%'
     // marginBottom: theme.spacing(4)

frontend/styles/components/Partnersfooter.js

@@ -0,0 +1,117 @@
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles((theme) => ({
+    footer: {
+        padding: theme.spacing(4, 0)
+    },
+    footerDivider: {
+        width: '100%',
+        maxWidth: '1000px',
+        height: '0.5px',
+        backgroundColor: '#ccc',
+        margin: '0 auto',
+        marginBottom: theme.spacing(12)
+    },
+    verticalDivider: {
+        height: '110px',
+        width: '0.5px',
+        backgroundColor: '#ccc',
+        margin: '0 auto',
+        position: 'relative',
+        top: '-80px'
+    },
+    logoContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingLeft: theme.spacing(4)
+    },
+    address: {
+        fontSize: '14px',
+        color: '#000',
+        paddingLeft: theme.spacing(10)
+    },
+    futureText: {
+        mT: '32px',
+        background: '-webkit-linear-gradient(120deg, #0989cb, #31297f)',
+        WebkitBackgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        fontSize: '16px',
+        fontWeight: 'normal',
+        textAlign: 'left',
+        paddingLeft: theme.spacing(5),
+        wordSpacing: '0.8rem',
+        mB: '10px'
+    },
+    partnerSection: {
+        textAlign: 'left',
+        marginBottom: theme.spacing(2)
+    },
+    apoioText: {
+        color: '#a3a3a3',
+        fontSize: '.9rem',
+        textAlign: 'left'
+    },
+    partnerLogo: {
+        width: '100px',
+        height: '60px',
+        margin: theme.spacing(1),
+        filter: 'grayscale(100%)',
+        transition: 'filter 0.3s ease',
+        '&:hover': {
+            filter: 'grayscale(0%)'
+        }
+    },
+    inctLogo: {
+        width: '60px',
+        height: '60px',
+        margin: theme.spacing(1.5),
+        filter: 'grayscale(100%)',
+        transition: 'filter 0.3s ease',
+        '&:hover': {
+            filter: 'grayscale(0%)'
+        }
+    },
+    contactSection: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: theme.spacing(6)
+    },
+    socialIcons: {
+        marginTop: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    socialIcon: {
+        width: '68px',
+        height: '48px'
+    },
+    linkedinHover: {
+        '&:hover': {
+            color: '#0077B5'
+        }
+    },
+    instagramHover: {
+        '&:hover': {
+            color: '#E1306C'
+        }
+    },
+    youtubeHover: {
+        '&:hover': {
+            color: '#FF0000'
+        }
+    },
+    facebookHover: {
+        '&:hover': {
+            color: '#1877F2'
+        }
+    },
+    bottomText: {
+        textAlign: 'center',
+        color: '#a3a3a3',
+        fontSize: '0.875rem'
+    },
+}))
+
+export default useStyles