tabbit

Fri Mar 30 2018
Copied to clipboard! Copy reply
<template>
  <div class="root">

    <!-- TopNavBar Component  -->
    <TopNav />

    <div class="masthead-price">
      LESS THAN {{price}}/month for a 24-Month Subscription
    </div>

     <!-- Masthead Component-->
    <div id="masthead">      
      <div class="content">
        <div class="left">
          <h3>Learn a new language like a native</h3>
          
          <ul>
            <li><b>Immediate access to all levels</b> 
            of the world's best language learning program
            </li>
            <li><b>Access on any device</b>, including our award winning mobile app</li>
            <li><b>The most advanced speech technology</b> 
            with our only product that updates as new features are released
            </li>
            <li><b>Download</b> lessons to your mobile device to continue 
            learning offline
            </li>
          </ul>
        </div>
        <div class="right"></div>
      </div>
    </div>

    <div class="products-container">
      <div class="content">
        I want to learn <SelectLanguage v-bind={onLangChange} />
        <p>
          The flexibility to learn a new language on your schedule, 
          with any device, from anywhere in the world. You'll get 
          full access to all of our latest features and can start 
          learning immediately - no lengthy downloads or 
          installations required.
        </p>

        <div class="products">
          <!-- Loop through our products | ProductBox Component -->
          <ProductBox 
            v-for="(product, key) in products"
            v-bind:msrp='product.msrp'
            v-bind:price='product.price'
            v-bind:level='product.lvl'
            v-bind:cartlink='product.cart'
            :key=key />
        </div>

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

      </div> <!-- /content -->
    </div>
        
    <div class="trusted">
      <div class="content">
        <h3>Trusted for <b>25 years</b> by top companies and agencies</h3>
        <div class="logos">
          <img alt="NASA" src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/nasa-logo.svg">
          <img alt="calvinklein" src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/calvinklein-logo.png">
          <img alt="fender" src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/fender-logo.png">
          <img alt="tripadvisor" src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/tripadvisor-logo.png">
          <img alt="tommyhilfiger" src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/tommy-logo.png">
        </div>
      </div>
    </div>

    <div class="reviews">
      <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script>
      <div class="content">
        <div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="542de05500006400057ab1c7" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" style="position: relative;"><iframe frameborder="0" scrolling="no" title="Customer reviews powered by Trustpilot" src="https://widget.trustpilot.com/trustboxes/53aa8912dec7e10d38f59f36/index.html?locale=en-US&amp;templateId=53aa8912dec7e10d38f59f36&amp;businessunitId=542de05500006400057ab1c7&amp;styleHeight=130px&amp;styleWidth=100%25&amp;theme=light&amp;stars=1%2C2%2C3%2C4%2C5" style="position: relative; height: 130px; width: 100%; border-style: none; display: block; overflow: hidden;"></iframe></div>
      </div>
    </div>

    <div class="demo-and-videos">
      <div class="content">
        <div class="demo">
          <div class="header">EXPERIENCE THE NEW ROSETTA STONE</div>
          <div class="body">
            <div class="text">
              ENJOY A SPECIAL, INTERACTIVE TOUR<br>OF OUR AWARD-WINNING METHOD.
              <a href="">START YOUR FREE DEMO</a>
            </div>
          </div>
        </div>

        <div class="videos">
          <div class="video">
            <div class="header">WATCH HOW IT WORKS</div>
            <div class="body"></div>
          </div>

          <div class="video">
            <div class="header">SEE WHAT PEOPLE SAY</div>
            <div class="body"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="macworld">
      <div class="content">
        <h3>Macworld</h3>
        <p>
          "With its excellent user interface, clear instructions, wide variety of games and challenges...
          <br>
          <b>Rosetta Stone has got it going on</b>
        </p>
      </div>
    </div>

    <div class="stats-container">
      <div class="content">
        <h3>25 YEARS</h3>
        <div>of insights gained through experience</div>
        <div class="stats">

          <div>
            <div class="number">12,000+</div>
            <div class="industry">corporations</div>
          </div>          

          <div>
            <div class="number">9,000+</div>
            <div class="industry">public &amp; non-profit<br>organizations</div>
          </div>

          <div>            
            <div class="number">22,000+</div>
            <div class="industry">educational institutions</div>
          </div>

          <div>          
            <div class="number">Millions</div>
            <div class="industry">of learners worldwide</div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="content">
        <div class="socialicons">
          <a target="_blank" class="facebook" href="http://www.facebook.com/RosettaStone">
            <img src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/icon-fb.png" alt="facebook">
          </a>
          <a target="_blank" class="twitter" href="http://twitter.com/rosettastone">
            <img src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/icon-twitter.png" alt="twitter">
          </a>
          <a target="_blank" class="youtube" href="http://www.youtube.com/user/rosettastone">
            <img src="https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/icon-youtube.png" alt="youtube">
          </a>
        </div>

        <p>
          * Free shipping on products shipped within the U.S. only. Offer limited to purchases made directly from Rosetta Stone and cannot be combined with any other offer. Offer valid through 04/03/2018 at 03:59am EST while quantities last. Online services must be activated within 6 months of purchase or are subject to forfeiture.
        </p>
        <p>
          If you elect to pay via an available Easy Payment plan option, the full payment price will be charged in the applicable number of installments. The first payment (plus any applicable shipping and tax on the total purchase price), will be charged to the payment account you selected on the Order Page on the Purchase Date. Thereafter, your account will be charged each month for the remaining number of payments of the plan you selected, with 0% APR and no interest charged from Rosetta Stone.
        </p>
        <p>
          * Installment Payment Plan options are made available on select product purchases only and require a valid billing address. Additional restrictions may apply.
        </p>
        <p>
          † 3 months online access included with purchase for one user for CD-ROM and Download products.
        </p>
        <p>
          The thirty-day (30-day) money back guarantee is limited to software purchases made directly from Rosetta Stone, and does not apply to any supplemental purchases, including additional online access, subscription renewals, and headsets. <a href="http://www.rosettastone.com/global/return" target="_blank">See Full Details</a>
        </p>

        <p>©&nbsp;1999 - 2018 Rosetta Stone Ltd. All Rights Reserved.&nbsp;</p>

        <p><a href="http://www.rosettastone.com/terms" target="_blank">Terms and Conditions</a></p>
        <p><a href="http://www.rosettastone.com/agreements" target="_blank">Agreements</a></p>
        <p><a href="http://www.rosettastone.com/privacy" target="_blank">Privacy Policy</a>.</p>
      </div>
    </div>
          
  </div>
