@ecored-sena/base-kit 0.0.1 → 0.0.3

package/dist/downloads/t10/Tarjetas_avatar3.txt

@@ -0,0 +1,50 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+    
+    .row.mb-4
+        .col-md-6.col-lg.mb-5.mb-lg-0
+          .tarjeta-avatar
+            img(src='@/assets/componentes/ej-05.svg' alt='')
+            //- .tarjeta debe ir acompañado de una de una de estas clases => 
+            //- .color-primario, .color-secundario, .color-acento-contenido, .color-acento-botones
+            //- estas clases tambien tienen un modificador --borde
+            .tarjeta.color-primario
+              .p-4
+                h4.text-center John Doe
+                p.mb-0 moment. K askdnaskjda sjkdn akjsndasd ajshd akjshd kajshd ask djhak sjdha ksjdha kjsdha kjsdha kjsdh akjshda kjshd aksjdh kajsd djkhakjshdka jsak Abandon the shelter of insecurity.
+
+        .col-md-6.col-lg.mb-5.mb-lg-0
+          .tarjeta-avatar
+            img(src='@/assets/componentes/ej-05.svg' alt='')
+            .tarjeta.color-acento-botones
+              .p-4
+                h4.text-center John Doe
+                p.mb-0 moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t the height of your stature, it’s the heft of your spirit.
+
+        .col-md-6.col-lg.mb-5.mb-lg-0
+          .tarjeta-avatar
+            img(src='@/assets/componentes/ej-05.svg' alt='')
+            .tarjeta.color-acento-contenido
+              .p-4.text-white
+                h4.text-center Greatness isn’t the height
+                p.mb-0 moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t the height of your stature, it’s the heft of your spirit.
+
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_con_numero.txt

@@ -0,0 +1,54 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row
+      .col-md-6.col-xl.mb-4.mb-xl-0
+        .tarjeta-numerada.color-primario.p-5
+          .tarjeta-numerada__numero
+            .h2 1
+          p.text-center 
+            b Ruta integral de atención en salud 
+          p.text-center Acciones realizadas en los entornos donde transcurre la vida y se desarrollan las personas
+
+      .col-md-6.col-xl.mb-4.mb-xl-0
+        .tarjeta-numerada.color-secundario.p-5
+          .tarjeta-numerada__numero
+            .h2 2
+          p.text-center 
+            b Ruta integral de atención en salud 
+          p.text-center Acciones realizadas en los entornos donde transcurre la vida y se desarrollan las personas
+
+      .col-md-6.col-xl.mb-4.mb-xl-0
+        .tarjeta-numerada.color-acento-contenido.p-5
+          .tarjeta-numerada__numero
+            .h2 3
+          p.text-center 
+            b Ruta integral de atención en salud 
+          p.text-center Acciones realizadas en los entornos donde transcurre la vida y se desarrollan las personas
+
+      .col-md-6.col-xl.mb-4.mb-xl-0
+        .tarjeta-numerada.color-acento-botones.p-5
+          .tarjeta-numerada__numero
+            .h2 4
+          p.text-center 
+            b Ruta integral de atención en salud 
+          p.text-center Acciones realizadas en los entornos donde transcurre la vida y se desarrollan las personas  
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_conectadas.txt

@@ -0,0 +1,46 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tarjeta--container.row.mb-5
+      .col-md.tarjeta.color-primario.p-5
+        .row.justify-content-center.mb-4
+          .col-6
+            figure
+              img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')          
+        h2.text-center Celebrate your<br>failures
+        p To surpass others is fucking tough, if you only do as you are told you don’t have it in you to succeed. Think about all the possibilities. You’ve been placed in the crucial moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t the height of your stature, it’s the heft of your spirit.
+      
+      .col-md.tarjeta.color-acento-botones.p-5
+        .row.justify-content-center.mb-4
+          .col-6
+            figure
+              img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')          
+        h2.text-center Sterility leads to<br>susceptibility
+        p Remember it’s called the creative process, it’s not the creative moment. Saul Bass on failure: Failure is built into creativity… the creative act involves this element of ‘newness’ and ‘experimentalism,’ then one must expect and accept the possibility of failure.
+      
+      .col-md.tarjeta.color-acento-contenido.text-white.p-5
+        .row.justify-content-center.mb-4
+          .col-6
+            figure
+              img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')          
+        h2.text-center Sterility leads to<br>susceptibility
+        p Remember it’s called the creative process, it’s not the creative moment. Saul Bass on failure: Failure is built into creativity… the creative act involves this element of ‘newness’ and ‘experimentalism,’ then one must expect and accept the possibility of failure.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_conectadas2.txt

