catalogo y producto page

2025-09-15 09:08:01 +02:00
parent 25f3b60abe
commit 048d679917
12 changed files with 489 additions and 265 deletions
--- a/assets/img/filter.svg
+++ 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>
--- a/assets/img/shopping-bag-white.svg
+++ 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>
--- 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') {
--- 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,36 +81,17 @@
            </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" 
@@ -113,7 +99,16 @@
    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: 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%;
-  overflow: hidden;
-  margin: auto;
+    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;
+    font-size: $m;
+    width: 80%;
+    @include tablet {
+      width: 100%;
+    }
+    @include mobile {
+      width: 100%;
+    }
  }
 }

-.button_container {
+.div-link:hover {
+  background-color: white;
+  transition: all 0.2s ease;
+  color: $color-button;
+}
+
+.div-link {
  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;
+  justify-content: center;
+  align-items: center;
+  gap: 0.7rem;
+  width: auto;
+  border: 1px solid $color-button;
  border-radius: 5px;
-    background-color: $color-light;
-
-    &:hover {
-      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
-      transition: all 0.2s ease;
-    }
-
-    span {
-      color: $color-orange;
+  background-color: $color-button;
  font-weight: $bold;
-      display: inline-block;
-      margin-bottom: 15px;
-    }
-  }
-}
-
-.button_buy-simple {
-  border: 3px solid $color-orange;
-  border-radius: 8px;
-  background-color: $color-light;
-  padding: 10px 20px;
+  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 {
+
+  .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;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
    text-align: center;
-  padding: 0 15px;
+  }

-  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;
+    }
  }
 }

--- 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;
  }
 }

--- 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>
--- a/layouts/mainbanner.vue
+++ b/layouts/mainbanner.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <NavBar />
-    <NavBarSearch />
+    <!-- <NavBarSearch /> -->
    <NuxtPage />
    <CookieUsageNotification />
-    <BannerCoop />
+    <!-- <BannerCoop /> -->
    <Footer />
  </div>
 </template>
--- 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)
      }
--- 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>
--- 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 class="title-container">
+            <h5 class="items-title">Catálogo</h5>
+            <div class="title-lines"></div>
          </div>
-        
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
          <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
+            <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
+            </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 class="query-text">
+              No encontramos "{{ queryText }}" en Consumo Cuidado.
            </p>
-          <div v-for="product in defaultProducts" :key="product.id">
+            <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.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>
--- 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>
--- 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"