From aa9d61ed31c279c3908781b5f5aff0cb6eb36d51 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 20 Dec 2024 00:08:26 +0330
Subject: [PATCH] Create landing preview section

---
 frontend/components/home/Preview.vue | 93 ++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 frontend/components/home/Preview.vue

diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
new file mode 100644
index 0000000..d942172
--- /dev/null
+++ b/frontend/components/home/Preview.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+
+// import
+
+import { useDraggable } from "@vueuse/core";
+
+// state
+
+const clipPathPercent = ref(49);
+
+const draggableEl = ref<HTMLElement | null>(null);
+const previewContainerEl = ref<HTMLElement | null>(null);
+
+const { x: dragAxisX } = useDraggable(draggableEl, {
+    initialValue: { x: 0, y: 0 },
+    axis: "x"
+});
+
+// watch
+
+watch(() => dragAxisX.value, (newValue) => {
+    const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
+    const percent = clientRect.width / 100;
+    const clipPercent = (newValue - clientRect.x - 8) / percent;
+    if (clipPercent >= 5 && clipPercent <= 95) {
+        clipPathPercent.value = clipPercent;
+    }
+});
+
+</script>
+
+<template>
+    <div class="container">
+        <div class="flex flex-col items-center gap-3 mb-16">
+            <span class="typo-p-md text-slate-500">یک متن تست لورم</span>
+            <span class="typo-h-3 text-black">تفاوت محصول را ببینید در اینجا</span>
+        </div>
+        <div ref="previewContainerEl" class="rounded-200 overflow-hidden h-[90svh] relative">
+
+            <img
+                src="/img/hero-bg.jpg"
+                class="select-none absolute size-full object-cover"
+                alt=""
+            />
+
+            <div
+                class="absolute size-full right-0 w-full"
+            >
+                <img
+                    src="/img/hero-bg.jpg"
+                    class="overlay-image select-none absolute object-cover size-full hue-rotate-200 brightness-35"
+                    alt=""
+                />
+                <div
+                    :style="{
+                        left: `${clipPathPercent}%`
+                    }"
+                    ref="draggableEl"
+                    class="select-none w-2 h-full bg-white absolute left-0 flex items-center justify-center"
+                >
+                    <div
+                        class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-white size-11 flex items-center justify-center"
+                    >
+                        <Icon name="ci:arrows" size="24" class="**:stroke-black" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="absolute bottom-0 p-10 w-full flex justify-between items-end bg-linear-to-t from-black/55 to-transparent">
+                <div class="flex flex-col gap-2 text-white">
+                    <span class="typo-p-md">رنگ محصول</span>
+                    <span class="typo-h-3">نارنجی</span>
+                </div>
+                <div class="flex flex-col justify-start gap-2 text-white">
+                    <span class="typo-p-md">رنگ محصول</span>
+                    <span class="typo-h-3">سفید</span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<style>
+.overlay-image {
+    clip-path: polygon(
+        v-bind('clipPathPercent + "%"') 0,
+        100% 0,
+        100% 100%,
+        v-bind('clipPathPercent + "%"') 100%
+    );
+}
+</style>
\ No newline at end of file