orisoxin/pages/_lang/activities/index.vue

<template>
	<div class="activities-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax d-flex align-items-center flex-column justify-content-center"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
				<span class="anim-fadeIn">
					{{ content.s1.t2 }}
				</span>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-BG section">
			<div class="parallax">
				<div class="container">
					<div class="row anim-fadeIn">
						<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
							<div class="s2-item">
								<nuxt-link :to="{ name: 'lang-activities-piping', params: { lang: $route.params.lang } }">
									<img src="/img/ActivitiesPage/piping.jpg" alt="" />
									<div class="s2-body">
										<StrokedTxt text="01" />
										<h4 class="h4">{{ content.s2.t1 }}</h4>
									</div>
								</nuxt-link>
							</div>
						</div>

						<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
							<div class="s2-item">
								<nuxt-link :to="{ name: 'lang-activities-drilling', params: { lang: $route.params.lang } }">
									<img src="/img/ActivitiesPage/drill.jpg" alt="" />
									<div class="s2-body">
										<StrokedTxt text="02" />
										<h4 class="h4">{{ content.s2.t2 }}</h4>
									</div>
								</nuxt-link>
							</div>
						</div>

						<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
							<div class="s2-item">
								<nuxt-link :to="{ name: 'lang-activities-ward', params: { lang: $route.params.lang } }">
									<img src="/img/ActivitiesPage/petro.jpg" alt="" />
									<div class="s2-body">
										<StrokedTxt text="03" />
										<h4 class="h4">{{ content.s2.t3 }}</h4>
									</div>
								</nuxt-link>
							</div>
						</div>

						<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
							<div class="s2-item">
								<nuxt-link :to="{ name: 'lang-activities-sm', params: { lang: $route.params.lang } }">
									<img src="/img/ActivitiesPage/Salt.jpg" alt="" />
									<div class="s2-body">
										<StrokedTxt text="04" />
										<h4 class="h4">{{ content.s2.t4 }}</h4>
									</div>
								</nuxt-link>
							</div>
						</div>

						<div class="col-12 col-sm-6 col-lg-4 s2-align-col anim-fadeIn">
							<div class="s2-item">
								<nuxt-link :to="{ name: 'lang-activities-srp', params: { lang: $route.params.lang } }">
									<img src="/img/ActivitiesPage/faraz.jpg" alt="" />
									<div class="s2-body">
										<StrokedTxt text="05" />
										<h4 class="h4">{{ content.s2.t5 }}</h4>
									</div>
								</nuxt-link>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import { fadeInAnimation, fadeInStaggerAnimation } from '~/utils/animations'

	export default {
		data() {
			return {
				defaultCover: '/img/ActivitiesPage/page-title.png'
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				//--------------------------------------------------------- Section 1
				this.$gsap
					.timeline({
						scrollTrigger: {
							trigger: '.s2-BG',
							scrub: true,
							start: 'top top'
						}
					})
					.to($('.s1-Img-BG > div'), {
						duration: 9,
						opacity: 0,
						y: '50%'
					})
			})
		},

		computed: {
			content() {
				return this.$store.state.content.activities[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.activity
			}
		}
	}
</script>

<style scoped>
	.activities-page .s2-BG .parallax .container .s2-align-col .s2-item .s2-body {
		padding: 13px 25px;
		position: absolute;
		bottom: 0;
		background: #00000075;
		min-height: 138px;
		width: 100%;
	}
	.activities-page .s2-BG .parallax .container .s2-align-col .s2-item {
		width: auto;
		margin-bottom: 25px;
		background-color: #888585;
		direction: ltr;
		text-align: left;
		overflow: hidden;
		position: relative;
	}
</style>