505 lines
13 KiB
JavaScript
505 lines
13 KiB
JavaScript
import { useState } from 'react'
|
|
|
|
import viteLogo from '/vite.svg'
|
|
|
|
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 PastelEditado1 from "./assets/Edicion1.jpg";
|
|
import PastelEditado2 from "./assets/Edicion2.jpg";
|
|
import PastelEditado3 from "./assets/Edicion3.jpg";
|
|
import PastelEditado4 from "./assets/Edicion4.jpg";
|
|
import PastelEditado5 from "./assets/Edicion5.jpg";
|
|
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";
|
|
|
|
function AppPasteles() {
|
|
const [count, setCount] = useState(0);
|
|
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 (
|
|
<>
|
|
<body>
|
|
<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-content">
|
|
<section className="container container-features">
|
|
|
|
</section>
|
|
|
|
<section className="container top-categories">
|
|
|
|
</section>
|
|
|
|
<section className="container top-products">
|
|
<section class="container top-products">
|
|
<h1 class="heading-2"><strong>Productos en linea:</strong> </h1>
|
|
|
|
<div class="container-options">
|
|
|
|
</div>
|
|
|
|
<div class="container-products">
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img src={PastelEditado1} alt="Cafe Irish" />
|
|
<span class="discount">-10%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3 className='heading-3'>Pastel Chocolate Blanco</h3>
|
|
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$603<span>$670</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product1">
|
|
<div class="container-img">
|
|
<img
|
|
src={PastelEditado2}
|
|
alt="Cafe incafe-ingles.jpg"
|
|
/>
|
|
<span class="discount">-30%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Moka</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$560 <span>$800</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img
|
|
src={PastelEditado3}
|
|
alt="Cafe Australiano"
|
|
/>
|
|
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Chocolate</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$350</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img src={PastelEditado4} alt="Moka" />
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Zanahoria</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$450</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img src={PastelEditado5} alt="Cafe Irish" />
|
|
<span class="discount">-13%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel Frambuesa</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$300 </p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img
|
|
src={PastelEditado6}
|
|
alt="Cafe incafe-ingles.jpg"
|
|
/>
|
|
<span class="discount">-22%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Moka</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$390 <span>$500</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-products">
|
|
|
|
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img
|
|
src={PastelEditado3}
|
|
alt="Cafe Australiano"
|
|
/>
|
|
<span class="discount">-22%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Chocolate</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$3.20</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img src={PastelEditado4} alt="Moka" />
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Zanahoria</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$450</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-product">
|
|
<div class="container-img">
|
|
<img
|
|
src={PastelEditado6}
|
|
alt="Cafe incafe-ingles.jpg"
|
|
/>
|
|
<span class="discount">-22%</span>
|
|
<div class="button-group">
|
|
<span>
|
|
<FaRegEye className="icono-eye"/>
|
|
</span>
|
|
<span>
|
|
<CiHeart className="icono-heart"/>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-card-product">
|
|
<div class="stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-solid fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<h3>Pastel de Moka</h3>
|
|
<span class="add-cart">
|
|
<LuShoppingBasket className="icono-basket-card"/>
|
|
</span>
|
|
<p class="price">$390 <span>$500</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section className="container specials">
|
|
<h1 className="heading-1"></h1>
|
|
|
|
<div className="container-products">
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container blogs">
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AppPasteles |