Funcionalidad Personalizar Pastel y Pedidos 2.0

frontend/src/AppInicio.jsx

@@ -20,7 +20,7 @@ import PastelEditado6 from "./assets/Edicion6.jpg";
 import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
 import MejoresPasteles from "./assets/MejoresPasteles.jpg";
 import PastelTematico from "./assets/pastel-tematico.jpg";
-import Swal from 'sweetalert2'
+import Swal from 'sweetalert2';
 //import PopupV from "/src/Popups/PopupLoginValido.jsx";
 //import PopupIv from "/src/Popups/PopupLoginInvalido.jsx";
 

frontend/src/Pedidos.css

@@ -97,7 +97,7 @@
     display: flex; /* Añadir esta propiedad para usar flexbox */
     width: 700px;
     gap: 1.5rem;
-    height: 215px;
+    height: 230px;
     margin: 20px;
     padding: 15px;
     border: 1px solid #ccc;
@@ -108,8 +108,9 @@
 
 /* Estilos para la imagen */
 .imagenPastel {
-    width: 100%;
+    width: 300px;
     height: 100%; /* Ajustar al 100% del contenedor padre */
+    object-fit: cover;
     background-repeat: no-repeat;
     background-size: 100% auto;
     border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */

frontend/src/Pedidos.jsx

@@ -12,6 +12,12 @@ import { CiHeart } from "react-icons/ci";
 import { FaRegEye } from "react-icons/fa";
 import { CiShare2 } from "react-icons/ci";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
+//imagenes de pastel de fresas
+import pastel_fresa_original from "./assets/Pastel-fresa-original.png";
+import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
+import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
+import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
 
 import pastelZarza from "./assets/pastel-zarza.jpg"
 
@@ -20,11 +26,110 @@ function Pedidos() {
     const [count, setCount] = useState(0);
 	const navigate = useNavigate();
 
+const [pedidosDePasteles, setPedidosDePasteles] = useState([]);
+
+const [datosFormulario, setDatosFormulario] = useState(
+	{correo: '',
+	password: '',
+	nombre: ''
+});
+
+
+const mostrarAlertaLogOut = () => {
+	Swal.fire({
+	  title: "Cerrar Sesión",
+	  text: "¿Seguro que quieres cerrar sesión?",
+	  icon: "warning",
+	  showCancelButton: true, // Mostrar el botón de cancelar
+	  confirmButtonColor: "#3085d6", // Color del botón de confirmar
+	  cancelButtonColor: "#d33", // Color del botón de cancelar
+	  confirmButtonText: "Sí", // Texto del botón de confirmar
+	  cancelButtonText: "No", // Texto del botón de cancelar
+	}).then((result) => {
+	  if (result.isConfirmed) {
+	  Swal.fire({
+		text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "",
+		icon: "success",
+	  });
+	  cerrarSesion();
+	  }
+	});
+	};
+  
+	const [nombreUsuario, setNombreUsuario]=useState("");
+  
+	const obtenerNombreUsuario = async () => {
+	try {
+	  // Realizar la llamada al backend para obtener el nombre del usuario
+	  const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
+	  setNombreUsuario(response.data.nombre);
+	  console.log(nombreUsuario);
+	   console.log("hola"+ datosFormulario.nombre);
+	} catch (error) {
+	  // Manejar el error según tus necesidades
+	  console.error("Error al obtener el nombre del usuario", error);
+	}
+	};
+  
+	useEffect(() => {
+	// Llamar a la función al cargar la página
+	obtenerNombreUsuario();
+	obtenerPedidosDePasteles();
+	console.log("obtuvo los pedidos");
+	}, []); 
+  
+	const cerrarSesion = async () => {
+	try {
+	  // Realizar la llamada al backend para obtener el nombre del usuario
+	  const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario });
+	  setNombreUsuario(response.data.nombre);
+	  console.log(nombreUsuario);
+	  obtenerNombreUsuario();
+	  //mostrarAlertaLogOut();
+	} catch (error) {
+	  // Manejar el error según tus necesidades
+	  console.error("Error al obtener el nombre del usuario", error);
+	}
+	};
+
+	const mostrarAlertaPedidoFallidaLogin=()=>{
+	  Swal.fire({
+		title: "Pedido Fallida",
+		text: "Inicia Sesion para poder hacer un pedido.",
+		icon: "error",
+		button: "Aceptar"
+  
+	  });
+	};
+
+
+	
+	const obtenerPedidosDePasteles = async () => {
+		try {
+		const response = await axios.post('http://localhost:4567/frontend/obtenerPedidosDePasteles');
+		console.log("Pedidos de pasteles obtenidos:", response.data.pedidos_de_pasteles);
+		// Almacena los pedidos de pasteles en el estado
+		setPedidosDePasteles(response.data.pedidos_de_pasteles);
+		} catch (error) {
+		console.error("Error al obtener pedidos de pasteles:", error);
+		}
+	};
+
+
 	const redirectPersonalizarPastelArcoiris = () => {
 		// Redirige a la página del hotel cuando se hace clic en el botón
 		navigate("/PersonalizarPastel/PastelArcoiris");
 		};
 	  
