tabbit

Mon Mar 02 2020
Copied to clipboard! Copy reply
<template>
  <div>
    <!-- Only show masthead-offer if we have a message to show -->
    <section class="masthead-offer" v-if="mastheadOfferMessage">{{ mastheadOfferMessage }}</section>

    <!-- Masthead Component-->
    <div
      class="masthead desktop"
      :style="{'background-image': `url(/data-models/${$store.state.locale}/masthead/desktop/${this.id}.jpg)`}"
    ></div>
    <div
      class="masthead mobile"
      :style="{'background-image': `url(/data-models/${$store.state.locale}/masthead/mobile/${this.id}.jpg)`}"
    ></div>

    <!-- Holds lang select for desktop and mobile. and Desktop's languages list. -->
    <section class="languages-wrap">
      <div class="content">
        <div>{{ locale.body['lang-select'] }}</div>
        <div>
          <SelectLanguage :langId="langId" />
        </div>
      </div>
    </section>

    <section class="products-container">
      <div class="content">
        <div class="products">
          <!-- <LoadingCircle v-if='!productList' /> -->
          <!-- Loop through our products | ProductBox Component -->
          <!-- We pass the whole products arra in case we need to mess with skus, ie, bonus month -->
          <ProductBox
            v-for="(product, key) in products"
            :msrp="product.msrp"
            :price="product.price"
            :level="product.lvl"
            :name="productName && productName[product.lvl] || product.name"
            :cartLink="product.cart"
            :showFullPrice="Boolean($route.query.fullprice || fullPrice)"
            :bonusMonths="bonusMonth"
            :xpay="parseInt($route.query.xpay) || xpay"
            :email="$route.query.email"
            :ribbonText="ribbonText && ribbonText[product.lvl]"
            :offerText="offerText && offerText[product.lvl]"
            :products="productList"
            :productFilter="productFilter"
            :iframeCart="$store.state.locale == 'es'? false : true"
            :metadata="product.metadata"
            :key="key"
          />
        </div>

        <p class="disclaimer">{{ locale.body['product-disclaimer'] }}</p>

        <!--  Guarantee Component -->
        <div class="guarantee-wrapper">
          <Guarantee />
        </div>
      </div>
    </section>

    <section class="highlights">
      <div class="content">
        <h3>{{ locale.body.features.h2 }}</h3>
        <div>
          <div class="product-img" data-bg="/nuxt-assets/img/online-lockup.png"></div>
          <div class="bullets">
            <div>
              <p>{{ locale.body.features.p }}</p>
              <ul>
                <li v-for="(li, i) in locale.body.features.bullets" :key="i" v-html="li"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="trusted">
      <div class="content">
        <h3>{{ locale.body.trusted.h2 }}</h3>
        <div class="logos">
          <img alt="tripadvisor" data-src="/nuxt-assets/img/logos/tripadvisor-2.png" />
          <img alt="fender" data-src="/nuxt-assets/img/logos/fender.svg" />
          <img alt="NASA" data-src="/nuxt-assets/img/logos/nasa.svg" />
          <img alt="calvinklein" data-src="/nuxt-assets/img/logos/ck.svg" />
        </div>
      </div>
    </section>

    <!-- Company Quotes -->
    <div class="company-quotes">
      <div class="content">
        <CompanyQuotes />
      </div>
    </div>

    <CartPanel />
    <Overlay v-if="$store.state.isOverlayOpen" />
  </div>
</template>


<script>
// Import our Components

import SelectLanguage from "~/components/SelectLanguage.vue";
import ProductBox from "~/components/ProductBox.vue";
import CompanyQuotes from "~/components/quotes/CompanyQuotes.vue";
import Guarantee from "~/components/Guarantee.vue";
import LoadingCircle from "~/components/loading/LoadingCircle.vue";
import CartPanel from "~/components/CartPanel.vue";
import Overlay from "~/components/Overlay.vue";

