Commit agregando personalizar pastel

frontend/src/PersPastel1.jsx

@@ -1,13 +1,77 @@
 import React, { useState } from "react";
 import './PersPastelStyle.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";
+
 function Pastel() {
     
   return (
     <>
-      <div className="container-title">Pastel</div>
+
-      <main>
+<header>
-        <div className="container-img-1">
+
+<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="#">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 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-1" >
           {/* Contenido de tu contenedor de imagen */}
         </div>
         <div className="container-info-product">
@@ -30,7 +94,7 @@ function Pastel() {
                         Confetti Cake
                     </button>
                     <button className="boton-3">
-                        Black & White Cake with Chocolate Fudge
+                        Black & White Cake with Chocolate Fudged
                     </button>
                     <button className="boton-4">
                         Chocolate Fudge Cake

frontend/src/PersPastelStyle.css

@@ -1,35 +1,193 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap');
 
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-
-body {
-	font-family: 'Ubuntu';
-	max-width: 1200px;
-	margin: 0 auto;
-}
-
-img {
-	max-width: 100%;
-}
-
-header {
-	display: flex;
-	align-items: center;
-	padding: 30px;
-	justify-content: center;
-}
 
 
-main {
+
+.main-pers-pastel {
 	display: flex;
 	gap: 30px;
 	margin-bottom: 80px;
+	font-family: 'Ubuntu';
+	max-width: 1200px;
+	margin: 0 auto;
+	margin-top: 20px;
+
+
 }
 
+
+
+/* ********************************** */
+/*               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;
@@ -37,6 +195,9 @@ main {
 	color: #222;
 }
 
+
+
+
 .container-img-1 {
     background-color: #f7f7f9;
     background-image: url('assets/pastel1.jpg');

frontend/src/main.jsx

@@ -10,7 +10,8 @@ createRoot(document.getElementById('root')).render(
     <Router>
       <Routes>
         <Route path = "/" element = {<AppInicio/>}/>
-        <Route path = "/personalizarPastel1" element = {<PersPastel1/>}/>
+        <Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
+        
       </Routes>
     </Router>
   </React.StrictMode>,