orisoxin/pages/_lang/index.vue

<template>
  <div class="home-Page page">
    <!---------------------------------- Breaking News ------------------------------------->
    <!--    <section class="breaking-news" v-if="blogPosts.docs.length">-->
    <!--      <div id="newsSlider">-->
    <!--        <div class="slide" v-for="item in blogPosts.docs" :key="item._id">-->
    <!--          <nuxt-link-->
    <!--              :to="{name: 'lang-blog-post',params: {lang: $route.params.lang , post: item.locale[$route.params.lang].title}}"-->
    <!--              class="news-link">-->
    <!--            <h4 class="h4" v-if="item.locale[$route.params.lang].title"> {{ item.locale[$route.params.lang].title }} </h4>-->
    <!--            <span> - </span>-->
    <!--            <p v-if="item.locale[$route.params.lang].short_description">{{ item.locale[$route.params.lang].short_description }} </p>-->
    <!--          </nuxt-link>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </section>-->

    <!---------------------------------- Section 1 ------------------------------------->
    <section class="s1-Img-BG">
      <div class="parallax">
        <div id="homeSlider">
          <div class="slide" v-for="item in sortedSlides" :key="item._id">
            <img v-if="item.isImage" :src="item.image" alt="" />
            <video v-else :src="item.video" autoplay muted loop class="bg"></video>
          </div>
        </div>
        <div class="container">
          <div class="test"></div>
          <div class="s1 anim-fadeInStagger">
            <h3 class="s1-Title staggerItem" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
              {{ content.s1.t1 }}
            </h3>
            <h5 class="s1-Desc h1 staggerItem">
              {{ content.s1.t2 }}
            </h5>
            <h6 class="s1-Desc1 staggerItem">
              {{ content.s1.t3 }} <b>{{ content.s1.t4 }}</b>
            </h6>
          </div>
          <div class="s1-Down">
            <a class="s1-Down-Link" @click="goDown"> {{ content.s1.t5 }} <i class="fas fa-chevron-down"></i> </a>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 2 ------------------------------------->
    <section class="s2-Img-BG">
      <div class="parallax">
        <!---------------------------------- Breaking News ------------------------------------->
        <!--        <div class="breaking-news" v-if="blogPosts.docs.length">-->
        <div class="breaking-news">
          <div id="newsSlider">
            <!--            <div class="slide" v-for="item in blogPosts.docs" :key="item._id">-->
            <div class="slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-drilling',
                  params: { lang: $route.params.lang }
                }"
                class="news-link"
              >
                <h4 class="h4">{{ content.s2.t5 }}</h4>
              </nuxt-link>
            </div>
            <div class="slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-piping',
                  params: { lang: $route.params.lang }
                }"
                class="news-link"
              >
                <h4 class="h4">{{ content.s2.t4 }}</h4>
              </nuxt-link>
            </div>
            <div class="slide">
              <nuxt-link :to="{ name: 'lang-activities-srp', params: { lang: $route.params.lang } }" class="news-link">
                <!-- <nuxt-link   class="news-link" :to='`${$route.params.lang}/activities/srp`'> -->
                <h4 class="h4">{{ content.s2.t8 }}</h4>
              </nuxt-link>
            </div>
            <div class="slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-sm',
                  params: { lang: $route.params.lang }
                }"
                class="news-link"
              >
                <h4 class="h4">{{ content.s2.t7 }}</h4>
              </nuxt-link>
            </div>
            <div class="slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-ward',
                  params: { lang: $route.params.lang }
                }"
                class="news-link"
              >
                <h4 class="h4">{{ content.s2.t6 }}</h4>
              </nuxt-link>
            </div>
          </div>
        </div>

        <div class="s2">
          <!--          <div class="row">-->
          <!--            <div class="col-12 col-md-12 col-lg-4 s2-desc-col anim-fadeInStagger">-->
          <!--              <h2 class="staggerItem">{{ content.s2.t1 }}</h2>-->
          <!--              <p class="staggerItem">-->
          <!--                {{ content.s2.t2 }}-->
          <!--              </p>-->
          <!--              <nuxt-link :to="{name: 'lang-activities',params: {lang: $route.params.lang}}" class="staggerItemSeeBTN">-->
          <!--                {{ content.s2.t3 }}-->
          <!--              </nuxt-link>-->
          <!--            </div>-->

          <!--            <div class="col-12 col-md-12 col-lg-8 s2-img-col paddingZero">-->
          <!--              <div id="slidesProjects" class="row">-->
          <!--                <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
          <!--                  <nuxt-link :to="{name: 'lang-activities-drilling',params: { lang: $route.params.lang }}">-->
          <!--                    <img-->
          <!--                        src="/img/HomePage/drill.jpg"-->
          <!--                        alt=""-->
          <!--                        class="s2-img"-->
          <!--                    />-->
          <!--                    <div class="title-img">-->
          <!--                      <h4>{{ content.s2.t5 }}</h4>-->
          <!--                    </div>-->
          <!--                  </nuxt-link>-->
          <!--                </div>-->
          <!--                <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
          <!--                  <nuxt-link :to="{name: 'lang-activities-piping',params: { lang: $route.params.lang }}">-->
          <!--                    <img-->
          <!--                        src="/img/HomePage/piping.jpg"-->
          <!--                        alt=""-->
          <!--                        class="s2-img"-->
          <!--                    />-->
          <!--                    <div class="title-img">-->
          <!--                      <h4>{{ content.s2.t4 }}</h4>-->
          <!--                    </div>-->
          <!--                  </nuxt-link>-->
          <!--                </div>-->
          <!--                <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
          <!--                  <nuxt-link :to="{name: 'lang-activities-srp',params: { lang: $route.params.lang }}">-->
          <!--                    <img-->
          <!--                        src="/img/HomePage/faraz.jpg"-->
          <!--                        alt=""-->
          <!--                        class="s2-img"-->
          <!--                    />-->
          <!--                    <div class="title-img">-->
          <!--                      <h4>{{ content.s2.t8 }}</h4>-->
          <!--                    </div>-->
          <!--                  </nuxt-link>-->
          <!--                </div>-->
          <!--                <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
          <!--                  <nuxt-link :to="{name: 'lang-activities-sm',params: { lang: $route.params.lang }}">-->
          <!--                    <img-->
          <!--                        src="/img/HomePage/salt.jpg"-->
          <!--                        alt=""-->
          <!--                        class="s2-img"-->
          <!--                    />-->
          <!--                    <div class="title-img">-->
          <!--                      <h4>{{ content.s2.t7 }}</h4>-->
          <!--                    </div>-->
          <!--                  </nuxt-link>-->
          <!--                </div>-->
          <!--                <div class="col-12 col-md-4 staggerItemLeftToRight s2-item-activity slide">-->
          <!--                  <nuxt-link :to="{name: 'lang-activities-ward',params: { lang: $route.params.lang }}">-->
          <!--                    <img-->
          <!--                        src="/img/HomePage/petrochemy.jpg"-->
          <!--                        alt=""-->
          <!--                        class="s2-img"-->
          <!--                    />-->
          <!--                    <div class="title-img">-->
          <!--                      <h4>{{ content.s2.t6 }}</h4>-->
          <!--                    </div>-->
          <!--                  </nuxt-link>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </div>-->

          <!--          </div>-->

          <div id="slidesProjects">
            <div class="staggerItemLeftToRight s2-item-activity slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-drilling',
                  params: { lang: $route.params.lang }
                }"
              >
                <img src="/img/HomePage/drill.jpg" alt="" class="s2-img" />
                <div class="title-img">
                  <h4>{{ content.s2.t5 }}</h4>
                </div>
              </nuxt-link>
            </div>
            <div class="staggerItemLeftToRight s2-item-activity slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-piping',
                  params: { lang: $route.params.lang }
                }"
              >
                <img src="/img/HomePage/piping.jpg" alt="" class="s2-img" />
                <div class="title-img">
                  <h4>{{ content.s2.t4 }}</h4>
                </div>
              </nuxt-link>
            </div>
            <div class="staggerItemLeftToRight s2-item-activity slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-srp',
                  params: { lang: $route.params.lang }
                }"
              >
                <img src="/img/HomePage/faraz.jpg" alt="" class="s2-img" />
                <div class="title-img">
                  <h4>{{ content.s2.t8 }}</h4>
                </div>
              </nuxt-link>
            </div>
            <div class="staggerItemLeftToRight s2-item-activity slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-sm',
                  params: { lang: $route.params.lang }
                }"
              >
                <img src="/img/HomePage/Salt.jpg" alt="" class="s2-img" />
                <div class="title-img">
                  <h4>{{ content.s2.t7 }}</h4>
                </div>
              </nuxt-link>
            </div>
            <div class="staggerItemLeftToRight s2-item-activity slide">
              <nuxt-link
                :to="{
                  name: 'lang-activities-ward',
                  params: { lang: $route.params.lang }
                }"
              >
                <img src="/img/HomePage/petrochemy.jpg" alt="" class="s2-img" />
                <div class="title-img">
                  <h4>{{ content.s2.t6 }}</h4>
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 4 ------------------------------------->
    <section class="s4-Img-BG" v-if="filteredProjects.length === 3">
      <div class="parallax section">
        <div class="s4-body anim-fadeInStagger">
          <div class="container">
            <div>
              <h2 class="s4-title staggerItem">{{ content.s4.t1 }}</h2>
            </div>

            <div class="row align-items-stretch staggerItem">
              <div
                v-for="item in filteredProjects"
                :key="item._id"
                class="col-12 col-xl-4 col-lg-4 col-md-6 col-sm-6 mb-4"
              >
                <div class="s4-project-post">
                  <h4>{{ categoryName(item.category) }}</h4>
                  <img :src="item.thumb" :alt="item.locale[$route.params.lang].title" class="s4-img" />
                  <h3>{{ item.locale[$route.params.lang].title }}</h3>
                  <p>
                    {{ item.locale[$route.params.lang].short_description }}
                  </p>
                  <nuxt-link
                    :to="{
                      name: 'lang-projects-project',
                      params: { lang: $route.params.lang, project: item._id }
                    }"
                  >
                    {{ content.s4.t2 }}
                    <i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 3 ------------------------------------->
    <section class="s3-Img-BG">
      <div class="parallax">
        <div class="container">
          <h3 class="s3-Title anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
            {{ content.s3.t1 }}
          </h3>
          <div class="row anim-fadeInStagger" v-if="projectCat.length > 0">
            <div class="col-12 col-sm-6 col-md-3 anim-fadeIn" v-for="cat in projectCat" :key="cat._id">
              <!--              <h4 class="num s3-num1 anim-number">{{-->
              <!--                  projects.filter(item => item.category === cat.id).length-->
              <!--                }}</h4>-->
              <nuxt-link
                :to="{
                  name: 'lang-projects',
                  params: { lang: $route.params.lang },
                  query: { category: cat._id }
                }"
              >
                <h6 class="s3-title-num">
                  {{ cat.locale[$route.params.lang].name }}
                </h6>
              </nuxt-link>
            </div>
          </div>

          <div class="row" v-else>
            <div class="col-12">
              <h6 class="h4 notFound1">{{ content.s3.t2 }}</h6>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 5 ------------------------------------->
    <!--    <section class="s5-Img-BG ">-->
    <!--      <div class="parallax section">-->
    <!--        <div class="container">-->
    <!--          <div id="slides">-->
    <!--            <div class="slide" v-for="item in customerComments" :key="item._id">-->
    <!--              <div class="content">-->
    <!--                <h2 class="h2">{{ content.s5.t1 }}</h2>-->
    <!--                <p>{{ item.locale[$route.params.lang].comment }}</p>-->
    <!--              </div>-->

    <!--              <div class="info">-->
    <!--                <div class="imgBox">-->
    <!--                  <img-->
    <!--                      :src="item.image || '/img/avatar.png'"-->
    <!--                      alt=""-->
    <!--                      class="s4-user-img"-->
    <!--                  />-->
    <!--                </div>-->
    <!--                <div class="txtBox">-->
    <!--                  <p>{{ item.locale[$route.params.lang].name }}</p>-->
    <!--                  <p>{{ item.locale[$route.params.lang].position }}</p>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </section>-->

    <!---------------------------------- Section 9 ------------------------------------->
    <section class="s9-Img-BG">
      <div class="parallax section">
        <div class="container anim-fadeInStagger s9">
          <div class="s9-title staggerItem">
            <h2>{{ content.s9.t1 }}</h2>
          </div>
          <div class="row staggerItem consents" id="consentsSlider">
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/1.jpg">
                <img src="/img/ConsentsPage/1.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/2.jpg">
                <img src="/img/ConsentsPage/2.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/3.jpg">
                <img src="/img/ConsentsPage/3.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/4.jpg">
                <img src="/img/ConsentsPage/4.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/41.jpg">
                <img src="/img/ConsentsPage/41.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/42.jpg">
                <img src="/img/ConsentsPage/42.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/43.jpg">
                <img src="/img/ConsentsPage/43.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
            <div class="s9-imag-view slide">
              <a href="/img/ConsentsPage/44.jpg">
                <img src="/img/ConsentsPage/44.jpg" title="consents" alt="OrisOxin-consents" class="s9-img" />
              </a>
            </div>
          </div>

          <div class="view-btn">
            <nuxt-link
              :to="{
                name: 'lang-consents',
                params: { lang: $route.params.lang }
              }"
              class="btn btn-default"
            >
              {{ content.s9.t2 }}
            </nuxt-link>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 6 ------------------------------------->
    <section class="s6-Img-BG">
      <div class="parallax section">
        <div class="container anim-fadeInStagger">
          <div class="s6-title staggerItem">
            <h2>{{ content.s6.t1 }}</h2>
            <div class="s6-Desc">
              <p>IMQ</p>
              <i class="far fa-star"></i>
            </div>
            <div class="s6-Desc">
              <p>CSQ</p>
              <i class="far fa-star"></i>
            </div>
          </div>
          <div class="row staggerItem certificates">
            <div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
              <a href="/img/HomePage/certificates/CSQ1.jpg">
                <img src="/img/HomePage/certificates/CSQ1_thumb.png" title="گواهی CSQ1" alt="CSQ1" class="s6-img" />
              </a>
            </div>

            <div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
              <a href="/img/HomePage/certificates/CSQ2.jpg">
                <img src="/img/HomePage/certificates/CSQ2_thumb.png" title="گواهی ECO" alt="CSQ2" class="s6-img" />
              </a>
            </div>

            <div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
              <a href="/img/HomePage/certificates/CSQ3.jpg">
                <img src="/img/HomePage/certificates/CSQ3_thumb.png" title="گواهی H&S2" alt="CSQ3" class="s6-img" />
              </a>
            </div>

            <div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6 s6-imag-view">
              <a href="/img/HomePage/certificates/IMQ2.jpg">
                <img src="/img/HomePage/certificates/IMQ2_thumb.png" title="گواهی IMQ2" alt="IMQ2" class="s6-img" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 10 ------------------------------------->
    <section class="s10-Img-BG">
      <div class="parallax section">
        <!-- sheet calculation module -->

        <div class="s10-title staggerItem">
          <h2>{{ content.s10.t1 }}</h2>
        </div>
        <SheetWCM class="anim-fadeInStagger" />

        <!-- pipe calculation module -->
        <div class="s10-title staggerItem mt-5">
          <h2>{{ content.s10.t8 }}</h2>
        </div>
        <PipeWCM class="anim-fadeInStagger" />
      </div>
    </section>

    <!---------------------------------- Section 7 ------------------------------------->
    <section class="s7-Img-BG">
      <div class="parallax">
        <div class="container">
          <div class="s7-body anim-fadeIn">
            <!--            <h2>-->
            <!--              {{ content.s7.t1 }}-->
            <!--            </h2>-->
          </div>
        </div>
      </div>
    </section>

    <!---------------------------------- Section 8 ------------------------------------->
    <section class="s8-Img-BG">
      <div class="parallax section">
        <div class="container">
          <div class="s8-body">
            <div class="gallery">
              <div id="slidesAddress" class="row anim-fadeIn">
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/HomePage/g1.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>Brazil</h3>
                      <span>ENGEMASA</span>
                      <p>
                        {{ content.s8.t28 }}
                      </p>
                    </div>
                    <div class="s8-tel">
                      <a class="s8-link" href="tel:+551633631500">+551633631500</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                      <a class="s8-link" href="www.engemasa.com.br">www.engemasa.com.br</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/HomePage/g2.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>china</h3>
                      <span>NPA</span>
                      <p>
                        {{ content.s8.t24 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:+8653287314976">+86 532 87314976</a>
                      <a class="s8-link" href="tel:+8653287314975">+86 532 87314975</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/HomePage/g3.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox" style="direction: ltr">
                      <h3>{{ content.s8.t25 }}</h3>
                      <p>
                        {{ content.s8.t26 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:82(55)5874570">82(55)5874570</a>
                      <a class="s8-link" href="tel:82(55)5873330">82(55)5873330</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                      <a class="s8-link" href="www.GasComp.kr">www.GasComp.kr</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/HomePage/g1.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t29 }}</h3>

                      <p>
                        {{ content.s8.t30 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:+8222083233840">+82-2-2083-2338-40</a>
                      <a class="s8-link" href="tel:+82220832341">+82-2-2083-2341</a>
                      <a class="s8-link" href="www.kdw.co.kr">www.kdw.co.kr</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/HomePage/g2.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t21 }}</h3>
                      <span>HJ Metal Korea Co., Ltd</span>
                      <p>
                        {{ content.s8.t22 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:+82325724081">+82 32 572 4081-2</a>

                      <a class="s8-link" href="tel:021325724086">+82 32 572 4086</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                      <a class="s8-link" href="www.hjmk.co.kr">www.hjmk.co.kr</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/ContactPage/esfahan.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t5 }}</h3>
                      <p>
                        {{ content.s8.t6 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:03132747303">031-32747303</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/ContactPage/ahvaz1.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t3 }}</h3>
                      <p>
                        {{ content.s8.t4 }}
                      </p>
                    </div>

                    <div class="s8-tel">
                      <a class="s8-link" href="tel:06134491021">0613-4491021</a>
                      <a class="s8-link" href="tel:06134491022">0613-4491022</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/ContactPage/ahvaz.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t19 }}</h3>
                      <p>
                        {{ content.s8.t20 }}
                      </p>
                    </div>
                    <div class="s8-tel">
                      <a class="s8-link" href="tel:06134427626">0613-4427626</a>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-4 gallery-item slide">
                  <img src="/img/ContactPage/tehran.jpg" alt="" class="s8-img" />
                  <div class="txtBox">
                    <div class="_txtBox">
                      <h3>{{ content.s8.t1 }}</h3>
                      <p>
                        {{ content.s8.t2 }}
                      </p>
                    </div>
                    <div class="s8-tel">
                      <a class="s8-link" href="tel:02188612602">021-88612602</a>
                      <a class="s8-link" href="tel:02188612603">021-88612603</a>
                      <a class="s8-link" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <h1 class="col-12 s8-Title anim-fadeIn">{{ content.s8.t7 }}</h1>
            <div class="row align-items-stretch anim-fadeIn">
              <div class="col-12 col-xl-6 col-lg-6 col-md-6 col-sm-6 info s8-info">
                <div>
                  <b class="h4">{{ content.s8.t8 }}:</b>
                  <a class="s8-link-address" href="tel:02188612603">021-88612603</a>
                </div>
                <div>
                  <b class="h4">{{ content.s8.t9 }}:</b>
                  <a class="s8-link-address" href="tel:02188612602">021-88612602</a>
                </div>
                <div>
                  <b class="h4">{{ content.s8.t10 }}:</b>
                  <a class="s8-link-address" href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
                </div>
                <div>
                  <b class="h4">{{ content.s8.t11 }}:</b>
                  <p class="s8-link-address">{{ content.s8.t2 }}</p>
                </div>

                <div>
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3237.46662168324!2d51.394458715552624!3d35.76391253303978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e06f906e67b41%3A0x98bfda631d3b9527!2z2LTYsdqp2Kog2KfYsduM2LMg2Kfaqdiz24zZhg!5e0!3m2!1sen!2sfr!4v1632141129226!5m2!1sen!2sfr"
                    width="90%"
                    height="200"
                    style="border: 0"
                    allowfullscreen=""
                    loading="lazy"
                  ></iframe>
                </div>
              </div>

              <div class="col-12 col-xl-4 col-lg-4 col-md-6 col-sm-6 input-body">
                <span>{{ content.s8.t13 }}</span>
                <form @submit.prevent="post">
                  <div class="fromRow" :class="validation.name ? 'err' : null">
                    <input v-model="message.name" class="input" name="name" type="text" :placeholder="content.s8.t14" />
                    <p v-if="validation.name">{{ validation.name.msg }}</p>
                  </div>
                  <div class="formRow" :class="validation.email ? 'err' : null">
                    <input
                      v-model="message.email"
                      class="input"
                      name="email"
                      type="text"
                      :placeholder="content.s8.t15"
                    />
                    <p v-if="validation.email">{{ validation.email.msg }}</p>
                  </div>
                  <div class="formRow" :class="validation.subject ? 'err' : null">
                    <input
                      v-model="message.subject"
                      class="input"
                      name="subject"
                      type="text"
                      :placeholder="content.s8.t16"
                    />
                    <p v-if="validation.subject">
                      {{ validation.subject.msg }}
                    </p>
                  </div>
                  <div class="formRow" :class="validation.message ? 'err' : null">
                    <textarea v-model="message.message" class="input" rows="6" :placeholder="content.s8.t17"></textarea>
                    <p v-if="validation.message">
                      {{ validation.message.msg }}
                    </p>
                  </div>

                  <div class="btnSub">
                    <form-btn :label="content.s8.t18" buttonType="submit" />
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
if (process.client) require('slick-carousel')
import {
  fadeInAnimation,
  fadeInStaggerAnimation,
  leftToRightAnimation,
  leftToRightStaggerAnimation,
  numberAnimation
} from '~/utils/animations'

export default {
  data() {
    return {
      slides: null,
      projects: null,
      projectCat: null,
      customerComments: null,
      blogPosts: null,
      message: {
        name: '',
        email: '',
        subject: '',
        message: '',
        locale: this.$route.params.lang
      },
      validation: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      $(document).ready(() => {
        fadeInAnimation(this.$gsap)
        leftToRightAnimation(this.$gsap)
        fadeInStaggerAnimation(this.$gsap)
        leftToRightStaggerAnimation(this.$gsap)
        numberAnimation(this.$gsap)

        // certificates
        new SimpleLightbox('.home-Page .certificates a')
        new SimpleLightbox('.home-Page .consents a')

        $(window).scroll(() => {
          if (window.scrollY > 628) $('.breaking-news').addClass('_breaking-news')
          if (window.scrollY < 628) $('.breaking-news').removeClass('_breaking-news')
        })

        // News carousel
        $('#newsSlider').slick({
          autoplay: true,
          autoplaySpeed: 3000,
          accessibility: false,
          arrows: false,
          dots: false,
          rtl: false,
          slidesToShow: 1
        })

        $('.slick-list').css('direction', 'ltr')

        // Home carousel
        $('#homeSlider').slick({
          autoplay: true,
          autoplaySpeed: 5000,
          accessibility: false,
          arrows: false,
          dots: true,
          rtl: this.$route.params.lang === 'fa',
          slidesToShow: 1
        })

        // Consents carousel
        $('#consentsSlider').slick({
          infinite: false,
          autoplay: true,
          autoplaySpeed: 5000,
          accessibility: false,
          arrows: true,
          dots: false,
          rtl: this.$route.params.lang === 'fa',
          slidesToShow: 4,
          slidesToScroll: 4,
          responsive: [
            {
              breakpoint: 960,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: false
              }
            },
            {
              breakpoint: 720,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2
              }
            },
            {
              breakpoint: 540,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false
              }
            }
          ]
        })

        // Comment carousel
        $('#slides').slick({
          autoplay: true,
          accessibility: false,
          arrows: true,
          dots: true,
          rtl: this.$route.params.lang === 'fa',
          responsive: [
            {
              breakpoint: 540,
              settings: {
                arrows: false
              }
            }
          ]
        })

        // Projects carousel
        $('#slidesProjects').slick({
          autoplay: true,
          // accessibility: false,
          arrows: true,
          dots: false,
          slidesToShow: 5,
          slidesToScroll: 1,
          infinite: false,
          autoplaySpeed: 2000,
          rtl: this.$route.params.lang === 'fa',
          responsive: [
            {
              breakpoint: 1625,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: false
              }
            },
            {
              breakpoint: 720,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 540,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true
              }
            }
          ]
        })

        // Address carousel
        $('#slidesAddress').slick({
          // autoplay: true,
          accessibility: false,
          arrows: true,
          dots: false,
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: false,
          autoplaySpeed: 2000,
          rtl: this.$route.params.lang === 'fa',
          responsive: [
            // {
            //   breakpoint: 1200,
            //   settings: {
            //     slidesToShow: 3,
            //     slidesToScroll: 1,
            //     infinite: false,
            //     dots: true
            //   }
            // },
            {
              breakpoint: 1200,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 769,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true
              }
            }
          ]
        })

        //--------------------------------------------------------- Section 1
        this.$gsap
          .timeline({
            scrollTrigger: {
              trigger: '.s2-Img-BG',
              scrub: true,
              start: 'top bottom'
            }
          })
          .to($('.s1-Img-BG .parallax'), {
            duration: 9,
            opacity: 0,
            y: '50%'
          })
      })
    })
  },
  methods: {
    categoryName(id) {
      return this.projectCat.find((item) => item._id === id)?.locale[this.$route.params.lang].name || '-'
    },
    goDown() {
      this.$gsap.to(window, { scrollTo: '.s2-Img-BG', duration: 0.7 })
    },
    post() {
      this.validation = {}
      this.$axios
        .post('/api/public/contact', this.message)
        .then((res) => {
          this.$message({
            type: 'success',
            message: 'message sent successfully'
          })
          this.message = {
            name: '',
            email: '',
            subject: '',
            message: '',
            locale: this.$route.params.lang
          }
        })
        .catch((e) => {
          if (e.response.status === 422) this.validation = e.response.data.validation
          else console.log(e)
        })
    }
  },
  computed: {
    content() {
      return this.$store.state.content.home[this.$route.params.lang]
    },
    filteredProjects() {
      return this.projects.filter((item, index) => item.thumb && item.has_details && index < 3)
    },
    sortedSlides() {
      return this.slides.sort((a, b) => a.isImage - b.isImage)
    }
  },
  async asyncData({ $axios, error }) {
    try {
      const allData = await Promise.all([
        // fetch slides [0]
        $axios.get('/api/public/slides'),
        // fetch projects [1]
        $axios.get('/api/public/projects'),
        // fetch project categories [2]
        $axios.get('/api/public/projectCategories'),
        // fetch customer comments [3]
        $axios.get('/api/public/comments'),
        // fetch blog posts [4]
        $axios.get('/api/public/blogPosts?category=all&page=1')
      ])
      const slides = allData[0]
      const projects = allData[1]
      const projectCat = allData[2]
      const customerComments = allData[3]
      const blogPosts = allData[4]
      return {
        slides: slides.data,
        projects: projects.data,
        projectCat: projectCat.data,
        customerComments: customerComments.data,
        blogPosts: blogPosts.data
      }
    } catch (e) {
      console.error('Homepage asyncData failed:', e.message || e)
      error({ statusCode: 500, message: 'there is a problem here' })
    }
  }
}
</script>

<style scoped>
.gallery .slick-slide:nth-child(-n + 5) .gallery-item ._txtBox {
  text-align: left;
}
.gallery .slick-slide:nth-child(-n + 5) .gallery-item ._txtBox p {
  text-align: left;
  direction: ltr;
}
.gallery .slick-slide .s8-tel {
  text-align: left;
}
.gallery .slick-slide .s8-link:lang(fa) {
  direction: ltr;
}
</style>