<script setup>
import { ref, onMounted } from "vue";
import axios from "~/services/axios.js";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { CheckBadgeIcon } from "@heroicons/vue/24/solid";
// import { CheckCircle } from '@vue-icons/heroicons';
import paint from "../../assets/images/paint.jpg";
import t1 from "../../assets/images/true/t1.jpg";
import t2 from "../../assets/images/true/t2.jpg";
import t3 from "../../assets/images/true/t3.jpg";
import t4 from "../../assets/images/true/t4.jpg";
import t5 from "../../assets/images/true/t5.jpg";
import t6 from "../../assets/images/true/t6.jpg";
gsap.registerPlugin(ScrollTrigger);
const data = [
{ image: t1, text: "amjad" },
{ image: t2, text: "amjad" },
{ image: t3, text: "amjad" },
{ image: t6, text: "amjad" },
{ image: t4, text: "amjad" },
{ image: t5, text: "amjad" },
];
const initAnimation = () => {
const section_2 = document.getElementById("horizontal");
let box_items = gsap.utils.toArray(".horizontal__item");
gsap.fromTo(
box_items,
{
xPercent: 30 * (box_items.length - 1),
},
{
xPercent: -120 * (box_items.length - 1),
ease: "sine.out",
// duration: 5,
scrollTrigger: {
trigger: section_2,
pin: true,
scrub: 1,
// markers: true,
snap: 1 / (box_items.length - 1),
end: "+=" + section_2.offsetWidth,
toggleActions: "restart pause reverse reverse",
},
}
);
};
let scrollTriggerInstance;
const features = ref([]);
const featuresFor = ref([]);
const error = ref(null);
const isLoading = ref(false);
onMounted(() => {
// fetchChoicesData();
window.addEventListener("resize", () => {
ScrollTrigger.refresh();
});
const handleResize = () => {
if (window.innerWidth <= 800 && scrollTriggerInstance) {
// Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px
ScrollTrigger.refresh();
scrollTriggerInstance.kill();
scrollTriggerInstance = null;
} else if (window.innerWidth > 800 && !scrollTriggerInstance) {
// Initialize the animation if screen size is more than 800px
ScrollTrigger.refresh();
scrollTriggerInstance = initAnimation();
}
};
if (window.innerWidth > 800) {
scrollTriggerInstance = initAnimation();
}
window.addEventListener("resize", handleResize);
});
ScrollTrigger.refresh();
</script>
<template>
<div class="w-full">
<h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1>
<div
id="horizontal"
class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features big:pb-0 pb-[8rem] relative"
>
<div
class="w-full sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2"
>
<div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start">
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">Maandeliks Betalen</h1>
</div>
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">100% Garantie</h1>
</div>
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">Professioneel Schilderwerk</h1>
</div>
</div>
<div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start">
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">Zorgeloos onderhoud</h1>
</div>
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">Reiging & Glasbewassing</h1>
</div>
<div
class="container-tick"
>
<CheckBadgeIcon class="icon__tick" />
<h1 class="text__tick">Ondafhankelike inspectie</h1>
</div>
</div>
</div>
<div class="container row-span-2 w-[100%] h-full m-auto">
<div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]">
<div
v-for="num in data"
:key="num"
class="horizontal__item big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem] w-full mr-[10rem]"
>
<div class="horizontal__num w-full h-full relative">
<img :src="num.image" class="w-full h-full object-cover" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.text__tick {
@apply text-white text-[1rem] sm:text-[1.4rem];
}
.icon__tick {
@apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem];
}
.container-tick {
@apply grid grid-cols-my-calc grid-flow-col items-center text-left justify-items-start gap-[.7rem];
}
</style>