arakrail/pages/_lang/index.vue

<template>
  <div class="page home--page">

    <div class="slider-container">
      <div id="slider" class="anim-parallax-hero">
        <div class="hero clearfix" v-for="item in slider" :key="item._id">
          <div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
          <div class="txt--home">
            <h1>{{ item.slider_details[$route.params.lang].title }}</h1>
            <p>{{ item.slider_details[$route.params.lang].caption }}</p>
          </div>
        </div>
      </div>
    </div>

    <section class="s1">
      <div class="go-down-btn" @click="scrollDown">
        <em class="fa fa-angle-double-down"></em>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 title-side">
            <h2 class="title title-shape">{{ staticData.s1.title }}</h2>
          </div>
          <div class="col-12 col-md-6 caption-side">
            <p>{{ staticData.s1.caption }}</p>
            <nuxt-link :to="{name: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s1.link }}</nuxt-link>
          </div>
        </div>
      </div>
    </section>

    <section class="s2">
      <img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
      <div class="container">
        <div class="panel">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">
                <h2 class="title title-shape-center">{{ staticData.s1_2.t1 }}</h2>
              </div>
              <div class="col-12">
                <p>{{ staticData.s1_2.t2 }}</p>
                <p>{{ staticData.s1_2.t3 }}</p>
                <nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang},hash: '#history_timeline'}" class="btn btn-primary">{{ staticData.s1_2.link }}</nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s3">
      <img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
      <div class="container">
        <div class="panel">
          <div class="container-fluid">
            <div class="parts p1">
              <h2 class="title title-shape-center">{{ staticData.s2.t1 }}</h2>
              <div>
                <p>{{ staticData.s2.t2 }}</p>
              </div>
            </div>
            <div class="parts p2 row">
              <div class="col-12 col-lg-6 order-1 order-lg-0">
                <div class="txtBox">
                  <h2 class="title title-subtitle">{{ staticData.s2.t5 }}</h2>
                  <p>{{ staticData.s2.t6 }}</p>
                  <nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s2.link1 }}</nuxt-link>
                </div>
              </div>
              <div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
                <div class="imgBox imgBox-shape anim-fadeIn">
                  <div class="img">
                    <img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
                  </div>
                </div>
              </div>
            </div>
            <div class="parts p3 row">
              <div class="col-12 col-lg-6 mb-5 mb-lg-0">
                <div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
                  <div class="img">
                    <img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
                  </div>
                </div>
              </div>
              <div class="col-12 col-lg-6">
                <div class="txtBox">
                  <h2 class="title title-subtitle">{{ staticData.s2.t3 }}</h2>
                  <p>{{ staticData.s2.t4 }}</p>
                  <nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s2.link2 }}</nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s4">
      <img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
      <div class="container clearfix">
        <div class="panel">
          <div class="parts p1">
            <h2 class="title title-shape-center">{{ staticData.s3.t1 }}</h2>
            <div class="col-12">
              <p>{{ staticData.s3.t2 }}</p>
            </div>
          </div>
        </div>
        <div class="products">
          <div class="parts p2 row">
            <div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" v-for="item in favoriteProducts" :key="item._id">
              <nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
                <div class="imgBox">
                  <img :src="item.thumb" :alt="item.product_details[$route.params.lang].name">
                </div>
                <p>{{ item.product_details[$route.params.lang].name }}</p>
              </nuxt-link>
            </div>
            <div class="col-12">
              <nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s3.link }}</nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s5">
      <img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
      <div class="txt anim-fadeIn">
        <h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
        <p>{{ staticData.s4.t3 }}</p>
        <a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
      </div>
    </section>

    <CustomersCommunication/>

    <section class="s6">
      <div class="container">
        <div class="row">
          <div class="col-2 d-none d-lg-block"></div>
          <div class="col-12 col-lg-6">
            <h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
            <p>{{ staticData.s6.t2 }}</p>
            <nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
            <a @click.prevent="dialogVisible = true" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
          </div>
          <div class="col-2 img-side d-none d-lg-block">
            <img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
          </div>
        </div>
      </div>
    </section>

    <el-dialog class="install-app-dialog" :title="staticData.s6.link1" :visible.sync="dialogVisible">
      <div class="install-app-description">
        <h2>{{ staticData.s6.t3 }}</h2>
        <p>{{ staticData.s6.t4 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/android-step-1.jpg" :alt="staticData.s6.link2">
        </div>
        <p>{{ staticData.s6.t5 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/android-step-2.jpg" :alt="staticData.s6.link2">
        </div>
        <h2>{{ staticData.s6.t6 }}</h2>
        <p>{{ staticData.s6.t7 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/ios-step-1.jpg" :alt="staticData.s6.link2">
        </div>
        <p>{{ staticData.s6.t8 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/ios-step-2.jpg" :alt="staticData.s6.link2">
        </div>
        <h2>{{ staticData.s6.t9 }}</h2>
        <p>{{ staticData.s6.t10 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/desktop-step-1.jpg" :alt="staticData.s6.link2">
        </div>
        <p>{{ staticData.s6.t11 }}</p>
        <div class="imgBox">
          <img src="~/assets/img/home/desktop-step-2.jpg" :alt="staticData.s6.link2">
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">{{ staticData.s6.t12 }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
if (process.client) require('slick-carousel')
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'

export default {
  data() {
    return {
      slider: null,
      favoriteProducts: null,
      catalog: null,
      calc_app_link: this.$store.state.staticData.calc_app_link,
      validation: {},
      dialogVisible: false
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.homePage[this.$route.params.lang]
    }
  },
  methods: {
    scrollDown() {
      this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
    },
    notAvailable() {
      this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
        confirmButtonText: 'OK',
      })
    }
  },
  mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
  mounted() {
    /////////////////////////////////////// carousel
    $('#slider').slick({
      slidesToShow: 1,
      rtl: this.$route.params.lang === 'fa',
      dots: true,
      autoplay: true,
      autoplaySpeed: 6000,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false
          }
        }
      ]
    })
  },
  head() {
    return {
      title: this.staticData.title
    }
  },
  async asyncData({$axios, error}) {
    try {
      const slider = await $axios.get('/api/public/slider')
      const favoriteProducts = await $axios.get(`/api/public/favoriteProducts`)
      const catalog = await $axios.get('/api/public/catalog')

      return {
        slider: slider.data,
        favoriteProducts: favoriteProducts.data,
        catalog: catalog.data
      }
    } catch (e) {
      error({status: 404, message: 'There is a problem here'})
    }
  }
}
</script>

<style scoped>
.footer{
  background: #F0F0F0 !important;
}
</style>