246 lines
7.3 KiB
JavaScript
246 lines
7.3 KiB
JavaScript
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 PastelChocolate() {
|
|
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-4" >
|
|
|
|
</div>
|
|
<div className="container-info-product">
|
|
<div className="container-price">
|
|
|
|
<h1 className="titulo-Pastel">Pastel De Chocolate</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">Personaliza tu pastel</h2>
|
|
<div className="mb-4">
|
|
<p className="pastel-Type">Tipo de Pastel</p>
|
|
|
|
</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>
|
|
Añadir al carrito
|
|
</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>
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
|
Laboriosam iure provident atque voluptatibus reiciendis quae
|
|
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
|
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
|
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
|
magni earum est dolorem saepe perferendis repellat ipsam
|
|
laudantium cum assumenda quidem quam, vero similique? Iusto
|
|
officiis quod blanditiis iste?
|
|
</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 PastelChocolate; |