Merge pull request #34 from iic2154-uc-cl/development2dome

cambios dome

src/components/GoogleMap.jsx

@@ -64,8 +64,8 @@ const GoogleMapComponent = ({ onMapLoad, filterType, places }) => {
   const iconos = {
     propiedad: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
     camping: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
-    servicios_y_oficios: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
-    eventos: 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
+    servicios_y_oficios: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
+    eventos: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
   };
 
   /*

src/components/Simbologia.jsx

@@ -1,22 +1,24 @@
 import React, { useState } from 'react';
 import deportes from '../assets/deportes.png';
-import eventos from '../assets/eventos.png';
+import eventos from '../assets/eventos2.png';
 import gastronomia from '../assets/gastronomia.png';
-import hospedaje from '../assets/hospedaje.png';
+import hospedaje from '../assets/hospedaje2.png';
 import servicios from '../assets/servicios.png';
 import turismo from '../assets/turismo.png';
+import camping from '../assets/camping2.png';
 
 const Simbologia = () => {
   const [selectedTitle, setSelectedTitle] = useState('');
 
   // Definimos un objeto para asociar imágenes con títulos
   const iconos = [
-    { src: deportes, title: 'Deportes' },
-    { src: eventos, title: 'Eventos' },
-    { src: gastronomia, title: 'Gastronomía' },
+    // { src: deportes, title: 'Deportes' },
     { src: hospedaje, title: 'Hospedaje' },
-    { src: servicios, title: 'Servicios Comunitarios' },
-    { src: turismo, title: 'Turismo' },
+    { src: camping, title: 'Camping' },
+    { src: servicios, title: 'Servicios y Oficios' },
+    { src: eventos, title: 'Eventos' },
+    // { src: gastronomia, title: 'Gastronomía' },
+    // { src: turismo, title: 'Turismo' },
   ];
 
   const handleClick = (title) => {

src/pages/servicios.jsx

@@ -3,10 +3,10 @@ import '../styles/servicios.css';
 import { useAuth0 } from '@auth0/auth0-react';
 import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
-import deportes from '../assets/deportes.png';
-import eventos from '../assets/eventos.png';
+import camping from '../assets/camping2.png';
+import eventos from '../assets/eventos2.png';
 import gastronomia from '../assets/gastronomia.png';
-import hospedaje from '../assets/hospedaje.png';
+import hospedaje from '../assets/hospedaje2.png';
 import servicios from '../assets/servicios.png';
 import turismo from '../assets/turismo.png';
 import { useNavigate } from 'react-router-dom';
@@ -32,6 +32,7 @@ const Servicios = () => {
     hospedaje: 'Encuentra alojamientos cómodos y asequibles en tu destino deseado.',
     servicios: 'Accede a una amplia gama de servicios locales que facilitarán tu vida.',
     turismo: 'Explora las atracciones turísticas más populares y disfruta de tu viaje al máximo.',
+    camping: 'Disfruta de la naturaleza y acampa en lugares designados para experimentar al aire libre. Encuentra sitios ideales para montar tiendas, hacer fogatas y vivir aventuras en entornos naturales.',
   };
 
   return (
@@ -55,12 +56,13 @@ const Servicios = () => {
 
         <h3 className="business-promotion-title">Servicios disponibles</h3>
         <div className="icon-container">
-          <img src={deportes} alt="Deportes" onClick={() => handleIconClick('deportes')} />
-          <img src={eventos} alt="Eventos" onClick={() => handleIconClick('eventos')} />
-          <img src={gastronomia} alt="Gastronomía" onClick={() => handleIconClick('gastronomia')} />
           <img src={hospedaje} alt="Hospedaje" onClick={() => handleIconClick('hospedaje')} />
+          <img src={camping} alt="Camping" onClick={() => handleIconClick('camping')} />
+          {/* <img src={deportes} alt="Deportes" onClick={() => handleIconClick('deportes')} /> */}
+          {/* <img src={gastronomia} alt="Gastronomía" onClick={() => handleIconClick('gastronomia')} /> */}
           <img src={servicios} alt="Servicios" onClick={() => handleIconClick('servicios')} />
