2-DR1.TP3.13

Author: mattolivr

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/App.jsx

@@ -1,6 +1,7 @@
 import './global.css';
 import './styles.css';
 import './App.css';
+import Menu from './components/Menu/Menu';
 
 function App() {
   return (
@@ -12,9 +13,11 @@ function App() {
         </div>
       </header>
 
+      <Menu />
+
       <main className="app-main">
         <div className="container">
-          <section className="app-section">
+          <section id="sobre" className="app-section">
             <div className="card">
               <h2>Sobre o Projeto</h2>
               <p>
@@ -29,7 +32,7 @@ function App() {
             </div>
           </section>
 
-          <section className="app-section">
+          <section id="recursos" className="app-section">
             <h2>Recursos Principais</h2>
             <div className="app-grid">
               <div className="card">
@@ -47,7 +50,7 @@ function App() {
             </div>
           </section>
 
-          <section className="app-section">
+          <section id="tecnologias" className="app-section">
             <div className="card">
               <h2>Tecnologias Utilizadas</h2>
               <ul className="app-list">
@@ -59,7 +62,7 @@ function App() {
             </div>
           </section>
 
-          <section className="app-section">
+          <section id="contato" className="app-section">
             <div className="card">
               <h2>Formulário de Contato</h2>
               <form className="app-form">

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Menu/Menu.jsx

@@ -0,0 +1,24 @@
+import './menu.css';
+
+function Menu() {
+  return (
+    <nav className="menu">
+      <ul className="menu-list">
+        <li className="menu-item">
+          <a href="#sobre" className="menu-link">Sobre</a>
+        </li>
+        <li className="menu-item">
+          <a href="#recursos" className="menu-link">Recursos</a>
+        </li>
+        <li className="menu-item">
+          <a href="#tecnologias" className="menu-link">Tecnologias</a>
+        </li>
+        <li className="menu-item">
+          <a href="#contato" className="menu-link">Contato</a>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Menu;

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Menu/menu.css

@@ -0,0 +1,93 @@
+/* Estilos do componente Menu - Mobile First */
+
+.menu {
+  background-color: var(--bg-card);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.menu-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-item {
+  width: 100%;
+}
+
+.menu-link {
+  display: block;
+  padding: 16px 24px;
+  color: var(--text-primary);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 16px;
+  border-bottom: 1px solid var(--border-color);
+  transition: all 0.2s;
+}
+
+.menu-link:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--accent-primary);
+  text-decoration: none;
+  border-left: 3px solid var(--accent-primary);
+  padding-left: 21px;
+}
+
+/* Tablets - até 992px */
+@media (min-width: 576px) and (max-width: 992px) {
+  .menu-list {
+    flex-direction: row;
+  }
+
+  .menu-item {
+    width: auto;
+    flex: 1;
+  }
+
+  .menu-link {
+    text-align: center;
+    border-bottom: none;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .menu-item:last-child .menu-link {
+    border-right: none;
+  }
+
+  .menu-link:hover {
+    border-left: none;
+    border-bottom: 3px solid var(--accent-primary);
+    padding-left: 24px;
+    padding-bottom: 13px;
+  }
+}
+
+/* Desktop - acima de 992px */
+@media (min-width: 992px) {
+  .menu-list {
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1128px;
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+
+  .menu-item {
+    width: auto;
+  }
+
+  .menu-link {
+    border-bottom: none;
+    padding: 20px 24px;
+  }
+
+  .menu-link:hover {
+    border-left: none;
+    border-bottom: 3px solid var(--accent-primary);
+    padding-left: 24px;
+    padding-bottom: 17px;
+  }
+}

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/global.css

@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Variáveis globais - LinkedIn Dark + GitHub */
 :root {
   --bg-primary: #1b1f23;