@@ -0,0 +1,92 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.justify-content-center.mb-5
+        .col-lg-9.position-relative
+          .avatar
+            figure
+              img(src="@/assets/curso/temas/tarjetas/conectada_01.svg", alt="alt").img250
+          
+          .crd.crd--avatarHorizontal.crd--first.py-4
+            .row.align-items-center
+              .col-auto
+                figure
+                  img(src="@/assets/curso/temas/tarjetas/conectada_02.svg", alt="alt").img100
+              .col
+                h5 Calidad de la información
+                p Es importante tener en cuenta las variables, la ponderación de estas refleja la calidad de la información, la cual le permitirá obtener información concreta, clara y medible. Es necesario resaltar las características determinantes desde enfoques cualitativos y cuantitativos del dato obtenido.
+          
+          .crd.crd--avatarHorizontal.py-4
+            .row.align-items-center
+              .col-auto
+                figure
+                  img(src="@/assets/curso/temas/tarjetas/conectada_02.svg", alt="alt").img100
+              .col
+                h5 Aplicación de técnicas
+                p Desarrolle técnicas que le permitan tener un panorama completo de la información que se esté analizando, integrando las variables obtenidas en la medición y contrastando detalladamente los datos.
+          
+          .crd.crd--avatarHorizontal.crd--last.py-4
+            .row.align-items-center
+              .col-auto
+                figure
+                  img(src="@/assets/curso/temas/tarjetas/conectada_03.svg", alt="alt").img100
+              .col
+                h5 Comunicación correcta de los resultados
+                p En los análisis de resultados, el determinante es saber mostrar la información, tenga en cuenta la objetividad, la claridad, la transparencia y la organización de la información.
+  
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+<style lang="sass">
+.avatar
+  position: absolute
+  bottom: 0
+  right: -4rem
+  z-index: 1
+  @media (max-width: 1000px)
+    display: none
+.crd--avatarHorizontal
+  position: relative
+  padding-right: 12rem
+  & > *
+    position: relative
+  h5
+    color: #7F4FC7
+  p
+    margin-bottom: 0
+  &::before
+    position: absolute
+    content: ''
+    top: 0
+    right: 0
+    width: calc( 100% - 60px)
+    height: 100%
+    background-color: #C5E5FE
+  @media (max-width: 1000px)
+    padding-right: 2rem
+
+.crd--first, .crd--last
+  &::before
+    background-color: #DDEDF8 !important
+.crd--first
+  &::before
+    border-top-left-radius: 30px
+.crd--last
+  &::before
+    border-bottom-left-radius: 30px
+</style>

package/dist/downloads/t11/Audio.txt

@@ -0,0 +1,46 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    TarjetaAudio.color-primario.mb-3(
+      texto="Texto de muestra  "
+      :audio="require('../../assets/componentes/audios/audio-ej.mp3')"
+      @audio-hover="mostrarIndicadorTarjetaAudio = false"
+    )
+      .indicador--click(v-if="mostrarIndicadorTarjetaAudio")
+    
+    TarjetaAudio.color-secundario.mb-3(
+      texto="Texto de muestra <br> Texto de muestra "
+      :audio="require('../../assets/componentes/audios/audio-ej.mp3')"
+    )
+
+    TarjetaAudio.color-acento-contenido.mb-4(
+      texto="Texto de muestra "
+      :audio="require('@/assets/componentes/audios/audio-ej.mp3')"
+      no-barra
+    )
+
+    TarjetaAudio.color-acento-botones.mb-4(
+      texto="Texto de muestra "
+      :audio="require('@/assets/componentes/audios/audio-ej.mp3')"
+    )
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicadorTarjetaAudio: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t11/Audio2.txt

@@ -0,0 +1,57 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    img(src='@/assets/curso/temas/audio/15.svg', alt='Texto que describa la imagen')
+      .row.justify-content-center.g-0
+        .col-lg-4
+          .tarjeta.clr--pink.p-4.rounded-0.h-100
+            .tarjeta.bg-white.p-4
+              TarjetaAudio.color-acento-contenido.mb-3(
+              texto="Mom, can you come with me to the doctor's office?"
+              :audio="require('@/assets/curso/temas/audio/5.mp3')"
+          )
+              .indicador--click(v-if="mostrarIndicadorTarjetaAudio")
+              p.mb-0 Mamá, ¿puedes venir conmigo al consultorio del doctor?
+        .col-lg-4
+          .tarjeta.clr--pink02.p-4.rounded-0.h-100
+            .tarjeta.bg-white.p-4
+              TarjetaAudio.color-acento-contenido.bg-white.mb-3(
+              texto="How are you doing, Doctor? Nice to meet you."
+              :audio="require('@/assets/curso/temas/audio/6.mp3')"
+            )
+              p.mb-0 ¿Cómo está, doctor? Es un placer conocerlo.
+        .col-lg-4
+          .tarjeta.clr--pink.p-4.rounded-0.h-100
+            .tarjeta.bg-white.p-4
+              TarjetaAudio.color-acento-contenido.bg-white.mb-3(
+              texto="Ok, Coach. I will follow your advice."
+              :audio="require('@/assets/curso/temas/audio/7.mp3')"
+            )
+              p.mb-0 Muy bien, entrenador. Voy a seguir su consejo.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicadorTarjetaAudio: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+<style lang="sass">
+.clr--pink
+  background-color: #FFAFB2
+.clr--pink02
+  background-color: #FFDFE0
+</style>

