From e7e8a23e5da60921e80cedf868b60e43c049c38f Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 31 Aug 2025 17:56:03 +0330
Subject: [PATCH] Updated

---
 frontend/components/home/PreviewOld.txt | 208 ++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 frontend/components/home/PreviewOld.txt

diff --git a/frontend/components/home/PreviewOld.txt b/frontend/components/home/PreviewOld.txt
new file mode 100644
index 0000000..aa53d5f
--- /dev/null
+++ b/frontend/components/home/PreviewOld.txt
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+// import
+
+import useHomeData from "~/composables/api/home/useHomeData";
+
+// state
+
+const { data: homeData } = useHomeData();
+
+const clipPathPercent = ref(49);
+
+const activeSlideVideo = ref<"left" | "right" | "none">("none");
+
+const draggableEl = ref<HTMLElement | null>(null);
+const previewContainerEl = ref<HTMLElement | null>(null);
+
+const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
+const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
+    rootMargin: "0px 0px -40% 0px",
+});
+
+const showHeymlzAnimation = ref(false);
+
+const { x: dragAxisX } = useDraggable(draggableEl, {
+    initialValue: { x: 0, y: 0 },
+    axis: "x",
+});
+
+// watch
+
+watch(
+    heymlzElementIsVisible,
+    (newValue) => {
+        if (newValue) {
+            setTimeout(() => {
+                showHeymlzAnimation.value = true;
+                setTimeout(() => {
+                    showHeymlzAnimation.value = false;
+                }, 3200);
+            }, 400);
+        }
+    },
+    {
+        once: true,
+    }
+);
+
+watch(
+    () => clipPathPercent.value,
+    (newValue) => {
+        if (newValue > 80) {
+            activeSlideVideo.value = "right";
+        } else if (newValue < 20) {
+            activeSlideVideo.value = "left";
+        } else {
+            activeSlideVideo.value = "none";
+        }
+    }
+);
+
+watch(
+    () => dragAxisX.value,
+    (newValue) => {
+        const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
+        const percent = clientRect.width / 100;
+        const clipPercent = (newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) / percent;
+        if (clipPercent >= 1 && clipPercent <= 99) {
+            clipPathPercent.value = clipPercent;
+        }
+    }
+);
+</script>
+
+<template>
+    <div class="container mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32">
+        <div>
+            <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
+                <span class="typo-p-sm md:typo-p-md text-slate-500"> مقایسه محصولات </span>
+                <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black"> تفاوت محصلات ما را ببینید </span>
+            </div>
+            <div
+                ref="previewContainerEl"
+                class="rounded-200 overflow-hidden h-[70svh] relative"
+            >
+                <Transition name="fade">
+                    <NuxtImg
+                        v-if="activeSlideVideo !== 'right'"
+                        :src="homeData!.difreance_section.image1"
+                        :class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
+                        class="select-none absolute size-full object-cover transition-[filter] duration-250"
+                        :alt="homeData!.difreance_section.title1"
+                    />
+                    <video
+                        v-else
+                        autoplay
+                        muted
+                        playsinline
+                        webkit-playsinline
+                        src="/video/vid-3.mp4"
+                        class="select-none absolute size-full object-cover brightness-[95%]"
+                    />
+                </Transition>
+
+                <div
+                    class="absolute size-full right-0 w-full"
+                    ref="heymlzElement"
+                >
+                    <Transition name="fade">
+                        <NuxtImg
+                            v-if="activeSlideVideo !== 'left'"
+                            :src="homeData!.difreance_section.image2"
+                            :class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
+                            class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
+                            :alt="homeData!.difreance_section.title2"
+                        />
+                        <video
+                            v-else
+                            autoplay
+                            muted
+                            playsinline
+                            webkit-playsinline
+                            src="/video/vid-3.mp4"
+                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                        />
+                    </Transition>
+
+                    <Transition
+                        name="fade"
+                        :duration="250"
+                    >
+                        <NuxtImg
+                            v-if="showHeymlzAnimation"
+                            src="/img/heymlz/heymlz-pullingg.gif"
+                            class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
+                            :style="{
+                                left: `${clipPathPercent}%`,
+                                filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
+                            }"
+                        />
+                    </Transition>
+
+                    <div
+                        :style="{
+                            left: `${clipPathPercent}%`,
+                        }"
+                        :class="[
+                            activeSlideVideo !== 'none' ? 'opacity-10' : '',
+                            showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black',
+                        ]"
+                        class="select-none w-[5px] sm:w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
+                    >
+                        <div
+                            ref="draggableEl"
+                            :class="showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black'"
+                            class="touch-none cursor-grab hover:scale-115 transition-transform rounded-full absolute size-9 sm:size-11 flex items-center justify-center"
+                        >
+                            <Icon
+                                name="ci:arrows"
+                                class="transition-all size-5 sm:size-6"
+                                :class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    :class="showHeymlzAnimation ? 'opacity-0' : 'opacity-100'"
+                    class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
+                >
+                    <div
+                        class="flex flex-col gap-2 text-black transition-opacity"
+                        :class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
+                    >
+                        <span class="typo-p-sm md:typo-p-md">
+                            {{ homeData!.difreance_section.description1 }}
+                        </span>
+                        <NuxtLink
+                            :to="homeData!.difreance_section.link1"
+                            class="typo-h-6 md:typo-h-5 lg:typo-h-3"
+                        >
+                            {{ homeData!.difreance_section.title1 }}
+                        </NuxtLink>
+                    </div>
+                    <div
+                        class="flex flex-col gap-2 text-black transition-opacity"
+                        :class="activeSlideVideo === 'left' ? 'opacity-0' : ''"
+                    >
+                        <span class="typo-p-sm md:typo-p-md text-end">
+                            {{ homeData!.difreance_section.description2 }}
+                        </span>
+                        <NuxtLink
+                            :to="homeData!.difreance_section.link2"
+                            class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
+                        >
+                            {{ homeData!.difreance_section.title2 }}
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+.overlay-image {
+    clip-path: polygon(v-bind('clipPathPercent + "%"') 0, 100% 0, 100% 100%, v-bind('clipPathPercent + "%"') 100%);
+}
+</style>