FrontPastel/frontend/src/AppInicio.jsx

428 lines
12 KiB
JavaScript

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";
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 App() {
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 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">
</div>
</div>
</div>
</div>
<div class="container-navbar">
<nav class="navbar container">
<i class="fa-solid fa-bars"></i>
<ul class="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 class="search-form">
</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">
<p>Pasteles Personalizados</p>
<span>Ver más</span>
</div>
<div class="card-category category-expreso">
<p>Pasteles en linea </p>
<span>Ver más</span>
</div>
</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