FrontInicio
This commit is contained in:
prunzinho
parent
1a47b68afe
commit
1423748d25
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,539 @@
|
|||
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 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)
|
||||
|
||||
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">
|
||||
<span class="text">Carrito</span>
|
||||
<span class="number">(0)</span>
|
||||
</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="#">Inicio</a></li>
|
||||
<li><a href="#">Pasteles</a></li>
|
||||
<li><a href="#">Personalizar Pastel</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<form class="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button class="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</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>Pastel 4 leches</p>
|
||||
<span>Ver más</span>
|
||||
</div>
|
||||
<div class="card-category category-expreso">
|
||||
<p>Expreso Americano</p>
|
||||
<span>Ver más</span>
|
||||
</div>
|
||||
<div class="card-category category-capuchino">
|
||||
<p>Pastel de Zarza</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>
|
||||
|
||||
|
||||
<div class="container-products">
|
||||
|
||||
<div class="card-product">
|
||||
<div class="container-img">
|
||||
<img src={PastelEditado5} alt="Cafe Irish" />
|
||||
<span class="discount">-13%</span>
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card-product">
|
||||
<div class="stars">
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel Frambuesa</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
</span>
|
||||
<p class="price">$300 </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-product">
|
||||
<div class="container-img">
|
||||
<img
|
||||
src={PastelEditado6}
|
||||
alt="Cafe incafe-ingles.jpg"
|
||||
/>
|
||||
<span class="discount">-22%</span>
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card-product">
|
||||
<div class="stars">
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-regular fa-star"></i>
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Moka</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
</span>
|
||||
<p class="price">$390 <span>$500</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div 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>
|
||||
|
||||
|
||||
</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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
Loading…
Reference in New Issue