consumocuidado/pages/page/info.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="header col-12" align="center">
        <h1 class="title">Sobre nosotros</h1>
        <img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" class="" />
      </div>
    </div>

    <div class="info-proj row justify-content-center">
      <div class="col-md-4" align="center">
        <img class="image" src="@/assets/img/footer-bolsa.svg" alt="" />
      </div>
      <div class="col-md-4">
        <p>
          Nueva plataforma creada por COCETA para facilitar que cualquier
          persona pueda encontrar de forma sencilla los productos y servicios
          ofrecidos por las cooperativas de trabajo de España.
        </p>
      </div>
    </div>

    <div class="info-proj tienda row col-md-12 justify-content-center">
      <div class="col-md-4 tienda-content" align="center">
        <p>
          <b>latienda.coop</b> es un gran escaparate virtual que COCETA pone a
          disposición de todas las cooperativas de trabajo para facilitar la
          digitalización de su proceso de venta, así cómo para fomentar el
          consumo de productos y servicios cooperativos.
        </p>
      </div>
      <div class="col-md-4" align="center">
        <img
          class="image-escaparate"
          src="@/assets/img/latienda-escaparate.png"
          alt=""
        />
      </div>
    </div>

    <div class="row options">
      <div class="col-md-4 option" align="center">
        <h1 class="options-title">Buscador inteligente</h1>
        <p class="options-text">
          Una vez encuentra el producto o servicio deseado la plataforma lo
          redirige a la tienda de la cooperativa para realizar el proceso de
          compra. En caso de que la cooperativa no cuente con una tienda online,
          se le facilitará un formulario para que haga su pedido.
        </p>
        <img
          src="@/assets/img/latienda-sobrenosotros-1.svg"
          alt=""
          class="options-image h-image"
        />
      </div>
      <div class="col-md-4 option" align="center">
        <h1 class="options-title">Venta directa</h1>
        <p class="options-text">
          Funciona a modo de una gran buscador de productos y servicios
          cooperativos, en el que usuario puede buscar lo que necesite,
          filtrando por diferentes criterios.
        </p>
        <img
          src="@/assets/img/latienda-sobrenosotros-2.svg"
          alt=""
          class="options-image"
        />
      </div>
      <div class="col-md-4 option" align="center">
        <h1 class="options-title">Fácil gestión</h1>
        <p class="options-text">
          Cualquier cooperativa de trabajo de España puede incluir sus productos
          o servicios en latienda.coop. Podrá gestionarlos desde el panel de
          control o configurando la sicnronización con los productos de su
          propia tienda online en <b>Woocommerce</b>.
        </p>
        <img
          src="@/assets/img/latienda-sobrenosotros-3.svg"
          alt=""
          class="options-image h-image"
        />
      </div>
    </div>
    <div class="row woo-banner">
      <div class="col-md-12 woo-banner-content" align="center">
        <span>Compatible con</span>
        <img src="@/assets/img/latienda-woocommerce-logo.svg" alt="" />
      </div>
    </div>
    <!-- <div class="row">
      <BannerCoop />
    </div> -->
  </div>
</template>

<script>
export default {
  setup() {
    definePageMeta({
      layout: 'main',
    })
  }
}
</script>

<style lang="scss" scoped>
.container-fluid {
  padding-right: 0;
  padding-left: 0;

  @include mobile {
    overflow: hidden;
  }
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 40px;

  @include mobile {
    margin-top: 120px;
    overflow: hidden;
  }

  .title {
    font-size: $xl;
    color: $color-navy;
    margin-bottom: 35px;
    font-weight: 400;
  }

  img {
    width: 40px;
  }
}

.info-proj {
  padding: 30px 30px;
  margin: 0;
  img {
    width: 100px;
  }
  p {
    font-size: $s;
    color: $color-navy;
    text-align: center;
  }

  .image-escaparate {
    width: 18rem;

    @include mobile {
      width: 14rem;
    }
  }
}
.tienda {
  background-color: $color-lighter-green;
}

.options {
  padding: 80px 30px;

  .option {
    padding: 0 30px;
  }

  .options-title {
    font-size: $s;
    font-weight: $bold;
    color: $color-navy;
  }
  .options-text {
    margin-top: 8px;
    font-family: $font-secondary;
    font-size: $xs;
    color: $color-greytext;
    margin-bottom: 40px;
  }
  .options-image {
    width: 150px;
    @include mobile {
      margin-bottom: 2rem;
    }
  }
  .h-image {
    width: 200px;
  }
}

.woo-banner {
  height: 150px;
  background-color: #f6eef8;
  @include mobile {
    padding: 3em;
  }

  .woo-banner-content {
    display: flex;
    align-self: center;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;

    span {
      @include mobile {
        font-size: $s;
      }

      img {
        width: 200px;
        @include mobile {
          width: 150px;
        }
      }
    }
  }

  span {
    justify-self: center;
    margin-right: 20px;
    font-weight: $bold;
    font-size: $l;
  }

  img {
    width: 200px;
  }
}
</style>