consumocuidado/pages/productoras/index.vue

<template>
  <div class="">
    <div class="content">
      <section class="hero-section">
        <div class="gradient">
          <div class="content">
            <h1>Encuentra tu entidad aliada</h1>
            <p>Colabora, compra o aprende con la economía social</p>
            <div class="container wrapper">
              <form class="search-container" @submit.prevent="search">
                <input
                  v-model="searchText"
                  class="search-text"
                  type="text"
                  autocomplete="off"
                  placeholder="Buscar entidad"
                />
                <div class="search-link">
                  <img
                    class="search-icon"
                    src="@/assets/img/latienda-search.svg"
                    alt="latienda.coop-search"
                    @click="search"
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
      <div v-if="companyList && companyList.length" class="cards-section">
        <section  class="cards-grid">
          <article v-for="(coop, index) in companyList" :key="index">
            <CoopCard :coop="coop" />
          </article>
        </section>
        <BPagination
          v-model="currentPage"
          class="pagination"
          :total-rows="rows"
          :per-page="perPage"
        />
      </div>
      <div v-else class="cards-section">
        <p>No se han encontrado resultados</p>
      </div>
      <TextWithImageAndButton />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      searchText: '',
      companyList: null
    }
  },
  computed: {
    rows() {
      return this.companyList?.length
    },
    slicedCompanies() {
      const initial = (this.currentPage - 1) * this.perPage
      const final = this.currentPage * this.perPage
      const items = this.companyList ? this.companyList.slice(initial, final) : []
      return items
    },
  },
  mounted() {
    this.getCompanies()
  },
  methods: {
    async getCompanies() {
      const config = useRuntimeConfig()
      try {
        const response = await $fetch(`/companies/sample/`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      } catch (error) {
        console.error('Error fetching companies:', error)
      }
    },
    async search() {
      const config = useRuntimeConfig()
      if (this.searchText) {
        const response = await $fetch(`/search/companies/?search=${this.searchText}`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      } else {
        const response = await $fetch(`/companies/sample/`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
  margin-top: 2rem;

  .cards-section {
    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;
    }
  }
}

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

.wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.search-container {
  background-color: $color-light;
  height: 60px;
  max-width: 490px;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  -webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
  box-shadow: 0px 0px 20px 0px #d1d1d1;
  @include mobile {
    height: 40px;
    margin: 1rem auto;
  }
  @include tablet {
    width: 70%;
  }
}

.search-link {
  @include mobile {
    width: 40px;
    height: 40px;
    padding: 0.6rem;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.4s;
  }
  @include tablet {
    width: 4rem;
    margin-right: 1.5rem;
  }
}
.search-text {
  outline: none;
  width: 100%;
  padding: 0 1.5rem;
}
.search-icon {
  cursor: pointer;
  width: 1.8rem;
  @include mobile {
    margin-left: 0;
    width: 100%;
  }
  @include tablet {
    float: right;
    height: 70%;
  }
}
</style>