productora page

pages/productoras/[id].vue

@@ -73,23 +73,41 @@
       
       </div>
     </div>
-    <div class="row">
-      <div class="col-12 c-tabs">
+    <div class="c-tabs-container">
+      <div class="c-tabs">
         <div>
-          <BCard no-body>
-            <BTabs card>
-              <BTab title="Devoluciones, garantías y reembolsos" active>
+          <BCard no-body class="b-card">
+            <BTabs v-model:index="tabIndex"  class="b-tabs">
+              <BTab
+                active
+                :title-link-class="tabIndex === 0 ? ['#F28C8C', '#FFFF'] : ['#FAD1D1', '#000']"
+                :class="{
+                  'b-tab-active': tabIndex === 0,
+                }"
+              >
+                <template #title>
+                  <img class="div-action-img" src="@/assets/img/truck.svg" />
+                  Envío
+                </template>
                 <BCardText>
                   {{
-                    coop?.sale_terms ||
+                    coop?.shipping_terms ||
                     'Consultar con la cooperativa para más información'
                   }}
                 </BCardText>
               </BTab>
-              <BTab title="Envío">
+              <BTab
+                :class="{
+                  'b-tab-active': tabIndex === 1,
+                }"
+              >
+                <template #title>
+                  <img class="div-action-img" src="@/assets/img/info.svg" />
+                  Devoluciones, garantías y reembolsos
+                </template>
                 <BCardText>
                   {{
-                    coop?.shipping_terms ||
+                    coop?.sale_terms ||
                     'Consultar con la cooperativa para más información'
                   }}
                 </BCardText>
@@ -99,18 +117,29 @@
         </div>
       </div>
     </div>
-    <div v-if="slicedProducts.length !== 0">
-      {{ slicedProducts }} productos encontrados
-      <div v-for="product in slicedProducts" :key="product.id">
-        <ProductCard :key="product.key" :product="product" />
+    <div class="c-catalogo">
+      <div class="title-container">
+        <div class="title-lines"></div>
+        <h5 class="items-title">Nuestro catálogo</h5>
+        <div class="title-lines"></div>
       </div>
-      <BPagination
-        v-model="currentPage"
-        :v-if="products"
-        class="pagination"
-        :total-rows="rows"
-        :per-page="perPage"
-      />
+      <div class="cards-grid">
+        <div v-for="product in slicedProducts" :key="product.id">
+          <ProductCard :key="product.key" :product="product" />
+        </div>
+        </div>
+        <div class="c-pagination">
+          <BPagination 
+            v-if="products"
+            v-model="currentPage"
+            :v-if="products"
+            :total-rows="rows"
+            :per-page="perPage"
+          />
+          <div v-if="!products">
+            No se encontraron productos para esta productora
+          </div>
+        </div>
     </div>
   </div>
 </template>
@@ -146,7 +175,8 @@ export default {
       coop: null,
       products: null,
       currentPage: 1,
-      perPage: 10,
+      perPage: 8,
+      tabIndex: 0,
     }
   },
   computed: {
@@ -159,7 +189,7 @@ export default {
       const final = this.currentPage * this.perPage
       const items = this.products ? this.products?.slice(initial, final) : []
       return items
-    },
+    }
   },
 
   async created() {
@@ -170,16 +200,21 @@ export default {
         {
           baseURL: config.public.baseURL,
           method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
         }
       )
-      this.products = await $fetch(
-        `/products?company=${route.params.id}`,
+     this.products = await $fetch(
+        `/products?company=${$route.params.id}`,
         {
           baseURL: config.public.baseURL,
           method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
         }
       )
-
     } catch (error) {
       console.error(error)
     }
@@ -259,20 +294,6 @@ export default {
 }
 </script>
 
-<!-- <style lang="scss" scoped>
-//global classes for Bootstrap styling
-ul.nav > li.nav-item {
-  font-weight: bolder;
-  :hover {
-    color: $color-consumo-base;
-  }
-  .active {
-    border-top: 4px solid $color-navy;
-    color: $color-navy;
-  }
-}
-</style> -->
-
 <style lang="scss" scoped>
 .content {
   // margin-top: 80px;
@@ -281,6 +302,7 @@ ul.nav > li.nav-item {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2rem;
 }
 
 .c-description {
@@ -298,8 +320,11 @@ ul.nav > li.nav-item {
       $color-bg-light 100%
     );
 
-  @include tablet {
-    gap: 1rem;
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 4rem;
+    padding: 3rem 2rem;
   }
   @include mobile {
     flex-direction: column;
@@ -441,34 +466,107 @@ ul.nav > li.nav-item {
   }
 }
 
-.c-tabs {
-  margin-bottom: 40px;
-
-  .b-tabs {
-    font-weight: $bold;
-    color: $color-navy;
-    font-size: $m;
-  }
-
-  h2 {
-    font-weight: 700;
-    color: $color-navy;
-    font-size: $l;
-    margin: 20px auto;
-  }
-
-  p {
-    margin-top: 8px;
-    font-family: Noto Sans, sans-serif;
-    font-size: $s;
-    color: $color-greytext;
-  }
-}
-
-.pagination {
+.c-tabs-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  width: 100%;
+
+  .c-tabs {
+    margin-bottom: 40px;
+    width: 100%;
+    .b-card {
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+    .b-tabs {
+      font-weight: $bold;
+      background-color: $color-consumo-base-light;
+      border-radius: 24px;
+      font-size: $m;
+    }
+    .b-tab {
+      color: white;
+      &:hover {
+        color: $color-consumo-base-light;
+      }
+    }
+    .b-tab-active {
+      background-color: $color-consumo-base-extra-light;
+      border-radius: 0 0 24px 24px;
+      background: linear-gradient(
+            180deg,
+            $color-consumo-base-extra-light 0%,
+            $color-bg-light 100%
+          );
+    }
+
+    h2 {
+      font-size: $h5;
+      margin: 20px auto;
+      text-transform: uppercase;
+
+      &:hover {
+        color: $color-bg-light;
+      }
+    }
+
+    p {
+      padding: 3rem 4rem;
+      font-size: $m;
+    }
+  }
 }
+
+.c-catalogo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 24px;
+  padding: 4rem 4rem;
+  background: $color-bg-light;
+  width: 100%;
+  &-title {
+    text-align: center;
+  }
+  .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;
+    }
+  }
+  .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;
+  }
+  .c-pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 4rem;
+  }
+}
+
+
 </style>

pages/productoras/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
     <div class="content">
       <HeroWithSearch 
         title="Encuentra tu entidad aliada"
@@ -81,13 +81,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
+.content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 4rem;
+  gap: 1rem;
   margin-top: 2rem;
 
   .cards-section {