tabbit

Thu Mar 19 2020
Copied to clipboard! Copy reply
<template>
  <main>
    <section class="hero">
      <div class="content">
        <h1>Free for students</h1>
        <p>
          To keep their minds sharp and give you a much needed break, we're
          <i></i> offering
          <strong>free access to Rosetta Stone for Students for the next three months.</strong>
        </p>
      </div>
    </section>

    <section class="lang-select">
      <div class="content">
        <span>Learn</span>
        <SelectLanguage />
      </div>
    </section>

    <section class="value-prop">
      <div class="content">
        <div class="bullets">
          <p>Thank you for social distancing, an essential measure against the spread of COVID-19. We’re right there with you, from our youngest making conference call cameos to our teens announcing mere hours into self-quarantine that they are ready to go back to school.</p>

          <p>With free access to Rosetta Stone for Students:</p>

          <ul>
            <li>
              <strong>They’ll learn through immersion</strong>, making their new language accessible whether they are in kindergarten or prepping for college
            </li>

            <li>
              <strong>They’ll get instant feedback</strong> on their pronunciation
            </li>

            <li>
              You’ll be able to see how their coming along with
              <strong>progress data and printable reports</strong>
            </li>
          </ul>
        </div>
        <div class="form-wrap">
          <div class="header">
            <div>3 FREE MONTHS OF ROSETTA STONE FOR STUDENTS</div>
            <div>{{ $store.getters.getSelectedLanguage().name }}</div>
          </div>
          <div class="body">
            <form action>
              <input type="text" placeholder="Parent or Guardian's Name" />
              <input type="text" placeholder="Parent or Guardian's Email Address" />
              <input type="text" placeholder="Create a Password" />

              <p>If you have more than one kid, you don't have to choose a favorite. Just start a new form and use a different email address for each subscription you want to claim.</p>
              <p>
                <input type="checkbox" /> By checking here and placing this order, you agree to Rosetta Stone’s Purchase Terms, End User License Agreements, Website Terms and Conditions, Terms of Use and arbitration clause.
              </p>
              <input type="submit" value="Get Started" />
            </form>
          </div>
        </div>
      </div>
    </section>

    <section class="trusted">
      <div class="content">
        <h2>Trusted for 25+ years by top organizations.</h2>
        <div class="logos">
          <img alt="tripadvisor" src="/nuxt-assets/img/logos/tripadvisor-2.png" />
          <img alt="fender" src="/nuxt-assets/img/logos/fender.svg" />
          <img alt="NASA" src="/nuxt-assets/img/logos/nasa.svg" />
          <img alt="calvinklein" src="/nuxt-assets/img/logos/ck.svg" />
        </div>

        <div class="quotes">
          <div class="quote">
            <p>
              “We see those
              <strong>students who follow the Rosetta Stone® program become motivated and confident</strong>, more willing to participate in classroom activities, and acquire vocabulary at a much faster rate.”
              <span>
                &mdash;ELL Teacher,
                <br />Phoenix Union High School District
              </span>
            </p>
            <div class="logo"></div>
          </div>

          <div class="quote">
            <p>
              "
              <strong>Rosetta Stone has helped deliver on our mission</strong> in making a difference, one student at a time, through flexibility and personalized study the program provides."
              <span>
                &mdash;Assistant Superintendent,
                <br />Raleigh County Schools
              </span>
            </p>
            <div class="logo"></div>
          </div>

          <div class="quote">
            <p>
              “We’ve found that the pronunciation is so much better after a semester of Rosetta Stone than after in-person instruction.
              <strong>There just isn’t enough time for each student to practice speaking in a classroom.</strong>”
              <span>
                &mdash;—Lead Teacher,
                <br />Guthrie Virtual Schools
              </span>
            </p>
            <div class="logo"></div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import SelectLanguage from "~/components/SelectLanguage";
export default {
  components: {
    SelectLanguage
  },
  data() {
    return {};
  },
  mounted() {
    this.$store.commit("UPDATE_LANGCODE", "esp");
  }
};
</script>

<style lang="stylus" scoped>
h1, h2, h3, h4, h5 {
  font-family: Helvetica;
}

section {
  display: flex;
  flex-direction: column;
  font-family: effra;
}

.content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  align-items: center;
}

section.hero {
  background: yellow;
  height: 20vmax;
  max-height: 300px;
  color: #262626;
  text-align: center;

  .content {
    height: 100%;
    justify-content: center;
  }

  h1 {
    color: #fff;
    margin-bottom: 0;
    font-size: 2em;
  }

  p {
    font-size: 22px;
    letter-spacing: 1px;
  }

  i {
    display: block;
  }
}

