FrontPastel/frontend/src/Pasteles/PastelMoka.jsx

import React, { useState } from "react";

import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu";
import { FaMagnifyingGlass } from "react-icons/fa6";
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 './ChocolateBlanco.css';


function PastelMoka() {
  const navigate = useNavigate();

  const redirectPersonalizarPastelArcoiris = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/PersonalizarPastel/PastelArcoiris");
    };
  
    const redirectToPedidos = () => {
    navigate("/Pedidos");
  
    };
  
    const redirectToPasteles = () => {
    navigate("/Pasteles");
    };
  
    const redirectInicio = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/");
    };
  

  return (
    <>

<header>

<div className="container-hero">
  <div className="container hero">
    <div className="customer-support">
          <RiCustomerService2Fill className="icono-cliente" />
      <div className="content-customer-support">

        <span className="text">Soporte al cliente</span>
        <span className="number">123-456-7890</span>
        
      </div>
    </div>

    <div className="container-logo">
      <i className="fa-solid fa-mug-hot"></i>
      <h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
    </div>

    <div className="container-user">
        <FaUser className="icono-User"/>
    <LuShoppingBasket className="icono-basket"/>
      <div className="content-shopping-cart">
        <span className="text">Carrito</span>
        <span className="number">(0)</span>
      </div>
    </div>
  </div>
</div>


<div className="container-navbar">
  <nav className="navbar container">
    <i className="fa-solid fa-bars"></i>
    <ul className="menu">
    <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
						<li><a href="#">Blog</a></li>


    </ul>

    <form className="search-form">
      <input type="search" placeholder="Buscar..." />
      <button className="btn-search">
        <FaMagnifyingGlass className="icono-lupa" />
      </button>
    </form>
  </nav>
</div>


</header>

      <main className = "main-pers-pastel">
        <div className="container-img-3" >
            
        </div>
        <div className="container-info-product">
          <div className="container-price">
            
            <h1 className="titulo-Pastel">Pastel De Moka</h1>
            <i className="fa-solid fa-angle-right"></i>
          </div>

          <div className="container-details-product">
            <div className="form-group">
                <div className="OpcionesPers">
                <h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1"><strong>$400</strong></p>

                <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p>

                <div className="mb-4">


                </div>
                <div className="mb-6">
                    
                </div>
                </div>
            </div>
          </div>

          <div className="container-add-cart">
            <button className="btn-add-to-cart">
              <i className="fa-solid fa-plus"></i>
              Comprar
            </button>
          </div>

          <div className="container-description">
            <div className="title-description">
              <h4>Descripción</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-description">
              <p>
              Este es un delicioso pastel de chocolate con ganache de chocolate. El pastel es de un color marrón intenso y tiene una textura húmeda y densa. El ganache de chocolate es cremoso y dulce, y la decoración con frutas frescas añade un toque de frescura y color.
              </p>
            </div>
          </div>

          <div className="container-additional-information">
            <div className="title-additional-information">
              <h4>Información adicional</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-additional-information hidden">
              <p>-----------</p>
            </div>
          </div>

          <div className="container-reviews">
            <div className="title-reviews">
              <h4>Reseñas</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-reviews hidden">
              <p>-----------</p>
            </div>
          </div>

          <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>

      <footer class="footer">
			<div class="container container-footer">
				<div class="menu-footer">
					<div class="contact-info">
						<p class="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 class="social-icons">
							<span class="facebook">
								<i class="fa-brands fa-facebook-f"></i>
							</span>
							<span class="twitter">
								<i class="fa-brands fa-twitter"></i>
							</span>
							<span class="youtube">
								<i class="fa-brands fa-youtube"></i>
							</span>
							<span class="pinterest">
								<i class="fa-brands fa-pinterest-p"></i>
							</span>
							<span class="instagram">
								<i class="fa-brands fa-instagram"></i>
							</span>
						</div>
					</div>

					<div class="information">
						<p class="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 class="my-account">
						<p class="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 class="copyright">


				</div>
			</div>
		</footer>
    </>
  );
}

export default PastelMoka;