mudanças navbar e footer #9 #3

navbar: arrumado bug de quando selecionar a pagina não ficar bold, footer: removido fundo do footer e arrumado bug de ficar branco
IDEjr · Sep 25, 2024 · 8fad85f · 8fad85f
1 parent 3e5c569
commit 8fad85f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 25 deletions.
diff --git a/src/app/sobre-nos/page.js b/src/app/sobre-nos/page.js
@@ -1,10 +1,9 @@
 import PurposeText from "@/components/sobreNos/PurposeText"
 import AboutFaisca from "@components/sobreNos/AboutFaisca"
 import MembersArea from "@components/sobreNos/MembersArea"
-import MakeCard from "@/components/sobreNos/MembersArea/MakeCard"
 import Structure from "@/components/sobreNos/Structure"
 import MEJ from "@components/sobreNos/MEJ"
-import foto from './../../../public/img/sobreNos/Foto01.png'
+import MEJO from "@components/sobreNos/MEJO"
 
 import styles from "@styles/pages.module.css"
 
@@ -14,8 +13,8 @@ function SobreNos(){
             <PurposeText />
             <AboutFaisca />
             <MembersArea />
-            <Structure />
-            <MEJ />
+            <Structure/> 
+            <MEJO/>
         </div>
     )
 }

diff --git a/src/components/Layout/Footer/Footer.module.css b/src/components/Layout/Footer/Footer.module.css
@@ -1,8 +1,10 @@
-.footer{
+.footer {
     padding: 2em;
-    background-color: #3f241c;
-    color: #d45827;
-    text-align: center;
+    position: absolute;
+    margin-top: -7%; 
+    background: transparent;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .social_list{
@@ -22,4 +24,11 @@
 .social_list svg{
     font-size: 1.5em;
     cursor: pointer;
-}
+}
+
+@media (max-width: 576px) {
+    .footer {
+        padding: 2em;
+        margin-top: -25%; 
+    }
+  }
diff --git a/src/components/Layout/Footer/index.js b/src/components/Layout/Footer/index.js
@@ -4,34 +4,35 @@ import instagramIcon from '@img/footerIcons/instagramIcon.png';
 import linkedinIcon from '@img/footerIcons/linkedinIcon.png';
 import behanceIcon from '@img/footerIcons/behanceIcon.png';
 import Image from 'next/image';
+import pageStyles from '../../../styles/pages.module.css'; 
 
 function Footer(){
     return (
-        <footer className={styles.footer}>
+        <footer className={`${styles.footer} ${pageStyles.footer}`}>
             <ul className={styles.social_list}>
                 <li>
                     <a href="https://mail.google.com/" target="_blank" rel="noopener noreferrer">
-                        <Image src={emailIcon} alt="emailIcon" style={{ width: '24px', height: '24px', color: '#d45827' }} />
+                        <Image src={emailIcon} alt="emailIcon" width={24} height={24} />
                     </a>
                 </li>
                 <li>
                     <a href="https://www.instagram.com/faiscadesignjr/" target="_blank" rel="noopener noreferrer">
-                        <Image src={instagramIcon} alt="instagramIcon" style={{ width: '24px', height: '24px', color: '#d45827' }} />
+                        <Image src={instagramIcon} alt="instagramIcon" width={24} height={24} />
                     </a>
                 </li>
                 <li>
-                    <a href="https://br.linkedin.com/company/faiscadesignjunior" target="_blank" rel="noopener noreferrer">
-                        <Image src={linkedinIcon} alt="linkedinIcon" style={{ width: '24px', height: '24px', color: '#d45827' }} /> 
+                    <a href="https://br.linkedin.com/company/faiscadesignjr" target="_blank" rel="noopener noreferrer">
+                        <Image src={linkedinIcon} alt="linkedinIcon" width={24} height={24} /> 
                     </a>
                 </li>
                 <li>
                     <a href="https://www.behance.net/FaiscaDesignJunior" target="_blank" rel="noopener noreferrer">
-                        <Image src={behanceIcon} alt="behanceIcon" style={{ width: '24px', height: '24px', color: '#d45827' }} />
+                        <Image src={behanceIcon} alt="behanceIcon" width={24} height={24} />
                     </a>
                 </li>
             </ul>
         </footer>
     );
 }
 
-export default Footer
+export default Footer;
diff --git a/src/components/Layout/Navbar/Navbar.module.css b/src/components/Layout/Navbar/Navbar.module.css
@@ -27,6 +27,7 @@
 .link {
     text-decoration: none;
     color: white;
+    font-weight: 100;
 }
 
 .bold {

diff --git a/src/components/Layout/Navbar/index.js b/src/components/Layout/Navbar/index.js
@@ -1,14 +1,17 @@
-"use client"; 
+"use client";
 
 import React, { useState } from 'react';
 import Container from '../Container';
 import styles from './Navbar.module.css';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation'; // Importa o hook para pegar o caminho atual
 
 function Navbar() {
   const [selectedItem, setSelectedItem] = useState('');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
+  const pathname = usePathname(); // Usa o hook para obter o pathname atual
+
   const handleItemClick = (item) => {
     setSelectedItem(item);
     setIsMobileMenuOpen(false);
@@ -33,35 +36,31 @@ function Navbar() {
           <li>
             <Link
               href="/"
-              className={`${styles.link} ${selectedItem === 'inicio' ? styles.bold : ''}`}
-              onClick={() => handleItemClick('inicio')}
+              className={`${styles.link} ${pathname === '/' ? styles.bold : ''}`}
             >
               início
             </Link>
           </li>
           <li>
             <Link
               href="/sobre-nos"
-              className={`${styles.link} ${selectedItem === 'sobrenos' ? styles.bold : ''}`}
-              onClick={() => handleItemClick('sobrenos')}
+              className={`${styles.link} ${pathname === '/sobre-nos' ? styles.bold : ''}`}
             >
               sobre nós
             </Link>
           </li>
           <li>
             <Link
               href="/portfolio"
-              className={`${styles.link} ${selectedItem === 'portfolio' ? styles.bold : ''}`}
-              onClick={() => handleItemClick('portfolio')}
+              className={`${styles.link} ${pathname === '/portfolio' ? styles.bold : ''}`}
             >
               portfólio
             </Link>
           </li>
           <li>
             <Link
               href="/contato"
-              className={`${styles.link} ${selectedItem === 'contato' ? styles.bold : ''}`}
-              onClick={() => handleItemClick('contato')}
+              className={`${styles.link} ${pathname === '/contato' ? styles.bold : ''}`}
             >
               contato
             </Link>
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ @@
     .link {
         text-decoration: none;
         color: white;
+        font-weight: 100;
     }
     .bold {
@@ Expand Down @@