arakrail/pages/_lang/services/index.vue

<template>
  <div class="page services--page">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <div class="top">
            <h2 class="title">{{ staticData.t1 }}</h2>
            <p class="subtitle">{{ staticData.t2 }}</p>
          </div>
          <div class="content">
            <p>{{ staticData.t3 }}</p>
            <h4>{{ staticData.t4 }}</h4>
            <ul>
              <li>
                <p>{{ staticData.t5 }}</p>
              </li>
              <li>
                <p>{{ staticData.t6 }}</p>
              </li>
              <li>
                <p>{{ staticData.t7 }}</p>
              </li>
              <li>
                <p>{{ staticData.t8 }}</p>
              </li>
              <li>
                <p>{{ staticData.t9 }}</p>
              </li>
              <li>
                <p>{{ staticData.t10 }}</p>
              </li>
              <li>
                <p>{{ staticData.t11 }}</p>
              </li>
            </ul>
            <div class="images">
              <img class="anim-fadeIn" src="~/assets/img/services/autodesk.png" alt="">
              <img class="anim-fadeIn" src="~/assets/img/services/tekla.png" alt="">
              <img class="anim-fadeIn" src="~/assets/img/services/solid_works.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="s2">
      <img src="~/assets/img/services/services-s3-i1.jpg" alt="" class="section-bg anim-parallax">
      <div class="container">
        <div class="panel">
          <div class="parts p1">
            <h2 class="title title-shape-center">{{ staticData.t12 }}</h2>
            <p>{{ staticData.t13 }}</p>
          </div>

          <!-- image left -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <h2 class="title title-subtitle">{{ staticData.t14 }}</h2>
              <p>{{ staticData.t15 }}</p>
            </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/services/s2-i1.jpg" :alt="staticData.t14">
                </div>
              </div>
            </div>
          </div>

          <!-- image right -->
          <div class="parts row align-items-center">
            <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/services/s2-i2.jpg" :alt="staticData.t16">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <h2 class="title title-subtitle">{{ staticData.t16 }}</h2>
              <p>{{ staticData.t17 }}</p>
            </div>
          </div>

          <!-- image left -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <h2 class="title title-subtitle">{{ staticData.t18 }}</h2>
              <p>{{ staticData.t19 }}</p>
            </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/services/s2-i3.jpg" :alt="staticData.t18">
                </div>
              </div>
            </div>
          </div>

          <!-- image right -->
          <div class="parts row align-items-center">
            <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/services/s2-i4.jpg" :alt="staticData.t20">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <h2 class="title title-subtitle">{{ staticData.t20 }}</h2>
              <p>{{ staticData.t21 }}</p>
            </div>
          </div>

          <!-- image left -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <h2 class="title title-subtitle">{{ staticData.t22 }}</h2>
              <p>{{ staticData.t23 }}</p>
            </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/services/s2-i5.jpg" :alt="staticData.t22">
                </div>
              </div>
            </div>
          </div>

          <!-- image right -->
          <div class="parts row align-items-center">
            <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/services/s2-i6.jpg" :alt="staticData.t24">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <h2 class="title title-subtitle">{{ staticData.t24 }}</h2>
              <p>{{ staticData.t25 }}</p>
            </div>
          </div>

          <!-- image left -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <h2 class="title title-subtitle">{{ staticData.t26 }}</h2>
              <p>{{ staticData.t27 }}</p>
            </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/services/s2-i7.jpg" :alt="staticData.t26">
                </div>
              </div>
            </div>
          </div>

          <!-- image right -->
          <div class="parts row align-items-center">
            <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/services/s2-i8.jpg" :alt="staticData.t28">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <h2 class="title title-subtitle">{{ staticData.t28 }}</h2>
              <p>{{ staticData.t29 }}</p>
            </div>
          </div>

        </div>
      </div>
    </section>
  </div>
</template>


<script>
import {fadeInAnimation, parallaxAnimation} from "~/mixins/animations"

export default {
  computed: {
    staticData() {
      return this.$store.state.staticData.services[this.$route.params.lang]
    }
  },
  mixins: [fadeInAnimation, parallaxAnimation],
  head() {
    return {
      title: this.staticData.hero
    }
  }
}
</script>