-          <img src={turismo} alt="Turismo" onClick={() => handleIconClick('turismo')} />
+          <img src={eventos} alt="Eventos" onClick={() => handleIconClick('eventos')} />
+          {/* <img src={turismo} alt="Turismo" onClick={() => handleIconClick('turismo')} /> */}
         </div>
         {/* Mostrar la información del servicio seleccionado */}
         {selectedService && (

src/pages/users/perfil.jsx

@@ -4,6 +4,7 @@ import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 import '../../styles/users/perfil.css';
 
+
 const Perfil = () => {
   const { user, isAuthenticated, isLoading, logout } = useAuth0();
 

src/styles/mapa.css

@@ -297,8 +297,11 @@ background-color: white; /* Fondo blanco para la legibilidad */
   justify-content: center; /* Centra verticalmente */
   padding: 20px; /* Espaciado interno */
   border-radius: 10px; /* Esquinas redondeadas */
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
+  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); Sombra suave */
   margin-bottom: 20px; /* Espaciado inferior */
+  border: 2px #714dc9; /* Borde morado más grueso */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Aumenta la sombra para darle más profundidad */
+  background-color: #ffffff; /* Asegura un fondo blanco */
 }
 
 /* Contenedor para los iconos */
@@ -308,8 +311,6 @@ background-color: white; /* Fondo blanco para la legibilidad */
   cursor: pointer; /* Cambia el cursor al pasar por encima */
 }
 
