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
