productoras page

components/CoopCard.vue

@@ -1,89 +1,40 @@
 <template>
-  <div class="productcard_container">
+  <div class="card">
-    <div class="row productcard_container-basic">
+    <div class="card-image">
-      <div class="image_container col-md-2">
+      <img
-        <img
+        v-if="coop.logo"
-          v-if="coop.logo"
+        class="image"
-          class="image"
           :src="coop.logo"
           :alt="coop.company_name"
         />
         <img
           v-else
           class="image"
-          src="@/assets/img/latienda-product-default.svg"
+          src="@/assets/img/consumo-default.png"
           :alt="coop.company_name"
         />
+    </div>
+    <div class="card-body" align="left">
+      <h2>{{ coop.company_name }}</h2>
+      <p class="description">{{ coop.description }}</p>
+      <div class="tags">
+        <p
+          v-for="n in coop.tags"
+          :key="n"
+          :to="tagRoute(n)"
+          class="tags"
+        >
+          <span>{{ n }}</span>
+        </p>
       </div>
-      <div class="info_container col-md-6" align="left">
+    </div>
-        <NuxtLink :to="`/c/${this.coop.id}`">
+    <div class="card-actions">
-          <h2>{{ coop.company_name }}</h2>
+      <NuxtLink :to="`/productoras/${this.coop.id}`" class="btn-outline">
-        </NuxtLink>
+        <button >VER FICHA</button>
-        <p class="description">{{ coop.description }}</p>
+      </NuxtLink>
-        <div class="tags_container">
+      <NuxtLink v-if="coop.web_link" :to="coop.web_link" class="btn-outline">
-          <NuxtLink
+        <button>WEB</button>
-            :to="tagRoute(n)"
+      </NuxtLink>
-            class="tag_container"
-            v-for="n in coop.tags"
-            :key="n"
-          >
-            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
-            <span>{{ n }}</span>
-          </NuxtLink>
-        </div>
-      </div>
-      <div class="col-md-4 button_container" align="center">
-        <a v-if="coop.shop_link" :href="coop.shop_link" class="button_buy">
-          <img
-            alt="tienda"
-            class="button_cart_img"
-            src="@/assets/img/latienda-tienda.svg"
-          />
-          <span>Tienda online</span>
-        </a>
-        <a v-if="coop.web_link" :href="coop.web_link" class="button_buy">
-          <img
-            alt="web"
-            class="button_cart_img"
-            src="@/assets/img/latienda-web.svg"
-          />
-          <span>Página web</span>
-        </a>
-        <div class="smlogos_container">
-          <div class="smlogo_container">
-            <a @click="shareFacebook">
-              <img
-                class="smlogo_img"
-                alt="facebook logo"
-                src="@/assets/img/latienda-smlogo-facebook.svg"
-              />
-            </a>
-          </div>
-          <a @click="shareTwitter">
-            <div class="smlogo_container">
-              <img
-                class="smlogo_img"
-                alt="twitter logo"
-                src="@/assets/img/latienda-smlogo-twitter.svg"
-              />
-            </div>
-          </a>
-          <a
-            :href="shareWhatsApp()"
-            data-action="share/whatsapp/share"
-            target="_blank"
-            title="latiendacoop"
-          >
-            <div class="smlogo_container">
-              <img
-                alt="whatsapp logo"
-                class="smlogo_img"
-                src="@/assets/img/latienda-smlogo-whatsapp.svg"
-              />
-            </div>
-          </a>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -91,12 +42,15 @@
 <script>
 import socialShare from '~/utils/socialShare'
 export default {
-  name: 'CoopCard',
+  props: {
-  props: ['coop'],
+    coop: {
-
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
     coopUrl() {
-      return `${window.location.origin}/c/${this.coop.id}`
+      return `${window.location.origin}/productoras/${this.coop.id}`
     },
   },
   methods: {
@@ -120,118 +74,87 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.productcard_container {
-  border: 3px #e9e9e9 solid;
-  border-radius: 5px;
-  margin-bottom: 25px;
-}
-.productcard_container-basic {
-  padding: 25px 20px;
-}
 
-.image_container {
+.card {
-  height: 100%;
+    display: flex;
-  overflow: hidden;
+    flex-direction: column;
-  margin: auto;
+    border-radius: 1rem;
-}
+    border: 2px solid white;
-
+    background: #fff;
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.info_container {
-  h2 {
-    outline: none;
-    font-weight: $medium;
-    color: $color-navy;
-    font-size: $m;
-  }
-  .price {
-    font-weight: $bold;
-    color: $color-navy;
-    font-size: $m;
-  }
-  span {
-    color: #808080;
-  }
-  .description {
-    margin-top: 8px;
-    font-family: $font-secondary;
-    font-size: $s;
-    color: $color-greytext;
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
     overflow: hidden;
-  }
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
-}
+    height: 100%;
+    max-height: 546px;
+    max-width: 288px;
 
-.button_container {
+    .card-image {
-  display: flex;
+      width: 100%;
-  flex-direction: column;
+      height: 288px;
-  font-size: $s;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-  .button_buy {
+      img {
-    width: 100%;
+        max-width: 100%;
-    color: $color-orange;
+        max-height: 100%;
-    font-weight: $bold;
+        object-fit: cover;
-    padding: 10px 0;
+      }
-    margin-bottom: 5px;
-    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;
     }
 
-    span {
+    .card-body {
-      display: inline-block;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+
+      h2 {
+        font-size: $m;
+        font-weight: $medium;
+      }
+
+      p {
+        font-size: $s;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+
+        span {
+          font-size: 0.75rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 1rem;
+          border: 1px solid #787878;
+          color: #787878;
+          text-transform: uppercase;
+          
+        }
+      }
     }
+    .card-actions {
+        display: flex;
+        gap: 0.5rem;
+        padding: 1rem;
+
+        .btn-outline {
+          flex: 1;
+          text-align: center;
+          padding: 0.5rem;
+          font-size: $s;
+          color: $color-button;
+          border: 1px solid $color-button;
+          border-radius: 0.75rem;
+          cursor: pointer;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: #f3f4f6;
+          }
+        }
+      }
   }
-}
-
-.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;
-
-  .tag_img {
-    width: 18px;
-  }
-}
-
-.smlogo_container {
-  display: inline-block;
-  margin-top: 15px;
-
-  .smlogo_img {
-    width: 35px;
-    fill: $color-greytext;
-    margin: 2px;
-  }
-  img:hover {
-    transform: scale(1.1);
-    transition: all 0.2s ease;
-  }
-}
-
-.button_cart_img {
-  width: 20px;
-  margin-right: 10px;
-}
-
-.content > h2,
-h3,
-p {
-  margin: 0;
-}
 </style>

components/HeroWithSearch.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="hero-section">
+    <div class="gradient">
+      <div class="content">
+        <h1>{{ title }}</h1>
+        <p>{{ subtitle }}</p>
+        <SearchHeader />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hero-section {
+  width: 100%;
+}
+.gradient {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 45dvh;
+  overflow: hidden;
+
+  // Imagen de fondo
+  background-image: url('../assets/img/voluntarios.jpg');
+  background-size: cover;
+  background-position: center;
+
+  // Overlay de gradiente
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 24px;
+    background: linear-gradient(
+      180deg,
+      $color-consumo-base 0%,
+      $color-consumo-base-light 100%
+    );
+    z-index: 1;
+    opacity: 0.8;
+  }
+
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
+
+    h1 { 
+      text-align: center;
+      font-size: $hero;
+      font-weight: $bold;
+      @include mobile { max-width: 100%;
+        margin: 1.5rem 1rem 0.5rem 1rem;
+      } 
+    } 
+    p { 
+      font-size: $xl;
+    }
+  }
+
+  @include mobile {
+    margin-top: 8dvh;
+  }
+}
+</style>

components/SearchHeader.vue

@@ -33,7 +33,7 @@ export default {
       typing: null,
 
       selectedCategory: '',
-
+      //TODO: change categories
       categories: [
         'Alimentación, bebida y tabaco',
         'Arte y ocio',

components/TextWithImageAndButton.vue

@@ -46,7 +46,7 @@
   gap: 3rem;
   margin: 2rem 0 4rem;
 
-  @media (min-width: tablet) {
+  @media (min-width: $desktop) {
     flex-direction: row;
     justify-content: space-between;
     padding: 3rem;

pages/productoras/index.vue

@@ -1,53 +1,30 @@
 <template>
-  <div class="container mt-5">
+  <div class="container">
-    <div class="row justify-content-center">
+    <div class="content">
-      <div class="col-10 coopcard-list">
+      <HeroWithSearch 
-        <h1 class="title">Últimas cooperativas añadidas</h1>
+        title="Encuentra tu entidad aliada"
-        <p class="help">
+        subtitle="Colabora, compra o aprende con la economía social"
-          Si quieres que tu cooperativa forme parte de este gran proyecto
+      />
-          registrate en el siguiente
+      <div class="cards-section">
-          <NuxtLink to="/registro/cooperativa"><b>formulario</b></NuxtLink
+        <section  class="cards-grid">
-          >.
+          <article v-for="(coop, index) in companyList" :key="index">
-        </p>
+            <CoopCard :coop="coop" />
-        <div class="form-container">
+          </article>
-          <form class="search-container" @submit.prevent="search">
+        </section>
-            <input
+        <BPagination
-              v-model="searchText"
+          v-model="currentPage"
-              class="search-text"
+          class="pagination"
-              type="text"
+          :total-rows="rows"
-              autocomplete="off"
+          :per-page="perPage"
-              placeholder="Buscar cooperativas"
+        />
-            />
-            <img
-              class="search-icon"
-              src="@/assets/img/latienda-search-blue.svg"
-              alt="latienda.coop-search"
-              @click="search"
-            />
-          </form>
-        </div>
-        <div v-for="coop in companyList" :key="coop.id">
-          <CoopCard :coop="coop" />
-        </div>
       </div>
+      <TextWithImageAndButton />
     </div>
-    <!-- <BPagination
-      v-model="currentPage"
-      class="pagination"
-      :total-rows="rows"
-      :per-page="perPage"
-    /> -->
   </div>
 </template>
 
 <script>
 export default {
-  setup(){
-    definePageMeta({
-      layout: 'default',
-    })
-  },
-
   data() {
     return {
       currentPage: 1,
@@ -56,17 +33,17 @@ export default {
       companyList: null
     }
   },
-  // computed: {
+  computed: {
-  //   rows() {
+    rows() {
-  //     return this.companyList?.length
+      return this.companyList?.length
-  //   },
+    },
-  //   slicedCompanies() {
+    slicedCompanies() {
-  //     const initial = (this.currentPage - 1) * this.perPage
+      const initial = (this.currentPage - 1) * this.perPage
-  //     const final = this.currentPage * this.perPage
+      const final = this.currentPage * this.perPage
-  //     const items = this.companyList ? this.companyList.slice(initial, final) : []
+      const items = this.companyList ? this.companyList.slice(initial, final) : []
-  //     return items
+      return items
-  //   },
+    },
-  // },
+  },
   mounted() {
     this.getCompanies()
   },
@@ -105,88 +82,113 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 80px;
-  margin-bottom: 80px;
-}
-
-.title {
-  margin-top: 60px;
-  margin-bottom: 40px;
-  font-size: $xxl;
-  color: $color-navy;
-}
-
-.form-container {
   display: flex;
-  justify-content: flex-start;
+  flex-direction: column;
-}
-
-.coopcard-list {
-  margin-bottom: 40px;
-}
-
-.pagination {
-  display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-}
+  width: 100%;
+  gap: 4rem;
+  margin-top: 2rem;
 
-.help {
+  .cards-section {
-  color: $color-navy;
-  margin-bottom: 0px;
-  font-size: $s;
-}
-
-.search-container {
-  border: none;
-  border-radius: 5px;
-  background: $color-consumo-base-light;
-  width: 50%;
-  height: 32px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 50px;
-  margin-bottom: 50px;
-
-  @include mobile {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4rem;
+    border-radius: 1.5rem;
+    background: $color-bg-light;
+    margin: 2rem 0;
+
+    .cards-grid {
+      display: grid;
+      gap: 1.5rem;
+      border: none;
+      width: 100%;
+      padding: 4rem;
+      
+
+      // responsive breakpoints
+      grid-template-columns: 1fr;
+
+      @media (min-width: 640px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media (min-width: 1024px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @media (min-width: 1280px) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+
+    .pagination {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
 
-.search-container img,
+// .help {
-input,
+//   color: $color-navy;
-select {
+//   margin-bottom: 0px;
-  padding: 6px 10px;
+//   font-size: $s;
-  margin-right: 16px;
+// }
-  background: transparent;
-  font-size: $xl;
-  border: none;
-}
 
-.search-icon {
+// .search-container {
-  float: right;
+//   border: none;
-  height: 90%;
+//   border-radius: 5px;
-}
+//   background: $color-consumo-base-light;
+//   width: 50%;
+//   height: 32px;
+//   overflow: hidden;
+//   display: flex;
+//   flex-direction: row;
+//   justify-content: space-between;
+//   align-items: center;
+//   margin-top: 50px;
+//   margin-bottom: 50px;
 
-.search-text {
+//   @include mobile {
-  outline: none;
+//     width: 100%;
-  width: 100%;
+//   }
-  text-align: center;
+// }
-  color: $color-navy;
-  font-size: $s;
-  font-weight: $regular;
-}
 
-::placeholder {
+// .search-container img,
-  color: $color-navy;
+// input,
-  font-size: $s;
+// select {
-}
+//   padding: 6px 10px;
+//   margin-right: 16px;
+//   background: transparent;
+//   font-size: $xl;
+//   border: none;
+// }
 
-select {
+// .search-icon {
-  --webkit-appearance: auto;
+//   float: right;
-}
+//   height: 90%;
+// }
+
+// .search-text {
+//   outline: none;
+//   width: 100%;
+//   text-align: center;
+//   color: $color-navy;
+//   font-size: $s;
+//   font-weight: $regular;
+// }
+
+// ::placeholder {
+//   color: $color-navy;
+//   font-size: $s;
+// }
+
+// select {
+//   --webkit-appearance: auto;
+// }
 </style>