Fix drag problem

frontend/components/home/Preview.vue

@@ -46,7 +46,7 @@ watch(
 </script>
 
 <template>
-    <div class="container max-w-[1000px]">
+    <div class="container">
         <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">
@@ -55,7 +55,7 @@ watch(
         </div>
         <div
             ref="previewContainerEl"
-            class="rounded-200 overflow-hidden h-[60svh] md:h-[70svh] relative"
+            class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
         >
             <Transition name="fade">
                 <img
@@ -93,10 +93,10 @@ watch(
                     :style="{
                         left: `${clipPathPercent}%`,
                     }"
-                    ref="draggableEl"
                     class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
                 >
                     <div
+                        ref="draggableEl"
                         class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
                     >
                         <Icon
@@ -115,17 +115,23 @@ watch(
                     <span class="typo-p-sm md:typo-p-md">
                         {{ homeData!.difreance_section.description1 }}
                     </span>
-                    <span class="typo-h-6 md:typo-h-5 lg:typo-h-3">
+                    <NuxtLink
+                        :to="homeData!.difreance_section.link1"
+                        class="typo-h-6 md:typo-h-5 lg:typo-h-3"
+                    >
                         {{ homeData!.difreance_section.title1 }}
-                    </span>
+                    </NuxtLink>
                 </div>
                 <div class="flex flex-col gap-2 text-black">
                     <span class="typo-p-sm md:typo-p-md text-end">
                         {{ homeData!.difreance_section.description2 }}
                     </span>
-                    <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end">
+                    <NuxtLink
+                        :to="homeData!.difreance_section.link2"
+                        class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
+                    >
                         {{ homeData!.difreance_section.title2 }}
-                    </span>
+                    </NuxtLink>
                 </div>
             </div>
         </div>