</template>

<script>

// JS Libraries
import axios from 'axios'

// Our Components
import TopNav from '~/components/TopNav.vue'
import SelectLanguage from '~/components/SelectLanguage.vue'
import ProductBox from '~/components/ProductBox.vue'
import Guarantee from '~/components/Guarantee.vue'

export default {

  /* Component's this page uses */
  components: {
    TopNav,
    SelectLanguage,
    ProductBox,
    Guarantee
  },

  /* Page state */
  data()
  {
    return {
      RSI : null,
      selectedLang: null,
      languageName: null,
      price: null,
      products: [],
      filter: ['01', '18', '24D' ]
    }
  },


  /* Ran before page is mounded */
  beforeMount()
  {
    console.log('----')
    
    // Fetch our model and populate the state
    // ps: we could have a post process inject it,
    // into the generated html, like gulp does now for catalogs
    axios.get('https://www.rosettastone.com/lp/globals/models/sitewide.js')
      .then( rsi => {
        this.RSI = rsi.data        

        // Inject RSI into head - making it global (useful for dtm, tnt, etc)
        let script = document.createElement('script')
        script.innerHTML = rsi.data
        document.head.appendChild(script)
        
        
        
        this.selectedLang = 'esp'
        this.languageName = RSI({cat: this.selectedLang})[0].language
        this.products = this.RSI({cat: this.selectedLang, family: 'totale'})
          .filter(p => this.filter.indexOf(p.lvl) == -1)
          .map(p => {
            p.lvl = parseInt(p.lvl)
            return p
          })

        this.price = this.RSI({cat: this.selectedLang, lvl: '24' })[0].price 
        
      })
      .catch(e =>  false /* retry this function */ )

      // fetch('https://www.rosettastone.com/lp/globals/models/sitewide.js', {
      //   headers: new Headers({
      //     'Content-Type': 'application/javascript'
      //   }),
      //   mode: 'cors'
      // })
      // .then(response => {
      //   console.log(response)
      // })
  },


  /* Ran after page is mounded */
  mounted()
  {         
  },


  /* Any method called by the template / view (ie, events) */
  methods: {
    onLangChange(lang)
    {
      this.selectedLang = lang
      this.languageName  = this.RSI({cat: lang})[0].language 

      // We filter out products, and remove '0's in front of lvl
      this.products = this.RSI({cat: lang, family: 'totale'})
      .filter(p => this.filter.indexOf(p.lvl) == -1)
      .map(p => {
        p.lvl = parseInt(p.lvl)
        return p
      })
      
    }
  }


}
</script>