export default {
  layout: "landing-page",

  /* Components this page uses. They are imported above */
  components: {
    SelectLanguage,
    ProductBox,
    CompanyQuotes,
    Guarantee,
    CompanyQuotes,
    LoadingCircle,
    Overlay,
    CartPanel
  },

  /**
   * Sets head information for this page.
   * Metadata, scripts, css, title, etc, can
   * all be set and fetched here
   */

  head() {
    return {
      htmlAttrs: {
        lang: this.$store.state.locale == "en" ? "en" : "es-US"
      },
      title: "Rosetta Stone - Learn a New Language",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "Rosetta Stone" },
        { name: "robots", content: "noindex, nofollow" }
      ],
      link: [
        {
          rel: "prefetch",
          href: `/data-models/${process.env.LOCALE}/masthead/desktop/${
            this.id
          }.jpg?t=${Date.now()}`
        },
        {
          rel: "prefetch",
          href: `/data-models/${process.env.LOCALE}/masthead/mobile/${
            this.id
          }.jpg?t=${Date.now()}`
        },
        {
          rel: "prefetch",
          href:
            "//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js",
          as: "script"
        }
      ],
      script: [
        {
          src: `/data-models/${process.env.LOCALE}/js/products/${
            this.id
          }.js?t=${Date.now()}`,
          body: false
        },
        { src: "/nuxt-assets/js/vendor/jquery/jquery.min.js", body: true },
        {
          src:
            "//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js",
          body: true
        }
        //{ src: '/nuxt-assets/js/clock.js', body: true },
        //{ src: '/nuxt-assets/js/crescendo.js', body: true }
      ]
    };
  },

  /**
   * We run this function on the server so we can pre-populate
   * some data. We pre-populate the products view, so when page load the
   * user sees products right away.
   * < script src='rs.com/product-data/us/models/js/sitewide.json'>< /script>
   */

  async asyncData({ isDev, store, params, $axios, payload }) {
    let content = require(`~/data/landing-pages/sbsr/${store.state.locale}.yaml`);

    if (isDev && !payload) {
      let modelURI = `https://rosettastone.com/data-models/us/json/products/${params.pathMatch}.json`;
      var { data } = await $axios.get(modelURI);
      console.log("is dev.");
    } else {
      console.log("not dev.");
      var data = payload.model;
    }

    return {
      locale: content,
      id: data.id,
      productList: data.products,
      langId: "esp",
      ribbonText: data.ribbontext,
      offerText: data.offertext,
      bonusMonth: data.bonusMonth,
      fullPrice: data.fullprice,
      productName: data.productnames,
      xpay: data.xpay,
      expirationDate: data.expirationdate,
      productFilter: data.productfilter || ["3", "12-u", "24-u", "lifetime-u"]
    };
  },

  /**
   * Page state data.
   * Some of these come prefilled from the server while pages are being
   * generated, in the `asyncData()` method. And some of these can be
   * overwritten via url parameters as well.
   * The default values here is what you'll see while HMR'ing in dev mode.
   */

  data() {
    return {
      locale: null,

      // Holds name Page.id value (sitewide, sale, etc). Set on the server with $route
      id: null,

      // Our current 3-letter selected lang code. Initially set in mounted().
      // Set via click, dropdown change, url param, etc
      langId: "esp",

      // Language object ( {name, region, code} )
      language: null,

      // List of products to show. Each time a language is changed, this
      // gets populated and the product view gets updated (new cart urls, etc).
      // It is set in the asyncData() method.
      productList: [],

      // Products we  want to show. This is the default. Can be overwritten in asyncData()
      productFilter: ["3", "12-u", "24-u", "lifetime-u"],

      // If there's a special offer message, this will hold it.
      mastheadOfferMessage: null,

      // Holds RSI.expirationdate. Default to end of year.
      expirationDate: "December 31, 2020 23:59"
    };
  },

  created() {
    let defaultLangId = this.$store.state.locale == "en" ? "esp" : "eng";
    defaultLangId = this.$route.query.lang || defaultLangId;
    this.$store.commit("UPDATE_LANGCODE", defaultLangId);
  },

  /**
   * Called on client side.
   * We use this to fill State data above
   * before mount, since the /lp/globals/models/<model>.js
   * has been loaded into the browser's window object.
   * This essentially is our state data.
   */

  mounted() {
    // This exposes state data to window. Maybe needed when using TnT, etc
    window.vuedata = this;

    // Lazy load images
    let imgs = document.querySelectorAll("[data-src], [data-bg]");

    let observer = new IntersectionObserver(loadImg, {
      // Start downloading when img is within 50px of Y axis
      rootMargin: "50px 0px",
      threshold: 0.01
    });

    // Start observing the images
    imgs.forEach(img => observer.observe(img));

    function loadImg(entries, observer) {
      entries.forEach(e => {
        // If in viewport
        let el = e.target;
        if (e.intersectionRatio > 0) {
          let bg = el.dataset.bg || null;
          let src = el.dataset.src || null;

          if (bg) {
            el.style.backgroundImage = `url('${bg}')`;
          }
          if (src) {
            el.src = src;
          }
          // Stop observing
          observer.unobserve(e.target);
        }
      });
    }

    // If RSI has custom js or css, insert them
    /*
    if (window.pagedata.js) {
      let script = document.createElement('script')
      script.src = `/nuxt-assets/models/us/data/us/custom-js/${this.id}.js`
      document.body.appendChild(script)
    }
    if (window.pagedata.css) {
      let css = document.createElement('link')
      css.rel = 'stylesheet'
      css.type = 'text/css'
      css.href = `/nuxt-assets/product-data/data/us/custom-css/${this.id}.css`
      document.body.appendChild(css)
    }
    */

    document.querySelector("#expirationdate").innerHTML = this.expirationDate;
  },

  computed: {
    /**
     * Everytime state's productList gets updated with a new value,
     * this computed property will automatically be updated too.
     * We have this computed property so we don't have to
     * filter/map/sort the productsList each time we update it.
     * Use this in the template view instead of productList
     */
    products() {
      return this.productList
        .filter(p => p.id == this.$store.state.langId)
        .filter(p => this.productFilter.indexOf(p.lvl) != -1);
      //.sort( (a, b) => parseInt(a.lvl) < parseInt(b.lvl) ? -1 : 1)
    }
  }
};
</script>

