2-DR1-AT-fix

Author: mattolivr

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/App.jsx

@@ -4,16 +4,51 @@ import Biografia from './components/biografia'
 import Propostas from './components/propostas'
 import Agenda from './components/agenda'
 import Footer from './components/footer'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { useMemo } from 'react'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import CssBaseline from '@mui/material/CssBaseline'
 
 function App() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? 'dark' : 'light',
+          primary: {
+            main: '#df3838',
+          },
+          secondary: {
+            main: '#222222',
+          },
+        },
+        transitions: {
+          duration: {
+            shortest: prefersReducedMotion ? 0 : 150,
+            shorter: prefersReducedMotion ? 0 : 200,
+            short: prefersReducedMotion ? 0 : 250,
+            standard: prefersReducedMotion ? 0 : 300,
+            complex: prefersReducedMotion ? 0 : 375,
+            enteringScreen: prefersReducedMotion ? 0 : 225,
+            leavingScreen: prefersReducedMotion ? 0 : 195,
+          },
+        },
+      }),
+    [prefersDarkMode, prefersReducedMotion]
+  )
+
   return (
-    <>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
       <Header />
       <Biografia />
       <Propostas />
       <Agenda />
       <Footer />
-    </>
+    </ThemeProvider>
   )
 }
 

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/biografia/style.module.css

@@ -59,6 +59,13 @@
 
   p {
     line-height: 1.6;
+    color: var(--text);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .destaque::after {
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%);
   }
 }
 

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/footer/index.jsx

@@ -39,6 +39,7 @@ export default function Footer() {
 
       <div className={style.copyright}>
         <p>Marco Madureira - Por: Matheus de Oliveira</p>
+        <small>Imagens do candidato Marco Madureira foram gerados utilizando Gemini Nano Banana. <br /> Outras imagens, fonte: Unsplash</small>
       </div>
     </footer>
   )

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/footer/style.module.css

@@ -3,6 +3,10 @@
   color: white;
   padding: 32px 16px 16px;
   margin-top: 48px;
+
+  small {
+    color: #a3a3a3;
+  }
 }
 
 .conteudoFooter {
@@ -45,6 +49,16 @@
   transition: all 0.3s ease;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .icones a {
+    transition: none;
+  }
+
+  .icones a:hover {
+    transform: none;
+  }
+}
+
 .icones a:hover {
   background-color: var(--primary);
   transform: translateY(-4px);

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/header/index.jsx

@@ -3,8 +3,10 @@ import style from './style.module.css';
 export default function Header() {
   return (
     <header className={style.header}>
-      <img src="./src/assets/logo-extended.png" alt="Logo Marco Madureira" />
-      <h1>Marco Madureira</h1>
+      <div className={style.logoContainer}>
+        <img src="./src/assets/logo.png" alt="Logo Marco Madureira" className={style.logo} />
+        <h1 className={style.titulo}>Marco Madureira</h1>
+      </div>
       <ul>
         <li><a href="#biografia">Biografia</a></li>
         <li><a href="#propostas">Propostas</a></li>

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/header/style.module.css

@@ -10,13 +10,30 @@
   padding-top: 16px;
 }
 
-.header h1 {
-  display: none;
+@media (prefers-color-scheme: dark) {
+  .header {
+    background-color: #1a1a1a;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
 }
 
-.header img {
-  align-self: center;
+.logo {
   height: 60px;
+  width: auto;
+}
+
+.titulo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
 }
 
 .header ul {
@@ -38,7 +55,7 @@
     flex-grow: 1;
 
     padding: 8px 0;
-    color: var(--text-color);
+    color: var(--text);
     font-weight: 700;
     font-size: 0.9rem;
     text-decoration: none;

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/propostas/style.module.css

@@ -24,6 +24,14 @@
     background-color: #f5f5f5;
     border-left: 4px solid var(--primary);
     font-weight: 500;
+    color: var(--text);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .listaOutrasPropostas li {
+    background-color: #2c2c2c;
+    color: var(--text);
   }
 }
 

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/components/section/style.module.css

@@ -38,6 +38,7 @@
     margin-bottom: 16px;
     padding-bottom: 8px;
     padding-inline: 2px;
+    color: var(--text);
 
     border-bottom: 2px solid var(--primary);
   }

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-AT/src/index.css

@@ -3,9 +3,21 @@
   --secondary: #222222;
 
   --background: #f0f0f0;
+  --card-background: #ffffff;
 
   --border: #e0e0e0;
   --text: #141414;
+  --text-secondary: #666666;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #1a1a1a;
+    --card-background: #2c2c2c;
+    --border: #404040;
+    --text: #f0f0f0;
+    --text-secondary: #b0b0b0;
+  }
 }
 
 * {