From 048d679917be376faeb74199b25ccf0f03b5b021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Mon, 15 Sep 2025 09:08:01 +0200
Subject: [PATCH] catalogo y producto page

---
 assets/img/filter.svg             |   3 +
 assets/img/shopping-bag-white.svg |   3 +
 components/ItemsRow.vue           |   8 +-
 components/ProductCardDetails.vue | 331 ++++++++++++++++++------------
 components/ProductFilter.vue      |  48 +++--
 components/ProductsRelated.vue    | 112 +++++-----
 layouts/mainbanner.vue            |   4 +-
 nuxt.config.ts                    |   2 +-
 pages/admin/cooperativas.vue      |   2 +-
 pages/busqueda.vue                | 195 ++++++++++++++----
 pages/editar/productos/index.vue  |  44 +++-
 pages/productos/[id].vue          |   2 +-
 12 files changed, 489 insertions(+), 265 deletions(-)
 create mode 100644 assets/img/filter.svg
 create mode 100644 assets/img/shopping-bag-white.svg

diff --git a/assets/img/filter.svg b/assets/img/filter.svg
new file mode 100644
index 0000000..a7dccc1
--- /dev/null
+++ b/assets/img/filter.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 3H2L10 12.46V19L14 21V12.46L22 3Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/img/shopping-bag-white.svg b/assets/img/shopping-bag-white.svg
new file mode 100644
index 0000000..50c1ab1
--- /dev/null
+++ b/assets/img/shopping-bag-white.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 6L6.5 2H18.5L21.5 6M3.5 6V20C3.5 20.5304 3.71071 21.0391 4.08579 21.4142C4.46086 21.7893 4.96957 22 5.5 22H19.5C20.0304 22 20.5391 21.7893 20.9142 21.4142C21.2893 21.0391 21.5 20.5304 21.5 20V6M3.5 6H21.5M16.5 10C16.5 11.0609 16.0786 12.0783 15.3284 12.8284C14.5783 13.5786 13.5609 14 12.5 14C11.4391 14 10.4217 13.5786 9.67157 12.8284C8.92143 12.0783 8.5 11.0609 8.5 10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/components/ItemsRow.vue b/components/ItemsRow.vue
index 05d6c1a..c844c71 100644
--- a/components/ItemsRow.vue
+++ b/components/ItemsRow.vue
@@ -12,7 +12,7 @@
       <Carousel
         ref="productDetails"
         class="carousel"
-        :items-to-show="4"
+        :items-to-show="itemsToShow"
         :gap="1"
         :pagination-enabled="false"
         :wrap-around="false"