package/dist/downloads/t13/Img1.txt

@@ -0,0 +1,66 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    ImagenInfografica.color-acento-botones.mb-4
+      template(v-slot:imagen)
+        figure
+          img(src='@/assets/curso/temas/ejm.png', alt='')
+      .tarjeta.row.img-infog.bg-white.align-items-center(x="50%" y="20%")
+        .col-md-4
+          img(src='@/assets/curso/temas/t13/tema1-5-ico1.svg', alt='')
+        .col-md-8.col-12.px-lg-4.px-3.py-1.contenido
+          p.mb-0 Conclusiones y recomendaciones siempre enfocadas al cumplimiento.
+      .tarjeta.row.img-infog.bg-white.align-items-center(x="50%" y="55%")
+        .col-md-4
+          img(src='@/assets/curso/temas/t13/tema1-5-ico1.svg', alt='')
+        .col-md-8.col-12.px-lg-4.px-3.py-1.contenido
+          p.mb-0 Desviaciones en la ejecución de actividades conforme al plan.
+
+              
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.img-infog 
+  height: 120px
+  border-top-left-radius: 80px 
+  border-bottom-left-radius: 80px 
+  img 
+    width: 130%
+    position: absolute
+    left: -8%
+    max-width: 124%
+    bottom: 0%
+@media (max-width: $bp-max-md)
+  .img-infog 
+    height: auto
+  .img-infografica__card
+    width: 220px
+    .contenido
+      width: 100%
+  .img-infog img 
+    display: none
+    width: 0%
+  .bg-white
+    border-radius: 15px
+    border: 2px solid #2D54FE
+    padding: 10px
+</style>

package/dist/downloads/t13/Tab1.txt

@@ -0,0 +1,54 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    TabsB.color-primario.mb-4
+      .py-4.py-md-5(titulo="The splendor of the mystery" :icono="require('@/assets/componentes/ej-04.svg')")
+        .row
+          .col-md-6.mb-4.mb-md-0
+            h4 Celebrate your failures 1
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+          .col-md-6
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+      
+      .py-4.py-md-5(titulo="Don’t lie to yourself" :icono="require('@/assets/componentes/ej-04.svg')")
+        .row
+          .col-md-6.mb-4.mb-md-0
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+          .col-md-6
+            h4 Celebrate your failures 2
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+      
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.escala-grises .tabs-b__tab 
+  &.tabs-b__tab--active .tabs-b__tab__icon
+    filter: grayscale(0)
+    transition: all 0.2s ease-out
+  .tabs-b__tab__icon
+    filter: grayscale(1)
+    transition: all 0.2s ease-out
+</style>

package/dist/downloads/t13/Tarj1.txt

