tabbit

Wed Jul 14 2021
Copied to clipboard! Copy reply
<template>
  <section>
    <div class="header">
      <div class="content">
        <div class="heading">The experts in language learning</div>
        <p>
          For nearly 30 years, learners have turned to Rosetta Stone to build the fluency and confidence they need to
          speak new languages.
        </p>
        <a href="/trynow" class="cta">START A FREE TRIAL</a>
      </div>
      <div class="image">
        <a href="/trynow" class="cta">START A FREE TRIAL</a>
      </div>
    </div>
    <div class="language-dropdown">
      <div class="wrapper">
        <div class="text">Choose from 25 languages</div>
        <form>
          <div><SelectLanguageFlags /></div>
          <a class="cta" :href="getURL">GO</a>
        </form>
      </div>
    </div>
    <div class="curves"></div>
  </section>
</template>
<script>
export default {
  created() {
    const queryLang = this.$route.query.lang || null;
    if (queryLang) {
      this.$store.commit("UPDATE_LANG_ID", queryLang);
    } else {
      this.$store.commit("UPDATE_LANG_ID", "esp");
    }
  },
  computed: {
    getURL() {
      return `/lp/sale/sitewide?lang=${this.$store.getters.selectedLanguage.id}`;
    },
  },
};
</script>
<style lang="stylus">
// Overwriting some style in the SelectLanguageFlags component.
// After launch, ask IXL if all dropdowns should be this way. If so, edit component.
.language-select {
  border-color: #87C8E4!important;
  border-width: 2px!important;
}
.language-select li, .language-select .selected-language{
  font-size: 18px!important;
  font-weight: 400;
}
</style>
<style lang="stylus" scoped>
section, .header, .image {
  display: flex;
  width: 100%;
  flex-direction: column;
}

section {
  align-self: center;
  max-width: 310px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.header {
  align-items: center;
  padding: 20px 0;
}

.heading {
  font-family: Effra;
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  color: #3752B4;
}
p {
  font-family: Helvetica;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  color: #262626;
}

.cta {
  text-decoration: none;
  background-color: #02B1FF;
  text-transform: uppercase;
  color: #fff;
  border-radius: 10px;
  font-size: 20px;
  text-align: center;
  padding: 17px 0;
  width: 230px;
  display: inline-block;
  transition: background .2s ease-in-out;
  // This border mimics space behind button / gap between button and heart bg
  border: 8px solid #FFD753;
  position: relative;
  top: -30px;
  &:hover {
    background: #33C1FF;
  }

  &:active {
    background: #00A6FF;
  }
}
.image {
  height: 267px;
  background: url('/nuxt-assets/img/hearts/heart-320.png') no-repeat center ;
  background-size: contain;
  justify-content: center;
  align-items: center;
}

// In 660px + reso, show this, and hide .image cta
.content .cta {
  display: none;
}

.language-dropdown .wrapper {
  background: #FFFFFF;
  padding: 20px 10px;
  box-shadow: 0px 10px 10px rgba(203, 129, 0, 0.3);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  & > * {
    width: 100%;
  }
  .text {
    margin-bottom: 14px;
  }
}

.language-dropdown form {
  display: flex;
  flex-direction: column;
}
.language-dropdown .text {
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: #3752B4;

  width: 180px;
  text-align: center;
  .text {
    margin-bottom: 20px;
  }
}
.language-dropdown .cta {
  display: inline-block;
  width: fit-content;
  top: 0;
  border: none;
  padding: 14.5px 20px;
  align-self: center;
  margin-top: 14px;
}

.curves {
  height: 50px;
  background: red;
  position: absolute;
  width: 100%;
  bottom: -45px;
  left: 0;
  background: url("/nuxt-assets/img/curves/curve-320.svg") bottom no-repeat;
  background-size: cover;
  background-position: 0 -910px;
  display: none;
}

@media (min-width: 480px) {
  section {
    max-width: 450px;
  }

  .language-dropdown {
    flex-direction: column;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p {
    max-width: 401px;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    padding: 0 30px;
  }
  .image {
    width: 401px;
    height: 336px;
    background-image: url('/nuxt-assets/img/hearts/heart-480.png');
    background-size: cover;
  }

  .language-dropdown {
    display: flex;
    align-items: center;
  }
  .language-dropdown .wrapper {
    width: 100%;
    max-width: 480px;
    padding: 30px 10px;
  }
  .language-dropdown .text {
    max-width: none;
  }

  .language-dropdown form {
    flex-direction: row;
    max-width: 404px;
    align-self: center;
  }

  .language-dropdown .cta {
    margin: 0 0 0 9px;
  }
  // Div wrapping of the LanguageDropdownFlag component
  form > div {
    width: 100%;
  }
}

@media (min-width: 660px) {
  section {
    max-width: none;
  }
  .header {
    flex-direction: row;

  }
  .heading, p {
    text-align: left;
  }
  .content {
    align-items: flex-start;
  }

  .heading {
    max-width: 310px;
  }
  p {
    padding: 0;
  }
  .image {
    width: 451px;
    height: 415px;
    background-image: url('/nuxt-assets/img/hearts/heart-660.png');
    background-position: right 12px;
    background-size: contain;
  }
  .content .cta {
    display: inline-block;
    top: 0;
    align-self: flex-start;
    border: none;
  }
  .image .cta {
    display: none;
  }
  // Since we removed the right padding of container so heart can touch browser border,
  // center this by shifting it to the left by the padding-right value removed
  .language-dropdown {
    margin-left: -20px;
    padding: 0 20px;
  }
  .language-dropdown .wrapper {
    max-width: none;
    box-sizing: border-box;
  }
}

@media (min-width: 800px) {
  .heading {
    font-size: 60px;
    line-height: 60px;
  }
  .header {
    justify-content: space-between;
    align-items: flex-start;
  }
  .heading, p {
    max-width: none;
  }
  p {
    font-size: 20px;
  }
  .image {
      min-width: 434px;
      height: 463px;
      background-image: url('/nuxt-assets/img/hearts/heart-800.png');
      background-position: right 12px;
      background-size: contain;
  }
}

@media (min-width: 830px) {
    .content {
      max-width: 366px;
      padding-right: 1em;
    }
}

@media (min-width: 920px) {
    .content {
      max-width: none;
    }
    .language-dropdown {
      position: relative;
      top: -150px;
      margin: 0 -160px 0 0;
    }
  }

@media (min-width: 1100px) {
  .content {
    //background-image: url('/nuxt-assets/img/hearts/heart-desktop.png');
    //background-size: contain;
    max-width: 600px;
  }
}
@media (min-width: 1200px) {

  .header {
    align-items: flex-start;
    padding-top: 2em;
    border: 2px solid blue;
    justify-content: center;
  }
  .image {
    min-width: 654px;
    height: 550px;
    background-image: url('/nuxt-assets/img/hearts/heart-desktop.png');
    background-size: 100% 100%;
    background-image: none;
    // margin-right: -90px;

  }
  .content {
    min-width: 680px;
  }
  .heading, p {
    max-width: none;
    text-align: center;
    margin-bottom: 50px;
  }
  .content .cta {
    align-self: center;
  }
  .heading {
    font-size: 75px;
    line-height: 80px;
    margin-bottom: 0;
  }
  .language-dropdown {
    position: relative;
    top: -157px;
    margin-bottom: -160px;
    z-index: 1;
    max-width: 992px;
    .wrapper {
      flex-direction: row;
      align-content: space-around;
      justify-content: center;
      .text {
        margin-bottom: 0;
        width: auto;
        padding-right:16px
      }
    }

  }

}
</style>