<commit_before><template>
  <div class="u-width--100 u-pt--32 u-pr--10 u-pl--10">
    <div class="circle"></div>
    <div class="placeholder">
      <img class="placeholder__img" src="../../../../assets/images/onboarding/cartoframes@2x.png"/>
      <div class="placeholder__shadow"></div>
    </div>

    <ul class="tag__list">
      <li class="tag__item title">Python</li>
      <li class="tag__item title">CARTOframes</li>
    </ul>
    <h1 v-html="$t(`Wizards.cartoframes.step1.title`)" class="heading title is-subheader"></h1>

    <div class="block">
      <StepTitle :title="$t(`Wizards.cartoframes.sections.summary`)">
        <template slot="icon">
            <img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
        </template>
      </StepTitle>
      <ul class="list">
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text1`)"></li>
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text2`)"></li>
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text3`)"></li>
      </ul>
    </div>

    <div class="block">
      <StepTitle :title="$t(`Wizards.cartoframes.sections.howto`)">
        <template slot="icon">
            <img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
        </template>
      </StepTitle>
      <CodeBlock :code="codeBlock1" language="python" :lineNumbers="false" :theme="'default'"></CodeBlock>
      <InjectableIframe :content="map" width="100%" height="416"></InjectableIframe>
    </div>

    <div class="footer hangar">
      <a href="https://carto.com/developers/cartoframes/" class="underlined-link title is-caption is-txtCartoframes"><span>Go to dashboard</span></a>
      <a href="https://carto.com/developers/cartoframes/" class="button button--arrow is-cartoframes"><span>Check the documentation</span></a>
    </div>
  </div>
</template>

<script>
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
import map from 'new-dashboard/assets/resources/onboarding/cartoframes.html';

export default {
  name: 'Step1',
  stepName: 'Add spatial data to your data science workflow',
  components: {
    StepTitle,
    CodeBlock,
    InjectableIframe
  },
  data () {
    return {
      codeBlock1,
      map
    };
  }
};

const codeBlock1 =
`from cartoframes.contrib import vector
vector.vmap([
  vector.Layer('world_ports', strokeWidth=0.5, strokeColor='black', size=3, color='#0ab96b')
], context=cc)`;

</script>

<style scoped lang="scss">
@import 'new-dashboard/styles/hangar/variables';

.circle {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 120vw;
  height: 120vw;
  transform: translate(44vw, -71.5vw);
  border-radius: 50%;
  background-color: $cartoframes;
}

.placeholder {
  position: absolute;
  left: 50%;

  &__img {
    width: 460px;
    height: auto;
    transform: translate(-70px, 10px);
  }

  &__shadow {
    top: 24px;
    width: 412px;
    height: 326px;
  }
}

.tag {
  &__list {
    margin-bottom: 40px;
  }

  &__item {
    display: inline-block;
    margin-right: 16px;
    padding: 7px 16px;
    border-radius: 18px;
    background-color: rgba($cartoframes, 0.08);
    color: $cartoframes;
    font-size: 10px;
    text-transform: uppercase;
  }
}

.heading {
  max-width: 300px;
  margin-bottom: 150px;
}

.block {
  margin-bottom: 96px;
}

.list {
  padding-left: 16px;

  &__item {
    display: flex;<commit_msg>Fix the shadow and the tag's background color<commit_after><template>
  <div class="u-width--100 u-pt--32 u-pr--10 u-pb--80 u-pl--10">
    <div class="circle"></div>
    <div class="placeholder">
      <img class="placeholder__img" src="../../../../assets/images/onboarding/cartoframes@2x.png"/>
      <div class="placeholder__shadow"></div>
    </div>

    <ul class="tag__list">
      <li class="tag__item title">Python</li>
      <li class="tag__item title">CARTOframes</li>
    </ul>
    <h1 v-html="$t(`Wizards.cartoframes.step1.title`)" class="heading title is-subheader"></h1>

    <div class="block">
      <StepTitle :title="$t(`Wizards.cartoframes.sections.summary`)">
        <template slot="icon">
            <img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
        </template>
      </StepTitle>
      <ul class="list">
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text1`)"></li>
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text2`)"></li>
        <li class="list__item text" v-html="$t(`Wizards.cartoframes.step1.text3`)"></li>
      </ul>
    </div>

    <div class="block">
      <StepTitle :title="$t(`Wizards.cartoframes.sections.howto`)">
        <template slot="icon">
            <img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
        </template>
      </StepTitle>
      <CodeBlock :code="codeBlock1" language="python" :lineNumbers="false" :theme="'default'"></CodeBlock>
      <InjectableIframe :content="map" width="100%" height="416"></InjectableIframe>
    </div>

    <div class="footer hangar">
      <a href="https://carto.com/developers/cartoframes/" class="underlined-link title is-caption is-txtCartoframes"><span>Go to dashboard</span></a>
      <a href="https://carto.com/developers/cartoframes/" class="button button--arrow is-cartoframes"><span>Check the documentation</span></a>
    </div>
  </div>
</template>

<script>
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
import map from 'new-dashboard/assets/resources/onboarding/cartoframes.html';

export default {
  name: 'Step1',
  stepName: 'Add spatial data to your data science workflow',
  components: {
    StepTitle,
    CodeBlock,
    InjectableIframe
  },
  data () {
    return {
      codeBlock1,
      map
    };
  }
};

const codeBlock1 =
`from cartoframes.contrib import vector
vector.vmap([
  vector.Layer('world_ports', strokeWidth=0.5, strokeColor='black', size=3, color='#0ab96b')
], context=cc)`;

</script>

<style scoped lang="scss">
@import 'new-dashboard/styles/variables';
@import 'new-dashboard/styles/hangar/variables';

.circle {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 120vw;
  height: 120vw;
  transform: translate(44vw, -71.5vw);
  border-radius: 50%;
  background-color: $cartoframes;
}

.placeholder {
  position: absolute;
  left: 50%;
  transform: translate(-70px, -10px);

  &__img {
    width: 460px;
    height: auto;
  }

  &__shadow {
    position: absolute;
    z-index: -1;
    top: 24px;
    left: 24px;
    width: 412px;
    height: 326px;
    opacity: 0.24;
    background: $neutral--800;
    filter: blur(24px);
  }
}

.tag {
  &__list {
    margin-bottom: 40px;
  }

  &__item {
    display: inline-block;
    position: relative;
    margin-right: 16px;
    padding: 7px 16px;
    border-radius: 18px;
    background-color: rgba($cartoframes, 0.08);
    color: $cartoframes;
    font-size: 10px;
    text-transform: uppercase;

    &::before {
      content: '';
      display: block;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 18px;
      background-color: #FFF;
    }
  }
}

.heading {
  max-width: 300px;
  margin-bottom: 150px;
}

.block {
  margin-bottom: 96px;
}

.list {
  padding-left: 16px;

  &__item {
    display: flex;
{'fraction_non_alphanumeric': 0.17399243511151688, 'fraction_numerical': 0.02712925524977175, 'mean_word_length': 3.160607704829083, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 119, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5400546', 'n_tokens_mistral': 2817, 'n_tokens_neox': 2629, 'n_words': 509}