tabbit

Fri Mar 05 2021
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
          <small>:</small>
        </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>
            <strong>With free access to Rosetta Stone for Students:</strong>
          </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 they're coming along with
              <strong>progress data and printable reports</strong>
            </li>
          </ul>
          <p>
            Not a Student? Not a problem.
            <i></i>
            <a href="/">Begin a free trial</a>
            <i></i>(we won't make you flash a Student ID or anything!)
          </p>
        </div>
        <div class="form-wrap">
          <div class="header">
            <div>3 FREE MONTHS OF ROSETTA STONE FOR STUDENTS</div>
            <div>
              {{ $store.getters.getSelectedLanguage().name }}
              <span v-if="$store.getters.getSelectedLanguage().region"
                >({{ $store.getters.getSelectedLanguage().region }})</span
              >
            </div>
          </div>
          <div class="body">
            <form @submit.prevent="handleSubmit">
              <input type="text" v-model="name" placeholder="Parent or Guardian's Name" required />
              <input type="email" v-model="email" placeholder="Parent or Guardian's Email Address" required />
              <input type="password" v-model="password" placeholder="Create a Password" required />
              <input type="text" placeholder="School Name" required />

              <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. Parents, please note that the Rosetta
                Stone for Students subscription is a personal subscription issued to you for your child's use. The
                subscription is not associated with your child's school. At the end of the no-cost subscription period,
                we may contact you to offer the opportunity to continue your child's subscription and progress by
                purchasing a subscription.
              </p>
              <p>
                <input type="checkbox" v-model="isChecked" required /> By checking here, you agree to Rosetta Stone’s
                <a href="/termsonline">Terms of Use</a> and
                <a href="/privacy">Privacy Policy</a>
              </p>
              <div class="error" v-if="errors.length">
                <ul>
                  <li v-for="(error, i) in errors" :key="i">{{ error }}</li>
                </ul>
              </div>
              <input type="submit" :value="ctaCopy" :disabled="isSubmitting" />
            </form>
          </div>
        </div>
      </div>
    </section>

    <section class="trusted">
      <div class="content">
        <h2>
          Trusted for 25+ years
          <i></i> by top organizations.
        </h2>
        <EnterpriseLogosDisplay />
        <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";

import briteVerify from "~/modules/brite-verify.js";
import userDevice from "~/modules/detect-device.js";
import { briteVerifyError, freeTrialError } from "~/modules/config/errors.js";
import { validateEmail, validateFreetrialPassword } from "~/modules/validator.js";
import EnterpriseLogosDisplay from "~/components/EnterpriseLogosDisplay.vue";

const ctaCopy = "Get Started";

export default {
  layout: "landing-page",
  components: {
    SelectLanguage,
    EnterpriseLogosDisplay,
  },

  head() {
    return {
      title: "Rosetta Stone for Students",
      htmlAttrs: {
        lang: "en",
      },
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "All kids deserve to continue their education, even while out of school. Avoid cabin fever with three free months of Rosetta Stone for Students.",
        },
        {
          name: "og:image",
          content: "https://www.rosettastone.com/nuxt-assets/img/og/app-store.png",
        },
      ],
      link: [
        {
          rel: "canonical",
          href: "https://www.rosettastone.com/freeforstudents/",
        },
      ],
      script: [
        {
          src: "/nuxt-assets/js/vendor/jquery/jquery.min.js",
          body: true,
        },
      ],
    };
  },

  data() {
    return {
      password: "",
      name: "",
      email: "",
      isChecked: false,
      errors: [],
      isSubmitting: false,
      ctaCopy,
    };
  },
  created() {
    this.$store.commit("UPDATE_LANG_ID", "esp");
  },
  mounted() {
    this.$nextTick(() => {
      // this is bad - but since i only had 1.5 days to get this page out...
      const legal =
        "*Offer is available to parents and guardians of K-12 Students who either attend a school that is closed in response to COVID-19 or are homeschooled. Offer includes a 3-month, no-cost Rosetta Stone for Students subscription for new users (3-month period begins upon delivery of the access information email) and a no-cost, 3-month subscription added to the end of the current subscription term for eligible Homeschool product subscribers. To claim the offer, submit the required information via the online form. May not be transferred or exchanged for refund or credit. School name information will be used for eligibility verification purposes only. Offer subject to availability and may change or end at any time without notice. Rosetta Stone for Students subscription is a personal subscription issued to the parent/guardian for their child's use. Subscription is not associated with the child's school. At the end of the no-cost subscription period, Rosetta Stone may contact parent/guardian to offer the opportunity to continue the child's subscription and progress by purchasing a subscription.";
      try {
        [...document.querySelectorAll(".footer .content p")].forEach((p, i) => {
          if (i === 0) {
            p.innerHTML = legal;
          } else {
            p.remove();
          }
        });
      } catch (e) {
        // Catch error
      }
    });
  },
  methods: {
    async handleSubmit() {
      if (this.isSubmitting) {
        this.ctaCopy = "Creating account...";
        return;
      }
      this.ctaCopy = ctaCopy;

      this.isSubmitting = true;

      this.errors = [];
      // Validate email via js and brightverify
      if (!validateEmail(this.email) || !(await briteVerify(this.email))) {
        this.errors.push(briteVerifyError[this.$store.state.locale].join());
      }

      // Validate password
      if (!validateFreetrialPassword(this.password)) {
        this.errors.push(freeTrialError[this.$store.state.locale].invalidPassword.join(""));
      }

      // Validate name
      if (this.name.trim().length < 2) {
        this.errors.push("First name is too short.");
      }

      if (this.errors.length) {
        this.isSubmitting = false;
        return;
      }

      /** Make the API call  */
      // const apiUrl = /\.stg/gi.test(window.location.href)
      //   ? "https://iis-gateway-qa4.dev.rosettastone.com/api/freetrials"
      //   : "https://iis-gateway.rosettastone.com/api/freetrials";

      const req = await $nuxt.$axios.post(process.env.FREETRIAL_API, {
        licenseType: "HSUB",
        siteLang: process.env.FREETRIAL_LANGUAGE,
        trialLanguage: this.$store.state.langId.toUpperCase(),
        firstName: this.name,
        emailAddress: this.email,
        password: this.password,
        language: this.$store.langId,
        consentType: (window.gdpr && window.gdpr.email_consent) || "unknown",
        siteCode: process.env.FREETRIAL_SITE_CODE,
        cid: this.$route.query.cid || "",
        countryCode: (window.gdpr && window.gdpr.country_code) || "unknown",
        guid: "d5622eb6-16c3-41f4-bd17-1b6f71f81558",
        //emailPermissionStatus: "I"
      });

      if (!/0|1/.test(req.data.returnCode)) {
        console.log("Error.");

        this.isSubmitting = false;
        return;
      }

      // Redirecting to product
      let redirectUrl = null;
      let totaleUrl = `${process.env.FREETRIAL_TOTALE_URL}?target_language=${this.$store.state.langId.toUpperCase()}`;

      if (userDevice === "desktop") {
        if (req.data.lsToken) {
          totaleUrl +=
            "&dtm_trial_type=nocc" +
            "&purchase=true" +
            `&username=${this.email}` +
            "&accepted_terms=true" +
            `&authToken=${req.data.lsToken}` +
            "&namespace=";
        } else {
          // If we don't have a token, send them to login page with trial language
          totaleUrl = totaleUrl.replace("token_authentication", "sign_in");
        }
        redirectUrl = totaleUrl;
      } else {
        // if mobile, redirect to app store
        redirectUrl = "/lp/form-mobile-success?ref=freeforstudents";
      }
      console.log("redirecting to: " + redirectUrl);
      try {
        s.tl(true, "o", "Free Kids - Get Started");
      } catch (e) {
        console.warn("Could not fire Adobe event");
      }
      window.setTimeout(() => {
        window.location.href = redirectUrl;
      }, 600);
    },
  },
};
</script>

