dev-gios · gavrojas · Jul 16, 2024 · Jul 16, 2024
diff --git a/public/css/about-us.css b/public/css/about-us.css
@@ -46,6 +46,8 @@
 }
 .mission-title, .vision-title {
   text-align: center;
+  color: var(--primary-blue-principal-900, #11485A);
+
 }
 .mission-description,
 .vision-description {

diff --git a/public/css/card-product-detail.css b/public/css/card-product-detail.css
@@ -1,5 +1,10 @@
 #tittle-detail{
-  font-size: 2em;
+  font-size: var(--ubuntu--headline--32-large-400);
+  color: var(--primary-blue-principal-900, #11485A)
+}
+
+.content-description h3, #opinions-tittle, .description-review h5{
+  color: var(--primary-blue-principal-900, #11485A);
 }
 
 .container-detail {
@@ -204,9 +209,28 @@
 }
 
 .btn-add-product-cart:hover {
-  transform: scale(1.1);
+  transform: scale(1.03);
+}
+
+.btn-add-product-cart .added:hover {
+  transform: scale(1.03);
+}
+
+.botton-info-card-product button:hover{
+  background-color: var( --Colors-primary-blue-700);
+  /* color: var(--Colors-primary-blue-950); */
 }
 
+.botton-info-card-product .added:hover{
+  background-color: var(--Colors-semantic-error);
+  color: var(--Colors-neutral-white);
+}
+
+.botton-info-card-product .added:hover svg path{
+  fill: var(--Colors-neutral-white); 
+}
+
+
 .info-user {
   display: flex;
   gap: 10px;

diff --git a/public/css/card-product.css b/public/css/card-product.css
@@ -26,6 +26,19 @@
   transform: scale(1.05);
 } */
 
+.info-card-product .botton-info-card-product .btn-add-product-cart:hover{
+  background-color: var(--Colors-primary-blue-200);
+}
+
+.info-card-product .botton-info-card-product .btn-add-product-cart.added:hover{
+  background-color: var(--Colors-semantic-error);
+  color: var(--Colors-neutral-white);
+}
+
+.info-card-product .botton-info-card-product .btn-add-product-cart.added:hover svg path{
+  fill: var(--Colors-neutral-white); 
+}
+
 .card-product img {
   padding: 12px var(--Gap-gap-9, 16px);
   border-radius: 16px;
@@ -46,6 +59,10 @@
   color: var(--neutral-white, #fafefe);
 }
 
+.info-card-product h3{
+  color: var(--neutral-white, #fafefe);
+}
+
 .info-card-product h3 {
   font-size: var(--ubuntu--label--14-large-500);
   height: 30px;

diff --git a/public/css/carrusel-products.css b/public/css/carrusel-products.css
@@ -95,17 +95,26 @@
   text-decoration: none;
 }
 
-.header-botton-recommendation #btn-recommendation {
+.header-botton-recommendation .btn-add-product-cart {
   display: inline-flex;
-  padding: var(--Border-radius-border-4, 6px) 8px;
+  padding: 0.75rem 10px;
   justify-content: center;
   align-items: center;
-  gap: 8px;
+  align-self: stretch;
+  appearance: none;
+  line-height: 1.5;
+  gap: 0.625rem;
   border-radius: 8px;
   background: var(--primary-blue-principal-900, #11485A);
   border: none;
+  outline: none;
+  font-size: var(--ubuntu--body--18-xlarge-400);
 }
 
+/* #btn-recommendation{
+
+} */
+
 .container-recommendation .docks {
   width: 100%;
   padding: 0.4em;

diff --git a/public/css/faqs.css b/public/css/faqs.css
@@ -3,6 +3,8 @@ body{
   font-family: "Ubuntu";
 }
 
+
+
 .faq-tittle{
   /* font-size: var(--ubuntu--tittle--23-large-400, 1.44rem);*/
   font-weight: 500;  
@@ -171,6 +173,8 @@ svg {
     width: 50%;
   }
   .container-info-faq h2{
+    color:var(--primary-blue-principal-900, #11485A);
+    font-size: var(--ubuntu--headline--32-large-400);
     width: 50%;
   }
 

diff --git a/public/css/help.css b/public/css/help.css
@@ -44,9 +44,13 @@
   gap:8px;
 }
 
+h3{
+  color: var(--primary-blue-principal-900, #11485A);
+}
+
 .container-help h2{
   font-size: var(--ubuntu--tittle--16-medium-700);
-  color: var(--Colors-neutral-black);
+  color: var(--primary-blue-principal-900, #11485A);
 }
 
 .container-help p{

diff --git a/public/css/intro-about-us.css b/public/css/intro-about-us.css
@@ -6,6 +6,11 @@
   align-items: center;
 }
 
+h2{
+  color: var(--primary-blue-principal-900, #11485A);
+  font-size: var(--ubuntu--headline--23-small-400);
+}
+
 .container-intro-about p {
   margin: 40px 20px;
   padding: 0 20px 32px;
@@ -42,7 +47,8 @@
 }
 
 .introtext{
-  max-width: 1500px;
+  max-width: 1376px;
+  margin: auto;
 }
 .who-we-are p{
   font-weight: normal;
@@ -60,20 +66,31 @@
   font-size: var(--ubuntu--headline--23-small-400);
   font-weight: 700;
   font-style: italic;
+  color: var(--primary-blue-principal-900, #11485A);
 }
 
 
 @media only screen and (min-width: 768px) {
+
   .about-us-banner h2 {
     font-size: var(--ubuntu--headline--29-medium-400);
   }
+
+  h2{
+    font-size: var(--ubuntu--headline--29-medium-400);
+  }
 }
 @media only screen and (min-width: 1200px) {
+  h2{
+    font-size: var(--ubuntu--headline--32-large-400);
+  }
+
   .about-us-banner h2 {
     font-size: var(--ubuntu--display--36-small-400);
   }
   .who-we-are{
     font-size: var( --ubuntu--headline--23-small-400);
   }
+
 }
 
diff --git a/public/css/products.css b/public/css/products.css
@@ -23,6 +23,10 @@ source {
   opacity: 1;
 }
 
+.header-recommendation h1{
+  color: var(--primary-blue-principal-900, #11485A);
+}
+
 .carrousel-container{
   display: flex;
   max-width: 1376px;
@@ -301,9 +305,14 @@ source {
   vertical-align: baseline;
 }
 
-.btn-add-product-cart.added {
+.btn-add-product-cart.added{
   background-color: var(--Colors-primary-blue-200); 
   color: var(--Colors-primary-blue-950); 
+  border: 1px solid var(--Colors-neutral-disable-300);
+}
+
+.btn-add-product-cart.added svg path{
+  fill: var(--Colors-primary-blue-950); 
 }
 
 @media only screen and (min-width: 768px) {

diff --git a/public/css/shopping-cart.css b/public/css/shopping-cart.css
@@ -1,3 +1,12 @@
+h1{
+  color: var(--primary-blue-principal-900, #11485A);
+  font-size: var(--ubuntu--headline--32-large-400);
+}
+
+h3{
+  font-size: var(--ubuntu--tittle--23-large-400)
+}
+
 .nav-actual-page{
   display: flex;
   gap: 8px;
@@ -35,6 +44,14 @@
   padding: 16px 0;
 }
 
+.empty-cart-container p{
+  font-size: var(--ubuntu--body--18-xlarge-400);
+}
+
+.empty-cart-container a{
+  align-self: center;
+}
+
 .recommended-products .container-products{
   justify-content: space-between;
 }

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -89,4 +89,9 @@ input, button, textarea, select { font: inherit}
 
 h2 {
   text-align: center;
+}
+
+::selection {
+  background: var(--Colors-primary-blue-principal-900);
+  color: var(--Colors-neutral-white);
 }
diff --git a/public/js/products.js b/public/js/products.js
@@ -5,6 +5,8 @@ const videos = [
 
 // Seleccionar todos los botones con la clase btn-add-product-cart
 const addButtons = document.querySelectorAll('.btn-add-product-cart');
+const btnInfoCardHeader = document.querySelector('.botton-info-card-product button');
+const btnInfoCardProducts = document.querySelector('.info-card-product .botton-info-card-product .btn-add-product-cart');
 
 addButtons.forEach(button => {
     button.addEventListener('click', async function(event) {
@@ -30,7 +32,37 @@ addButtons.forEach(button => {
         // console.log('Producto añadido al carrito:', data);
 
         // Cambiar el estilo del botón al añadirlo al carrito
-        button.classList.add('added');
+        button.classList.toggle('added');
+
+        const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#clip0_1230_850)">
+            <path d="M11.5504 8.23587L9.97888 6.66339H11.3343L13.4951 2.73219H6.05019L4.47871 1.15971H14.7915C15.0927 1.15971 15.3252 1.28747 15.4889 1.543C15.6526 1.79853 15.6558 2.07699 15.4987 2.37838L12.7093 7.41032C12.5653 7.6724 12.3787 7.87551 12.1495 8.01966C11.9203 8.1638 11.7206 8.23587 11.5504 8.23587ZM4.61622 15.312C4.18406 15.312 3.81411 15.1581 3.50636 14.8501C3.19861 14.5422 3.04474 14.172 3.04474 13.7396C3.04474 13.3071 3.19861 12.9369 3.50636 12.629C3.81411 12.321 4.18406 12.1671 4.61622 12.1671C5.04837 12.1671 5.41832 12.321 5.72607 12.629C6.03382 12.9369 6.18769 13.3071 6.18769 13.7396C6.18769 14.172 6.03382 14.5422 5.72607 14.8501C5.41832 15.1581 5.04837 15.312 4.61622 15.312ZM14.6737 15.7838L10.2342 11.3808H5.08766C4.51145 11.3808 4.07275 11.1351 3.77155 10.6437C3.47035 10.1523 3.4507 9.638 3.71262 9.10074L4.53764 7.41032L3.12331 4.22604L0.216078 1.31695C0.0720261 1.17281 0 0.989353 0 0.766585C0 0.543817 0.0720261 0.36036 0.216078 0.216216C0.36013 0.0720721 0.543469 0 0.766095 0C0.988721 0 1.17206 0.0720721 1.31611 0.216216L15.7737 14.683C15.9178 14.8272 15.9931 15.0074 15.9996 15.2236C16.0062 15.4398 15.9309 15.6265 15.7737 15.7838C15.6297 15.9279 15.4463 16 15.2237 16C15.0011 16 14.8177 15.9279 14.6737 15.7838ZM8.66277 9.80835L7.09129 8.23587H5.8734L5.08766 9.80835H8.66277ZM12.4736 15.312C12.0414 15.312 11.6715 15.1581 11.3637 14.8501C11.056 14.5422 10.9021 14.172 10.9021 13.7396C10.9021 13.3071 11.056 12.9369 11.3637 12.629C11.6715 12.321 12.0414 12.1671 12.4736 12.1671C12.9058 12.1671 13.2757 12.321 13.5835 12.629C13.8912 12.9369 14.0451 13.3071 14.0451 13.7396C14.0451 14.172 13.8912 14.5422 13.5835 14.8501C13.2757 15.1581 12.9058 15.312 12.4736 15.312Z" fill="#E93828"/></g><defs>
+            <clipPath id="clip0_1230_850"><rect width="16" height="16" fill="white"/>
+            </clipPath></defs>
+        </svg>`
+
+        const defaultAddIcon = `<svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"><path d="M6.60541 16C5.48609 16 4.58045 16.9 4.58045 18C4.58045 19.1 5.48609 20 6.60541 20C7.72474 20 8.64055 19.1 8.64055 18C8.64055 16.9 7.72474 16 6.60541 16ZM16.7811 16C15.6618 16 14.7561 16.9 14.7561 18C14.7561 19.1 15.6618 20 16.7811 20C17.9004 20 18.8162 19.1 18.8162 18C18.8162 16.9 17.9004 16 16.7811 16ZM18.8162 14C18.8162 13.45 18.3583 13 17.7987 13H6.60541L7.72474 11H15.3056C16.0688 11 16.7404 10.59 17.0864 9.97L20.3833 3.83C20.6377 3.35 20.4647 2.75 19.9763 2.49C19.4777 2.22 18.8569 2.41 18.5924 2.9L15.3056 9H8.16229L4.10219 0.57C3.93938 0.22 3.57306 0 3.18638 0H1.51757C0.957906 0 0.5 0.45 0.5 1C0.5 1.55 0.957906 2 1.51757 2H2.53514L6.19838 9.59L4.82467 12.03C4.08184 13.37 5.05871 15 6.60541 15H17.7987C18.3583 15 18.8162 14.55 18.8162 14ZM10.9708 0.71C11.3676 0.32 12.0087 0.32 12.4056 0.71L15.0411 3.3C15.4379 3.69 15.4379 4.32 15.0411 4.71L12.4056 7.3C12.0087 7.69 11.3676 7.69 10.9708 7.3C10.5739 6.91 10.5739 6.28 10.9708 5.89L11.8662 5H8.64055C8.08089 5 7.62298 4.55 7.62298 4C7.62298 3.45 8.08089 3 8.64055 3H11.8662L10.9708 2.12C10.5739 1.73 10.5739 1.1 10.9708 0.71Z" fill="#FAFEFE"/></svg>`
+
+
+
+        if(btnInfoCardHeader.classList.contains('added')){
+            btnInfoCardHeader.innerHTML = `${deleteIcon} Remover del carrito`;
+        }else{
+            btnInfoCardHeader.innerHTML = `${defaultAddIcon} Añadir al carrito`;
+        }
+
+        if(btnInfoCardProducts.classList.contains('added')){
+            btnInfoCardProducts.innerHTML = `${deleteIcon}`;
+        }else{
+            btnInfoCardProducts.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.95461 6.09524C9.40234 6.09524 9.76866 5.75238 9.76866 5.33333V3.80952H11.3968C11.8445 3.80952 12.2108 3.46667 12.2108 3.04762C12.2108 2.62857 11.8445 2.28571 11.3968 2.28571H9.76866V0.761905C9.76866 0.342857 9.40234 0 8.95461 0C8.50688 0 8.14055 0.342857 8.14055 0.761905V2.28571H6.51244C6.06471 2.28571 5.69839 2.62857 5.69839 3.04762C5.69839 3.46667 6.06471 3.80952 6.51244 3.80952H8.14055V5.33333C8.14055 5.75238 8.50688 6.09524 8.95461 6.09524ZM4.88433 12.9524C3.98887 12.9524 3.26436 13.6381 3.26436 14.4762C3.26436 15.3143 3.98887 16 4.88433 16C5.77979 16 6.51244 15.3143 6.51244 14.4762C6.51244 13.6381 5.77979 12.9524 4.88433 12.9524ZM13.0249 12.9524C12.1294 12.9524 11.4049 13.6381 11.4049 14.4762C11.4049 15.3143 12.1294 16 13.0249 16C13.9203 16 14.653 15.3143 14.653 14.4762C14.653 13.6381 13.9203 12.9524 13.0249 12.9524ZM5.77979 9.14286H11.8445C12.455 9.14286 12.9923 8.83048 13.2691 8.3581L15.9066 3.68C16.1101 3.31429 15.9718 2.85714 15.581 2.65905C15.1821 2.45333 14.6856 2.5981 14.4739 2.97143L11.8445 7.61905H6.12983L2.66196 0.761905H0.814055C0.366325 0.761905 0 1.10476 0 1.52381C0 1.94286 0.366325 2.28571 0.814055 2.28571H1.62811L4.55871 8.06857L3.45973 9.92762C2.86547 10.9486 3.64697 12.1905 4.88433 12.1905H13.8389C14.2867 12.1905 14.653 11.8476 14.653 11.4286C14.653 11.0095 14.2867 10.6667 13.8389 10.6667H4.88433L5.77979 9.14286Z" fill="#11485A"/></svg>`;
+        }
+
+
+
 
         // Mostrar mensaje emergente (popup) de éxito
         alert(`Producto añadido exitosamente: ${data.message}`); // Aquí puedes personalizar el mensaje

diff --git a/src/views/partials/card-recommendation.ejs b/src/views/partials/card-recommendation.ejs
@@ -11,10 +11,14 @@
     <p class="price-2">$<%= formatCurrency(producto.price.toFixed(2)) %></p>
     <div class="botton-info-card-product">
       <a href="/productos/<%= producto.productId %>">Ver Detalle</a>
-      <button id="btn-recommendation" class="btn-add-product-cart">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-          <path d="M17.9092 12.1905C18.8047 12.1905 19.5373 11.5048 19.5373 10.6667V7.61905H22.7935C23.689 7.61905 24.4217 6.93333 24.4217 6.09524C24.4217 5.25714 23.689 4.57143 22.7935 4.57143H19.5373V1.52381C19.5373 0.685714 18.8047 0 17.9092 0C17.0138 0 16.2811 0.685714 16.2811 1.52381V4.57143H13.0249C12.1294 4.57143 11.3968 5.25714 11.3968 6.09524C11.3968 6.93333 12.1294 7.61905 13.0249 7.61905H16.2811V10.6667C16.2811 11.5048 17.0138 12.1905 17.9092 12.1905ZM9.76866 25.9048C7.97774 25.9048 6.52872 27.2762 6.52872 28.9524C6.52872 30.6286 7.97774 32 9.76866 32C11.5596 32 13.0249 30.6286 13.0249 28.9524C13.0249 27.2762 11.5596 25.9048 9.76866 25.9048ZM26.0498 25.9048C24.2588 25.9048 22.8098 27.2762 22.8098 28.9524C22.8098 30.6286 24.2588 32 26.0498 32C27.8407 32 29.306 30.6286 29.306 28.9524C29.306 27.2762 27.8407 25.9048 26.0498 25.9048ZM11.5596 18.2857H23.689C24.9101 18.2857 25.9846 17.661 26.5382 16.7162L31.8133 7.36C32.2203 6.62857 31.9435 5.71429 31.162 5.31809C30.3643 4.90667 29.3711 5.19619 28.9478 5.94286L23.689 15.2381H12.2597L5.32392 1.52381H1.62811C0.73265 1.52381 0 2.20952 0 3.04762C0 3.88571 0.73265 4.57143 1.62811 4.57143H3.25622L9.11742 16.1371L6.91947 19.8552C5.73095 21.8971 7.29393 24.381 9.76866 24.381H27.6779C28.5733 24.381 29.306 23.6952 29.306 22.8571C29.306 22.019 28.5733 21.3333 27.6779 21.3333H9.76866L11.5596 18.2857Z" fill="#FAFEFE"/>
-        </svg>
+      <button class="btn-add-product-cart">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="24"
+            viewBox="0 0 25 24"
+            fill="none"><path d="M6.60541 16C5.48609 16 4.58045 16.9 4.58045 18C4.58045 19.1 5.48609 20 6.60541 20C7.72474 20 8.64055 19.1 8.64055 18C8.64055 16.9 7.72474 16 6.60541 16ZM16.7811 16C15.6618 16 14.7561 16.9 14.7561 18C14.7561 19.1 15.6618 20 16.7811 20C17.9004 20 18.8162 19.1 18.8162 18C18.8162 16.9 17.9004 16 16.7811 16ZM18.8162 14C18.8162 13.45 18.3583 13 17.7987 13H6.60541L7.72474 11H15.3056C16.0688 11 16.7404 10.59 17.0864 9.97L20.3833 3.83C20.6377 3.35 20.4647 2.75 19.9763 2.49C19.4777 2.22 18.8569 2.41 18.5924 2.9L15.3056 9H8.16229L4.10219 0.57C3.93938 0.22 3.57306 0 3.18638 0H1.51757C0.957906 0 0.5 0.45 0.5 1C0.5 1.55 0.957906 2 1.51757 2H2.53514L6.19838 9.59L4.82467 12.03C4.08184 13.37 5.05871 15 6.60541 15H17.7987C18.3583 15 18.8162 14.55 18.8162 14ZM10.9708 0.71C11.3676 0.32 12.0087 0.32 12.4056 0.71L15.0411 3.3C15.4379 3.69 15.4379 4.32 15.0411 4.71L12.4056 7.3C12.0087 7.69 11.3676 7.69 10.9708 7.3C10.5739 6.91 10.5739 6.28 10.9708 5.89L11.8662 5H8.64055C8.08089 5 7.62298 4.55 7.62298 4C7.62298 3.45 8.08089 3 8.64055 3H11.8662L10.9708 2.12C10.5739 1.73 10.5739 1.1 10.9708 0.71Z" fill="#FAFEFE"/></svg>
+        Añadir al carrito
       </button>
     </div>
   </div>

diff --git a/src/views/partials/navbar.ejs b/src/views/partials/navbar.ejs
@@ -35,11 +35,9 @@
         <% } %>  
       </div>
       <div class="cart">
-        <a id="carroComprasLink" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 25"
-            fill="#FAFEFE">
-            <path
-              d="M13.4319 9.64286C14.1035 9.64286 14.653 9.12857 14.653 8.5V6.21429H17.0952C17.7668 6.21429 18.3162 5.7 18.3162 5.07143C18.3162 4.44286 17.7668 3.92857 17.0952 3.92857H14.653V1.64286C14.653 1.01429 14.1035 0.5 13.4319 0.5C12.7603 0.5 12.2108 1.01429 12.2108 1.64286V3.92857H9.76866C9.09706 3.92857 8.54758 4.44286 8.54758 5.07143C8.54758 5.7 9.09706 6.21429 9.76866 6.21429H12.2108V8.5C12.2108 9.12857 12.7603 9.64286 13.4319 9.64286ZM7.32649 19.9286C5.9833 19.9286 4.89654 20.9571 4.89654 22.2143C4.89654 23.4714 5.9833 24.5 7.32649 24.5C8.66969 24.5 9.76866 23.4714 9.76866 22.2143C9.76866 20.9571 8.66969 19.9286 7.32649 19.9286ZM19.5373 19.9286C18.1941 19.9286 17.1074 20.9571 17.1074 22.2143C17.1074 23.4714 18.1941 24.5 19.5373 24.5C20.8805 24.5 21.9795 23.4714 21.9795 22.2143C21.9795 20.9571 20.8805 19.9286 19.5373 19.9286ZM8.66969 14.2143H17.7668C18.6826 14.2143 19.4885 13.7457 19.9036 13.0371L23.86 6.02C24.1652 5.47143 23.9576 4.78571 23.3715 4.48857C22.7732 4.18 22.0283 4.39714 21.7108 4.95714L17.7668 11.9286H9.19475L3.99294 1.64286H1.22108C0.549487 1.64286 0 2.15714 0 2.78571C0 3.41429 0.549487 3.92857 1.22108 3.92857H2.44216L6.83806 12.6029L5.1896 15.3914C4.29821 16.9229 5.47045 18.7857 7.32649 18.7857H20.7584C21.43 18.7857 21.9795 18.2714 21.9795 17.6429C21.9795 17.0143 21.43 16.5 20.7584 16.5H7.32649L8.66969 14.2143Z" />
-          </svg></a>
+        <a id="carroComprasLink" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path d="M7.32649 19.2C5.9833 19.2 4.89654 20.28 4.89654 21.6C4.89654 22.92 5.9833 24 7.32649 24C8.66969 24 9.76866 22.92 9.76866 21.6C9.76866 20.28 8.66969 19.2 7.32649 19.2ZM19.5373 19.2C18.1941 19.2 17.1074 20.28 17.1074 21.6C17.1074 22.92 18.1941 24 19.5373 24C20.8805 24 21.9795 22.92 21.9795 21.6C21.9795 20.28 20.8805 19.2 19.5373 19.2ZM21.9795 16.8C21.9795 16.14 21.43 15.6 20.7584 15.6H7.32649L8.66969 13.2H17.7667C18.6826 13.2 19.4885 12.708 19.9036 11.964L23.86 4.596C24.1652 4.02 23.9576 3.3 23.3715 2.988C22.7732 2.664 22.0283 2.892 21.7108 3.48L17.7667 10.8H9.19475L4.32263 0.684C4.12726 0.264 3.68767 0 3.22366 0H1.22108C0.549487 0 0 0.54 0 1.2C0 1.86 0.549487 2.4 1.22108 2.4H2.44216L6.83806 11.508L5.1896 14.436C4.29821 16.044 5.47045 18 7.32649 18H20.7584C21.43 18 21.9795 17.46 21.9795 16.8ZM12.5649 0.852C13.0412 0.384 13.8104 0.384 14.2867 0.852L17.4493 3.96C17.9255 4.428 17.9255 5.184 17.4493 5.652L14.2867 8.76C13.8104 9.228 13.0412 9.228 12.5649 8.76C12.0887 8.292 12.0887 7.536 12.5649 7.068L13.6395 6H9.76866C9.09706 6 8.54758 5.46 8.54758 4.8C8.54758 4.14 9.09706 3.6 9.76866 3.6H13.6395L12.5649 2.544C12.0887 2.076 12.0887 1.32 12.5649 0.852Z" fill="#FAFEFE"/>
+        </svg></a>
       </div>
       <div class="toggle" id="navbarToggle" onclick="toggleMenu()">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="FAFEFE">

diff --git a/src/views/shopping-cart.ejs b/src/views/shopping-cart.ejs
@@ -86,9 +86,9 @@
             <div class="empty-cart-image">
               <img src="/img/shopping-cart/empty-cart.png" alt="img placeholder">
             </div>
-            <button id="btn-explore-products" class="btn-primary" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+            <a href="/productos"><button id="btn-explore-products" class="btn-primary" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
               <path d="M13.1986 12.108H12.3645L12.0688 11.8231C13.3359 10.3458 13.9905 8.33036 13.6315 6.18827C13.1352 3.25477 10.6857 0.912194 7.72937 0.553421C3.26319 0.00470889 -0.495582 3.76128 0.0534522 8.22484C0.412436 11.1794 2.75639 13.6275 5.69161 14.1235C7.83495 14.4823 9.8516 13.828 11.3298 12.5618L11.6148 12.8572V13.6909L16.1021 18.1755C16.535 18.6082 17.2424 18.6082 17.6753 18.1755C18.1082 17.7429 18.1082 17.0359 17.6753 16.6032L13.1986 12.108ZM6.86358 12.108C4.23456 12.108 2.11233 9.98705 2.11233 7.35956C2.11233 4.73207 4.23456 2.61109 6.86358 2.61109C9.49261 2.61109 11.6148 4.73207 11.6148 7.35956C11.6148 9.98705 9.49261 12.108 6.86358 12.108Z" fill="#FAFEFE"/>
-            </svg>Explorar productos</button>
+            </svg>Explorar productos</button></a>
           </div>
         <% } %>
         <div class="recommended-products">