<style lang='styl'>
  @require '~assets/css/variables'

  body
    margin 0
    padding 0

  .products-container
    padding 3em 0
    p:first-of-type
      margin 4em 0
  
  .content
    max-width 1150px
    margin 0 auto

  .products
    display flex
    flex-wrap wrap
    justify-content space-between

  
  

  .header-top
    background $yellow
    height 70px   

  .masthead-price
    background $yellow  
    text-align center
    padding  1.3em 0
    font-size 1.3em
  #masthead
    background $blue
    
    .content
      display flex
      justify-content center
      margin 0 auto
      padding 2em 0
      max-width 65em
      box-sizing border-box
    .left
      width 40%
      padding-right 6em
      color #fff
      h3
        font-size 2em
        line-height 35px
        margin-bottom 1em
      ul
        margin 0
        padding 0
        list-style none
      li
        padding-left 30px
        margin-bottom 1em
        background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/yellow-checkmark.svg) no-repeat 0 6px
    .right
      background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/online-lockup-1x.png) center no-repeat
      background-size contain
      flex-grow 1


  .guarantee-wrapper
    margin 2em 0


  .trusted
    background #f1f1f1
    padding 5em 0
    box-sizing border-box
    box-shadow 0 2px 3px rgba(0,0,0,.3)
    & > div
      text-align center
    h3
      font-size 1.6em
      font-weight lighter
      margin-bottom 2em
    .logos
      display flex
      align-items center
      justify-content space-between
      & > img:nth-of-type(1)
        height 95px
      & > img:nth-of-type(2)
        height 30px
        width 20%
      & > img:nth-of-type(3)
        height 35px
      & > img:nth-of-type(4)
        width 12%
      & > img:nth-of-type(5)
        width 12%
  
  .reviews
    overflow hidden
    margin 4em 0

  .demo-and-videos
    margin 4em 0
    max-width 960px
    margin 0 auto
    .demo
      .header
        background $yellow
        text-align center
        padding 1em 0
        font-size 1.2em
      .body
        padding 3em 2.5em
        display flex
        justify-content flex-end
        box-sizing border-box
        background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/tryit.jpg)
        background-size cover
        line-height 35px
        color #fff
        .text          
          text-align right
          a
            display block
            background $blue
            padding 0.6em 1.5em
            color #fff
            text-decoration none
            text-align center
            margin-top 0.5em
    .videos
      margin-top 2em
      display flex
      justify-content space-between
      .video
        flex-grow 1
        &:first-of-type
          margin-right 2em
        .header
          background $lightblack
          color #fff
          padding 1em 0
          text-align center
        .body
          height 235px
      .video:first-of-type
        background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/watch-hover.jpg)
        background-size cover

      .video:last-of-type
        background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/sbsr_jess_pic.jpg)
        background-size cover

  .macworld
    margin 3em 0
    .content
      background url(https://resources.rosettastone.com/assets/lp/1521223173/ns/assets/macworld-review.svg) no-repeat center
      text-align center
      color #fff
      padding 1.5em 0
    h3
      color #fff
      margin-bottom 10px
      font-size 2em

  
  
  .stats-container
    & > div
      max-width 950px
      text-align center
      
    .stats
      display flex      
      justify-content space-between      
      margin-top 3em
        

      .number
        font-weight bold
        font-size 1.2em
        margin-bottom 10px
      .industry
        font-size 80%
      svg
        width 120px
  
  .footer
    margin-top 4em
    background $lightblack
    color #fff
    font-size 80%
    padding 4em 0
    line-height 20px
    .socialicons
      text-align center
      margin-bottom 2em
      a
        display inline-block
        margin-right 20px
    a
      color $yellow
        
</style>