Add digital catalog with shareable flipbook and ktg.montzar.ir deploy files.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/effects/ScrollEffect.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { nextTick, watch } from "vue";
+
+const props = defineProps<{
+  images: string[];
+  index: number;
+}>();
+
+const emit = defineEmits<{
+  "update:index": [value: number];
+}>();
+
+watch(
+  () => props.index,
+  async (value) => {
+    await nextTick();
+    const el = document.getElementById(`scroll-page-${value}`);
+    el?.scrollIntoView({ behavior: "smooth", block: "center" });
+  },
+);
+</script>
+
+<template>
+  <div class="scroll-list">
+    <article
+      v-for="(src, i) in images"
+      :id="`scroll-page-${i}`"
+      :key="src"
+      class="scroll-card"
+      :class="{ active: i === index }"
+      @click="emit('update:index', i)"
+    >
+      <img :src="src" :alt="`صفحه ${i + 1}`" />
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.scroll-list {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 8px 12px 48px;
+  scroll-snap-type: y mandatory;
+}
+.scroll-card {
+  scroll-snap-align: center;
+  transform: scale(0.96);
+  opacity: 0.55;
+  transition:
+    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.55s ease,
+    box-shadow 0.55s ease;
+}
+.scroll-card.active {
+  transform: scale(1);
+  opacity: 1;
+}
+.scroll-card img {
+  display: block;
+  width: 100%;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
+}
+.scroll-card.active img {
+  box-shadow:
+    0 24px 60px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(245, 158, 11, 0.35);
+}
+</style>