![]()
import AspectRatio from "@/components/utils/AspectRatio.vue";
-
-import perks1_400w from "@/assets/images/perks/jobs_canopas_perks_1_400w.webp";
-import perks1_800w from "@/assets/images/perks/jobs_canopas_perks_1_800w.webp";
-import perks2_400w from "@/assets/images/perks/jobs_canopas_perks_2_400w.webp";
-import perks2_800w from "@/assets/images/perks/jobs_canopas_perks_2_800w.webp";
-import perks3_400w from "@/assets/images/perks/jobs_canopas_perks_3_400w.webp";
-import perks3_800w from "@/assets/images/perks/jobs_canopas_perks_3_800w.webp";
-import perks4_400w from "@/assets/images/perks/jobs_canopas_perks_4_400w.webp";
-import perks4_800w from "@/assets/images/perks/jobs_canopas_perks_4_800w.webp";
-import perks5_400w from "@/assets/images/perks/jobs_canopas_perks_5_400w.webp";
-import perks5_800w from "@/assets/images/perks/jobs_canopas_perks_5_800w.webp";
-import perks6_400w from "@/assets/images/perks/jobs_canopas_perks_6_400w.webp";
-import perks6_800w from "@/assets/images/perks/jobs_canopas_perks_6_800w.webp";
-import perks7_400w from "@/assets/images/perks/jobs_canopas_perks_7_400w.webp";
-import perks7_800w from "@/assets/images/perks/jobs_canopas_perks_7_800w.webp";
-import perks8_400w from "@/assets/images/perks/jobs_canopas_perks_8_400w.webp";
-import perks8_800w from "@/assets/images/perks/jobs_canopas_perks_8_800w.webp";
+import axios from "axios";
+import config from "@/config.js";
+import { getDiffrentWidthImages } from "@/utils.js";
import learning from "@/assets/images/benefits/jobs_canopas_learning.svg";
import health from "@/assets/images/benefits/jobs_canopas_health.svg";
import clock from "@/assets/images/benefits/jobs_canopas_clock.svg";
@@ -109,7 +95,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks1_400w, perks1_800w],
+ image: [],
description: "",
},
{
@@ -126,7 +112,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks2_400w, perks2_800w],
+ image: [],
description: "",
},
{
@@ -144,7 +130,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks3_400w, perks3_800w],
+ image: [],
description: "",
},
{
@@ -162,7 +148,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks4_400w, perks4_800w],
+ image: [],
description: "",
},
{
@@ -180,7 +166,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks5_400w, perks5_800w],
+ image: [],
description: "",
},
{
@@ -198,7 +184,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks6_400w, perks6_800w],
+ image: [],
description: "",
},
{
@@ -216,7 +202,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks7_400w, perks7_800w],
+ image: [],
description: "",
},
{
@@ -234,7 +220,7 @@ export default {
title: "",
icon: "",
bgColor: "transparent",
- image: [perks8_400w, perks8_800w],
+ image: [],
description: "",
},
],
@@ -256,6 +242,26 @@ export default {
this.$emit("scroll-to-career");
}
},
+ async fetchImages() {
+ try {
+ const response = await axios.get(config.API_BASE + "/api/perksimages");
+ var slides = getDiffrentWidthImages(response);
+ this.perks.forEach((perk, index) => {
+ if (index % 2 === 0 && index / 2 < slides.length) {
+ const slideIndex = Math.floor(index / 2);
+ perk.image = [
+ slides[slideIndex].image[0],
+ slides[slideIndex].image[1],
+ ];
+ }
+ });
+ } catch (error) {
+ console.error("Error fetching data from the API", error);
+ }
+ },
+ },
+ created() {
+ this.fetchImages();
},
};
diff --git a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
index 06b04aba8..e5d2134ee 100644
--- a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
+++ b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
@@ -134,55 +134,57 @@ export default {
// check which element is in viewport
const elementIdx = elementInViewPort(this.$refs);
- const index = parseInt(
- elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0,
- );
+ if (elementIdx) {
+ const index = parseInt(
+ elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0,
+ );
- if (this.prevIndex != index) {
- // when image will change, prevImage should be at path 0 or 100
- if (this.prevIndex != 0) {
- this.services[this.prevIndex].path = [
- scrollUp ? 100 : 0,
- scrollUp ? 100 : 0,
- ];
+ if (this.prevIndex != index) {
+ // when image will change, prevImage should be at path 0 or 100
+ if (this.prevIndex != 0) {
+ this.services[this.prevIndex].path = [
+ scrollUp ? 100 : 0,
+ scrollUp ? 100 : 0,
+ ];
+ }
+
+ this.prevIndex = index;
}
- this.prevIndex = index;
- }
+ // make previous images clip path 0
+ this.services = this.services.map((val, i) => {
+ val.path = i < index ? [0, 0] : i > index ? [100, 100] : val.path;
+ return val;
+ });
- // make previous images clip path 0
- this.services = this.services.map((val, i) => {
- val.path = i < index ? [0, 0] : i > index ? [100, 100] : val.path;
- return val;
- });
+ // random offset used when scrolling
+ const rect = this.$refs[elementIdx][0].getBoundingClientRect();
+ const scrollOffset =
+ ((window.innerHeight - rect.top) * 100) / window.innerHeight;
- // random offset used when scrolling
- const rect = this.$refs[elementIdx][0].getBoundingClientRect();
- const scrollOffset =
- ((window.innerHeight - rect.top) * 100) / window.innerHeight;
+ if (scrollUp) {
+ this.services[0].path = [0, 0];
+ }
- if (scrollUp) {
- this.services[0].path = [0, 0];
- }
+ // if firstImage then path should be 0
+ // else set respective path
+ if (index == 0) {
+ this.services[index].path = [0, 0];
+ } else if (
+ !scrollUp &&
+ index == this.services.length - 1 &&
+ rect.top < window.innerHeight / 2
+ ) {
+ this.services[index].path = [
+ 100 - scrollOffset * 1.2,
+ 100 - scrollOffset * 1.2,
+ ];
+ } else {
+ this.services[index].path = [100 - scrollOffset, 100 - scrollOffset];
+ }
- // if firstImage then path should be 0
- // else set respective path
- if (index == 0) {
- this.services[index].path = [0, 0];
- } else if (
- !scrollUp &&
- index == this.services.length - 1 &&
- rect.top < window.innerHeight / 2
- ) {
- this.services[index].path = [
- 100 - scrollOffset * 1.2,
- 100 - scrollOffset * 1.2,
- ];
- } else {
- this.services[index].path = [100 - scrollOffset, 100 - scrollOffset];
+ this.lastScrollY = scrollY;
}
-
- this.lastScrollY = scrollY;
},
openUrl(url) {
window.open(url, "_self");
diff --git a/nuxt-frontend/nuxt.config.js b/nuxt-frontend/nuxt.config.js
index 7681a23cd..75d8f4d58 100644
--- a/nuxt-frontend/nuxt.config.js
+++ b/nuxt-frontend/nuxt.config.js
@@ -1,7 +1,13 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
import { defineNuxtConfig } from "nuxt/config";
-
export default defineNuxtConfig({
+ app: {
+ head: {
+ htmlAttrs: {
+ lang: "en",
+ },
+ },
+ },
devtools: { enabled: true },
modules: [
"@pinia/nuxt",
diff --git a/nuxt-frontend/pages/about.vue b/nuxt-frontend/pages/about.vue
index cfb2d8735..06d80d4b6 100644
--- a/nuxt-frontend/pages/about.vue
+++ b/nuxt-frontend/pages/about.vue
@@ -8,13 +8,13 @@
-
+