<style lang="stylus">
body {
  font-family: effra;
}

.content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  padding: 0 1em;
  box-sizing: border-box;
  margin: 0 auto;
}
</style>
<style lang="stylus" scoped>
h1, h2, h3, h4, h5 {
  font-family: Helvetica;
}

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

section.hero {
  background: url('/nuxt-assets/img/hero/kids-desktop.jpg');
  height: 336px;
  color: #262626;
  text-align: center;

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

  h1 {
    color: #fff;
    margin-bottom: 0;
    font-size: 88px;
  }

  p {
    font-size: 24px;
    color: #262626;
    margin-top: 0;
  }

  i {
    display: block;
  }

  @media $phone {
    background: url('/nuxt-assets/img/hero/kids-mobile.png');
    height: 143px;

    .content {
      padding: 1em;
      box-sizing: border-box;
    }

    h1 {
      font-size: 32px;
    }

    p {
      font-size: 14px;

      i {
        display: none;
      }
    }
  }
}

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

  .content {
    flex-direction: row;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
  }

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

  small {
    display: none;
  }

  @media $phone {
    .content {
      flex-direction: column;
    }

    span {
      font-size: 1.5em;
      margin-bottom: 10px;
    }

    & > div {
      width: 100%;

      small {
        display: inline;
      }
    }
  }
}

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 {
    line-height: 22px;

    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;
    }

    p {
      a {
        text-decoration: none;
        color: #0098db;
        font-weight: bold;
      }

      i {
        display: block;

        &:first-of-type {
          display: inline-block;
        }
      }
    }
  }

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

    .header {
      background: linear-gradient(225deg, #595959 0%, #262626 100%);
      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;
    }

    a {
      text-decoration: none;
      color: #0098DB;
    }

    input[type='text'], input[type='email'], input[type='password'] {
      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;
    }

    .error {
      background: #e48e8e;
      color: #fff;
      border: 3px solid #bd3e3e;
      box-sizing: border-box;
      margin-bottom: 15px;
    }
  }

  @media $phone {
    padding: 0;

    .content {
      flex-direction: column;
      padding: 0 1em;
      box-sizing: border-box;

      &:after {
        background: none;
      }

      & > div {
        width: 100%;

        &.bullets {
          width: 100%;

          p {
            text-align: center;
            font-size: 15px;

            i:first-of-type {
              display: block;
            }
          }

          ul {
            padding-bottom: 1.5em;
          }

          & > p:first-child {
            display: none;
          }
        }
      }
    }

    .form-wrap {
      border: none;
      box-shadow: none;

      .header {
        transform: scale(1.1);
        border-radius: 0;

        & > div:first-child {
          font-size: 18px;
          padding: 0 1em;
          line-height: 24px;
        }
      }
    }
  }
}

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

  h2 {
    color: #262626;
    font-size: 40px;
    text-align: center;
    margin-bottom: 1em;

    i {
      display: none;
    }
  }

  .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;
    }
  }

  @media $phone {
    .content {
      padding: 1em;
      box-sizing: border-box;
    }

    h2 {
      font-size: 28px;
      width: 100%;

      i {
        display: block;
      }
    }

    .quotes {
      flex-direction: column;
      padding: 0 20px;
      box-sizing: border-box;
      margin-bottom: 0;
    }

    .quote {
      width: 100%;
      margin-bottom: 2em;

      &:last-of-type {
        margin: 0;
      }
    }
  }
}
</style>