consumocuidado/components/BannerCoop.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="banner-text col-12" align="center">
        <span>
          Si quieres formar parte de este gran proyecto
          <br class="br" />registrate en el siguiente formulario
        </span>
        <img
          class="sep-dots"
          src="@/assets/img/latienda-dots-blue.svg"
          alt=""
        />
      </div>
    </div>
    <div class="row banner-links justify-content-center" align="center">
      <NuxtLink class="col-2 link out-div" to="/page/info">
        <img src="@/assets/img/latienda-info-red.svg" alt="" />
        <img
          class="dots"
          src="@/assets/img/latienda-dots-vertical-red.svg"
          alt=""
        />
        <span>Saber más</span>
      </NuxtLink>
      <NuxtLink class="col-2 link fill-div" to="/registro/productora">
        <img
          class="img-form"
          src="@/assets/img/latienda-formulario.svg"
          alt=""
        />
        <img
          class="dots"
          src="@/assets/img/latienda-dots-vertical-white.svg"
          alt=""
        />
        <span>¡sí, quiero!</span>
      </NuxtLink>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BannerCoop',
}
</script>

<style lang="scss" scoped>
.container-fluid {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: $color-lighter-green;
  background-image: url('../assets/img/latienda-banner-imagen.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: relative;

  @include mobile {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
      url('../assets/img/latienda-banner-imagen.png');
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
.banner-text {
  @include mobile {
    padding: 2em;
  }
  span {
    font-size: $m;
    color: $color-navy;
    font-weight: $regular;

    @include mobile {
      font-size: $s;
      font-weight: $medium;
      color: $color-light;
    }
  }
  img {
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    width: 60px;
  }
}

.sep-dots {
  @include mobile {
    visibility: hidden;
  }
}

.banner-links {
  .link {
    border-radius: 40px;
    padding: 10px;
    text-decoration: none;
    min-width: 200px;

    @include mobile {
      min-width: 160px;
      padding: 5px;
    }

    img {
      width: 30px;

      @include mobile {
        width: 25px;
      }
    }

    .dots {
      width: 5px;
      margin: 0 10px 0 10px;
      @include mobile {
        width: 3px;
      }
    }

    .img-form {
      width: 25px;
      @include mobile {
        width: 20px;
      }
    }

    span {
      text-transform: uppercase;
      font-size: $xs;
      font-weight: 600;
    }
  }
}

.out-div {
  border: 2px solid $color-orange;
  color: $color-orange;
  margin-right: 10px;

  @include mobile {
    display: none;
  }
}

.fill-div {
  background-color: $color-orange;
  color: $color-light;
}

.br {
  @include mobile {
    display: none;
  }
}
</style>