-
-
 /* Efecto de hover en el icono */
 .icon:hover {
   transform: scale(1.1); /* Aumenta el tamaño al pasar el ratón */
@@ -319,7 +320,7 @@ background-color: white; /* Fondo blanco para la legibilidad */
 .selected-title {
   margin-top: 20px; /* Espaciado superior */
   font-size: 1.5rem; /* Tamaño de fuente para el título */
-  font-weight: bold; /* Negrita */
-  color: #714dc9; /* Color morado para el título */
+  /* font-weight: bold; Negrita */
+  color: #555; /* Color morado para el título */
 }
 

src/styles/servicios.css

@@ -23,6 +23,14 @@ html, body {
     transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
   }
 
+  .service-info {
+    text-align: center; /* Centra el texto */
+    max-width: 600px; /* Ajusta el ancho según sea necesario */
+    margin: 20px auto; /* Centra el contenedor horizontalmente y añade margen superior e inferior */
+    color: #555;
+  }
+
+
  /* Sección de introducción con imagen y texto */
 .intro-section {
   display: flex;
@@ -42,22 +50,22 @@ html, body {
 
 .intro-text {
   max-width: 600px;
-  color: #6c3bcc; /* Color del texto */
+  /* color: #6c3bcc; Color del texto */
   /* font-family: 'Montserrat'; */
   /* text-align: center; Centra el título y subtítulo */
 }
 
 .intro-text h1 {
   font-size: 30px;
-  color: #E2974B;
+  color: black;
   /* font-family: 'Montserrat'; */
   margin-bottom: 10px; /* Ajusta el espacio debajo del título */
   text-align: center;
 }
 
 .subtitle {
   font-size: 20px;
-  color: #6c3bcc; /* Color morado para el subtítulo */
+  color: #E2974B; /* Color morado para el subtítulo */
   /* font-family: 'Montserrat'; */
   font-weight: 600;
   margin-bottom: 20px; /* Espaciado debajo del subtítulo */
@@ -76,7 +84,7 @@ html, body {
 .button {
   display: block;
   margin: 20px auto; /* Esto centrará el botón horizontalmente y añadirá margen superior e inferior */
-  background-color: #714dc9; /* Color del botón */
+  background-color: #E2974B; /* Color del botón */
   color: white;
   font-weight: bold;
   padding: 15px 20px;
@@ -86,11 +94,16 @@ html, body {
   /* font-family: 'Montserrat'; */
 }
 
+.button:hover {
+  background-color: black; /* Cambia el color a negro al pasar el mouse */
+  color: white; /* Asegúrate de que el texto siga siendo visible */
+}
+
 /* Alinear el título con el texto y ajustar el espacio */
 .business-promotion-title {
   text-align: left; /* Alineación a la izquierda */
   font-size: 22px;
-  color: #6c3bcc; /* Color morado para el título */
+  color: #E2974B; /* Color morado para el título */
   font-weight: bold;
   margin-top: 40px; /* Espacio entre los iconos y el título */
   max-width: 800px;

src/styles/users/perfil.css

@@ -18,20 +18,26 @@ html, body {
     min-height: 100vh;
     justify-content: space-between; /* Distribuye el contenido y el footer al fondo */
     width: 100%; /* Abarca todo el ancho */
+    background-color: #f9f9f9; /* Fondo más claro para la página */
 }
 
 .perfil-content {
     flex-grow: 1; /* Asegura que el contenido crezca y empuje el footer hacia abajo */
-    margin: 40px 20px; /* Márgenes: Arriba y abajo 40px, izquierda y derecha 20px */
-    padding: 20px; /* Relleno interno */
+    margin: 40px auto; /* Márgenes: Arriba y abajo 40px, izquierda y derecha 20px */
+    padding: 30px; /* Relleno interno */
     background-color: #fff; /* Opcional: color de fondo para destacar el contenido */
+    max-width: 600px; /* Limita el ancho para que se vea más centrado */
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave para dar un efecto de tarjeta */
+    border-radius: 10px;
+    text-align: center;
 }
 
-.perfil-header {
+.perfil-header h1{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
+    text-align: center;
 }
 
 .perfil-avatar {
@@ -40,18 +46,25 @@ html, body {
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 20px;
+    margin: 0 auto 20px;
+    display: block;
+    border: 4px solid #E2974B; /* Borde de color para destacar el avatar */
 }
 
 .perfil-name {
     font-size: 24px;
     color: #333333;
     margin-bottom: 10px;
+    text-align: center;
+    font-weight: bold;
+    text-align: center;
 }
 
-.perfil-email {
-    font-size: 18px;
-    color: #000000;
+.perfil-email, .perfil-info {
+    font-size: 16px;
+    color: #555;
     margin-bottom: 20px;
+    text-align: center;
 }
 
 .perfil-info {
@@ -64,20 +77,29 @@ html, body {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
+    gap: 15px; /* Espacio entre los stats */
+    margin-top: 30px;
 }
 
 .stat {
-    background-color: #f0f0f0;
+    background-color: #E2974B;
+    color: #fff;
     width: 30%;
     text-align: center;
     padding: 15px;
     border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease; /* Efecto al pasar el cursor */
+}
+
+.stat:hover {
+    transform: translateY(-5px); /* Efecto de levantamiento al pasar el cursor */
 }
 
 .stat p {
     font-size: 14px;
-    color: #636260;
-    margin-bottom: 10px;
+    color: #fff;
+    margin-bottom: 5px;
 }
 
 .stat span {
@@ -87,7 +109,7 @@ html, body {
 }
 
 .cerrar-sesion-button {
-    background-color: #fc7b03;
+    background-color: #E2974B;
     color: #ffffff;
     border: none;
     padding: 10px 20px;
@@ -96,6 +118,9 @@ html, body {
     cursor: pointer;
     transition: background-color 0.3s ease;
     font-weight: bold;
+    margin-top: 20px;
+    display: block;
+    width: 100%;
 }
 
 .cerrar-sesion-button:hover {
@@ -120,3 +145,10 @@ footer {
     font-size: 24px;
     color: #000000;
 }
+
+.stat i {
+    font-size: 20px;
+    margin-right: 8px;
+    color: white;
+}
+