consumocuidado/pages/index.vue

<template>
  <div class="base">
    <div class="gradient">
      <div class="ilustration wrapper"></div>
      <h1>Descubre productos, servicios y saberes con valores.</h1>
      <p>Apoya la economía social transformadora</p>
      <SearchHeader />
      <!-- <div class="container">
        <div class="row">
          <div class="col-sm-4">
            <HighlightsCard
              class="highlights"
              :title="`Libros`"
              :category="getKey(cards, 0)"
              :products="getValue(cards, 0)"
            />
          </div>
          <div class="col-sm-4">
            <HighlightsCard
              class="highlights"
              :title="`Cosméticos`"
              :category="getKey(cards, 1)"
              :products="getValue(cards, 1)"
            />
          </div>
          <div class="col-sm-4">
            <HighlightsCard
              class="highlights"
              :title="`Plantas`"
              :category="getKey(cards, 2)"
              :products="getValue(cards, 2)"
            />
          </div>
        </div>
      </div> -->
    </div>
    <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 class="items-container">
        <ItemsRow :type="`product`" :items="carouselProducts" />
        <NuxtLink to="/busqueda" class="link">
          <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
        </NuxtLink>
      </div>
    </div>
    <TextWithImageAndButton />
    <LogosWithText />
    <!-- <div class="items container">
      <div>

      </div>
      <h5 class="items-title">Últimas cooperativas</h5>
      <img
        class="items-dots"
        src="@/assets/img/latienda-lineapuntos-2.svg"
        alt=""
      />
      <ItemsRow :type="`company`" :items="carouselCompanies" />
    </div>
    <div class="items container">
      <h5 class="items-title">Categorías más populares</h5>
      <img
        class="items-dots"
        src="@/assets/img/latienda-lineapuntos-2.svg"
        alt=""
      />
      <ItemsRow :type="`category`" :items="carouselCategories" />
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: null,
      carouselProducts: null,
      carouselCompanies: null,
      carouselCategories: null
    }
  },
  async mounted() {
    try {
      const config = useRuntimeConfig()
      const response = await $fetch('/initial', { 
        baseURL: config.public.baseURL,
        method: 'GET'
      })
      this.cards = response.cards
      this.carouselProducts = response.products
      this.carouselCompanies = response.companies
      this.carouselCategories = response.categories
    } catch (err) {
      console.error(err)
    }
  },
  methods: {
    getKey(object, key) {
      return Object.keys(object || {})[key]
    },
    getValue(object, key) {
      return Object.values(object || {})[key]
    },
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ilustration {
  height: 100px;
  width: 100px;
  align-self: center;
  background-image: url('../assets/img/hand-heart.svg');
  background-size: contain;
  background-position: center;

  @include mobile {
    width: 300px;
    height: 170px;
    margin-top: 70px;
  }
}

.gradient {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 24px;
  min-height: 85dvh;
  background: linear-gradient(180deg, $color-consumo-base-extra-light, $color-consumo-base);
  @include mobile {
    margin-top: 8dvh;
  }

  h1 {
    text-align: center;
    font-size: $hero;
    font-weight: $bold;
    max-width: 50%;
    @include mobile {
      max-width: 100%;
      margin: 1.5rem 1rem 0.5rem 1rem;
    }
  }
  p {
    font-size: $xl;
  }
}
.search-dots {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  width: 100px;

  @include mobile {
    width: 70px;
    margin: 0 auto 0;
  }
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 8rem 8rem 8rem 8rem;
  border-radius: 24px;
  background: linear-gradient(180deg, $color-light, $color-consumo-base-extra-light);
  padding: 2rem 0;
  &-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;
  }
}

.items-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 2rem;
}

</style>