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>