section.lang-select {
  margin: 2em 0 0 0;

  .content {
    flex-direction: row;
    justify-content: center;
  }

  span {
    font-size: 2.5em;
    display: inline-block;
    margin-right: 20px;
  }
}

section.value-prop {
  padding: 4em 0 6em;

  .content {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    position: relative;

    &:after {
      content: ' ';
      background: url('/nuxt-assets/img/blobs/gray-light.svg') no-repeat right;
      background-size: 95% 95%;
      position: absolute;
      right: -120px;
      width: 800px;
      height: 700px;
      z-index: -1;
      top: -130px;
    }

    & > div {
      width: 45%;

      &.bullets {
        width: 36%;
      }
    }
  }

  .bullets {
    ul, li {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    li {
      padding: 10px 0 0 30px;
      margin-bottom: 1em;
      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjMgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5jaGVjazM1PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxwLWxheW91dC12YWx1ZS1wcm9wLXByb21vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtNDI3LjAwMDAwMCkiIGZpbGw9IiMzRjkzRDMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJjaGVjazM1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4wMDAwMDAsIDQyNy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMi43MjMxMjY2LDIuNDg2ODk2NTUgTDguNTc2Mzc5NzUsMTUuODkxMzEwMyBDOC40NTE3NzIxNSwxNi4wMDkzNzkzIDguMjUwMDEyNjYsMTYuMDA5Mzc5MyA4LjEyNTY5NjIsMTUuODkxMzEwMyBMMC4wOTMxNjQ1NTcsOC4yOCBDLTAuMDMxMTUxODk4Nyw4LjE2MjQ4Mjc2IC0wLjAzMTE1MTg5ODcsNy45NzEzMTAzNCAwLjA5MzE2NDU1Nyw3Ljg1MzI0MTM4IEwyLjA0NDk2MjAzLDYuMDAzODYyMDcgQzIuMTY5NTY5NjIsNS44ODYwNjg5NyAyLjM3MTMyOTExLDUuODg2MDY4OTcgMi40OTU2NDU1Nyw2LjAwMzg2MjA3IEw4LjM1MTMyOTExLDExLjU1MiBMMjAuMzIwOTM2NywwLjIxMDQ4Mjc1OSBDMjAuNDQ1ODM1NCwwLjA5MjY4OTY1NTIgMjAuNjQ3MDEyNywwLjA5MjY4OTY1NTIgMjAuNzcxNjIwMywwLjIxMDQ4Mjc1OSBMMjIuNzIzMTI2NiwyLjA1OTg2MjA3IEMyMi44NDc3MzQyLDIuMTc3NjU1MTcgMjIuODQ3NzM0MiwyLjM2ODU1MTcyIDIyLjcyMzEyNjYsMi40ODY4OTY1NSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat 0 12px;
    }
  }

  .form-wrap {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px alpha(black, 60%);
    border-radius: 8px;

    .header {
      background: #262626;
      color: #fff;
      text-align: center;
      padding: 20px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;

      & > div:first-of-type {
        font-weight: bold;
        margin-bottom: 10px;
      }
    }

    .body {
      padding: 20px;
      background: #fff;
    }

    p {
      font-size: 13px;
      margin-top: 0;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    input[type='text'] {
      border: 1px solid #666;
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 8px;
    }

    input[type='checkbox'] {
      position: relative;
      bottom: -2px;
    }

    input[type='submit'] {
      background: $blue;
      border: none;
      color: #fff;
      width: 250px;
      margin: 0 auto;
      padding: 15px 0;
      border-radius: 8px;
    }
  }
}

section.trusted {
  margin: 0 0 3em 0;

  h2 {
    height: 42px;
    width: 1103px;
    color: #262626;
    font-size: 40px;
    text-align: center;
    margin-bottom: 1em;
  }

  .logos {
    display: flex;
    align-items: center;
    justify-content: space-between;

    img:nth-of-type(1) {
      height: 75px;
    }

    img:nth-of-type(2) {
      height: 50px;
      width: 20%;
    }

    img:nth-of-type(3) {
      height: 65px;
    }

    img:nth-of-type(4) {
      width: 22%;
    }
  }

  .quotes {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 3em 0;
  }

  .quote {
    width: 30%;
    color: #fff;
    padding: 15px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 24px;
    box-shadow: 0 10px 30px 0 #849298;

    span {
      display: block;
      margin-top: 1em;
      text-align: right;
    }

    &:nth-of-type(1) {
      background: #C8102E;
    }

    &:nth-of-type(2) {
      background: #516AAC;
    }

    &:nth-of-type(3) {
      background: #007A00;
    }
  }
}
</style>