@@ -78,6 +78,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    itemsToShow: {
+      type: Number,
+      default: 4,
+    },
   },
   data() {
     return {
@@ -117,7 +121,7 @@ export default {
           name: item.company_name,
           image:
             item.logo || this.defaultImage,
-          url: `/c/${item.id}`,
+          url: `/productoras/${item.id}`,
         }
       }
       if (this.type === 'category') {
diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
index 7c23543..50db9f7 100644
--- a/components/ProductCardDetails.vue
+++ b/components/ProductCardDetails.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="productcard_container">
-    <div class="row productcard_container-basic">
-      <div class="image_container col-md-5">
+    <div class="productcard_container-basic">
+      <div class="image_container">
         <img :src="getProductImg(product)" class="image" alt="" />
       </div>
-      <div class="info_container col-md-5">
+      <div class="info_container">
         <h2 variant="primary">
           {{ product?.name }}
         </h2>
@@ -15,7 +15,7 @@
         <span v-if="Number(product?.shipping_cost)"
           >| {{ `Gastos de envío ${product?.shipping_cost}€` }}</span
         >
-        <span v-else>| Sin gastos de envío</span>
+        <!-- <span v-else>| Sin gastos de envío</span> -->
 
         <span v-if="product?.stock">| {{ `Stock ${product?.stock}€` }} </span>
         <p
@@ -32,14 +32,19 @@
               :to="tagRoute(n)"
               class="tag_container"
             >
-              <img
-                class="tag_img"
-                alt="tag image"
-                src="@/assets/img/latienda-tag.svg"
-              />
               <span>{{ n }}</span>
             </NuxtLink>
           </div>
+          <BButton
+            v-if="company?.shop_link"
+            class="div-link"
+            align="center"
+            target="_blank"
+            @click="buyIntent"
+            >
+            <img class="div-link-img" src="@/assets/img/shopping-bag-white.svg" />
+            COMPRA EN SU TIENDA
+          </BButton>
           <div class="smlogos_container">
             <p class="share-text">Comparte:</p>
             <div class="smlogo_container">
@@ -76,44 +81,34 @@
             </a>
           </div>
           <div class="coop_info">
-            <NuxtLink :to="`/c/${company?.id}`">
-              <h2>{{ company?.company_name }}</h2>
-            </NuxtLink>
+            <p class="share-text">Vendido por:</p>
+            <h4>{{ company?.company_name }}</h4>
             <p class="description">{{ company?.description }}</p>
-            <a href="#">{{ company?.web_link }}</a>
+            <NuxtLink :to="`/productoras/${company?.id}`" class="link-saber">
+              <p>Saber más</p>
+            </NuxtLink>
           </div>
         </BCollapse>
       </div>
-      <div class="col-md-2 button_container-detail" align="center">
-        <button class="button_buy-simple" @click="buyIntent">
-          <img
-            class="button_cart_img"
-            alt="cart"
-            src="@/assets/img/latienda-carrito.svg"
-          />
-        </button>
-        <div
-          v-if="product?.discount && product?.discount > 0"
-          class="discount-tag"
-        >
-          {{ `Descuento ${product?.discount}%` }}
-        </div>
-      </div>
     </div>
-    <div class="related_products">
-      <h2 v-if="related">Productos relacionados</h2>
-      <h2 v-else>Otros productos</h2>
-      <ProductsRelated :related-products="relatedProducts" />
-    </div>
-    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+
     <BModal 
-      id="modal-center" 
-      v-model="active" 
-      centered 
-      title="latienda.coop" 
-      :ok-variant="modalColor"> {{ modalText }}
+    id="modal-center" 
+    v-model="active" 
+    centered 
+    title="latienda.coop" 
+    :ok-variant="modalColor"> {{ modalText }}
   </BModal>
+</div>
+<div class="related_products">
+  <div class="title-container">
+    <div class="title-lines"></div>
+    <h2 v-if="related" class="items-title">Productos relacionados</h2>
+    <h2 v-else class="items-title">Otros productos</h2>
+    <div class="title-lines"></div>
   </div>
+  <ProductsRelated :related-products="relatedProducts" />
+</div>
 </template>
 
 <script>
@@ -285,18 +280,65 @@ export default {
 
 <style lang="scss" scoped>
 .productcard_container {
-  border: 3px solid $color-grey-nav;
-  border-radius: 5px;
-  margin-bottom: 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 4rem;
+  margin-bottom: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
+
 .productcard_container-basic {
-  padding: 25px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: start;
+  gap: 4rem;
+  width: 100%;
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 4rem;
+    padding: 3rem 2rem;
+  }
+  @include mobile {
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 5rem;
+    padding: 2rem 1rem;
+  }
 }
 
 .image_container {
-  height: 100%;
-  overflow: hidden;
-  margin: auto;
+  height: 400px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border-radius: 16px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @include mobile {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
 }
 
 .image {
@@ -306,96 +348,97 @@ export default {
 }
 
 .info_container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  
+  @include mobile {
+    margin-top: 2rem;
+  }
   h2 {
-    outline: none;
-    font-weight: medium;
-    color: $color-navy;
-    font-size: $m;
+    font-size: $h2;
+    font-weight: $bold;
+    text-transform: capitalize;
   }
   .price {
-    font-weight: bold;
-    color: $color-navy;
-    font-size: $m;
+    font-weight: $medium;
+    color: $color-primary;
+    font-size: $h5;
   }
   span {
     color: $color-greytext;
   }
   .description {
     margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-  }
-}
-
-.button_container {
-  display: flex;
-  flex-direction: column;
-  font-size: $m;
-
-  span {
-    margin-top: 15px;
-    text-align: center;
-    font-weight: medium;
     font-size: $m;
-    color: $color-navy;
-  }
-
-  .button_buy {
-    border: 3px solid $color-orange;
-    border-radius: 5px;
-    background-color: $color-light;
-
-    &:hover {
-      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-      transition: all 0.2s ease;
+    width: 80%;
+    @include tablet {
+      width: 100%;
     }
-
-    span {
-      color: $color-orange;
-      font-weight: $bold;
-      display: inline-block;
-      margin-bottom: 15px;
+    @include mobile {
+      width: 100%;
     }
   }
 }
 
-.button_buy-simple {
-  border: 3px solid $color-orange;
-  border-radius: 8px;
-  background-color: $color-light;
-  padding: 10px 20px;
+.div-link:hover {
+  background-color: white;
+  transition: all 0.2s ease;
+  color: $color-button;
+}
+
+.div-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.7rem;
+  width: auto;
+  border: 1px solid $color-button;
+  border-radius: 5px;
+  background-color: $color-button;
+  font-weight: $bold;
+  padding: 15px 20px;
+  color: white;
+  margin-top: 2rem;
 
   &:hover {
-    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-    transition: all 0.2s ease;
+    cursor: pointer;
   }
-
-  .button_cart_img {
-    margin-right: 0;
+  .div-link-img {
+    width: 20px;
   }
 }
 
-.tag_container {
-  margin: 25px 6px 0 0;
-  border: 2px solid $color-greylayout;
-  border-radius: 5px;
-  padding: 6px 10px;
-  display: inline-block;
-  font-family: $font-secondary;
-  font-size: $xs;
-  color: $color-greytext;
+.tags_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+  margin-top: 1rem;
 
-  .tag_img {
-    width: 18px;
+  .tag_container {
+    margin: 5px 6px 0 0;
+    border-radius: 1rem;
+    padding: 8px;
+    display: inline-block;
+    font-size: $xs;
+    background-color: white;
+    color: $color-primary;
+    text-align: center;
+    text-transform: uppercase;
+    text-decoration: none;
   }
 }
 
 .share-text {
-  color: $color-navy;
-  font-size: $m;
+  color: $color-primary;
+  font-size: $h5;
+  font-weight: $medium;
   margin-top: 2rem;
-  padding-bottom: 0.2em;
+  padding-bottom: 0.5em;
 }
 
 .smlogo_container {
@@ -406,7 +449,7 @@ export default {
   .smlogo_img {
     cursor: pointer;
     width: 40px;
-    fill: $color-greylayout;
+    fill: $color-button;
   }
   img:hover {
     transform: scale(1.1);
@@ -421,29 +464,63 @@ export default {
 
 .coop_info {
   margin-top: 25px;
-  p,
-  a {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
+  h4 {
+    font-size: $h4;
+    font-weight: $medium;
+    color: $color-navy;
+    margin-top: 5px;
+    text-transform: uppercase;
+    text-decoration: none;
   }
-  a {
-    text-decoration: underline;
+
+  .description {
+    font-size: $m;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link-saber {
+    font-weight: $bold;
+    color: $color-button;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
   }
 }
 
 .related_products {
-  background-color: $color-lighter-green;
-  text-align: center;
-  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
+    text-align: center;
+  }
 
-  h2 {
-    margin: 35px auto;
-    font-weight: medium;
-    color: $color-navy;
-    font-size: $m;
-    display: inline-block;
+  .title-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    .title-lines {
+      width: 34px;
+      height: 2px;
+      background: $color-consumo-base;
+      margin: 0 8px;
+    }
+    .items-title {
+      font-size: $h5;
+      text-transform: uppercase;
+      padding-top: 10px;
+    }
   }
 }
 
diff --git a/components/ProductFilter.vue b/components/ProductFilter.vue
index 6dd42ef..d3d1194 100644
--- a/components/ProductFilter.vue
+++ b/components/ProductFilter.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
+  <div class="c-filter">
+    <div class="c-filter-content">
+      <div class="">
         <div v-b-toggle.collapse-all class="filters-header">
           <img
             class="image"
-            src="@/assets/img/product-filter-filtrar.svg"
+            src="@/assets/img/filter.svg"
             alt=""
           />
-          <h2 class="text">FILTRAR POR</h2>
+          <h2 class="text">FILTRAR PROPUESTAS</h2>
         </div>
         <BCollapse id="collapse-all" visible>
           <!-- Location -->
@@ -47,7 +47,7 @@
                       :max="500"
                       step="10"
                       thumb-label="always"
-                      color="#8cead8"
+                      color="#143E8C"
                       track-color="#d6d5d5"
                     >
                       <template #prepend>
@@ -117,7 +117,7 @@
               </div>
               <div>
                 <button class="filter-button" @click="applyFilters">
-                  Aplicar
+                  APLICAR FILTROS
                 </button>
               </div>
             </BCollapse>
@@ -241,6 +241,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.c-filter {
+  width: 100%;
+  min-height: 100dvh;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+
 .filter-button {
   margin-top: 30px;
   background-color: $color-navy;
@@ -263,11 +282,11 @@ export default {
     margin-top: 2rem;
   }
   .text {
-    font-size: $s;
+    font-size: $m;
     margin: 0;
     margin-left: 10px;
-    color: $color-navy;
-    font-weight: $bold;
+    color: $color-primary;
+    font-weight: $medium;
   }
   .image {
     height: 20px;
@@ -277,7 +296,7 @@ export default {
 .location {
   label {
     font-size: $s;
-    color: $color-navy;
+    color: $color-primary;
     font-weight: $bold;
     position: relative;
   }
@@ -311,8 +330,9 @@ export default {
 
     h2 {
       font-size: $s;
-      color: $color-navy;
-      font-weight: $bold;
+      color: $color-primary;
+      font-weight: $medium;
+      text-transform: uppercase;
     }
     img {
       width: 12px;
@@ -322,7 +342,7 @@ export default {
     display: inline-block;
     font-family: Noto Sans Regular, sans-serif;
     font-size: $s;
-    color: $color-greytext;
+    color: $color-primary;
   }
 }
 
diff --git a/components/ProductsRelated.vue b/components/ProductsRelated.vue
index 506b276..0736da4 100644
--- a/components/ProductsRelated.vue
+++ b/components/ProductsRelated.vue
@@ -1,26 +1,16 @@
 <template>
-  <div class="row related_products-cards">
-    <NuxtLink
-      v-for="(product, key) in relatedProducts"
-      :key="`related-${key}`"
-      :to="`/productos/${product.id}`"
-      class="col mx-2 related_product-card"
-    >
-      <img
-        v-if="product.image"
-        :src="product.image"
-        alt=""
-        class="related_product-image"
+  <div class="cards-grid">
+    <div v-for="product in products" :key="product.id">
+      <ProductCard :key="product.key" :product="product" />
+    </div>
+    <div class="c-pagination">
+      <BPagination 
+        v-model="currentPage"
+        :v-if="products"
+        :total-rows="rows"
+        :per-page="perPage"
       />
-      <img
-        v-else
-        class="image-default"
-        src="@/assets/img/consumo-default.png"
-        alt=""
-      />
-      <h3>{{ product.name }}</h3>
-      <span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
-    </NuxtLink>
+    </div>
   </div>
 </template>
 
@@ -31,56 +21,46 @@ export default {
       type: Array,
       default: () => [],
     },
+    productsPerPage: {
+      type: Number,
+      default: 8,
+    },
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: this.productsPerPage,
+      rows: this.relatedProducts.length,
+    }
+  },
+  computed: {
+    products() {
+      const initial = (this.currentPage - 1) * this.perPage
+      const final = this.currentPage * this.perPage
+      const items = this.relatedProducts ? this.relatedProducts.slice(initial, final) : []
+      return items
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.related_products {
-  background-color: $color-lighter-green;
-  text-align: center;
-  padding: 0 15px;
-
-  img {
-    margin-top: 12px;
+.cards-grid {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: 32px var(--spacing-p-8, 32px);
+    align-self: stretch;
+    flex-wrap: wrap;
+    margin-top: 2rem;
   }
-
-  .image-default {
-    object-fit: cover;
+  .c-pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 4rem;
   }
-
-  .star {
-    width: 12px;
-    margin-right: 1px;
-  }
-
-  .related_product-card {
-    border: 3px solid $color-grey-nav;
-    border-radius: 5px;
-    margin-bottom: 35px;
-
-    .related_product-image {
-      width: 100px;
-      height: 100px;
-      object-fit: cover;
-    }
-
-    h3 {
-      font-weight: $regular;
-      color: $color-navy;
-      font-size: $m;
-      display: inline-block;
-      margin-bottom: 0;
-    }
-
-    span {
-      font-weight: $regular;
-      color: $color-navy;
-      font-size: $m;
-      display: block;
-      font-weight: bolder;
-      margin-bottom: 5px;
-    }
-  }
-}
 </style>
diff --git a/layouts/mainbanner.vue b/layouts/mainbanner.vue
index c59f076..7836081 100644
--- a/layouts/mainbanner.vue
+++ b/layouts/mainbanner.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <NavBar />
-    <NavBarSearch />
+    <!-- <NavBarSearch /> -->
     <NuxtPage />
     <CookieUsageNotification />
-    <BannerCoop />
+    <!-- <BannerCoop /> -->
     <Footer />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 260c45b..5b9d92d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -58,7 +58,7 @@ export default defineNuxtConfig({
 
       try {
         const companies = await $fetch(`${baseURL}companies/`)
-        routes.push(...companies.map((c: any) => `/c/${c.id}`))
+        routes.push(...companies.map((c: any) => `/productoras/${c.id}`))
       } catch (error) {
         console.error('Error fetching companies for sitemap:', error)
       }
diff --git a/pages/admin/cooperativas.vue b/pages/admin/cooperativas.vue
index faefddf..ee0bd58 100644
--- a/pages/admin/cooperativas.vue
+++ b/pages/admin/cooperativas.vue
@@ -37,7 +37,7 @@
           </v-toolbar>
         </template>
         <template #[`item.company_name`]="item">
-          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
+          <a :href="`/productoras/${item.item.id}`" target="_blank" class="mr-2">
             {{ item.item.company_name }}
           </a>
         </template>
diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 40193f6..dc8efc2 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="container mt-5">
-    <div class="row">
+  <div class="">
+    <HeroWithSearch 
+        title="Encuentra tu entidad aliada"
+        subtitle="Colabora, compra o aprende con la economía social"
+      />
+    <div class="c-container row">
       <div class="col-md-3">
         <ProductFilter
         :filters="filters"
@@ -14,12 +18,28 @@
         <BSpinner />
         <span>Cargando productos...</span>
       </div>
-      <div v-if="!loadingProducts" class="col-md-9">
-        <div class="carousel">
-          <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
+      <!-- <div class="items">
+        <div class="title-container">
+          <div class="title-lines"></div>
+          <h5 class="items-title">Últimos productos</h5>
+          <div class="title-lines"></div>
         </div>
-        <div v-if="hasFilterTags" class="applied-filters">
+        <div class="items-container">
+          <ItemsRow :type="`product`" :items="carouselProducts" />
+          <NuxtLink to="/busqueda" class="link">
+            <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
+          </NuxtLink>
+        </div>
+      </div> -->
+      <div v-if="!loadingProducts" class="col-md-9 container-fluid">
+        <div class="carousel">
+          <div class="title-container">
+            <h5 class="items-title">Últimos productos y servicios</h5>
+            <div class="title-lines"></div>
+          </div>
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
+        </div>
+        <!-- <div v-if="hasFilterTags" class="applied-filters">
           <h2 class="title">FILTROS APLICADOS</h2>
           <div class="filter-buttons">
             <button
@@ -53,31 +73,37 @@
               </button>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="results">
-          <h2 class="title"></h2>
-          <p class="count">Hay {{ count }} productos</p>
-        </div>
-        
-        <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <div class="title-container">
+            <h5 class="items-title">Catálogo</h5>
+            <div class="title-lines"></div>
           </div>
-          <BPagination
-            v-model="currentPage"
-            class="pagination"
-            :total-rows="count"
-            :per-page="perPage"
-            @change="handlePageChange"
-          />
-        </div>
-        <div v-else class="no-results">
-          <p>
-            No hemos encontrado resultados para su búsqueda... pero puede buscar
-            otro o consultar estos productos.
-          </p>
-          <div v-for="product in defaultProducts" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
+          <div v-if="products.length !== 0">
+            <ProductsRelated :related-products="products" :products-per-page="12" />
+            <!-- <div v-for="product in products" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
+            <!-- <BPagination
+              v-model="currentPage"
+              class="pagination"
+              :total-rows="count"
+              :per-page="perPage"
+              @change="handlePageChange"
+            /> -->
+          </div>
+          <div v-else class="no-results">
+            <p class="query-text">
+              No encontramos "{{ queryText }}" en Consumo Cuidado.
+            </p>
+            <p>
+              Prueba un término más general, revisa la ortografía o 
+              <span class="link" @click="clearFilters">limpia los filtros</span>.
+            </p>
+            <!-- <div v-for="product in defaultProducts" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
           </div>
         </div>
       </div>
@@ -112,6 +138,7 @@ export default {
   data() {
     return {
       searchText: '',
+      queryText: '',
       currentPage: 1,
       perPage: 10,
       filterTags: {
@@ -146,12 +173,16 @@ export default {
 
   watch: {
     '$route.query'(newValue) {
-      //console.log('New Value:', newValue)
+      console.log('New Value:', newValue)
       //console.log('Route changed:', this.$route.fullPath)
       //console.log('Current params:', this.$route.query)
-      this.updateData(newValue)
+      this.queryText = newValue.q || ''
+      if (newValue.q) {
+        this.updateData(newValue)
+      } else {
+        window.location.reload()
+      }
       Object.assign(this.$data, this.$options.data())
-      
     }
   },
 
@@ -328,11 +359,27 @@ export default {
         })
       }
     },
+
+    clearFilters() {
+      this.currentFilters = null
+      this.appliedFilters = null
+      this.queryText = ''
+      this.$router.push({ 
+        name: 'busqueda'
+      })
+
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
+.c-container {
+  contain: content;
+  width: 100%;
+  min-height: 100dvh;
+  margin-bottom: 2rem;
+}
 .ad {
   margin: 40px auto;
   width: 100%;
@@ -376,10 +423,44 @@ export default {
   }
 }
 
+.container-fluid {
+  background-color: $color-bg-light;
+  margin-top: 2rem;
+  border-radius: 24px;
+}
+
 .carousel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  padding: 8rem 8rem 8rem 8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
+  &-title {
+    text-align: center;
+  }
   @include mobile {
     display: none;
   }
+}
+.title-container {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0 1rem;
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
+  }
+  .items-title {
+    font-size: $h5;
+    text-transform: uppercase;
+    padding-top: 10px;
+  }
   .title {
     font-size: $xl;
     color: $color-navy;
@@ -392,13 +473,18 @@ export default {
   }
 }
 .results {
-  .title {
-    font-size: $xl;
-    color: $color-navy;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 8rem8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
   .count {
-    font-size: $xs;
-    color: $color-greytext;
+    padding: 0 1rem;
+    font-size: $s;
+    font-weight: $medium;
   }
 }
 .pagination {
@@ -410,12 +496,26 @@ export default {
 }
 
 .no-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  .query-text {
+    font-size: $xxl;
+    color: $color-primary;
+    font-weight: $medium;
+  }
   p {
     text-align: center;
     font-size: $xl;
-    color: $color-navy;
-    margin-top: 100px;
-    margin-bottom: 100px;
+    color: $color-primary;
+    font-weight: $medium;
+  }
+  .link {
+    color: $color-button;
+    text-decoration: none;
+    cursor: pointer;
   }
 }
 
@@ -426,5 +526,16 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+  min-height: 100dvh;
+ background-color: $color-bg-light;
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
 </style>
diff --git a/pages/editar/productos/index.vue b/pages/editar/productos/index.vue
index e42681e..1f59fe0 100644
--- a/pages/editar/productos/index.vue
+++ b/pages/editar/productos/index.vue
@@ -5,7 +5,7 @@
         <h1 class="title">
           Productos
           <button
-            class="ml-4 mb-1 btn btn-outline-primary btn-sm"
+            class="btn-add"
             @click="redirectToNewProduct"
           >
             +
@@ -14,7 +14,7 @@
       </BCol>
     </BRow>
     <BRow>
-      <BCol class="d-flex flex-row-reverse">
+      <BCol class="d-flex flex-row-reverse mb-3">
         <button class="btn btn-secondary" :disabled="selectedItemsIndexes.length === 0" @click="desactivateProducts">
           Desactivar
         </button>
@@ -26,7 +26,7 @@
         </div>
       </BCol>
     </BRow>
-    <BRow>
+    <BRow class="table-consumo">
       <template v-if="products">
         <v-data-table
           v-model="selectedItemsIndexes"
@@ -37,9 +37,10 @@
           :search="search"
           :loading="loading"
           loading-text="Cargando productos..."
+          rounded
         >
           <template #top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat color="#FDFCFB" rounded>
               <!-- Search -->
               <v-text-field
                 v-model="search"
@@ -257,21 +258,46 @@ export default {
   margin-top: 40px;
   margin-bottom: 80px;
 }
+
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 60px;
+  font-size: $h2;
+  color: $color-primary;
+  margin-bottom: 10px;
   @include mobile {
     margin-top: 70px;
   }
 }
-v-toolbar {
-  padding: 0;
+.table-consumo {
+  background-color: $color-bg-light;
+  width: 100%;
+  border-radius: 1rem;
+  
+  .v-toolbar {
+    padding: 0 16px;
+    margin: 10px 0;
+  }
 }
+
 .selected-products {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-items: center;
 }
+
+.btn-add {
+  background: $color-button;
+  color: #fff;
+  padding: 0rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  text-transform: uppercase;
+  &:hover {
+    background: white;
+    color: $color-button;
+    border: 1px solid $color-button;
+  }
+}
 </style>
diff --git a/pages/productos/[id].vue b/pages/productos/[id].vue
index def0b1f..e45030f 100644
--- a/pages/productos/[id].vue
+++ b/pages/productos/[id].vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
     <ProductCardDetails
       :product="product"
       :related="related"