navbar y poner bonito y otras cosas

.env

@@ -13,6 +13,6 @@
 # NEXT_PUBLIC_LOGIN_REDIRECT_URL=http://localhost:3000/post/CreateProperty
 # NEXT_PUBLIC_LOGOUT_REDIRECT_URL=http://localhost:3000
 
-VITE_AUTH0_AUDIENCE=https://geomapp-auth0.com
-VITE_AUTH0_DOMAIN=dev-cry4u1cfzw5tvn48.us.auth0.com
-VITE_AUTH0_CLIENT_ID=emBP1HbVJ1ltKKluxpiVA0wye8USrA4Z
+VITE_AUTH0_AUDIENCE=https://geomap/
+VITE_AUTH0_DOMAIN=dev-7w1no2zl1opt24if.us.auth0.com
+VITE_AUTH0_CLIENT_ID=QrElcRF9AI2H6dRBwCChbc04JvtKygJo

src/components/Navbar.jsx

@@ -1,58 +1,71 @@
-import React from 'react';
+navbar.jsx
+import React, { useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import '../styles/navbar.css'; // Asegúrate de que la ruta del CSS es correcta
-import '../styles/footer.css';
 import { Link } from 'react-router-dom';
 import logo from '../assets/logoo.png';
 import whatsapp from '../assets/whatsapp.png';
+import { FaBars } from 'react-icons/fa'; // Importar el icono de hamburguesa
 
 function NavBar() {
-    const { loginWithRedirect, logout, isAuthenticated } = useAuth0();
+    const { loginWithRedirect, isAuthenticated } = useAuth0();
+    const [menuOpen, setMenuOpen] = useState(false); // Estado para manejar el menú
+
+    const toggleMenu = () => {
+        setMenuOpen(!menuOpen); // Alternar estado del menú
+    };
 
     return (
         <div className="navbar">
-
             <div className="navbar-content">
+                <Link to="/">
+                    <img src={logo} className="navbar-logo" alt="Logo" />
+                </Link>
                 <div className="navbar-links">
-                  <Link to="/">
-                    <img src={logo} className="navbar-logo"></img>
-                  </Link>
                     <Link to="/inicio" className="footer-link">Inicio</Link>
-
                     <Link to="/mapa-navegacion" className="footer-link">Mapa</Link>
-
-                    {/* <a href="/publicar">Publicar</a> */}
                     <Link to="/servicios" className="footer-link">Servicios</Link>
                     <Link to="/cerca" className="footer-link">A mi alrededor</Link>
+
                     {isAuthenticated && (
-                        <Link to="/mi-perfil" className="footer-link">Mi Perfil</Link>
-                    )}
-                    {isAuthenticated && (
-                        <Link to="/publicaciones" className="footer-link">Mis Publicaciones</Link>
+                        <>
+                            <Link to="/mi-perfil" className="footer-link">Mi Perfil</Link>
+                            <Link to="/publicaciones" className="footer-link">Mis Publicaciones</Link>
+                            <Link to="/favoritos" className="footer-link">Mis Favoritos</Link>
+                            <Link to="/notificaciones" className="footer-link">Enviar notificaciones a usuarios</Link>
+                        </>
                     )}
-                    {isAuthenticated && (
-                        <Link to="/favoritos" className="footer-link">Mis Favoritos</Link>
+
+                    {!isAuthenticated && (
+                        <a className="footer-link" onClick={loginWithRedirect}>Iniciar sesión</a>
                     )}
+                </div>
+                <FaBars className="navbar-hamburger" onClick={toggleMenu} /> {/* Icono de hamburguesa */}
+            </div>
+            <div className="whatsapp-container" onClick={() => alert('Connecting to WhatsApp')}>
+                <img src={whatsapp} className="whatsapp-icon" alt="WhatsApp" />
+            </div>
+            {menuOpen && ( // Mostrar el menú si está abierto
+                <div className="navbar-dropdown">
+                    <Link to="/inicio" className="footer-link" onClick={toggleMenu}>Inicio</Link>
+                    <Link to="/mapa-navegacion" className="footer-link" onClick={toggleMenu}>Mapa</Link>
+                    <Link to="/servicios" className="footer-link" onClick={toggleMenu}>Servicios</Link>
+                    <Link to="/cerca" className="footer-link" onClick={toggleMenu}>A mi alrededor</Link>
+
                     {isAuthenticated && (
-                        <Link to="/notificaciones" className="footer-link">Enviar notificaciones a usuarios</Link>
+                        <>
+                            <Link to="/mi-perfil" className="footer-link" onClick={toggleMenu}>Mi Perfil</Link>
+                            <Link to="/publicaciones" className="footer-link" onClick={toggleMenu}>Mis Publicaciones</Link>
+                            <Link to="/favoritos" className="footer-link" onClick={toggleMenu}>Mis Favoritos</Link>
+                            <Link to="/notificaciones" className="footer-link" onClick={toggleMenu}>Enviar notificaciones a usuarios</Link>
+                        </>
                     )}
-
-                    {!isAuthenticated ? (
-                        <a className="footer-link" onClick={loginWithRedirect} >Iniciar sesión</a>
-                    ) : (
-                        <a className="footer-link" onClick={() => logout({ returnTo: window.location.origin })}>Cerrar sesión</a>
+
+                    {!isAuthenticated && (
+                        <a className="footer-link" onClick={() => { loginWithRedirect(); toggleMenu(); }}>Iniciar sesión</a>
                     )}
-
                 </div>
-
-            </div>
-            <div onClick={() => alert('Connecting to WhatsApp')}>
-                <img src={whatsapp} className="navbar-logo"></img>
-
-            </div>
+            )}
         </div>
     );
-}
-
-export default NavBar;
-
+}

src/pages/servicios.jsx

@@ -53,7 +53,6 @@ const Servicios = () => {
             <p>{serviceInfo[selectedService]}</p>
           </div>
         )}
-        <br />
         <button className="button" onClick={handleClick}>
           Publica tu servicio aquí
         </button>
@@ -63,4 +62,4 @@ const Servicios = () => {
   );
 };
 
-export default Servicios;
+export default Servicios;

src/pages/users/favoritos.jsx

@@ -47,9 +47,12 @@ function Favoritos() {
   };
 
   return (
+
     <div id="favoritos-container">
       <Navbar />
-      <h1>Mis Favoritos</h1>
+      <header className="favoritos-header">
+        <h1> Mis Favoritos</h1>
+      </header>
       <div className="favoritos-list">
         {favoritos.map((favorito) => (
           <div className="favoritos-card" key={favorito.id}>

src/pages/users/perfil.jsx

@@ -2,37 +2,56 @@ import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
-import '../../styles/users/perfil.css'; // Verifica que la ruta al CSS sea correcta
+import '../../styles/users/perfil.css';
 
 const Perfil = () => {
-  const { user, isAuthenticated, isLoading } = useAuth0();
+  const { user, isAuthenticated, isLoading, logout } = useAuth0();
 
   if (isLoading) {
-    return <div>Cargando...</div>;
+    return <div className="loading-screen">Cargando...</div>;
   }
 
   return (
     isAuthenticated ? (
       <div id="perfil-container">
         <Navbar />
-        <div className="perfil-info">
-          <h1>Mi Perfil</h1>
-          <img src={user.picture} alt={user.name} className="perfil-avatar" />
-          <h2>{user.name}</h2>
-          <p>Correo: {user.email}</p>
-          <p>Dirección: Calle Sin Salida 987, Santiago, Chile</p>
-          <p>Publicaciones activas: 3</p>
-          <p>Publicaciones por vencer: 1</p>
-          <p>Publicaciones vencidas: 1</p>
-
+        <div className="perfil-content">
+          <div className="perfil-header">
+            <h1>Mi Perfil</h1>
+            <button
+              className="cerrar-sesion-button"
+              onClick={() => logout({ returnTo: window.location.origin })}
+            >
+              Cerrar sesión
+            </button>
+          </div>
+          <div className="perfil-body">
+            <img src={user.picture} alt={user.name} className="perfil-avatar" />
+            <h2 className="perfil-name">{user.name}</h2>
+            <p className="perfil-email">{user.email}</p>
+            <p className="perfil-info"><strong>Dirección:</strong> Calle Sin Salida 987, Santiago, Chile</p>
+            <div className="perfil-stats">
+              <div className="stat">
+                <p>Publicaciones activas</p>
+                <span>3</span>
+              </div>
+              <div className="stat">
+                <p>Publicaciones por vencer</p>
+                <span>1</span>
+              </div>
+              <div className="stat">
+                <p>Publicaciones Vencidas</p>
+                <span>1</span>
+              </div>
+            </div>
+          </div>
         </div>
-
         <Footer />
       </div>
     ) : (
       <div>No está autenticado</div>
     )
   );
-}
+};
 
-export default Perfil;
+export default Perfil;

src/pages/users/publicar.jsx

@@ -61,6 +61,7 @@ function Publicar() {
         switch (stepIndex) {
             case 0:
                 return (
+                <Box className="form-control-container">
                     <FormControl fullWidth sx={{ maxWidth: 300 }} error={!!error}>
                         <InputLabel id="type-select-label">Tipo de Publicación</InputLabel>
                         <Select
@@ -76,6 +77,7 @@ function Publicar() {
                         </Select>
                         {error && <FormHelperText>{error}</FormHelperText>}
                     </FormControl>
+                </Box>
                 );
             case 1:
                 if (selectedType === 'turismo') {

src/pages/users/zcentros.jsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
+import '../../styles/users/zcentros.css';
+
 import {
   TextField,
   MenuItem,
@@ -311,7 +313,7 @@ function CentrosDeportivosForm({ handleNext }) {
             )}
 
             <div>
-            <Button type="submit" variant="contained" color="primary" style={{ marginTop: '20px' }}>
+            <Button type="submit" variant="contained" className="submit-button">
                 Enviar
             </Button>
             </div>

src/pages/users/zeventos.jsx

@@ -268,7 +268,7 @@ function EventosForm({ handleNext }) {
                 ))}
             </div>
 
-            <Button variant="contained" color="primary" type="submit">
+            <Button type="submit" variant="contained" className="submit-button">
                 Enviar
             </Button>
         </form>

src/pages/users/zgastronomia.jsx

@@ -333,7 +333,7 @@ function GastronomiaForm({ handleNext }) {
             </div>
 
             <div>
-            <Button type="submit" variant="contained" color="primary" style={{ marginTop: '20px' }}>
+            <Button type="submit" variant="contained" className="submit-button">
                 Enviar
             </Button>
             </div>

src/pages/users/zhospedaje.jsx

@@ -307,8 +307,8 @@ function HospedajeForm({ handleNext }) {
         label="Incluye Toallas y Sábanas"
       />
       <div>
-      <Button type="submit" variant="contained" color="primary" style={{ marginTop: '20px' }}>
-        Enviar
+      <Button type="submit" variant="contained" className="submit-button">
+          Enviar
       </Button>
       </div>
     </form>

src/pages/users/zservicios.jsx

@@ -283,7 +283,7 @@ function ServiciosForm({ handleNext }) {
             )}
 
             <div>
-            <Button type="submit" variant="contained" color="primary" style={{ marginTop: '20px' }}>
+            <Button type="submit" variant="contained" className="submit-button">
                 Enviar
             </Button>
             </div>

src/pages/users/zturismo.jsx

@@ -1,6 +1,8 @@
 /*import React, { useState } from 'react';*/
 import { useState } from 'react';
 import PropTypes from 'prop-types';
+import '../../styles/users/zturismo.css';
+
 import {
   TextField,
   MenuItem,
@@ -297,7 +299,7 @@ function TurismoForm({ handleNext }) {
       )}
 
       <div>
-      <Button type="submit" variant="contained" color="primary" style={{ marginTop: '20px' }}>
+      <Button type="submit" variant="contained" className="submit-button">
         Enviar
       </Button>
       </div>

src/styles/helloworld.css

@@ -1,10 +1,11 @@
+
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
-
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Usar San Francisco */
 }
 
 #hello-world-container {

src/styles/mapa.css

@@ -1,4 +1,7 @@
 /* Contenedor del mapa */
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Usar San Francisco */
+}
 #map {
   height: 300px; /* Altura del mapa */
   width: 50%;   /* Ancho del mapa */