PastelesRutas

This commit is contained in:
Cesar.Gomez 2024-05-08 20:09:53 -06:00
parent f1cf6d70bc
commit 2b8c95c661
17 changed files with 2203 additions and 193 deletions

View File

@ -44,6 +44,18 @@ function App() {
navigate("/");
};
const redirectToChocolate = ()=>{
navigate("/Pasteles/ChocolateBlanco")
};
const redirectToMoka = ()=>{
navigate("/Pasteles/PastelMoka")
};
const redirectToChocolate2 = ()=>{
navigate("/Pasteles/PastelChocolate")
};
return (
<>
<body>
@ -114,11 +126,11 @@ function App() {
<div class="container-categories">
<div class="card-category category-moca">
<p>Pasteles Personalizados</p>
<span>Ver más</span>
<span onClick={redirectPersonalizarPastelArcoiris}>Ver más</span>
</div>
<div class="card-category category-expreso">
<p>Pasteles en linea </p>
<span>Ver más</span>
<span onClick={redirectToPasteles}>Ver más</span>
</div>
</div>
@ -129,8 +141,7 @@ function App() {
<div class="container-options">
<span class="active">Destacados</span>
<span>Más recientes</span>
<span>Mejores Vendidos</span>
</div>
<div class="container-products">
@ -140,12 +151,7 @@ function App() {
<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>
@ -158,8 +164,8 @@ function App() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel Chocolate Blanco</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToChocolate}>
<FaRegEye className="icono-eye"/>
</span>
<p class="price">$603<span>$670</span></p>
</div>
@ -173,12 +179,7 @@ function App() {
/>
<span class="discount">-30%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
@ -191,8 +192,9 @@ function App() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Moka</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToMoka}>
<FaRegEye className="icono-eye"/>
</span>
<p class="price">$560 <span>$800</span></p>
</div>
@ -206,12 +208,7 @@ function App() {
/>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
@ -224,8 +221,8 @@ function App() {
<i class="fa-solid fa-star"></i>
</div>
<h3>Pastel de Chocolate</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToChocolate2}>
<FaRegEye className="icono-eye"/>
</span>
<p class="price">$350</p>
</div>
@ -235,12 +232,7 @@ function App() {
<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>
@ -253,8 +245,8 @@ function App() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Zanahoria</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" >
<FaRegEye className="icono-eye"/>
</span>
<p class="price">$450</p>
</div>

View File

@ -40,10 +40,34 @@ function AppPasteles() {
};
const redirectInicio = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/");
};
const redirectToChocolate = ()=>{
navigate("/Pasteles/ChocolateBlanco")
};
const redirectToMoka = ()=>{
navigate("/Pasteles/PastelMoka")
};
const redirectToChocolate2 = ()=>{
navigate("/Pasteles/PastelChocolate")
};
const redirectToPastelZanahoria = ()=>{
navigate("/Pasteles/PastelZanahoria")
};
const redirectToPastelFrambuesa = ()=>{
navigate("/Pasteles/PastelFrambuesa")
};
const redirectToPastelCajeta = ()=>{
navigate("/Pasteles/PastelCajeta")
};
return (
<>
<body>
@ -92,7 +116,7 @@ function AppPasteles() {
<form className="search-form">
<input type="search" placeholder="Buscar..." />
<button className="btn-search">
<FaMagnifyingGlass className="icono-lupa" />
<FaMagnifyingGlass className="icono-lupa" />
</button>
</form>
</nav>
@ -121,16 +145,11 @@ function AppPasteles() {
<div class="card-product">
<div class="container-img">
<img src={PastelEditado1} alt="Cafe Irish" />
<img src={PastelEditado1} alt="Pastel Chocolate Blanco" />
<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">
@ -143,27 +162,20 @@ function AppPasteles() {
</div>
<h3 className='heading-3'>Pastel Chocolate Blanco</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class= "add-cart" onClick={redirectToChocolate}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$603<span>$670</span></p>
</div>
</div>
<div class="card-product1">
<div class="card-product">
<div class="container-img">
<img
src={PastelEditado2}
alt="Cafe incafe-ingles.jpg"
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>
@ -176,8 +188,8 @@ function AppPasteles() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Moka</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToMoka}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$560 <span>$800</span></p>
</div>
@ -189,14 +201,7 @@ function AppPasteles() {
src={PastelEditado3}
alt="Cafe Australiano"
/>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
@ -209,8 +214,8 @@ function AppPasteles() {
<i class="fa-solid fa-star"></i>
</div>
<h3>Pastel de Chocolate</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToChocolate2}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$350</p>
</div>
@ -220,12 +225,8 @@ function AppPasteles() {
<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>
@ -238,8 +239,8 @@ function AppPasteles() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Zanahoria</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToPastelZanahoria}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$450</p>
</div>
@ -250,12 +251,8 @@ function AppPasteles() {
<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>
@ -268,8 +265,8 @@ function AppPasteles() {
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel Frambuesa</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
<span class="add-cart" onClick={redirectToPastelFrambuesa}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$300 </p>
</div>
@ -283,12 +280,8 @@ function AppPasteles() {
/>
<span class="discount">-22%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
@ -300,9 +293,9 @@ function AppPasteles() {
<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"/>
<h3>Pastel de Cajeta</h3>
<span class="add-cart" onClick={redirectToPastelCajeta}>
<FaRegEye className="icono-eye" />
</span>
<p class="price">$390 <span>$500</span></p>
</div>
@ -311,111 +304,11 @@ function AppPasteles() {
<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>

View File

@ -0,0 +1,580 @@
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap');
.main-pers-pastel {
display: flex;
gap: 30px;
margin-bottom: 80px;
font-family: 'Ubuntu';
max-width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
.titulo-Pastel{
font-size: 25px;
}
/* ********************************** */
/* HEADER */
/* ********************************** */
.container-hero {
background-color: var(--background-color);
}
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
}
.customer-support {
display: flex;
align-items: center;
gap: 2rem;
}
.customer-support i {
font-size: 3.3rem;
}
.content-customer-support {
display: flex;
flex-direction: column;
}
.container-logo {
display: flex;
align-items: center;
gap: 0.5rem;
}
.container-logo i {
font-size: 3rem;
}
.container-logo h1 a {
text-decoration: none;
color: #000;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: -1px;
}
.container-user {
display: flex;
gap: 1rem;
cursor: pointer;
}
.container-user .fa-user {
font-size: 3rem;
color: var(--primary-color);
padding-right: 2.5rem;
border-right: 1px solid #e2e2e2;
}
.container-user .fa-basket-shopping {
font-size: 3rem;
color: var(--primary-color);
padding-left: 1rem;
}
.content-shopping-cart {
display: flex;
flex-direction: column;
}
/* ************* NAVBAR ************* */
.container-navbar {
background-color: var(--primary-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
color: white;
}
.navbar .fa-bars {
display: none;
}
.menu {
display: flex;
gap: 2rem;
}
.menu li {
list-style: none;
}
.menu a {
text-decoration: none;
font-size: 1.3rem;
color: var(--dark-color);
font-weight: 600;
text-transform: uppercase;
position: relative;
color: white;
}
.menu a::after {
content: '';
width: 1.5rem;
height: 1px;
background-color: #fff;
position: absolute;
bottom: -3px;
left: 50%;
transform: translate(-50%, 50%);
opacity: 0;
transition: all 0.3s ease;
}
.menu a:hover::after {
opacity: 1;
}
.menu a:hover {
color: #fff;
}
.search-form {
position: relative;
display: flex;
align-items: center;
border: 2px solid #fff;
border-radius: 2rem;
background-color: #fff;
height: 4.4rem;
overflow: hidden;
}
.search-form input {
outline: none;
font-family: inherit;
border: none;
width: 25rem;
font-size: 1.4rem;
padding: 0 2rem;
color: #777;
cursor: pointer;
}
.search-form input::-webkit-search-cancel-button {
appearance: none;
}
.search-form .btn-search {
border: none;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
}
.btn-search i {
font-size: 2rem;
color: #fff;
}
.container-title {
padding: 30px;
background-color: #eee;
margin-bottom: 50px;
color: #222;
}
.chocolate-blanco {
background-color: #f7f7f9;
background-image: url('/assets/pastel-zarza.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-info-product {
flex: 1;
display: flex;
flex-direction: column;
}
.container-price {
padding-bottom: 20px;
border-bottom: 1px solid #e4e4e4;
display: flex;
align-items: center;
justify-content: space-between;
}
.container-price span {
font-size: 24px;
font-weight: 300;
}
.container-details-product {
padding: 30px 0;
padding-bottom: 0px;
}
.opcionesPers{
}
.textPersPastel{
font-size: 18px;
font-weight: 900;
margin-bottom: 10px;
}
.pastel-Type{
font-size: 18px;
font-weight: 900;
font-weight: lighter;
margin-bottom: 10px;
}
.pastel-Type1{
font-size: 18px;
font-weight: lighter;
margin-bottom: 10px;
color: #8B374A;
}
.botones-pastel{
display: flex;
gap: 4;
margin-bottom: 20px;
}
.boton-1{
margin-right: 10px;
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
background-color: #8B374A
}
.boton-1:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.boton-1:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.boton-2{
margin-right: 10px;
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
background-color: #8B374A
}
.boton-2:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.boton-2:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.boton-3{
margin-right: 10px;
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
background-color: #8B374A
}
.boton-3:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.boton-3:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.boton-4{
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
background-color: #8B374A
}
.boton-4:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.boton-4:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.label-text-pers{
margin-top: 10px;
font-size: 16px;
font-weight: lighter;
margin-bottom: 10px;
}
.input-text-pers{
margin-top: 10px;
font-size: 16px;
margin-bottom: 10px;
text-indent: 5px;
width: 100%;
height: 50px;
}
.form-group {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.form-group label {
width: 100px;
color: #222;
font-weight: 700;
}
.form-group select {
width: 300px;
border: none;
padding: 12px 15px;
background-color: #f7f7f7;
outline: none;
color: #666;
}
.btn-clean {
border: none;
background: none;
color: #666;
margin-left: 120px;
cursor: pointer;
}
.btn-clean:hover {
color: #1bbeb4;
}
.container-add-cart {
display: flex;
gap: 20px;
padding-bottom: 30px;
border-bottom: 1px solid #e4e4e4;
}
.container-quantity {
position: relative;
}
.input-quantity {
background-color: #f7f7f7;
border: none;
padding: 10px;
width: 60px;
height: 100%;
color: #666;
font-weight: 500;
line-height: 0;
}
.input-quantity:focus {
outline: none;
}
.input-quantity::-webkit-inner-spin-button,
.input-quantity::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
.fa-chevron-down:hover {
color: #1bbeb4;
}
.fa-chevron-up:hover {
color: #1bbeb4;
}
.btn-add-to-cart{
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
border-radius: 5px;
background-color: #8B374A
}
.btn-add-to-cart:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.btn-add-to-cart:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.hidden {
display: none;
}
.container-description,
.container-additional-information,
.container-reviews {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e4e4e4;
padding: 10px 0;
}
.title-description,
.title-additional-information,
.title-reviews {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.title-description h4,
.title-additional-information h4,
.title-reviews h4 {
font-weight: 300;
color: #666;
font-size: 14px;
}
.text-description,
.text-additional-information,
.text-reviews {
font-size: 13px;
color: #252525;
line-height: 22px;
margin-top: 25px;
}
.container-social {
display: flex;
justify-content: space-between;
padding: 10px 0;
align-items: center;
border-bottom: 1px solid #e4e4e4;
}
.container-social span {
font-weight: 300;
color: #252525;
}
.container-buttons-social {
display: flex;
gap: 15px;
align-items: center;
}
.container-buttons-social a:link,
.container-buttons-social a:visited {
color: #666;
font-size: 15px;
}
.container-buttons-social a:hover {
color: #1bbeb4;
}
.container-related-products h2 {
text-align: center;
margin-bottom: 30px;
}
.card-list-products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.card {
cursor: pointer;
}
.card-img {
background: transparent;
margin-bottom: 15px;
}
.card-img img {
height: 400px;
object-fit: cover;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.info-card {
display: flex;
justify-content: space-between;
}
.text-product {
color: #252525;
font-weight: 300;
line-height: 1.4;
}
.text-product h3{
color: inherit;
font-weight: inherit;
font-size: 15px;
}
.text-product h3:hover{
color: #1bbeb4;
}
.text-product p{
color: #666;
font-size: 13px;
}
.text-product p:hover{
color: #1bbeb4;
}
footer {
padding: 30px;
background-color: #eee;
margin-top: 50px;
color: #222;
}

View File

@ -0,0 +1,245 @@
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 ChocolateBlanco() {
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-2" >
{}
</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">Precio:</h2><p className="pastel-Type1">$400</p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</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>
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 ChocolateBlanco;

View File

@ -0,0 +1,246 @@
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 PastelCajeta() {
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-7" >
{}
</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">Precio:</h2><p className="pastel-Type1">$400</p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</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>
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 PastelCajeta;

View File

@ -0,0 +1,246 @@
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;

View File

@ -0,0 +1,245 @@
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 PastelFrambuesa() {
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-6" >
{}
</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">Precio:</h2><p className="pastel-Type1">$400</p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</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>
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 PastelFrambuesa;

View File

@ -0,0 +1,246 @@
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">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 PastelMoka;

View File

@ -0,0 +1,245 @@
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 PastelZanahoria() {
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-5" >
{}
</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">Precio:</h2><p className="pastel-Type1">$400</p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</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>
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 PastelZanahoria;

View File

@ -207,6 +207,67 @@
background-size: 100% auto;
}
.container-img-2 {
background-color: #f7f7f9;
background-image: url('assets/Edicion21.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-img-3 {
background-color: #f7f7f9;
background-image: url('assets/Edicion12.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-img-4 {
background-color: #f7f7f9;
background-image: url('assets/Edicion13.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-img-5 {
background-color: #f7f7f9;
background-image: url('assets/Edicion14.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-img-6 {
background-color: #f7f7f9;
background-image: url('assets/Edicion15.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.container-img-7 {
background-color: #f7f7f9;
background-image: url('assets/Edicion16.jpg');
flex: 1;
width: 55%;
height: 100%;
padding-top: 60.4%;
background-size: 100% auto;
}
.imgPastel{
flex: 1;
width: 100%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

View File

@ -6,7 +6,12 @@ import PersPastel1 from './PersPastel1.jsx'
import Pedidos from './Pedidos.jsx'
import Pasteles from './Pasteles.jsx'
import LoginForm from './LoginForm.jsx';
import ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx';
import PastelMoka from './Pasteles/PastelMoka.jsx';
import PastelChocolate from './Pasteles/PastelChocolate.jsx';
import PastelZanahoria from './Pasteles/PastelZanahoria.jsx';
import PastelFrambuesa from './Pasteles/PastelFrambuesa.jsx';
import PastelCajeta from './Pasteles/PastelCajeta.jsx';
createRoot(document.getElementById('root')).render(
<React.StrictMode>
@ -17,6 +22,12 @@ createRoot(document.getElementById('root')).render(
<Route path = "/Pedidos" element = {<Pedidos/>}/>
<Route path = "/Pasteles" element = {<Pasteles/>}/>
<Route path = "/Login" element = {<LoginForm/>}/>
<Route path = "/Pasteles/ChocolateBlanco" element = {<ChocolateBlanco/>}/>
<Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/>
<Route path = "/Pasteles/PastelChocolate" element = {<PastelChocolate/>}/>
<Route path = "/Pasteles/PastelZanahoria" element = {<PastelZanahoria/>}/>
<Route path = "/Pasteles/PastelFrambuesa" element = {<PastelFrambuesa/>}/>
<Route path = "/Pasteles/PastelCajeta" element = {<PastelCajeta/>}/>
</Routes>
</Router>
</React.StrictMode>,