2024-04-29 00:36:42 +00:00
|
|
|
import { useState } from 'react'
|
|
|
|
|
import reactLogo from './assets/react.svg'
|
|
|
|
|
import viteLogo from '/vite.svg'
|
|
|
|
|
import './AppInicio.css'
|
|
|
|
|
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";
|
2024-05-06 13:55:11 +00:00
|
|
|
import { useNavigate } from "react-router-dom";
|
2024-04-29 00:36:42 +00:00
|
|
|
|
|
|
|
|
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 App() {
|
2024-05-06 13:55:11 +00:00
|
|
|
const [count, setCount] = useState(0);
|
|
|
|
|
const navigate = useNavigate();
|
2024-04-29 00:36:42 +00:00
|
|
|
|
2024-05-06 13:55:11 +00:00
|
|
|
const redirectPersonalizarPastelArcoiris = () => {
|
|
|
|
|
// Redirige a la página del hotel cuando se hace clic en el botón
|
|
|
|
|
navigate("/PersonalizarPastel/PastelArcoiris");
|
|
|
|
|
};
|
|
|
|
|
|
2024-05-06 14:15:18 +00:00
|
|
|
const redirectToPedidos = () => {
|
|
|
|
|
navigate("/Pedidos");
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const redirectToPasteles = () => {
|
|
|
|
|
navigate("/Pasteles");
|
|
|
|
|
};
|
|
|
|
|
|
2024-05-06 13:55:11 +00:00
|
|
|
const redirectInicio = () => {
|
|
|
|
|
// Redirige a la página del hotel cuando se hace clic en el botón
|
|
|
|
|
navigate("/");
|
|
|
|
|
};
|
2024-05-06 14:15:18 +00:00
|
|
|
|
2024-04-29 00:36:42 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<div class="container-hero">
|
|
|
|
|
<div class="container hero">
|
|
|
|
|
<div class="customer-support">
|
|
|
|
|
<RiCustomerService2Fill className="icono-cliente" />
|
|
|
|
|
<div class="content-customer-support">
|
|
|
|
|
|
|
|
|
|
<span class="text">Soporte al cliente</span>
|
|
|
|
|
<span class="number">123-456-7890</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container-logo">
|
|
|
|
|
<i class="fa-solid fa-mug-hot"></i>
|
|
|
|
|
<h1 class="logo"><a href="/">Pasteleria RAPI</a></h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container-user">
|
|
|
|
|
<FaUser className="icono-User"/>
|
|
|
|
|
<LuShoppingBasket className="icono-basket"/>
|
|
|
|
|
<div class="content-shopping-cart">
|
2024-05-06 22:09:31 +00:00
|
|
|
|
2024-04-29 00:36:42 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container-navbar">
|
|
|
|
|
<nav class="navbar container">
|
|
|
|
|
<i class="fa-solid fa-bars"></i>
|
|
|
|
|
<ul class="menu">
|
2024-05-06 13:55:11 +00:00
|
|
|
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
2024-05-06 14:15:18 +00:00
|
|
|
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
2024-05-06 13:55:11 +00:00
|
|
|
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
2024-05-06 14:15:18 +00:00
|
|
|
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
2024-04-29 00:36:42 +00:00
|
|
|
<li><a href="#">Blog</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<form class="search-form">
|
2024-05-06 14:29:57 +00:00
|
|
|
|
|
|
|
|
|
2024-04-29 00:36:42 +00:00
|
|
|
</form>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<section class="banner">
|
|
|
|
|
<div class="content-banner">
|
|
|
|
|
<p>Pastel Delicioso</p>
|
|
|
|
|
<h2>100% Hecho <br />Por Nosotros</h2>
|
|
|
|
|
<a href="#">Comprar ahora</a>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<main class="main-content">
|
|
|
|
|
<section class="container container-features">
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="container top-categories">
|
|
|
|
|
<h1 class="heading-1">Mejores Categorías</h1>
|
|
|
|
|
<div class="container-categories">
|
|
|
|
|
<div class="card-category category-moca">
|
2024-05-06 14:29:57 +00:00
|
|
|
<p>Pasteles Personalizados</p>
|
2024-04-29 00:36:42 +00:00
|
|
|
<span>Ver más</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-category category-expreso">
|
2024-05-06 14:29:57 +00:00
|
|
|
<p>Pasteles en linea </p>
|
2024-04-29 00:36:42 +00:00
|
|
|
<span>Ver más</span>
|
|
|
|
|
</div>
|
2024-05-06 14:29:57 +00:00
|
|
|
|
2024-04-29 00:36:42 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="container top-products">
|
|
|
|
|
<h1 class="heading-1">Mejores Productos</h1>
|
|
|
|
|
|
|
|
|
|
<div class="container-options">
|
|
|
|
|
<span class="active">Destacados</span>
|
|
|
|
|
<span>Más recientes</span>
|
|
|
|
|
<span>Mejores Vendidos</span>
|
|
|
|
|
</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>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-product">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="container specials">
|
|
|
|
|
<h1 class="heading-1"></h1>
|
|
|
|
|
|
|
|
|
|
<div class="container-products">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="container blogs">
|
|
|
|
|
<h1 class="heading-1">Últimos Blogs</h1>
|
|
|
|
|
|
|
|
|
|
<div class="container-blogs">
|
|
|
|
|
<div class="card-blog">
|
|
|
|
|
<div class="container-img">
|
|
|
|
|
<img src= {MejoresPasteles} alt="Imagen Blog 1" />
|
|
|
|
|
<div class="button-group-blog">
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-link"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-blog">
|
|
|
|
|
<h3>Los 5 Mejores Pasteles que Debes Probar</h3>
|
|
|
|
|
<span>27 de abril de 2024</span>
|
|
|
|
|
<p>
|
|
|
|
|
En este blog, quiero compartir contigo los cinco pasteles que considero absolutamente deliciosos y que definitivamente deberías probar al menos una vez en la vida. Estos pasteles son mis favoritos por diferentes razones, desde su sabor hasta su textura y presentación. ¡Espero que te animes a probarlos y que también se conviertan en tus favoritos!
|
|
|
|
|
</p>
|
|
|
|
|
<div class="btn-read-more">Leer más</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-blog">
|
|
|
|
|
<div class="container-img">
|
|
|
|
|
<img src={PastelZanahoria} alt="Imagen Blog 2" />
|
|
|
|
|
<div class="button-group-blog">
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-link"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-blog">
|
|
|
|
|
<h3>Receta: Pastel de Zanahoria</h3>
|
|
|
|
|
<span>23 de abril de 2024</span>
|
|
|
|
|
<p>
|
|
|
|
|
El pastel de zanahoria es una verdadera joya en el mundo de la repostería. Su combinación de sabores dulces y especiados, junto con la textura húmeda y esponjosa, lo convierten en un postre irresistible para cualquier ocasión. En este artículo, te compartiré mi receta favorita de pastel
|
|
|
|
|
de zanahoria para que puedas disfrutar de esta delicia en cada bocado.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="btn-read-more">Leer más</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-blog">
|
|
|
|
|
<div class="container-img">
|
|
|
|
|
<img src={PastelTematico} alt="Imagen Blog 3" />
|
|
|
|
|
<div class="button-group-blog">
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="fa-solid fa-link"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-blog">
|
|
|
|
|
<h3>5 Caracteristicas de un patel tematico</h3>
|
|
|
|
|
<span>20 de abril de 2024</span>
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing
|
|
|
|
|
elit. Iste, molestiae! Ratione et, dolore ipsum
|
|
|
|
|
quaerat iure illum reprehenderit non maxime amet dolor
|
|
|
|
|
voluptas facilis corporis, consequatur eius est sunt
|
|
|
|
|
suscipit?
|
|
|
|
|
</p>
|
|
|
|
|
<div class="btn-read-more">Leer más</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<script
|
|
|
|
|
src="https://kit.fontawesome.com/81581fb069.js"
|
|
|
|
|
crossorigin="anonymous"
|
|
|
|
|
></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default App
|