+		const redirectInicio = () => {
+		// Redirige a la página del hotel cuando se hace clic en el botón
+		navigate("/");
+		};
+		  const redirectToLogin = () => {
+		
+		  navigate("/Login");
+		  };
+		
 		  const redirectToPedidos = () => {
 		  navigate("/Pedidos");
 		
@@ -34,50 +139,51 @@ function Pedidos() {
 		  navigate("/Pasteles");
 		  };
 
-	  const redirectInicio = () => {
-		// Redirige a la página del hotel cuando se hace clic en el botón
-		navigate("/");
-	  };
-
-	  useEffect(() => {
-		setNombreUsuario("Mario");
-	  }, []);
-
-	  const [nombreUsuario, setNombreUsuario]=useState("");
-
 	  const [pedidos, setPedidos] = useState([]);
 
 	  const generarPedidos = () => {
-
 		if (nombreUsuario == null) {
 		  return (
-			  <h1 className="IniSesReserva">Inicia Sesion para poder ver tus reservaciones.</h1>
+			<h1 className="IniSesReserva">Inicia Sesión para poder ver tus pedidos de pasteles.</h1>
 		  );
 		} else {
-	
+		  if (pedidosDePasteles.length === 0) {
-		  if(!pedidos){
 			return (
-			  
+			  <h1 className="ReservaNull">No tienes pedidos de pasteles en este momento.</h1>
-			  <h1 className="ReservaNull">No tienes pedidos en este momento.</h1>
 			);
-	
-			
 		  } else {
 			return (
 			  <div>
-				  <div key={1}/*{reserva.id_reservacion}*/ className="reservacion">
+				{pedidosDePasteles.map(pedido => (
+				  <div key={pedido.id_pedido} className="reservacion">
+
+
 					<div className='container-img-pedido'>
-						<img src={pastelZarza} alt="" className="imagenPastel" />
+						{pedido.nombre_pastel === 'Pastel de Fresas' ? (
+						pedido.relleno === 'Original' ? <img src={pastel_fresa_original} alt="" className="imagenPastel" /> :
+						pedido.relleno === 'Arcoiris' ? <img src={pastel_fresa_arcoiris} alt="" className="imagenPastel" /> :
+						pedido.relleno === 'Oreo' ? <img src={pastel_fresa_oreo} alt="" className="imagenPastel" /> :
+						pedido.relleno === 'Vainilla' ? <img src={pastel_fresa_vainilla} alt="" className="imagenPastel" /> :
+						<img src={otra_imagen} alt="" className="imagenPastel" /> // Si el relleno no coincide con ninguno de los anteriores
+						) : (
+						<img src={otra_imagen} alt="" className="imagenPastel" /> // Si el pastel no es de fresas
+						)}
 					</div>
+
+
 					<div className="reservaData">
-					  <h3>{"Pastel Arcoiris"/*reserva.nombre_hotel*/}</h3>
+					  <h3>{pedido.nombre_pastel}</h3>
-					  <p>Precio de la reservación: ${500/*reserva.precio*/}</p>
+					  <p>Precio del pastel: ${pedido.precio}</p>
-					  <button className="eliminar-btn" /*onClick={() => mostrarAlertaEliminarRes(reserva.id_reservacion,reserva.nombre_hotel)}*/>
+					  <p>Tamaño: {pedido.tamaño}</p>
+					  <p>Estatus: {pedido.estatus}</p>
+					  <p>Inscripción: {pedido.inscripcion}</p>
+					  <p>Relleno: {pedido.relleno}</p>
+					  <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}>
 						Eliminar Pedido
 					  </button>
 					</div>
 				  </div>
-
+				))}
 			  </div>
 			);
 		  }
@@ -124,6 +230,15 @@ function Pedidos() {
 						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
 						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
 						<li><a href="#">Blog</a></li>
+						{nombreUsuario ? (
+								<>
+								<li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
+								<li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
+								</>
+							) : (
+								<li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
+							)
+						}
 
 					</ul>
 

frontend/src/PersPastel1.jsx

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import './PersPastelStyle.css';
 
+import { Button, Select, MenuItem, TextField, Box } from '@mui/material';
+
 import { RiCustomerService2Fill } from "react-icons/ri";
 import { FaUser } from "react-icons/fa";
 import { LuShoppingBasket } from "react-icons/lu";
@@ -9,12 +11,50 @@ import { CiHeart } from "react-icons/ci";
 import { FaRegEye } from "react-icons/fa";
 import { CiShare2 } from "react-icons/ci";
 import { useNavigate } from "react-router-dom";
-import pastelArcoirisFondo from "./assets/pastel-zarza.jpg"
+import axios from 'axios';
-import pastelArcoiris from "./assets/pastel1.jpg"
+import pastel_fresa_original from "./assets/Pastel-fresa-original.png";
+import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
+import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
+import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
+import Swal from 'sweetalert2'
+import pastelTexto from "./assets/pastel-texto.jpg"
 
 function Pastel() {
   const navigate = useNavigate();
 
+  const [quantity, setQuantity] = useState(1);
+
+  const [textoEncima, setTextoEncima] = useState("");
+
+  const [textoCantidad, setTextoCantidad] = useState("");
+
+  const [textoRelleno, setTextoRelleno] = useState("");
+
+  const [textoTipo, setTextoTipo] = useState("");
+
+
+
+
+  const [datosPastel, setDatosPastel] = useState(
+    { 
+      texto: '',
+      quantity: 1
+     
+});
+
+const [datosPastelEnviar, setDatosPastelEnviar] = useState(
+  { 
+    texto: textoEncima,
+    quantity: datosPastel.quantity
+   
+});
+
+const [datosFormulario, setDatosFormulario] = useState(
+	{correo: '',
+	password: '',
+	nombre: ''
+});
+
   const redirectPersonalizarPastelArcoiris = () => {
     // Redirige a la página del hotel cuando se hace clic en el botón
     navigate("/PersonalizarPastel/PastelArcoiris");
@@ -24,17 +64,257 @@ function Pastel() {
     // Redirige a la página del hotel cuando se hace clic en el botón
     navigate("/");
     };
+      const redirectToLogin = () => {
     
-    const [imagenVisible, setImagenVisible] = useState(pastelArcoiris);
+      navigate("/Login");
+      };
     
-    const cambiarImagen = () => {
+      const redirectToPedidos = () => {
-      if (imagenVisible === pastelArcoiris) {
+      navigate("/Pedidos");
-        setImagenVisible(pastelArcoirisFondo);
+    
-      } else {
+      };
-        setImagenVisible(pastelArcoiris);
+    
+      const redirectToPasteles = () => {
+      navigate("/Pasteles");
+      };
+
+    const [lastSelectedImage, setLastSelectedImage] = useState(pastel_fresa_original); 
+    const [imagenVisible, setImagenVisible] = useState(pastel_fresa_original);
+    const [inputActivo, setInputActivo] = useState(false);
+    const cambiarImagenBoton = (nuevaImagen) => {
+      if (!inputActivo) {
+        setImagenVisible(nuevaImagen);
+        setLastSelectedImage(nuevaImagen);
       }
     };
   
+    const handleChange = (event) => {
+      setImagenVisible(pastelTexto);
+      setDatosPastel(prevState => ({
+        ...prevState,   // Clona el estado actual
+        texto: event.target.value, // Establece el campo 'correo' con el valor del evento
+      }));
+   
+    };
+
+    const handleInputFocus = () => {
+      console.log(textoEncima);
+      setDatosPastel(prevState => ({
+        ...prevState,   // Clona el estado actual
+        texto: textoEncima, // Establece el campo 'correo' con el valor del evento
+      }));
+
+      //console.log("hola");
+
+      
+      setImagenVisible(pastelTexto);
+    };
+  
+    const handleInputBlur = () => {
+      
+      setTextoEncima(datosPastel.texto);
+      console.log(textoEncima);
+      setDatosPastel(prevState => ({
+        ...prevState,   // Clona el estado actual
+        texto: "", // Establece el campo 'correo' con el valor del evento
+      }));
+      setImagenVisible(lastSelectedImage);
+    };
+  
+    const handleDocumentClick = (event) => {
+      // Comprueba si el clic ocurrió fuera del input
+      if (!event.target.matches("#inscription")) {
+      }
+    };
+
+    React.useEffect(() => {
+
+      setTextoRelleno("Original");
+      document.addEventListener("click", handleDocumentClick);
+      return () => {
+        document.removeEventListener("click", handleDocumentClick);
+      };
+    }, []);
+
+
+    const mostrarAlertaLogOut = () => {
+      Swal.fire({
+        title: "Cerrar Sesión",
+        text: "¿Seguro que quieres cerrar sesión?",
+        icon: "warning",
+        showCancelButton: true, // Mostrar el botón de cancelar
+        confirmButtonColor: "#3085d6", // Color del botón de confirmar
+        cancelButtonColor: "#d33", // Color del botón de cancelar
+        confirmButtonText: "Sí", // Texto del botón de confirmar
+        cancelButtonText: "No", // Texto del botón de cancelar
+      }).then((result) => {
+        if (result.isConfirmed) {
+        Swal.fire({
+          text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "",
+          icon: "success",
+        });
+        cerrarSesion();
+        }
+      });
+      };
+    
+      const [nombreUsuario, setNombreUsuario]=useState("");
+    
+      const obtenerNombreUsuario = async () => {
+      try {
+        // Realizar la llamada al backend para obtener el nombre del usuario
+        const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
+        setNombreUsuario(response.data.nombre);
+        console.log(nombreUsuario);
+         console.log("hola"+ datosFormulario.nombre);
+      } catch (error) {
+        // Manejar el error según tus necesidades
+        console.error("Error al obtener el nombre del usuario", error);
+      }
+      };
+    
+      useEffect(() => {
+      // Llamar a la función al cargar la página
+      obtenerNombreUsuario();
+      }, []); 
+    
+      const cerrarSesion = async () => {
+      try {
+        // Realizar la llamada al backend para obtener el nombre del usuario
+        const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario });
+        setNombreUsuario(response.data.nombre);
+        console.log(nombreUsuario);
+        obtenerNombreUsuario();
+        //mostrarAlertaLogOut();
+      } catch (error) {
+        // Manejar el error según tus necesidades
+        console.error("Error al obtener el nombre del usuario", error);
+      }
+      };
+
+      const mostrarAlertaPedidoFallidaLogin=()=>{
+        Swal.fire({
+          title: "Pedido Fallida",
+          text: "Inicia Sesion para poder hacer un pedido.",
+          icon: "error",
+          button: "Aceptar"
+    
+        });
+      }
+      
+      const handleIncrement = () => {
+        setQuantity((prevQuantity) => prevQuantity + 1);
+      };
+    
+      const handleDecrement = () => {
+        setQuantity((prevQuantity) => (prevQuantity > 1 ? prevQuantity - 1 : 1));
+      };
+
+      const mostrarAlertaReservaFallidaPers=()=>{
+        Swal.fire({
+          title: "Pedidos Info",
+          text: "Solo hay pasteles de hasta 12 personas.",
+          icon: "info",
+          button: "Aceptar"
+    
+        });
+      };
+
+      const mostrarAlertaReservaExitosa=()=>{
+        Swal.fire({
+          title: "Pedido Exitosa",
+          text: "Tu Pedido se ha realizado correctamente.",
+          icon: "success",
+          button: "Aceptar"
+    
+        });
+      };
+
+
+
+      const handleQuantityChange = (value) => {
+        if (value >= 1 && value <= 12) {
+          setQuantity(value);
+          setDatosPastel((prevData) => ({ ...prevData, quantity: value }));
+        } else {
+          mostrarAlertaReservaFallidaPers();
+        }
+      };
+
+      const clickBotonOriginal = () => {
+        cambiarImagenBoton(pastel_fresa_original);
+        setTextoRelleno("Original");
+
+      };
+
+      const clickBotonArcoiris = () => {
+        cambiarImagenBoton(pastel_fresa_arcoiris);
+        setTextoRelleno("Arcoiris");
+
+      };
+
+      const clickBotonOreo = () => {
+        cambiarImagenBoton(pastel_fresa_oreo);
+        setTextoRelleno("Oreo");
+
+      };
+
+      const clickBotonVainilla = () => {
+        cambiarImagenBoton(pastel_fresa_vainilla);
+        setTextoRelleno("Vainilla");
+
+      };
+
+
+      const hacerPedidoPastel1 = async () => {  
+        console.log("Fresas"); 
+        console.log(datosPastel.quantity);
+        console.log(textoEncima);
+        console.log(textoRelleno);
+
+        try{
+
+          if(nombreUsuario==null){
+            mostrarAlertaPedidoFallidaLogin();
+            
+          }else{
+
+            const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
+            textoEncima: textoEncima,
+            textoCantidad: datosPastel.quantity,
+            textoRelleno: textoRelleno,
+            textoTipo: textoTipo
+          });
+
+          console.log(response.data);
+          mostrarAlertaReservaExitosa();
+
+          // Limpiar los estados después de hacer el pedido
+          setDatosPastel({ texto: "", quantity: 1 });
+          setTextoEncima("");
+          setTextoCantidad("");
+          setTextoRelleno("Original");
+          setTextoTipo("");
+          setDatosPastel({ texto: "", quantity: 1 });
+          setQuantity(1);
+          cambiarImagenBoton(pastel_fresa_original);
+
+
+          }
+
+        }catch(error){
+          console.error("Error al hace el pedido");
+          throw error;
+
+        }
+
+
+
+      };
+
+
+
+
   return (
     <>
 
@@ -59,9 +339,7 @@ function Pastel() {
 
     <div className="container-user">
         <FaUser className="icono-User"/>
-
       <div className="content-shopping-cart">
-
       </div>
     </div>
   </div>
@@ -73,11 +351,19 @@ function Pastel() {
     <i className="fa-solid fa-bars"></i>
     <ul className="menu">
 						<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
-      <li><a href="#">Pasteles</a></li>
+						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
-      <li><a href="#">Personalizar Pastel</a></li>
+						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
-      <li><a href="#">Pedidos</a></li>
+						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
 						<li><a href="#">Blog</a></li>
-
+						{nombreUsuario ? (
+								<>
+								<li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
+								<li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
+								</>
+							) : (
+								<li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
+							)
+						}
 
 					</ul>
 
@@ -95,11 +381,12 @@ function Pastel() {
 
       <main className = "main-pers-pastel">
         <div className="container-img-1">
-          <img className="imgPastel" src={imagenVisible} alt="Pastel"/>
+          <img className="imgPastel" src={imagenVisible} alt="Pastel"></img>
+          <div className="texto-encima">{datosPastel.texto}</div>
         </div>
         <div className="container-info-product">
           <div className="container-price">
-            <span>Pastel Arcoiris</span>
+            <span>Pastel de Fresas</span>
             <i className="fa-solid fa-angle-right"></i>
           </div>
 
@@ -108,22 +395,49 @@ function Pastel() {
                 <div className="OpcionesPers">
                 <h2 className="textPersPastel">Personaliza tu pastel</h2>
                 <div className="mb-4">
-                    <p className="pastel-Type">Tipo de Pastel</p>
+                    <p className="pastel-Type">Tipo de Relleno</p>
                     <div className="botones-pastel">
-                    <button className="boton-1" onClick={cambiarImagen}>
+                    <button className="boton-1" onClick={() => clickBotonOriginal()}>
-                        Vanilla Rainbow Cake
+                      Original
                     </button>
-                    <button className="boton-2">
+                    <button className="boton-2" onClick={() => clickBotonArcoiris()}>
-                        Confetti Cake
+                      Arcoiris
                     </button>
-                    <button className="boton-3">
+                    <button className="boton-3" onClick={() => clickBotonOreo()}>
-                        Black & White Cake with Chocolate Fudged
+                      Oreo
                     </button>
-                    <button className="boton-4">
+                    <button className="boton-4" onClick={() => clickBotonVainilla()}>
-                        Chocolate Fudge Cake
+                      Vainilla
                     </button>
                     </div>
                 </div>
+
+
+                <div className="container-cantidad-personas">
+                <div className="titulo-pers">Personas </div>
+                  <TextField
+                    type="number"
+                    placeholder="1"
+                    value={quantity}
+                    onChange={(e) => handleQuantityChange(e.target.value)}
+                    InputProps={{ inputProps: { min: 1 } }}
+                    className="input-cantidad"
+                  />
+                  <div className="btn-increment-decrement">
+                    <i
+                      className="fa-solid fa-chevron-up"
+                      id="increment"
+                      onClick={handleIncrement}
+                    ></i>
+                    <i
+                      className="fa-solid fa-chevron-down"
+                      id="decrement"
+                      onClick={handleDecrement}
+                    ></i>
+                  </div>
+                </div>
+
+
                 <div className="mb-6">
                     <p className="label-text-pers">Inscription (30 Character Limit)</p>
                     <input className="input-text-pers"
@@ -132,6 +446,10 @@ function Pastel() {
                     name="inscription"
                     placeholder="Enter your text"
                     maxLength="30"
+                    value={datosPastel.texto}
+                    onChange={handleChange}
+                    onBlur={handleInputBlur}
+                    onFocus={handleInputFocus}
                     />
                 </div>
                 </div>
@@ -139,8 +457,7 @@ function Pastel() {
           </div>
 
           <div className="container-add-cart">
-            <button className="btn-add-to-cart">
+            <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
-              <i className="fa-solid fa-plus"></i>
               Añadir al carrito
             </button>
           </div>
@@ -186,16 +503,102 @@ function Pastel() {
 
           <div className="container-social">
             <span>Compartir</span>
-            <div className="container-buttons-social">
+            
-              <a href="#"><i className="fa-solid fa-envelope"></i></a>
-              <a href="#"><i className="fa-brands fa-facebook"></i></a>
-              <a href="#"><i className="fa-brands fa-twitter"></i></a>
-              <a href="#"><i className="fa-brands fa-instagram"></i></a>
-              <a href="#"><i className="fa-brands fa-pinterest"></i></a>
-            </div>
           </div>
+
         </div>
+
       </main>
+
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="customer-reviews-container">
+
+      <div className="flex justify-center space-x-4">
+        <div className="customer-review-card">
+            <div className="customer-review-info">
+                <img className="customer-review-avatar" src="https://placehold.co/100x100" alt="John Deo"/>
+                <div>
+                    <div className="customer-review-name">John Deo</div>
+                </div>
+            </div>
+            <div className="customer-review-rating">
+                ★★★★★
+            </div>
+            <p className="customer-review-content">
+                Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Asperiores Sint Corporis Voluptate Non Error Obc adhajkhajkdahdjkhsdjkakjas jkdhasjdahdjkadhasj aecati Adipisci A Autem? Similique Animi Quae Impedit Vel Dicta Placeat Ad Temporibus Illo Distinctio. Tenetur!
+            </p>
+        </div>
+      </div>
+      </div>
+
+      </div>
+
+
+      <footer className="footer">
+			<div className="container container-footer">
+				<div className="menu-footer">
+					<div className="contact-info">
+						<p className="title-footer">Información de Contacto</p>
+						<ul>
+							<li>
+								Avenida Xalapa 
+							</li>
+							<li>Teléfono: 2288520821</li>
+							<li>EmaiL: cdgn_17@hotmail.com</li>
+						</ul>
+						<div className="social-icons">
+							<span className="facebook">
+								<i className="fa-brands fa-facebook-f"></i>
+							</span>
+							<span className="twitter">
+								<i className="fa-brands fa-twitter"></i>
+							</span>
+							<span className="youtube">
+								<i className="fa-brands fa-youtube"></i>
+							</span>
+							<span className="pinterest">
+								<i className="fa-brands fa-pinterest-p"></i>
+							</span>
+							<span className="instagram">
+								<i className="fa-brands fa-instagram"></i>
+							</span>
+						</div>
+					</div>
+
+					<div className="information">
+						<p className="title-footer">Información</p>
+						<ul>
+							<li><a href="#">Acerca de Nosotros</a></li>
+							<li><a href="#">Información de Entrega</a></li>
+							<li><a href="#">Politicas de Privacidad</a></li>
+							<li><a href="#">Términos y condiciones</a></li>
+							<li><a href="#">Contactános</a></li>
+						</ul>
+					</div>
+
+					<div className="my-account">
+						<p className="title-footer">Mi cuenta</p>
+
+						<ul>
+							<li><a href="#">Mi cuenta</a></li>
+							<li><a href="#">Pedidos</a></li>
+							<li><a href="#">Boletín</a></li>
+						</ul>
+					</div>
+
+
+				</div>
+
+				<div className="copyright">
+
+
+				</div>
+			</div>
+		</footer>
+    
     </>
   );
 }

frontend/src/PersPastelStyle.css

@@ -145,6 +145,7 @@
 .menu a:hover {
 	color: #fff;
 }
+
 .search-form {
 	position: relative;
 	display: flex;
@@ -154,7 +155,6 @@
 	background-color: #fff;
 	height: 4.4rem;
 	overflow: hidden;
-
 }
 
 .search-form input {
@@ -166,12 +166,10 @@
 	padding: 0 2rem;
 	color: #777;
 	cursor: pointer;
-	display: none;
 }
 
 .search-form input::-webkit-search-cancel-button {
 	appearance: none;
-
 }
 
 .search-form .btn-search {
@@ -182,8 +180,8 @@
 	justify-content: center;
 	height: 100%;
 	padding: 1rem;
-	display: none;
 }
+
 .btn-search i {
 	font-size: 2rem;
 	color: #fff;
@@ -198,6 +196,25 @@
 }
 
 
+.imgPastel{
+	position: relative;
+	max-height: 670px;
+}
+
+.texto-encima {
+	position: absolute;
+	top: 60%;
+	left:34%;
+	max-width: 200px;
+	word-wrap: break-word; /* Esta propiedad permite que las palabras se rompan cuando no caben en el contenedor */
+    overflow-wrap: break-word;
+	transform: translate(-50%, -50%);
+	background-color: rgba(255, 255, 255, 0.4); /* Cambia el color de fondo según lo desees */
+	padding: 10px;
+	border-radius: 5px;
+	font-size: 32px;
+	text-align: center;
+  }
 
 
 .container-img-1 {
@@ -301,9 +318,6 @@
     padding-bottom: 0px;
 }
 
-.opcionesPers{
-
-}
 
 .textPersPastel{
     font-size: 18px;
@@ -325,7 +339,7 @@
 }
 
 .boton-1{
-    margin-right: 10px;
+    margin-right: 20px;
     border: none;
     color: white;
     padding: 14px 28px;
@@ -423,7 +437,7 @@
 .form-group label {
 	width: 100px;
 	color: #222;
-	font-weight: 700;
+	font-weight: lighter;
 }
 
 .form-group select {
@@ -635,3 +649,147 @@ footer {
 	margin-top: 50px;
 	color: #222;
 }
+
+
+.reseñas{
+	display: flex;
+ 	align-items: center;
+}
+
+
+
+/* Estilos para el contenedor principal */
+.customer-reviews-container {
+    background-color: #fff;
+	margin-left: 35.5rem;
+	margin-right: 35.5rem;
+	position: relative;
+}
+
+/* Estilos para el título */
+.customer-reviews-title {
+    font-size: 2.875rem; /* text-3xl */
+    font-weight: bold;
+	padding-top: 3rem;
+    text-align: center;
+    color: #4b5563; /* text-zinc-800 */
+    margin-bottom: 2.5rem; /* mb-10 */
+}
+
+/* Estilos para el contenedor de cada reseña */
+.customer-review-card {/* ajustar según sea necesario */
+	
+    border-radius: 1rem;
+	width: 100%;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    background-color: #f9fafb; /* bg-zinc-50 */
+	
+}
+
+/* Estilos para la sección de la imagen y la información del cliente */
+.customer-review-info {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem; /* space-x-2 */
+    margin-bottom: 1rem; /* mb-4 */
+}
+
+/* Estilos para la imagen del cliente */
+.customer-review-avatar {
+    width: 4.5rem; /* w-10 */
+    height: 4.5rem; /* h-10 */
+    border-radius: 50%;
+}
+
+/* Estilos para el nombre del cliente */
+.customer-review-name {
+	padding-left: 3rem;
+    font-size: 1.875rem; /* text-sm */
+    font-weight: bold;
+}
+
+/* Estilos para la descripción del cliente */
+.customer-review-description {
+    font-size: 0.875rem; /* text-sm */
+    color: #4b5563; /* text-zinc-600 */
+}
+
+/* Estilos para la calificación */
+.customer-review-rating {
+    margin-bottom: 0.5rem; /* mb-2 */
+    color: var(--primary-color); /* text-pink-500 */
+    font-size: 2.5rem;
+}
+
+/* Estilos para el contenido de la reseña */
+.customer-review-content {
+    color: #4b5563; /* text-zinc-700 */
+    font-size: 1.5rem; /* text-base */
+}
+
+
+.btn-increment-decrement {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	top: 17px;
+	right: 17px;
+}
+
+.btn-increment-decrement i {
+	font-size: 31px;
+	color: #666;
+	cursor: pointer;
+	padding-bottom: 3rem;
+	
+}
+
+
+
+.input-cantidad {
+	background-color: #f7f7f7;
+	border: none;
+	padding: 15px;
+	width: 110px;
+	height: 100%;
+	color: #666;
+	font-weight: lighter;
+	line-height: 0;
+}
+.input-cantidad:focus {
+	outline: none;
+}
+
+.input-cantidad::-webkit-inner-spin-button,
+.input-cantidad::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.container-cantidad-personas {
+	display: flex;
+    align-items: center;
+	gap: 20px;
+}
+
+.container-add-reservacion {
+	display: flex;
+	gap: 20px;
+	padding-bottom: 30px;
+	border-bottom: 1px solid #e4e4e4;
+	font-weight: lighter;
+}
+
+.titulo-pers{
+	font-weight: lighter;
+	font-size: 18px;
+}
+
+.fa-chevron-up,
+.fa-chevron-down {
+  font-size: 20px; /* Aumentar el tamaño de la fuente de los iconos */
+}
+
+