Estructura Pedidos y Pasteles

This commit is contained in:
prunzinho 2024-05-06 08:15:18 -06:00
parent 2cf5ce57df
commit e280e37940
6 changed files with 510 additions and 3 deletions

View File

@ -30,10 +30,20 @@ function App() {
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
}; };
const redirectToPedidos = () => {
navigate("/Pedidos");
};
const redirectToPasteles = () => {
navigate("/Pasteles");
};
const redirectInicio = () => { const redirectInicio = () => {
// Redirige a la página del hotel cuando se hace clic en el botón // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/"); navigate("/");
}; };
return ( return (
<> <>
<body> <body>
@ -71,9 +81,9 @@ function App() {
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
<ul class="menu"> <ul class="menu">
<li><a href="#" onClick={redirectInicio}>Inicio</a></li> <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
<li><a href="#" >Pasteles</a></li> <li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li> <li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
<li><a href="#">Pedidos</a></li> <li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
<li><a href="#">Blog</a></li> <li><a href="#">Blog</a></li>

View File

205
frontend/src/Pasteles.jsx Normal file
View File

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

85
frontend/src/Pedidos.css Normal file
View File

@ -0,0 +1,85 @@
.content-card-product h3:hover {
color: var(--primary-color);
}
.add-cart {
justify-self: start;
border: 2px solid var(--primary-color);
padding: 1rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.add-cart:hover {
background-color: var(--primary-color);
}
.add-cart i {
font-size: 1.5rem;
color: var(--primary-color);
}
.add-cart:hover i {
color: #fff;
}
.content-card-product .price {
justify-self: end;
align-self: center;
font-size: 1.7rem;
font-weight: 600;
}
.content-card-product .price span {
font-size: 1.5rem;
font-weight: 400;
text-decoration: line-through;
color: #777;
margin-left: 0.5rem;
}
/* ************* ICONOS ************* */
.icono-cliente {
font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
align-items: center;
text-align: left;
color:var(--primary-color)
}
.icono-User {
font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
align-items: center;
text-align: left;
color:var(--primary-color)
}
.icono-basket {
font-size: 4.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
align-items: center;
text-align: left;
color:var(--primary-color)
}
.icono-lupa{
font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
align-items: center;
text-align: left;
color: white;
}
.icono-basket-card{
font-size: 2.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
align-items: center;
text-align: left;
color:var(--primary-color)
}

204
frontend/src/Pedidos.jsx Normal file
View File

@ -0,0 +1,204 @@
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 AppPedidos() {
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>
<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 AppPedidos

View File

@ -3,6 +3,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import AppInicio from './AppInicio.jsx' import AppInicio from './AppInicio.jsx'
import PersPastel1 from './PersPastel1.jsx' import PersPastel1 from './PersPastel1.jsx'
import Pedidos from './Pedidos.jsx'
import Pasteles from './Pasteles.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
@ -11,7 +13,8 @@ createRoot(document.getElementById('root')).render(
<Routes> <Routes>
<Route path = "/" element = {<AppInicio/>}/> <Route path = "/" element = {<AppInicio/>}/>
<Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/> <Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
<Route path = "/Pedidos" element = {<Pedidos/>}/>
<Route path = "/Pasteles" element = {<Pasteles/>}/>
</Routes> </Routes>
</Router> </Router>
</React.StrictMode>, </React.StrictMode>,