@@ -0,0 +1,77 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.justify-content-center.cursor-pointer.mb-5
+      .col-xl-4.col-lg-7.col-md-9.col-11.mb-4.mb-xl-0
+        .crd_hover_txt(@mouseover="mostrarIndicador = false")
+          .indicador--hover(v-if="mostrarIndicador")
+          .crd_hover_txt--img
+            figure
+              img(src="@/assets/curso/temas/ejm.png", alt="")
+          .crd_hover_txt--body
+            h4.mb-3 Titulo 1
+            p.mb-0 Con este tipo de reportes, los gerentes podrán supervisar específicamente, la labor de cada vendedor y de esta manera, saber en qué les va bien y en cuáles actos hay que mejorar. Aquí también, va a encontrar si su fuerza de ventas está entendiendo sus estrategias y le sea más fácil incentivarlos a aumentar su productividad.
+      .col-xl-4.col-lg-7.col-md-9.col-11.mb-4.mb-xl-0
+        .crd_hover_txt
+          .crd_hover_txt--img
+            figure
+              img(src="@/assets/curso/temas/ejm.png", alt="")
+          .crd_hover_txt--body
+            h4.mb-3 Titulo 2
+            p.mb-0 Con estos reportes semanales, podrá encontrar las dificultades que pueda tener algún o algunos vendedores y evitar que se pierdan los clientes fijos. Reportar semanalmente, le permite tener un equipo de ventas fortalecido y bien direccionado, con las correcciones necesarias para lograr las metas de ventas propuestas.
+      .col-xl-4.col-lg-7.col-md-9.col-11.mb-4.mb-xl-0
+        .crd_hover_txt
+          .crd_hover_txt--img
+            figure
+              img(src="@/assets/curso/temas/ejm.png", alt="")
+          .crd_hover_txt--body
+            h4.mb-3 Titulo 3
+            p.mb-0 Con este tipo de reportes usted va a hacer un seguimiento específico a su equipo de ventas respecto a sus objetivos empresariales a largo plazo.
+
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.cursor-pointer.crd_hover_txt
+  cursor: pointer
+.crd_hover_txt
+  position: relative  
+  padding: 0 !important
+  overflow: hidden !important  
+  &:hover    
+    .crd_hover_txt--body   
+      transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 
+      transform: translateY(0)
+
+  .crd_hover_txt--body
+    position: absolute
+    padding: 1.5rem
+    bottom: 0    
+    transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1)
+    transform: translateY(calc( 100% - 3.85rem ))
+    background-color: rgba(255, 247, 230, 1) 
+  
+  @media (min-width:1200px) and (max-width:1400px)  
+    .crd_hover_txt--body
+      p
+        font-size: 0.85em
+</style>

package/dist/downloads/t13/Tarj2.txt

@@ -0,0 +1,79 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.cursor-pointer.mb-4.mb-md-5(data-aos="fade-down")
+      .col-lg-4.mb-3.mb-md-0
+        .tarjeta.tarjeta-foto-hover
+          .tarjeta-foto-hover__img: img(src='@/assets/curso/temas/ejm.png')
+          .tarjeta-foto-hover__titulo.d-flex.justify-content-center.align-items-center.p-2
+            h4.text-center.text-white.mb-0 Bloqueos mentales
+          .tarjeta-foto-hover__tarjeta.bg-degrade.d-flex.align-items-center.justify-content-center
+            .p-4.text-center
+              h5 Bloqueos mentales
+              p.mb-0  Son los que están relacionados con esos pensamientos ya construidos y que bloquean toda idea nueva, para los cuales se pueden tener pensamientos divergentes, rompiendo rutinas y reconfigurando ideas y procesos para avanzar.
+      .col-lg-4.mb-3.mb-md-0
+        .tarjeta.tarjeta-foto-hover(@mouseover="mostrarIndicador = false")
+          .indicador--hover(v-if="mostrarIndicador")
+          .tarjeta-foto-hover__img: img(src='@/assets/curso/temas/ejm.png')
+          .tarjeta-foto-hover__titulo.d-flex.justify-content-center.align-items-center.p-2
+            h4.text-center.text-white.mb-0 Bloqueos emocionales
+          .tarjeta-foto-hover__tarjeta.bg-degrade.d-flex.align-items-center.justify-content-center
+            .p-4.text-center
+              h5 Bloqueos emocionales
+              p.mb-0 Relacionados con imaginar los peores escenarios, y es acá donde se tiende a pensar en las fatalidades y se considera que renunciar es la mejor opción.
+      .col-lg-4.mb-3.mb-md-0
+        .tarjeta.tarjeta-foto-hover
+          .tarjeta-foto-hover__img: img(src='@/assets/curso/temas/ejm.png')
+          .tarjeta-foto-hover__titulo.d-flex.justify-content-center.align-items-center.p-2
+            h4.text-center.text-white.mb-0 Bloqueos perceptivos
+          .tarjeta-foto-hover__tarjeta.bg-degrade.d-flex.align-items-center.justify-content-center
+            .p-4.text-center
+              h5 Bloqueos perceptivos
+              p.mb-0 Limitan la forma de ver el mundo y terminan por acabar con todas las ideas.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.cursor-pointer .tarjeta-foto-hover
+  cursor: pointer  
+.bg-degrade
+  background: rgb(38,204,218)
+  background: linear-gradient(180deg, rgba(38,204,218,0.78) 0%, rgba(38,204,218,1) 100%)
+.tarjeta-foto-hover
+  position: relative
+  overflow: hidden
+  &:hover
+    .tarjeta-foto-hover__tarjeta
+      transform: translateY(0%)
+
+  &__titulo
+    position: absolute
+    bottom: 0
+    width: 100%
+  &__tarjeta
+    transition: transform 0.3s ease-in-out
+    position: absolute
+    bottom: 0
+    width: 100%
+    height: 100%
+    transform: translateY(100%)  
+</style>