<style lang='stylus'>
body {
  margin: 0;
  padding: 0;
  font-family: effra;
}

.content {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 1em;
}

.masthead-offer {
  background: $yellow;
  text-align: center;
  padding: 1.3em 0;
  font-size: 1.3em;
}

.masthead {
  background-color: #333;
  background-size: 100% 100%;
  padding: 27% 0 0 0;
  line-height: 1;
  box-shadow: 0 4px 10px -6px inset;
  box-sizing: border-box;

  &.desktop {
    @media $phone {
      display: none;
    }
  }

  &.mobile {
    display: none;

    @media $phone {
      display: block;
      padding: 46% 0% 1% 0%;
    }
  }
}

.languages-wrap {
  // background #f1f1f1
  padding-top: 3em;

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

    & > div:first-of-type {
      align-self: center;
      font-size: 1.8em;
      padding-right: 1em;
    }
  }

  @media (max-width: 580px) {
    padding-top: 2em;

    .content {
      flex-direction: column;
      max-width: 450px;

      & > div:first-of-type {
        font-size: 1.8em;
        padding: 0 0 20px 0;
      }
    }
  }
}

.products-container {
  position: relative;
  margin-top: 3em;

  // background #f1f1f1
  p.disclaimer {
    margin: 50px auto 20px;
    max-width: 1000px;
    font-size: 16px;
    font-family: effra;
  }

  &:after {
    content: '';
    position: absolute;
    height: 142%;
    width: 40%;
    left: 0;
    top: -66px;
    background-image: url('https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg'); // rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    z-index: -1;
  }

  @media $phone {
    &:after {
      height: 90%;
      width: 100%;
      top: -65px;
      left: -100px;
      background-size: cover;
    }
  }
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  @media $phone {
    justify-content: flex-start;
    // Reverse product order in mobile
    list = 1 .. 15;

    for n in list {
      .product-wrap:nth-child({n}) {
        order: list[(-(n))];
      }
    }
  }
}

.highlights {
  padding: 3em;
  position: relative;

  h3 {
    margin: 0 0 2em 0;
    font-size: 180%;
    text-align: center;
    font-family: helvetica;
    font-size: 40px;
  }

  .content > div {
    display: flex;

    & > div {
      display: flex;
    }
  }

  .bullets {
    flex-basis: 50%;

    p {
      margin-bottom: 3em;
      line-height: 26px;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

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

  .product-img {
    order: 1;
    flex-basis: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 5em;
  }

  &:after {
    content: '';
    position: absolute;
    height: 107%;
    width: 100%;
    right: 0;
    top: 7%;
    background-image: url('https://rosettastone.com/lp/standard-page-assets/freetrial_assets/blue-stone.svg'); // rosettastone.com/lp/standard-page-assets/freetrial_assets/blue-stone.svg)
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    z-index: -1;
  }

  @media $tablet {
    .content {
      padding: 0;

      & > div {
        flex-direction: column;
      }
    }

    .bullets {
      order: 1;
      font-size: 18px;
    }

    .product-img {
      order: 0;
      min-height: 310px;
      margin: 0;
      background-position: center;
    }
  }

  @media $phone {
    padding: 2em 1em;

    h3 {
      font-size: 28px;
      margin-bottom: 0;
    }
  }
}

.company-quotes {
  padding: 0 0 6em 0;

  h3 {
    text-align: center;
  }

  @media $phone {
    padding: 0;

    .content, .cards {
      padding: 0;
    }
  }
}

.trusted {
  padding: 5em 0;
  box-sizing: border-box;
  position: relative;

  & > div {
    text-align: center;
    max-width: 770px;
  }

  h3 {
    font-size: 2.3em;
    margin-bottom: 2em;
    font-family: helvetica;
  }

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

  &:after {
    content: '';
    position: absolute;
    height: 184%;
    width: 100%;
    right: 0;
    top: 204px;
    background-image: url('https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg'); // rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
    transform: scaleX(-1);
  }

  &:before {
    content: '';
    position: absolute;
    height: 184%;
    width: 100%;
    left: 0;
    top: 204px;
    background-image: url('https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg'); // rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    z-index: -1;
  }

  @media $tablet {
    padding-top: 0;
  }

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

      img {
        margin: 10px 0;
      }

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

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

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

      img:nth-of-type(4) {
        width: 52%;
      }
    }
  }
}
</style>