diff --git a/frontend/bun.lock b/frontend/bun.lock
index 85ae506..264b904 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -5,7 +5,6 @@
       "name": "nuxt-app",
       "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
-        "@iconify-json/bi": "^1.2.7",
         "@nuxt/icon": "^1.10.3",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/google-fonts": "^3.2.0",
@@ -339,8 +338,6 @@
 
     "@formkit/auto-animate": ["@formkit/auto-animate@0.8.4", "", {}, "sha512-DHHC01EJ1p70Q0z/ZFRBIY8NDnmfKccQoyoM84Tgb6omLMat6jivCdf272Y8k3nf4Lzdin/Y4R9q8uFtU0GbnA=="],
 
-    "@iconify-json/bi": ["@iconify-json/bi@1.2.7", "https://package-mirror.liara.ir/repository/npm/@iconify-json/bi/-/bi-1.2.7.tgz", { "dependencies": { "@iconify/types": "*" } }, "sha512-IPz8WNxmLkH1I9msl+0Q4OnmjjvP4uU0Z61a4i4sqonB6vKSbMGUWuGn8/YuuszlReVj8rf+3gNv5JU8Xoljyg=="],
-
     "@iconify/collections": ["@iconify/collections@1.0.676", "https://package-mirror.liara.ir/repository/npm/@iconify/collections/-/collections-1.0.676.tgz", { "dependencies": { "@iconify/types": "*" } }, "sha512-dtV8s0QtP0fjsIZoCA4gURBp2DWGs7vJDz+Kh5+vpeNinBbtbNz+MABDz61ikcFGE27mdvNFmA3ygprBXHZJ4A=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
diff --git a/frontend/components/cart/checkout/PaymentPendingModal.vue b/frontend/components/cart/checkout/PaymentPendingModal.vue
index 6aa10b9..87274dd 100644
--- a/frontend/components/cart/checkout/PaymentPendingModal.vue
+++ b/frontend/components/cart/checkout/PaymentPendingModal.vue
@@ -50,7 +50,7 @@ const visible = computed({
 
                                 <div class="-translate-y-28 flex-center gap-3">
                                     <Icon
-                                        name="svg-spinners:3-dots-bounce"
+                                        name="ci:svg-spinners-3-dots-bounce"
                                         size="20"
                                     />
                                     <span class="text-lg"> در حال انتقال به درگاه پرداخت </span>
diff --git a/frontend/components/cart/delivery/AddressItem.vue b/frontend/components/cart/delivery/AddressItem.vue
index 99d136c..ff20b5d 100644
--- a/frontend/components/cart/delivery/AddressItem.vue
+++ b/frontend/components/cart/delivery/AddressItem.vue
@@ -113,7 +113,7 @@ const handleDeleteAddress = (id: number) => {
                 >
                     <span v-if="setOrderAddressIsPending">
                         <Icon
-                            name="svg-spinners:3-dots-bounce"
+                            name="ci:svg-spinners-3-dots-bounce"
                             class="**:fill-white"
                         />
                     </span>
diff --git a/frontend/components/cart/delivery/AddressModal.vue b/frontend/components/cart/delivery/AddressModal.vue
index e3c1d75..0f4d507 100644
--- a/frontend/components/cart/delivery/AddressModal.vue
+++ b/frontend/components/cart/delivery/AddressModal.vue
@@ -302,7 +302,7 @@ watch(
                 >
                     <Icon
                         v-if="createAddressIsPending"
-                        name="svg-spinners:3-dots-bounce"
+                        name="ci:svg-spinners-3-dots-bounce"
                     />
                     <span v-else>ثبت</span>
                 </Button>
diff --git a/frontend/components/cart/global/CartSummary.vue b/frontend/components/cart/global/CartSummary.vue
index 2abded5..02bbf39 100644
--- a/frontend/components/cart/global/CartSummary.vue
+++ b/frontend/components/cart/global/CartSummary.vue
@@ -272,7 +272,7 @@ watch(
                 >
                     <Icon
                         v-if="submitSpecialDiscountCodeIsPending || deleteSpecialDiscountCodeIsPending"
-                        name="svg-spinners:180-ring-with-bg"
+                        name="ci:svg-spinners-180-ring-with-bg"
                         size="20"
                         class="**:fill-white"
                     />
@@ -296,7 +296,7 @@ watch(
                 >
                     <Icon
                         v-if="submitSpecialDiscountCodeIsPending || deleteSpecialDiscountCodeIsPending"
-                        name="svg-spinners:180-ring-with-bg"
+                        name="ci:svg-spinners-180-ring-with-bg"
                         size="20"
                         class="**:fill-white"
                     />
diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index ba8451a..abb7494 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -206,7 +206,7 @@ watch(
                             class="size-10 flex-center"
                         >
                             <Icon
-                                :name="'svg-spinners:180-ring-with-bg'"
+                                :name="'ci:svg-spinners-180-ring-with-bg'"
                                 class="size-[18px]"
                             />
                         </div>
@@ -225,7 +225,7 @@ watch(
                         >
                             <Icon
                                 v-if="counter == 1"
-                                :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-trash'"
+                                :name="deleteCartItemIsPending ? 'ci:svg-spinners-3-dots-bounce' : 'ci:bi-trash'"
                                 class="**:fill-red-700"
                             />
                             <Icon
@@ -272,7 +272,7 @@ watch(
                     class="size-10 text-sm flex-center"
                 >
                     <Icon
-                        :name="'svg-spinners:180-ring-with-bg'"
+                        :name="'ci:svg-spinners-180-ring-with-bg'"
                         class="size-[25px]"
                     />
                 </div>
@@ -291,7 +291,7 @@ watch(
                 >
                     <Icon
                         v-if="counter == 1"
-                        :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-trash'"
+                        :name="deleteCartItemIsPending ? 'ci:svg-spinners-3-dots-bounce' : 'ci:bi-trash'"
                         class="**:fill-red-700"
                     />
                     <Icon
diff --git a/frontend/components/cart/index/DeleteCartAllModal.vue b/frontend/components/cart/index/DeleteCartAllModal.vue
index 6609c1d..92f40a5 100644
--- a/frontend/components/cart/index/DeleteCartAllModal.vue
+++ b/frontend/components/cart/index/DeleteCartAllModal.vue
@@ -76,7 +76,7 @@ const handleSubmit = () => {
                 >
                     <Icon
                         v-if="deleteCartAllIsPending"
-                        name="svg-spinners:3-dots-bounce"
+                        name="ci:svg-spinners-3-dots-bounce"
                     />
                     <span v-else>بله</span>
                 </Button>
diff --git a/frontend/components/global/Button.vue b/frontend/components/global/Button.vue
index dec5399..943bd15 100644
--- a/frontend/components/global/Button.vue
+++ b/frontend/components/global/Button.vue
@@ -43,6 +43,6 @@ const classes = computed(() => {
         <Icon v-if="!loading && startIcon" :name="startIcon" />
         <slot v-if="!loading" />
         <Icon v-if="!loading && endIcon" :name="endIcon" />
-        <Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
+        <Icon v-if="loading" name="ci:svg-spinners-3-dots-fade" class="my-0.5" />
     </button>
 </template>
diff --git a/frontend/components/global/FileInput.vue b/frontend/components/global/FileInput.vue
index 6e327d9..30b7512 100644
--- a/frontend/components/global/FileInput.vue
+++ b/frontend/components/global/FileInput.vue
@@ -121,7 +121,7 @@ const removeAttachment = (id: number) => {
             <Icon
                 :name="
                     loading
-                        ? 'svg-spinners:ring-resize'
+                        ? 'ci:svg-spinners-ring-resize'
                         : 'ci:bi-file-earmark-arrow-down'
                 "
                 size="32"
diff --git a/frontend/components/global/Select.vue b/frontend/components/global/Select.vue
index 6343d81..2b91efc 100644
--- a/frontend/components/global/Select.vue
+++ b/frontend/components/global/Select.vue
@@ -72,7 +72,7 @@ const classes = computed(() => {
                 class="font-iran-yekan-x text-xs lg:text-sm text-start placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm"
             />
             <Icon
-                :name="loading ? 'svg-spinners:3-dots-fade' : 'ci:bi-chevron-down'"
+                :name="loading ? 'ci:svg-spinners-3-dots-fade' : 'ci:bi-chevron-down'"
                 size="16"
             />
         </SelectTrigger>
diff --git a/frontend/components/global/product-detail/UpdateQuantity.vue b/frontend/components/global/product-detail/UpdateQuantity.vue
index b399800..98a47e2 100644
--- a/frontend/components/global/product-detail/UpdateQuantity.vue
+++ b/frontend/components/global/product-detail/UpdateQuantity.vue
@@ -73,7 +73,7 @@ onMounted(() => {
                 class="w-[40px] h-[25px] flex-center transition-all absolute bg-white"
             >
                 <Icon
-                    :name="'svg-spinners:180-ring-with-bg'"
+                    :name="'ci:svg-spinners-180-ring-with-bg'"
                     class="size-[25px]"
                 />
             </div>
diff --git a/frontend/components/home/ComingSoonSection.vue b/frontend/components/home/ComingSoonSection.vue
new file mode 100644
index 0000000..afab33b
--- /dev/null
+++ b/frontend/components/home/ComingSoonSection.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div class="container mb-20 lg:mb-40 max-lg:mt-30">
+        <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16 typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
+            منتظر یک اتفاق جذاب باشید...
+        </div>
+        <div class="overflow-hidden rounded-3xl w-full bg-neutral-200">
+            <video
+                src="/video/curtain-blue.webm"
+                class="w-full"
+                autoplay
+                muted
+                loop
+                playsinline
+                webkit-playsinline
+            />
+        </div>
+    </div>
+</template>
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index a831af3..72e71c4 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -72,7 +72,7 @@ watch(
 </script>
 
 <template>
-    <div class="container select-none mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32 3xl:mb-85">
+    <div class="container select-none mb-40 lg:mb-40 lg:mt-20 3xl:mb-85">
         <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>
diff --git a/frontend/components/home/PreviewOld.txt b/frontend/components/home/PreviewOld.txt
deleted file mode 100644
index aa53d5f..0000000
--- a/frontend/components/home/PreviewOld.txt
+++ /dev/null
@@ -1,208 +0,0 @@
-<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>
diff --git a/frontend/components/product/ChatBox/ChatBoxContainer.vue b/frontend/components/product/ChatBox/ChatBoxContainer.vue
index eccbb7f..bb6eb2b 100644
--- a/frontend/components/product/ChatBox/ChatBoxContainer.vue
+++ b/frontend/components/product/ChatBox/ChatBoxContainer.vue
@@ -154,7 +154,7 @@ whenever(
                                 class="py-2 flex items-center justify-center"
                             >
                                 <Icon
-                                    name="svg-spinners:3-dots-fade"
+                                    name="ci:svg-spinners-3-dots-fade"
                                     size="24"
                                 />
                             </div>
diff --git a/frontend/components/product/ChatBox/ChatInput.vue b/frontend/components/product/ChatBox/ChatInput.vue
index 15e2b9f..a3ee4ac 100644
--- a/frontend/components/product/ChatBox/ChatInput.vue
+++ b/frontend/components/product/ChatBox/ChatInput.vue
@@ -96,7 +96,7 @@ const sendMessage = async () => {
                     <TransitionGroup name="fade-down">
                         <Icon
                             v-if="isCreatingMessage"
-                            name="svg-spinners:wind-toy"
+                            name="ci:svg-spinners-wind-toy"
                             size="24"
                             class="text-black"
                         />
diff --git a/frontend/components/product/ChatBox/ChatMessage.vue b/frontend/components/product/ChatBox/ChatMessage.vue
index ce319de..6740205 100644
--- a/frontend/components/product/ChatBox/ChatMessage.vue
+++ b/frontend/components/product/ChatBox/ChatMessage.vue
@@ -110,7 +110,7 @@ onMounted(() => {
 
                 <Icon
                     v-else
-                    name="svg-spinners:3-dots-bounce"
+                    name="ci:svg-spinners-3-dots-bounce"
                     size="20"
                 />
             </div>
diff --git a/frontend/components/product/ProductHero/index.vue b/frontend/components/product/ProductHero/index.vue
index 944a973..573fb86 100644
--- a/frontend/components/product/ProductHero/index.vue
+++ b/frontend/components/product/ProductHero/index.vue
@@ -93,7 +93,7 @@ watch(
                 >
                     <Icon
                         v-if="isSaveProductPending || isFetchingPending"
-                        name="svg-spinners:180-ring-with-bg"
+                        name="ci:svg-spinners-180-ring-with-bg"
                     />
 
                     <Icon
@@ -159,7 +159,7 @@ watch(
                 >
                     <Icon
                         v-if="isSaveProductPending || isFetchingPending"
-                        name="svg-spinners:180-ring-with-bg"
+                        name="ci:svg-spinners-180-ring-with-bg"
                     />
 
                     <Icon
diff --git a/frontend/components/products/FilterProducts.vue b/frontend/components/products/FilterProducts.vue
index f40a1fa..9978ef0 100644
--- a/frontend/components/products/FilterProducts.vue
+++ b/frontend/components/products/FilterProducts.vue
@@ -211,7 +211,7 @@ watch(
                     >
                         در حال دریافت اطلاعات
                         <Icon
-                            name="svg-spinners:3-dots-bounce"
+                            name="ci:svg-spinners-3-dots-bounce"
                             size="20"
                         />
                     </span>
diff --git a/frontend/components/profile/global/LogoutModal.vue b/frontend/components/profile/global/LogoutModal.vue
index b2e885f..c9c14c6 100644
--- a/frontend/components/profile/global/LogoutModal.vue
+++ b/frontend/components/profile/global/LogoutModal.vue
@@ -71,7 +71,7 @@ const handleSubmit = () => {
                 >
                     <Icon
                         v-if="signoutIsPending"
-                        name="svg-spinners:3-dots-bounce"
+                        name="ci:svg-spinners-3-dots-bounce"
                     />
                     <span v-else>آره دارم میرم</span>
                 </Button>
diff --git a/frontend/components/profile/index/ProfilePictureModal.vue b/frontend/components/profile/index/ProfilePictureModal.vue
index dba0a67..88487ed 100644
--- a/frontend/components/profile/index/ProfilePictureModal.vue
+++ b/frontend/components/profile/index/ProfilePictureModal.vue
@@ -171,7 +171,7 @@ const resetAvatarFile = async () => {
                         >
                             <Icon
                                 v-if="updateAccountIsPending"
-                                name="svg-spinners:3-dots-bounce"
+                                name="ci:svg-spinners-3-dots-bounce"
                             />
                             <span v-else>آپلود عکس شما</span>
                         </Button>
diff --git a/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue b/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
index 0b9696c..5bf1869 100644
--- a/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
+++ b/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
@@ -60,7 +60,7 @@ const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.i
             >
                 <Icon
                     v-if="downloadIsLoading"
-                    name="svg-spinners:3-dots-fade"
+                    name="ci:svg-spinners-3-dots-fade"
                     class="**:stroke-black"
                     size="20"
                 />
diff --git a/frontend/components/profile/tickets/global/NewAttachment.vue b/frontend/components/profile/tickets/global/NewAttachment.vue
index bb9d62c..dd7907b 100644
--- a/frontend/components/profile/tickets/global/NewAttachment.vue
+++ b/frontend/components/profile/tickets/global/NewAttachment.vue
@@ -55,7 +55,7 @@ const handleDeleteAttachment = (id: number) => {
                 <Icon
                     :name="
                         deleteAttachmentPending
-                            ? 'svg-spinners:ring-resize'
+                            ? 'ci:svg-spinners-ring-resize'
                             : 'ci:close'
                     "
                     :class="
diff --git a/frontend/components/resellers/FilterResellersProducts.vue b/frontend/components/resellers/FilterResellersProducts.vue
index e7f5d15..68f24be 100644
--- a/frontend/components/resellers/FilterResellersProducts.vue
+++ b/frontend/components/resellers/FilterResellersProducts.vue
@@ -202,7 +202,7 @@ watch(
                     >
                         در حال دریافت اطلاعات
                         <Icon
-                            name="svg-spinners:3-dots-bounce"
+                            name="ci:svg-spinners-3-dots-bounce"
                             size="20"
                         />
                     </span>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index d4fb14a..47b0441 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -34,10 +34,6 @@ export default defineNuxtConfig({
                 },
             ],
         },
-        // layoutTransition: {
-        //     name: "fade",
-        //     mode: "out-in",
-        // },
     },
 
     postcss: {
@@ -69,17 +65,6 @@ export default defineNuxtConfig({
     },
 
     modules: [
-        // [
-        //     "@nuxtjs/google-fonts",
-        //     {
-        //         families: {
-        //             "DM Sans": "100..900",
-        //             Inter: "100..900",
-        //             download: true,
-        //             inject: false,
-        //         },
-        //     },
-        // ],
         "@nuxt/icon",
         "reka-ui/nuxt",
         "@vueuse/nuxt",
@@ -95,10 +80,10 @@ export default defineNuxtConfig({
     },
 
     pwa: {
-        strategies: "injectManifest",
-        srcDir: "public",
-        filename: "sw.js",
-        registerType: process.env.NODE_ENV === "production" ? "autoUpdate" : "prompt",
+        // strategies: "injectManifest",
+        // srcDir: "public",
+        // filename: "sw.js",
+        // registerType: process.env.NODE_ENV === "production" ? "autoUpdate" : "prompt",
         manifest: {
             name: "Heymlz",
             short_name: "Heymlz",
diff --git a/frontend/package.json b/frontend/package.json
index db330b0..2814090 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,6 @@
     },
     "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
-        "@iconify-json/bi": "^1.2.7",
         "@nuxt/icon": "^1.10.3",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/google-fonts": "^3.2.0",
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 407d3a5..af185b1 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -23,7 +23,9 @@ if (response.isError) {
     <div class="w-full">
         <!-- <LoadingOverlay /> -->
         <Hero class="mb-20 max-md:mt-20" />
-        <Preview />
+
+        <ComingSoonSection />
+
         <div class="py-20">
             <ProductsSlider
                 title="محصولات پرتخفیف"
@@ -51,6 +53,7 @@ if (response.isError) {
         </div>
         <Categories class="mt-12" />
         <Brands />
+        <Preview />
         <LatestStories class="mb-20" />
     </div>
 </template>
diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index 59fdc4a..3a11f7e 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -191,7 +191,7 @@ const handleSubmit = (withValidation: boolean) => {
                     >
                         <Icon
                             v-if="updateAccountIsPending"
-                            name="svg-spinners:3-dots-bounce"
+                            name="ci:svg-spinners-3-dots-bounce"
                         />
                         <span v-else> ثبت تغییرات </span>
                     </Button>
diff --git a/frontend/pages/profile/notifications.vue b/frontend/pages/profile/notifications.vue
index 4003854..7315c9e 100644
--- a/frontend/pages/profile/notifications.vue
+++ b/frontend/pages/profile/notifications.vue
@@ -114,7 +114,7 @@ watch(
                 <Switch v-model="subscribe" />
                 <Icon
                     v-if="subscribeNotificationIsPending"
-                    name="svg-spinners:180-ring-with-bg"
+                    name="ci:svg-spinners-180-ring-with-bg"
                     size="20"
                 />
             </div>
diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 67a85ed..718f57b 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -303,7 +303,7 @@ const handleSubmit = async () => {
                         v-if="createMessageIsPending"
                         :name="
                             createMessageIsPending
-                                ? 'svg-spinners:3-dots-bounce'
+                                ? 'ci:svg-spinners-3-dots-bounce'
                                 : 'ci:bi-send'
                         "
                     />
diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index 70eb938..0591dfd 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -325,7 +325,7 @@ const handleSubmit = async () => {
             >
                 <Icon
                     v-if="createTicketIsPending"
-                    :name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'ci:bi-send'"
+                    :name="createTicketIsPending ? 'ci:svg-spinners-3-dots-bounce' : 'ci:bi-send'"
                 />
                 <span v-else>ارسال تیکت</span>
             </Button>
diff --git a/frontend/public/icons/svg-spinners-180-ring-with-bg.svg b/frontend/public/icons/svg-spinners-180-ring-with-bg.svg
new file mode 100644
index 0000000..7cd8ecb
--- /dev/null
+++ b/frontend/public/icons/svg-spinners-180-ring-with-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE --><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/svg-spinners-3-dots-bounce.svg b/frontend/public/icons/svg-spinners-3-dots-bounce.svg
new file mode 100644
index 0000000..9966902
--- /dev/null
+++ b/frontend/public/icons/svg-spinners-3-dots-bounce.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE --><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="SVGKiXXedfO" attributeName="cy" begin="0;SVGgLulOGrw.end+0.25s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle><circle cx="12" cy="12" r="3" fill="currentColor"><animate attributeName="cy" begin="SVGKiXXedfO.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle><circle cx="20" cy="12" r="3" fill="currentColor"><animate id="SVGgLulOGrw" attributeName="cy" begin="SVGKiXXedfO.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/svg-spinners-3-dots-fade.svg b/frontend/public/icons/svg-spinners-3-dots-fade.svg
new file mode 100644
index 0000000..1f9bf73
--- /dev/null
+++ b/frontend/public/icons/svg-spinners-3-dots-fade.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE --><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="SVG7x14Dcom" fill="freeze" attributeName="opacity" begin="0;SVGqSjG0dUp.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="SVG7x14Dcom.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="SVGqSjG0dUp" fill="freeze" attributeName="opacity" begin="SVG7x14Dcom.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/svg-spinners-ring-resize.svg b/frontend/public/icons/svg-spinners-ring-resize.svg
new file mode 100644
index 0000000..dae292f
--- /dev/null
+++ b/frontend/public/icons/svg-spinners-ring-resize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE --><g stroke="currentColor"><circle cx="12" cy="12" r="9.5" fill="none" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0 150;42 150;42 150;42 150"/><animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0;-16;-59;-59"/></circle><animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/svg-spinners-wind-toy.svg b/frontend/public/icons/svg-spinners-wind-toy.svg
new file mode 100644
index 0000000..653793a
--- /dev/null
+++ b/frontend/public/icons/svg-spinners-wind-toy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE --><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/video/curtain-blue.webm b/frontend/public/video/curtain-blue.webm
new file mode 100644
index 0000000..f7ee6c7
Binary files /dev/null and b/frontend/public/video/curtain-blue.webm differ
diff --git a/frontend/public/video/curtain-red.webm b/frontend/public/video/curtain-red.webm
new file mode 100644
index 0000000..f1b054e
Binary files /dev/null and b/frontend/public/video/curtain-red.webm differ