catalogo y producto page

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>

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>

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') {

components/ProductCardDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="productcard_container">
-    <div class="row productcard_container-basic">
+    <div class="productcard_container-basic">
-      <div class="image_container col-md-5">
+      <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}`">
+            <p class="share-text">Vendido por:</p>
-              <h2>{{ company?.company_name }}</h2>
+            <h4>{{ company?.company_name }}</h4>
-            </NuxtLink>
             <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" 
+    id="modal-center" 
-      v-model="active" 
+    v-model="active" 
-      centered 
+    centered 
-      title="latienda.coop" 
+    title="latienda.coop" 
-      :ok-variant="modalColor"> {{ modalText }}
+    :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;
+  width: 100%;
-  border-radius: 5px;
+  display: flex;
-  margin-bottom: 12px;
+  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%;
+  height: 400px;
-  overflow: hidden;
+  width: 300px;
-  margin: auto;
+  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-size: $h2;
-    font-weight: medium;
+    font-weight: $bold;
-    color: $color-navy;
+    text-transform: capitalize;
-    font-size: $m;
   }
   .price {
-    font-weight: bold;
+    font-weight: $medium;
-    color: $color-navy;
+    color: $color-primary;
-    font-size: $m;
+    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;
+    width: 80%;
-  }
+    @include tablet {
-
+      width: 100%;
-  .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;
     }
-
+    @include mobile {
-    span {
+      width: 100%;
-      color: $color-orange;
-      font-weight: $bold;
-      display: inline-block;
-      margin-bottom: 15px;
     }
   }
 }
 
-.button_buy-simple {
+.div-link:hover {
-  border: 3px solid $color-orange;
+  background-color: white;
-  border-radius: 8px;
+  transition: all 0.2s ease;
-  background-color: $color-light;
+  color: $color-button;
-  padding: 10px 20px;
+}
+
+.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);
+    cursor: pointer;
-    transition: all 0.2s ease;
   }
-
+  .div-link-img {
-  .button_cart_img {
+    width: 20px;
-    margin-right: 0;
   }
 }
 
-.tag_container {
+.tags_container {
-  margin: 25px 6px 0 0;
+  display: flex;
-  border: 2px solid $color-greylayout;
+  flex-direction: row;
-  border-radius: 5px;
+  align-items: center;
-  padding: 6px 10px;
+  justify-content: start;
-  display: inline-block;
+  gap: 8px;
-  font-family: $font-secondary;
+  margin-top: 1rem;
-  font-size: $xs;
-  color: $color-greytext;
 
-  .tag_img {
+  .tag_container {
-    width: 18px;
+    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;
+  color: $color-primary;
-  font-size: $m;
+  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,
+  h4 {
-  a {
+    font-size: $h4;
-    margin-top: 8px;
+    font-weight: $medium;
-    font-family: $font-secondary;
+    color: $color-navy;
-    font-size: $s;
+    margin-top: 5px;
-    color: $color-greytext;
+    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;
+  display: flex;
-  text-align: center;
+  flex-direction: column;
-  padding: 0 15px;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
+    text-align: center;
+  }
 
-  h2 {
+  .title-container {
-    margin: 35px auto;
+    display: flex;
-    font-weight: medium;
+    align-items: center;
-    color: $color-navy;
+    justify-content: center;
-    font-size: $m;
+    padding: 1rem;
-    display: inline-block;
+    .title-lines {
+      width: 34px;
+      height: 2px;
+      background: $color-consumo-base;
+      margin: 0 8px;
+    }
+    .items-title {
+      font-size: $h5;
+      text-transform: uppercase;
+      padding-top: 10px;
+    }
   }
 }
 

components/ProductFilter.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="container">
+  <div class="c-filter">
-    <div class="row">
+    <div class="c-filter-content">
-      <div class="col-12">
+      <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;
+    color: $color-primary;
-    font-weight: $bold;
+    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;
+      color: $color-primary;
-      font-weight: $bold;
+      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;
   }
 }
 

components/ProductsRelated.vue

@@ -1,26 +1,16 @@
 <template>
-  <div class="row related_products-cards">
+  <div class="cards-grid">
-    <NuxtLink
+    <div v-for="product in products" :key="product.id">
-      v-for="(product, key) in relatedProducts"
+      <ProductCard :key="product.key" :product="product" />
-      :key="`related-${key}`"
+    </div>
-      :to="`/productos/${product.id}`"
+    <div class="c-pagination">
-      class="col mx-2 related_product-card"
+      <BPagination 
-    >
+        v-model="currentPage"
-      <img
+        :v-if="products"
-        v-if="product.image"
+        :total-rows="rows"
-        :src="product.image"
+        :per-page="perPage"
-        alt=""
-        class="related_product-image"
       />
-      <img
+    </div>
-        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>
 </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 {
+.cards-grid {
-  background-color: $color-lighter-green;
+    display: flex;
-  text-align: center;
+    justify-content: center;
-  padding: 0 15px;
+    align-items: flex-start;
-
+    align-content: flex-start;
-  img {
+    gap: 32px var(--spacing-p-8, 32px);
-    margin-top: 12px;
+    align-self: stretch;
+    flex-wrap: wrap;
+    margin-top: 2rem;
   }
-
+  .c-pagination {
-  .image-default {
+    display: flex;
-    object-fit: cover;
+    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>

layouts/mainbanner.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <NavBar />
-    <NavBarSearch />
+    <!-- <NavBarSearch /> -->
     <NuxtPage />
     <CookieUsageNotification />
-    <BannerCoop />
+    <!-- <BannerCoop /> -->
     <Footer />
   </div>
 </template>

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

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>

pages/busqueda.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="container mt-5">
+  <div class="">
-    <div class="row">
+    <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="items">
-        <div class="carousel">
+        <div class="title-container">
-          <h2 class="title">Últimos productos</h2>
+          <div class="title-lines"></div>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
+          <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>
+          <div class="title-container">
-          <p class="count">Hay {{ count }} productos</p>
+            <h5 class="items-title">Catálogo</h5>
-        </div>
+            <div class="title-lines"></div>
-        
-        <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
           </div>
-          <BPagination
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
-            v-model="currentPage"
+          <div v-if="products.length !== 0">
-            class="pagination"
+            <ProductsRelated :related-products="products" :products-per-page="12" />
-            :total-rows="count"
+            <!-- <div v-for="product in products" :key="product.id">
-            :per-page="perPage"
+              <ProductCard :key="product.key" :product="product" />
-            @change="handlePageChange"
+            </div> -->
-          />
+            <!-- <BPagination
-        </div>
+              v-model="currentPage"
-        <div v-else class="no-results">
+              class="pagination"
-          <p>
+              :total-rows="count"
-            No hemos encontrado resultados para su búsqueda... pero puede buscar
+              :per-page="perPage"
-            otro o consultar estos productos.
+              @change="handlePageChange"
-          </p>
+            /> -->
-          <div v-for="product in defaultProducts" :key="product.id">
+          </div>
-            <ProductCard :key="product.key" :product="product" />
+          <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 {
+  display: flex;
-    font-size: $xl;
+  flex-direction: column;
-    color: $color-navy;
+  justify-content: center;
-  }
+  gap: 1rem;
+  padding: 8rem8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
   .count {
-    font-size: $xs;
+    padding: 0 1rem;
-    color: $color-greytext;
+    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;
+    color: $color-primary;
-    margin-top: 100px;
+    font-weight: $medium;
-    margin-bottom: 100px;
+  }
+  .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>

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: $h2;
-  font-size: $xxl;
+  color: $color-primary;
-  margin-bottom: 60px;
+  margin-bottom: 10px;
   @include mobile {
     margin-top: 70px;
   }
 }
-v-toolbar {
+.table-consumo {
-  padding: 0;
+  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>

pages/productos/[id].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
     <ProductCardDetails
       :product="product"
       :related="related"