wip migration

components/BannerCoop.vue

@@ -0,0 +1,160 @@
+<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/cooperativa">
+        <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>