merge

backend/.env.local

@@ -1,6 +1,4 @@
 ### keep the env name to .env.local if you want to change this .env name you should change it in django setting too when you load this env
-
-DEBUG = True # keep debug true to set the database to sqlite
 # postgres database info
 DB_NAME = 'hshop' 
 DB_USER = 'byeto'

backend/account/views.py

@@ -177,11 +177,12 @@ class GetIDUserAddressView(generics.RetrieveAPIView):
 
 class SubscribeView(APIView):
     serializer_class = PushSubscriptionSerializer
+    permission_classes = [IsAuthenticated]
     def post(self, request):
         push_ser = self.serializer_class(data=request.data)
         if push_ser.is_valid():
             PushSubscription.objects.update_or_create(
-                user=User.objects.all().first(),
+                user=request.user,
                 defaults=(push_ser.validated_data)
             )
             return Response(status=status.HTTP_201_CREATED)

backend/core/asgi.py

@@ -11,6 +11,6 @@ import os
 
 from django.core.asgi import get_asgi_application
 
-os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings.production')
 
 application = get_asgi_application()

backend/core/wsgi.py

@@ -11,6 +11,6 @@ import os
 
 from django.core.wsgi import get_wsgi_application
 
-os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings.production')
 
 application = get_wsgi_application()

backend/dockerfile

@@ -11,4 +11,7 @@ RUN pip install --no-cache-dir -r requirements.txt
 COPY . /app/
 
 
-CMD ["sh", "-c", "python manage.py makemigrations && python manage.py migrate && python manage.py collectstatic && python manage.py runserver 0.0.0.0:8000"]
+CMD ["sh", "-c", "python manage.py makemigrations && \
+                   python manage.py migrate && \
+                   python manage.py collectstatic --no-input && \
+                   gunicorn core.wsgi:application --bind 0.0.0.0:8000 --workers 3"]

backend/requirements.txt

@@ -48,6 +48,7 @@ geoip2==4.8.0
 ghasedak_sms==1.0.3
 ghasedakpack==0.1.13
 gnupg==2.3.1
+gunicorn==23.0.0
 h11==0.14.0
 http_ece==1.2.1
 httpagentparser==1.9.5
@@ -73,6 +74,7 @@ oauthlib==3.2.2
 odfpy==1.4.1
 openai==1.58.1
 openpyxl==3.1.2
+packaging==24.2
 pillow==10.4.0
 platformdirs==4.2.2
 propcache==0.2.0

docker-compose.yml

@@ -24,7 +24,7 @@ services:
             [
                 "sh",
                 "-c",
-                "python manage.py migrate && python manage.py collectstatic --no-input && python manage.py runserver 0.0.0.0:8000",
+                "python manage.py migrate && python manage.py collectstatic --no-input && gunicorn core.wsgi:application --bind 0.0.0.0:8000 --workers 3",
             ]
         networks:
             - default

frontend/app.vue

@@ -1,4 +1,7 @@
-<script setup>
+<script lang="ts" setup>
+
+// import
+
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 
 // state

frontend/assets/css/tailwind.css

@@ -119,6 +119,11 @@
     --breakpoint-3xl: 1700px;
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
 
     /* ANIMATIONS */
     --animate-marquee: marquee 20s linear infinite;
@@ -261,7 +266,29 @@
 
 @utility container {
     @apply mx-auto;
-    padding-inline: 3rem;
+    padding-inline: 1.5rem;
+    max-width: 1380px;
+
+    @screen 2xs {
+        padding-inline: 1rem;
+    }
+
+    @screen xs {
+        padding-inline: 1rem;
+    }
+
+    @screen sm {
+        padding-inline: 1rem;
+    }
+
+    @screen md {
+        padding-inline: 2rem;
+    }
+
+    @screen lg {
+        padding-inline: 3rem;
+    }
+
     @screen xl {
         padding-inline: 5rem;
     }

frontend/components/articles/ArticlesList.vue

@@ -1,9 +1,5 @@
 <script lang="ts" setup>
 
-// import
-
-import Masonry from "masonry-layout";
-
 // type
 
 type Props = {
@@ -15,29 +11,13 @@ type Props = {
 const props = defineProps<Props>();
 const { articles } = toRefs(props);
 
-// state
-
-onMounted(() => {
-    new Masonry(".masonry-articles-container", {
-        itemSelector: ".grid-item",
-        columnWidth: ".grid-sizer",
-        percentPosition: true,
-        gutter: ".gutter-sizer"
-    });
-});
-
 </script>
 
 <template>
-    <div class="masonry-articles-container w-full">
+    <div class="columns-2 gap-8 w-full space-y-8">
-
-        <div class="grid-sizer"></div>
-        <div class="gutter-sizer"></div>
-
         <BlogPost
             v-for="article in articles"
             :key="article.id"
-            class="grid-item"
             :image="article.cover_image"
             :description="article.summery"
             :title="article.title"
@@ -46,18 +26,5 @@ onMounted(() => {
             :date="article.created_at"
             tag="تگ ندارد"
         />
-
     </div>
-</template>
+</template>
-
-<style>
-.grid-sizer,
-.grid-item {
-    margin-bottom: 24px;
-    width: 48%;
-}
-
-.gutter-sizer {
-    width: 4%;
-}
-</style>

frontend/components/global/BlogPost.vue

@@ -22,15 +22,15 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <NuxtLink :to="`/article/${id}`">
+    <NuxtLink :to="`/article/${id}`" class="block">
         <div
-            :class="variant === 'lg' ? 'h-[600px] rounded-150 overflow-hidden' : 'h-fit'"
+            :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
             class="group w-full relative"
         >
 
             <Tag
                 v-if="variant === 'lg'"
-                class="bg-success-500 absolute left-10 top-10 z-20"
+                class="bg-success-500 absolute left-6 lg:left-10 top-6 lg:top-10 z-20"
             >
                 اسپیکر
             </Tag>
@@ -53,11 +53,11 @@ const {} = toRefs(props);
             </div>
 
             <div
-                :class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
+                :class="variant === 'lg' ? 'absolute px-6 lg:px-10' : 'invert mt-8'"
-                class="bottom-10 flex flex-col gap-6 z-20"
+                class="bottom-6 lg:bottom-10 flex flex-col gap-4 lg:gap-6 z-20"
             >
 
-                <div class="flex items-center gap-6">
+                <div class="flex items-center gap-4 lg:gap-6">
                     <div class="flex items-center gap-2">
                         <Icon
                             name="ci:comment"
@@ -65,8 +65,8 @@ const {} = toRefs(props);
                             class="**:stroke-white"
                         />
                         <span class="typo-p-sm text-white">
-                        ۰ نظر
+                            ۰ نظر
-                    </span>
+                        </span>
                     </div>
                     <div class="flex items-center gap-2">
                         <Icon
@@ -81,17 +81,17 @@ const {} = toRefs(props);
                 </div>
 
                 <div class="flex gap-4 flex-col">
-                <span
+                    <span
-                    :class="variant === 'lg' ? 'typo-h-5' : 'typo-h-6'"
+                        :class="variant === 'lg' ? 'line-clamp-2' : ''"
-                    class="text-white"
+                        class="text-lg font-medium lg:typo-h-6 text-white"
-                >
+                    >
-                    {{ title }}
+                        {{ title }}
-                </span>
+                    </span>
-                    <p
+<!--                    <p-->
-                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
+<!--                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"-->
-                        class="typo-p-md text-white text-justify"
+<!--                        class="text-white text-justify"-->
-                        v-html="description"
+<!--                        v-html="description"-->
-                    />
+<!--                    />-->
                 </div>
 
                 <NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">

frontend/components/global/Brands.vue

@@ -15,17 +15,17 @@ const {} = toRefs(props);
     <div class="relative w-full flex flex-col justify-center min-h-[700px] h-[80svh]">
         <div class="-rotate-z-2 z-20">
             <div
-                class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
+                class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
             >
                 <span
                     v-for="i in 10"
-                    class="text-[50px] text-white whitespace-nowrap font-semibold"
+                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
                 <span
                     v-for="i in 10"
-                    class="text-[50px] text-white whitespace-nowrap font-semibold"
+                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
@@ -34,17 +34,17 @@ const {} = toRefs(props);
 
         <div class="rotate-z-2 z-10">
             <div
-                class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
+                class="bg-slate-50 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee"
             >
                 <span
                     v-for="i in 10"
-                    class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
                 <span
                     v-for="i in 10"
-                    class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>

frontend/components/global/CategoryCard.vue

@@ -24,7 +24,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 
 <template>
     <NuxtLink :to="`/products?category=${id}`">
-        <div class="group relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
+        <div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
             <img
                 :id="`category-image-${id}`"
                 class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
@@ -37,7 +37,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
             />
 
             <div
-                class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
+                class="absolute z-20 bottom-0 p-4 md:p-6 flex items-end justify-between w-full"
             >
                 <div
                     :class="
@@ -47,24 +47,23 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
                 "
                     class="flex flex-col gap-2"
                 >
-                    <div class="typo-s-h-md">
+                    <div class="typo-sub-h-sm md:typo-sub-h-md">
                         {{ category }}
                         <span class="typo-p-xs -translate-y-1 inline-block mr-1">
-                        {{ count }}
+                            {{ count }}
-                    </span>
+                        </span>
                     </div>
-                    <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
+                    <span class="typo-p-sm md:typo-p-md">محصولات ما را مشاهده کنید</span>
                 </div>
 
                 <Icon
-                    size="24"
                     name="ci:arrow-left"
-                    class="mb-1"
+                    class="mb-1 size-5 md:size-6"
                     :class="
-                    colorObject?.isLight && !darkLayer
+                        colorObject?.isLight && !darkLayer
-                        ? '**:stroke-black'
+                            ? '**:stroke-black'
-                        : '**:stroke-white'
+                            : '**:stroke-white'
-                "
+                    "
                 />
             </div>
         </div>

frontend/components/global/Header.vue

@@ -8,8 +8,8 @@ import { NAV_LINKS } from "~/constants";
 // state
 
 const route = useRoute();
-
 const { token } = useAuth();
+const isSideDrawerOpen = ref(false);
 
 // queries
 
@@ -18,6 +18,7 @@ const { data: account } = useGetAccount();
 // computed
 
 const isHomePage = computed(() => route.path === "/");
+
 </script>
 
 <template>
@@ -27,10 +28,13 @@ const isHomePage = computed(() => route.path === "/");
         :class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
     >
         <div
-            class="size-full flex items-center justify-between container py-[2.25rem] shrink-0 grow-0"
+            class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0"
         >
-            <div class="flex items-center gap-16">
+            <button class="md:hidden" @click="isSideDrawerOpen = true">
-                <div class="flex items-center justify-end gap-[1.5rem]">
+                <Icon name="humbleicons:bars" size="28"/>
+            </button>
+            <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
+                <div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
                     <Tooltip v-if="!!account && !!token" title="حساب کاربری">
                         <NuxtLink
                             :to="{ name: 'profile' }"
@@ -53,8 +57,7 @@ const isHomePage = computed(() => route.path === "/");
                         <NuxtLink to="/signin" class="flex-center">
                             <Icon
                                 name="ci:profile"
-                                size="24px"
+                                class="**:stroke-black size-5 lg:size-6"
-                                class="**:stroke-black"
                             />
                         </NuxtLink>
                     </Tooltip>
@@ -62,8 +65,7 @@ const isHomePage = computed(() => route.path === "/");
                         <NuxtLink to="/products" class="flex-center">
                             <Icon
                                 name="ci:search"
-                                size="21px"
+                                class="**:stroke-black size-4.5 lg:size-[21px]"
-                                class="**:stroke-black"
                             />
                         </NuxtLink>
                     </Tooltip>
@@ -71,15 +73,14 @@ const isHomePage = computed(() => route.path === "/");
                         <NuxtLink to="/cart" class="flex-center">
                             <Icon
                                 name="ci:cart"
-                                size="24px"
+                                class="**:stroke-black size-5 lg:size-6"
-                                class="**:stroke-black"
                             />
                         </NuxtLink>
                     </Tooltip>
                 </div>
 
                 <nav
-                    class="flex-center gap-[2.5rem] typo-label-sm font-light text-black/80"
+                    class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80"
                 >
                     <NuxtLink
                         v-for="(link, index) in NAV_LINKS"
@@ -94,7 +95,7 @@ const isHomePage = computed(() => route.path === "/");
             <div>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    height="23"
+                    class="h-5 lg:h-6"
                     fill="none"
                     viewBox="0 0 220 40"
                 >
@@ -110,6 +111,7 @@ const isHomePage = computed(() => route.path === "/");
             </div>
         </div>
     </header>
-</template>
 
-<style lang="scss" scoped></style>
+    <SideDrawer v-model="isSideDrawerOpen"/>
+
+</template>

frontend/components/global/LoadingOverlay.vue

@@ -1,18 +1,10 @@
 <script lang="ts" setup>
 
-// import
-
-import type { LoadingOverlayProvideType } from "~/pages/index.vue";
-
-// provide / inject
-
-const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
-
 // state
 
 const { $gsap: gsap } = useNuxtApp();
 
-const shouldRenderLoadingOverlay = ref(true);
+const showLoadingOverlay = useState('showLoadingOverlay');
 
 // lifecycle
 
@@ -27,7 +19,7 @@ watch(() => showLoadingOverlay.value, (value) => {
             .to("#loading-overlay", {
                 scale: 0.8,
                 opacity: 0,
-                delay: 3
+                delay: 2.5
             })
             .to("#loading-overlay", {
                 opacity: 0,

frontend/components/global/Rate.vue

@@ -13,8 +13,8 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-300 px-4 py-2 typo-p-sm">
+    <div class="bg-white flex justify-center items-center gap-1.5 lg:gap-2 rounded-full border-[0.5px] border-slate-300 px-3 lg:px-4 py-1 lg:py-2 typo-p-xs lg:typo-p-sm">
-        <Icon name="ci:star-solid" class="**:fill-warning-400 size-4.5" />
+        <Icon name="ci:star-solid" class="**:fill-warning-400 size-3.5 lg:size-4.5" />
         <span class="mt-0.5">
             {{ rate }}
         </span>

frontend/components/global/SideDrawer.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+
+// import
+
+import { NAV_LINKS } from "~/constants";
+import { useAuth } from "~/composables/api/auth/useAuth";
+import useGetAccount from "~/composables/api/account/useGetAccount";
+
+// type
+
+type Props = {
+    modelValue: boolean
+}
+
+// props
+
+const props = defineProps<Props>();
+
+// state
+
+const { token } = useAuth();
+const { data: account } = useGetAccount();
+
+// emit
+
+const emit = defineEmits(["update:modelValue"]);
+
+// method
+
+const closeSideDrawer = () => {
+    emit("update:modelValue", false);
+};
+
+</script>
+
+<template>
+
+    <Transition name="fade">
+        <div
+            v-if="modelValue"
+            class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
+            @click="closeSideDrawer"
+        />
+    </Transition>
+
+    <div
+        @click.stop
+        :class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
+        class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all flex-col bg-white w-[350px] h-full gap-8 pt-12"
+    >
+        <div class="flex items-center flex-col justify-end gap-[1.5rem]">
+            <Tooltip v-if="!!account && !!token" title="حساب کاربری">
+                <NuxtLink
+                    :to="{ name: 'profile' }"
+                    class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
+                >
+                    <Avatar
+                        class="!size-[1.6rem]"
+                        :src="account.profile_photo"
+                        :alt="
+                                    account.first_name && account.last_name
+                                        ? `${account.first_name.charAt(
+                                              0
+                                          )} ${account.last_name.charAt(0)}`
+                                        : 'بدون نام کاربری'
+                                "
+                    />
+                </NuxtLink>
+            </Tooltip>
+            <Tooltip v-else title="ورود">
+                <NuxtLink to="/signin" class="flex-center">
+                    <Icon
+                        name="ci:profile"
+                        size="24px"
+                        class="**:stroke-black"
+                    />
+                </NuxtLink>
+            </Tooltip>
+            <Tooltip title="محصولات">
+                <NuxtLink to="/products" class="flex-center">
+                    <Icon
+                        name="ci:search"
+                        size="21px"
+                        class="**:stroke-black"
+                    />
+                </NuxtLink>
+            </Tooltip>
+            <Tooltip title="سبد خرید">
+                <NuxtLink to="/cart" class="flex-center">
+                    <Icon
+                        name="ci:cart"
+                        size="24px"
+                        class="**:stroke-black"
+                    />
+                </NuxtLink>
+            </Tooltip>
+        </div>
+
+        <nav
+            class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
+        >
+            <NuxtLink
+                v-for="(link, index) in NAV_LINKS"
+                :key="index"
+                :to="link.path"
+            >
+                {{ link.title }}
+            </NuxtLink>
+        </nav>
+    </div>
+
+</template>

frontend/components/global/product-detail/ProductsSlider.vue

@@ -30,12 +30,13 @@ await suspense();
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
+
 </script>
 
 <template>
-    <section class="w-full flex flex-col gap-[4rem] px-0 py-[5rem] container">
+    <section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] lg:container">
-        <div class="w-full flex justify-between items-center">
+        <div class="w-full flex justify-between items-center max-lg:container">
-            <span class="text-black typo-h-4">
+            <span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
                 {{ title }}
             </span>
             <div class="flex-center gap-[.5rem]">
@@ -47,16 +48,16 @@ const onSwiper = (swiper: SwiperClass) => {
                             ? 'border-slate-200 cursor-not-allowed'
                             : 'border-black cursor-pointer'
                     "
-                    class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
+                    class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
                         name="ci:chevron-right"
+                        class="size-5 lg:size-6"
                         :class="
                             swiper_instance?.isBeginning
                                 ? '**:stroke-slate-200'
                                 : '**:stroke-black'
                         "
-                        size="24"
                     />
                 </button>
                 <button
@@ -67,24 +68,40 @@ const onSwiper = (swiper: SwiperClass) => {
                             ? 'border-slate-200 cursor-not-allowed'
                             : 'border-black cursor-pointer'
                     "
-                    class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
+                    class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
                         name="ci:chevron-left"
+                        class="size-5 lg:size-6"
                         :class="
                             swiper_instance?.isEnd
                                 ? '**:stroke-slate-200'
                                 : '**:stroke-black'
                         "
-                        size="24"
                     />
                 </button>
             </div>
         </div>
         <div class="w-full">
-            <Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
+            <Swiper
+                :slides-per-view="1.5"
+                :loop="true"
+                :centered-slides="true"
+                :space-between="24"
+                @swiper="onSwiper"
+                :breakpoints="{
+                    640: {
+                        centeredSlides: true,
+                        slidesPerView : 2.5
+                    },
+                    1024 : {
+                        centeredSlides: false,
+                        slidesPerView : 3
+                    }
+                }"
+            >
                 <SwiperSlide
-                    v-for="product in homeData!.products"
+                    v-for="product in [...homeData!.products,...homeData!.products]"
                     :key="product.id"
                 >
                     <ProductCard

frontend/components/global/product/ProductCard.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+
 // import
 
 import Tag from "~/components/global/Tag.vue";
@@ -34,7 +35,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
 <template>
     <NuxtLink :to="'/product/' + id">
         <div
-            class="group relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
+            class="group relative size-full aspect-square rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
         >
             <img
                 :id="`product-image-${id}`"
@@ -45,7 +46,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
 
             <div
                 v-if="darkLayer"
-                class="bg-linear-to-t inset-0 from-black/50 to-transparent to-40% absolute z-10 size-full"
+                class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
             />
 
             <div
@@ -62,25 +63,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     ? 'text-black'
                     : 'text-white'
             "
-                class="absolute inset-x-0 bottom-0 pb-6 px-6 flex flex-row-reverse justify-between items-end z-10"
+                class="absolute inset-x-0 bottom-0 pb-4 md:pb-6 px-4 md:px-6 flex flex-row-reverse justify-between items-end z-10"
             >
 
                 <div class="flex flex-col gap-2 items-start w-full">
-                <span class="typo-p-md font-medium">
+                <span class="typo-p-sm md:typo-p-md !font-medium">
                     {{ brand }}
                 </span>
-                    <span class="typo-sub-h-lg">
+                    <span class="typo-sub-h-md md:typo-sub-h-lg">
                     {{ title }}
                 </span>
                     <div class="flex items-center justify-between w-full mt-1">
-                        <div class="flex items-center gap-2 mt-1">
+                        <div class="flex items-center gap-2 md:mt-1">
                             <ColorCircle
                                 v-for="color in colors"
                                 :key="color"
                                 :style="{ backgroundColor: color }"
+                                class="!size-5 md:!size-6"
                             />
                         </div>
-                        <span class="typo-p-md font-medium whitespace-nowrap">
+                        <span class="typo-p-sm md:typo-p-md font-medium whitespace-nowrap">
                         {{ price }}
                     </span>
                     </div>

frontend/components/home/Categories.vue

@@ -26,14 +26,17 @@ const onSwiper = (swiper: SwiperClass) => {
     >
 
         <div class="w-full flex justify-center items-center relative z-10">
-            <span class="text-white typo-h-4">
+            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
                 دسته بندی ها
             </span>
         </div>
 
         <img
             src="/img/gradient-2.png"
-            class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115"
+            class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
+            :style="{
+                maskImage: 'radial-gradient(black, transparent 50%)'
+            }"
             alt=""
         />
 
@@ -41,9 +44,19 @@ const onSwiper = (swiper: SwiperClass) => {
             <Swiper
                 :loop="true"
                 :centered-slides="true"
-                :slides-per-view="3.65"
+                :slides-per-view="1.5"
                 :space-between="20"
                 @swiper="onSwiper"
+                :breakpoints="{
+                    640: {
+                        centeredSlides: true,
+                        slidesPerView : 2.65
+                    },
+                    1024 : {
+                        centeredSlides: true,
+                        slidesPerView : 3.65
+                    }
+                }"
             >
                 <SwiperSlide
                     v-for="slide in homeData!.sub_categories"
@@ -63,31 +76,29 @@ const onSwiper = (swiper: SwiperClass) => {
             <div
                 v-if="!swiper_instance?.isBeginning"
                 @click="swiper_instance?.slidePrev()"
-                class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
+                class="max-xs:hidden absolute z-20 right-10 xs:right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-right"
-                    class="**:stroke-black"
+                    class="**:stroke-black size-5 xs:size-6"
-                    size="24"
                 />
             </div>
 
             <div
                 v-if="!swiper_instance?.isEnd"
                 @click="swiper_instance?.slideNext()"
-                class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
+                class="max-xs:hidden absolute z-20 left-10 xs:left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-left"
-                    class="**:stroke-black"
+                    class="**:stroke-black size-5 xs:size-6"
-                    size="24"
                 />
             </div>
         </div>
 
         <div class="w-full flex justify-center items-center">
             <NuxtLink to="/category">
-                <Button variant="solid" class="invert rounded-full px-8" end-icon="ci:arrow-left">
+                <Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8" end-icon="ci:arrow-left">
                     مشاهده همه دسته ها
                 </Button>
             </NuxtLink>

frontend/components/home/Hero.vue

@@ -5,17 +5,13 @@
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
 import useHomeData from "~/composables/api/home/useHomeData";
-import type { LoadingOverlayProvideType } from "~/pages/index.vue";
-
-// provide / inject
-
-const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
 
 // state
 
 const { data: homeData } = useHomeData();
 const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
 const swiper_instance = ref<SwiperClass | null>(null);
+const showLoadingOverlay = useState("showLoadingOverlay");
 
 const observerTarget = ref(null);
 const shouldPauseVideos = ref(false);
@@ -23,7 +19,6 @@ const shouldPauseVideos = ref(false);
 useIntersectionObserver(
     observerTarget,
     ([entry], observerElement) => {
-        console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
         shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
     }
 );
@@ -32,11 +27,12 @@ const isMuted = ref(true);
 const slidesPerView = ref(1);
 
 let gsapTimeline: gsap.core.Timeline;
+let scrollTrigger: ScrollTrigger;
 
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
-    changeLoadingOverlay(false);
+    showLoadingOverlay.value = false;
     swiper_instance.value = swiper;
 };
 
@@ -60,11 +56,7 @@ watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
 
 // lifecycle
 
-onMounted(() => {
+const initializeGsapAnimation = () => {
-    updateVideoStates();
-
-    gsapTimeline = gsap.timeline();
-
     gsap.to("#header-navbar", {
         background: "transparent",
         filter: "invert(100%)"
@@ -99,21 +91,33 @@ onMounted(() => {
             marginTop: "0px",
             scale: 1.025
         }, {
-            marginTop: "96px",
+            marginTop: () => {
+                const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
+                return `${navbarEl.clientHeight}px`;
+            },
             scale: 1
-        }, "=")
-        .fromTo("#header-slider-pagination-child", {
-            padding: "0px 0px"
-        }, {
-            padding: "0px 80px"
-        }, "=")
-        .fromTo(".header-slider-item-child", {
-            padding: "0px 80px"
-        }, {
-            padding: "0px 40px"
         }, "=");
+};
 
-    ScrollTrigger.create({
+const resetTimelineForMobile = () => {
+    gsap.to("#header-navbar", {
+        background: "white",
+        filter: "invert(0%)"
+    });
+    gsap.set(".header-slider-item", {
+        borderRadius: "20px",
+        height: "450px"
+    });
+};
+
+onMounted(() => {
+    updateVideoStates();
+
+    gsapTimeline = gsap.timeline();
+
+    initializeGsapAnimation();
+
+    scrollTrigger = ScrollTrigger.create({
         trigger: "#header-slider-container",
         animation: gsapTimeline,
         scrub: 1,
@@ -123,6 +127,24 @@ onMounted(() => {
         end: "bottom top"
     });
 
+    setTimeout(() => {
+        if (window.innerWidth > 768) {
+            scrollTrigger.enable();
+        } else {
+            resetTimelineForMobile();
+            scrollTrigger.disable();
+        }
+    }, 100);
+
+    window.addEventListener("resize", () => {
+        if (window.innerWidth > 768) {
+            scrollTrigger.enable();
+        } else {
+            resetTimelineForMobile();
+            scrollTrigger.disable();
+        }
+    });
+
 });
 
 onUnmounted(() => {
@@ -133,23 +155,30 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div id="header-slider-container" class="w-full mb-20 z-50">
+    <div
-
+        id="header-slider-container"
+        class="w-full mb-20 z-50 max-md:mt-[80px]"
+    >
         <div id="header-slider-wrapper" class="relative">
             <Swiper
                 ref="observerTarget"
                 :slides-per-view="slidesPerView"
                 :loop="true"
-                :space-between="40"
                 :centered-slides="true"
+                :breakpoints="{
+                    768: {
+                        spaceBetween : 40
+                    }
+                }"
                 @swiper="onSwiper"
             >
                 <SwiperSlide
                     v-for="(slide, index) in homeData!.sliders"
                     :key="slide.id"
+                    class="max-md:container"
                 >
                     <div
-                        class="header-slider-item relative w-full overflow-hidden"
+                        class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
                     >
                         <template v-if="!!slide.video">
                             <video
@@ -160,19 +189,26 @@ onUnmounted(() => {
                                 :src="slide.video"
                             />
                         </template>
+
                         <img
                             v-else
                             class="absolute inset-0 size-full object-cover"
                             :src="slide.image!"
                             :alt="slide.title"
                         />
+
                         <div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
-                        <div class="header-slider-item-child absolute z-10 w-full bottom-36">
+
-                            <div class="w-full container">
+                        <div
-                                <div class="border-b border-white/10 pb-6 flex flex-col gap-4">
+                            :class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
-                                    <div class="flex items-center gap-8">
+                            class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
+                        >
+
+                            <div class="header-slider-item-child w-full">
+                                <div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
+                                    <div class="flex items-center gap-4 lg:gap-8">
                                         <div
-                                            class="hover:scale-110 size-[50px] relative flex items-center justify-center">
+                                            class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
                                             <div
                                                 class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
                                             <button
@@ -181,63 +217,59 @@ onUnmounted(() => {
                                             >
                                                 <Icon
                                                     :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
-                                                    class="text-black"
+                                                    class="text-black size-4 md:size-[18px] lg:size-[24px]"
-                                                    size="24px"
                                                 />
                                             </button>
                                         </div>
-                                        <h3 class="typo-h-1 tracking-[-2px] text-white">
+                                        <h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
                                             {{ slide.title }}
                                         </h3>
                                     </div>
-                                    <div class="flex justify-between items-end">
+                                    <div class="flex justify-between items-center">
-                                    <span class="typo-p-lg text-white">
+                                        <span class="truncate typo-p-xs md:typo-p-sm lg:typo-p-lg text-white">
-                                        {{ slide.description }}
+                                            {{ slide.description }}
-                                    </span>
+                                        </span>
-                                        <Button class="invert rounded-full hover:bg-transparent">
+                                        <Button
+                                            class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
                                             مشاهده
                                         </Button>
                                     </div>
                                 </div>
                             </div>
+
+                            <div
+                                id="header-slider-pagination-child"
+                                class="flex items-center justify-between"
+                            >
+                                <button @click="swiper_instance?.slidePrev()">
+                                    <Icon
+                                        class="**:stroke-white cursor-pointer size-5 md:size-6"
+                                        name="ci:arrow-right"
+                                    />
+                                </button>
+                                <div class="flex items-center justify-center gap-3 text-white">
+                                    <div
+                                        v-for="(_slide, index) in homeData!.sliders"
+                                        :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
+                                        class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
+                                        @click="swiper_instance?.slideTo(index)"
+                                    >
+                                    </div>
+                                </div>
+                                <button>
+                                    <Icon
+                                        @click="swiper_instance?.slideNext()"
+                                        class="**:stroke-white cursor-pointer size-5 md:size-6"
+                                        name="ci:arrow-left"
+                                    />
+                                </button>
+                            </div>
+
                         </div>
+
                     </div>
                 </SwiperSlide>
             </Swiper>
-            <div
-                id="header-slider-pagination"
-                class="absolute w-full left-1/2 -translate-x-1/2 z-100"
-                :style="{ bottom : '80px' }"
-            >
-                <div class="container h-full">
-                    <div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
-                        <button @click="swiper_instance?.slidePrev()">
-                            <Icon
-                                class="**:stroke-white cursor-pointer"
-                                name="ci:arrow-right"
-                                size="24"
-                            />
-                        </button>
-                        <div class="flex items-center justify-center gap-3 text-white">
-                            <div
-                                v-for="(_slide, index) in homeData!.sliders"
-                                :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
-                                class="border border-white size-3 rounded-full transition-all duration-200"
-                                @click="swiper_instance?.slideTo(index)"
-                            >
-                            </div>
-                        </div>
-                        <button>
-                            <Icon
-                                @click="swiper_instance?.slideNext()"
-                                class="**:stroke-white cursor-pointer"
-                                name="ci:arrow-left"
-                                size="24"
-                            />
-                        </button>
-                    </div>
-                </div>
-            </div>
         </div>
 
     </div>

frontend/components/home/LatestStories.vue

@@ -14,19 +14,17 @@ await suspense();
 </script>
 
 <template>
-    <section class="mt-20 px-20">
+    <section class="mt-20 container">
         <div class="flex items-center justify-between mb-20">
-            <span class="typo-h-4 text-black">
+            <span class="typo-h-6 md:typo-h-5 lg:typo-h-4 text-black">
                 مقالات اخیر سایت
             </span>
             <NuxtLink to="/articles">
-                <Button variant="outlined" class="rounded-full" start-icon="ci:paper">
+                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2" end-icon="ci:arrow-left">
                     نمایش همه
                 </Button>
             </NuxtLink>
         </div>
-        <ClientOnly>
             <ArticlesList :articles="articles!.results" />
-        </ClientOnly>
     </section>
 </template>

frontend/components/home/MostRecentComments.vue

@@ -51,14 +51,14 @@ const onSwiper = (swiper: SwiperClass) => {
                     <div class="flex justify-center items-center">
                         <div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
                             <Icon name="ci:instagram" size="28" class="**:stroke-white" />
-                            <p class="typo-h-5 leading-[150%] text-center">
+                            <p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-medium leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
                                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
                                 استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
                                 در ستون و سطرآنچنان که لازم.
                             </p>
-                            <span class="typo-p-xl text-center">
+                            <span class="typo-p-sm md:typo-p-xl text-center">
-                             - منصور مرزبان
+                                 - منصور مرزبان
-                        </span>
+                            </span>
                         </div>
                     </div>
                 </SwiperSlide>
@@ -68,7 +68,7 @@ const onSwiper = (swiper: SwiperClass) => {
                 <div
                     v-for="(i, index) in 6"
                     :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
-                    class="border border-white size-2 rounded-full transition-all duration-200"
+                    class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
                 >
                 </div>
             </div>

frontend/components/home/Preview.vue

@@ -46,17 +46,16 @@ watch(
 </script>
 
 <template>
-    <div class="container">
+    <div class="container max-w-[1000px]">
-        <div class="flex flex-col items-center gap-3 mb-16">
+        <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
-            <span class="typo-p-md text-slate-500">مقایسه محصولات</span>
+            <span class="typo-p-sm md:typo-p-md text-slate-500">مقایسه محصولات</span>
-            <span class="typo-h-3 text-black">
+            <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
                 تفاوت محصلات ما را ببینید
-                {{ activeSlideVideo }}
             </span>
         </div>
         <div
             ref="previewContainerEl"
-            class="rounded-200 overflow-hidden h-[90svh] relative"
+            class="rounded-200 overflow-hidden h-[60svh] md:h-[70svh] relative"
         >
             <Transition name="fade">
                 <img
@@ -110,21 +109,21 @@ watch(
             </div>
 
             <div
-                class="absolute bottom-0 p-10 w-full flex justify-between items-end"
+                class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
             >
                 <div class="flex flex-col gap-2 text-black">
-                    <span class="typo-p-md">
+                    <span class="typo-p-sm md:typo-p-md">
                         {{ homeData!.difreance_section.description1 }}
                     </span>
-                    <span class="typo-h-3">
+                    <span class="typo-h-6 md:typo-h-5 lg:typo-h-3">
                         {{ homeData!.difreance_section.title1 }}
                     </span>
                 </div>
                 <div class="flex flex-col gap-2 text-black">
-                    <span class="typo-p-md text-end">
+                    <span class="typo-p-sm md:typo-p-md text-end">
                         {{ homeData!.difreance_section.description2 }}
                     </span>
-                    <span class="typo-h-3 text-end">
+                    <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end">
                         {{ homeData!.difreance_section.title2 }}
                     </span>
                 </div>

frontend/components/home/ProductsShowcase.vue

@@ -1,29 +1,14 @@
 <script lang="ts" setup>
 
+// import
+
+import useHomeData from "~/composables/api/home/useHomeData";
+
 // state
 
-const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
+const { data : homeData } = useHomeData();
 
-const slides = [
+const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
-    {
-        id: 1,
-        title: "موبایل iPhone 16 Pro Max",
-        description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
-        image: "/img/showcase-1.png"
-    },
-    {
-        id: 2,
-        title: "موبایل iPhone 16 Pro Max",
-        description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
-        image: "/img/showcase-2.png"
-    },
-    {
-        id: 3,
-        title: "موبایل iPhone 16 Pro Max",
-        description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
-        image: "/img/showcase-1.png"
-    }
-];
 
 let gsapTimeline: gsap.core.Timeline;
 
@@ -107,15 +92,15 @@ onUnmounted(() => {
         class="mt-80 mb-40 perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
     >
         <div
-            v-for="slide in slides"
+            v-for="slide in homeData!.show_case_slider"
             :key="slide.id"
             class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
         >
             <div
-                class="blur-[150px] w-[600px] h-[80px] bg-white/70 absolute z-10"
+                class="blur-[150px] w-[400px] sm:w-[600px] h-[80px] sm:h-[80px] bg-white/70 absolute z-10"
             />
             <img
-                class="w-[650px] z-20 mb-30"
+                class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
                 :src="slide.image"
                 :style="{
                     mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
@@ -123,10 +108,10 @@ onUnmounted(() => {
                 alt=""
             />
             <div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
-                <span class="text-white typo-h-3">
+                <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
                     {{ slide.title }}
                 </span>
-                <p class="text-white max-w-[750px] typo-p-lg">
+                <p class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg">
                     {{ slide.description }}
                 </p>
             </div>

frontend/composables/api/home/useHomeData.ts

@@ -25,7 +25,14 @@ export type GetHomeDataResponse = {
         "description2": string,
         "link1": string,
         "link2": string
-    }
+    },
+    "show_case_slider" : {
+        "id": number,
+        "title": string,
+        "description": string,
+        "link": string,
+        "image": string,
+    }[]
 };
 
 const useHomeData = () => {

frontend/dockerfile

@@ -10,4 +10,4 @@ WORKDIR /app
 COPY --from=build-stage /app /app
 EXPOSE 3000
 ENV NODE_ENV=production
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]

frontend/package.json

@@ -1,59 +1,54 @@
 {
-  "name": "nuxt-app",
+    "name": "nuxt-app",
-  "private": true,
+    "private": true,
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "start": "node .output/server/index.mjs",
+        "start": "node .output/server/index.mjs",
-    "build": "nuxt build",
+        "build": "nuxt build",
-    "dev": "nuxt dev",
+        "dev": "nuxt dev",
-    "dev-o": "nuxt dev -- -o",
+        "dev-network": "nuxi dev --host",
-    "test": "vitest",
+        "dev-o": "nuxt dev -- -o",
-    "generate": "nuxt generate",
+        "test": "vitest",
-    "preview": "nuxt preview",
+        "generate": "nuxt generate",
-    "postinstall": "nuxt prepare"
+        "preview": "nuxt preview",
-  },
+        "postinstall": "nuxt prepare"
-  "dependencies": {
+    },
-    "@formkit/auto-animate": "^0.8.2",
+    "dependencies": {
-    "@nuxt/icon": "^1.9.1",
+        "@formkit/auto-animate": "^0.8.2",
-    "@nuxtjs/google-fonts": "^3.2.0",
+        "@nuxt/icon": "^1.10.3",
-    "@tanstack/vue-query": "^5.62.2",
+        "@nuxtjs/google-fonts": "^3.2.0",
-    "@tanstack/vue-query-devtools": "^5.62.3",
+        "@tanstack/vue-query": "^5.62.2",
-    "@vite-pwa/nuxt": "^0.10.6",
+        "@tanstack/vue-query-devtools": "^5.62.3",
-    "@vuelidate/core": "^2.0.3",
+        "@vite-pwa/nuxt": "^0.10.6",
-    "@vuelidate/validators": "^2.0.4",
+        "@vuelidate/core": "^2.0.3",
-    "@vueuse/integrations": "^12.4.0",
+        "@vuelidate/validators": "^2.0.4",
-    "@vueuse/nuxt": "^12.3.0",
+        "@vueuse/integrations": "^12.7.0",
-    "animate.css": "^4.1.1",
+        "@vueuse/nuxt": "^12.7.0",
-    "axios": "^1.7.9",
+        "animate.css": "^4.1.1",
-    "date-fns-jalali": "^4.1.0-0",
+        "axios": "^1.8.1",
-    "fast-average-color": "^9.4.0",
+        "date-fns-jalali": "^4.1.0-0",
-    "gsap": "^3.12.5",
+        "fast-average-color": "^9.4.0",
-    "isomorphic-dompurify": "^2.21.0",
+        "gsap": "^3.12.7",
-    "jalali-ts": "^8.0.0",
+        "isomorphic-dompurify": "^2.22.0",
-    "masonry-layout": "^4.2.2",
+        "jalali-ts": "^8.0.0",
-    "nuxt": "^3.14.1592",
+        "masonry-layout": "^4.2.2",
-    "reka-ui": "^1.0.0-alpha.6",
+        "nuxt": "^3.15.4",
-    "swiper": "^11.1.15",
+        "reka-ui": "^1.0.0-alpha.6",
-    "universal-cookie": "^7.2.2",
+        "swiper": "^11.2.4",
-    "vue": "latest",
+        "universal-cookie": "^7.2.2",
-    "vue-router": "latest",
+        "vue": "latest",
-    "vue-scrollto": "^2.20.0",
+        "vue-router": "latest",
-    "vue-skeletor": "^1.0.6",
+        "vue-scrollto": "^2.20.0",
-    "vue3-marquee": "^4.2.2",
+        "vue-skeletor": "^1.0.6",
-    "vue3-persian-datetime-picker": "^1.2.2",
+        "vue3-marquee": "^4.2.2",
-    "workbox-window": "^7.3.0"
+        "vue3-persian-datetime-picker": "^1.2.2",
-  },
+        "workbox-window": "^7.3.0"
-  "devDependencies": {
+    },
-    "@nuxt/test-utils": "^3.15.4",
+    "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.0-beta.5",
+        "@tailwindcss/postcss": "^4.0.9",
-    "@types/masonry-layout": "^4.2.8",
+        "@types/masonry-layout": "^4.2.8",
-    "@vue/test-utils": "^2.4.6",
+        "autoprefixer": "^10.4.20",
-    "autoprefixer": "^10.4.20",
+        "postcss": "^8.5.3",
-    "happy-dom": "^16.8.1",
+        "tailwindcss": "^4.0.9"
-    "msw": "^2.7.0",
+    }
-    "playwright-core": "^1.50.1",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^4.0.0-beta.5",
-    "vitest": "^3.0.4"
-  }
 }

frontend/pages/index.vue

@@ -4,32 +4,10 @@
 
 import useHomeData from "~/composables/api/home/useHomeData";
 
-// type
-
-export type LoadingOverlayProvideType = {
-    showLoadingOverlay: Ref<boolean>,
-    changeLoadingOverlay: (value: boolean) => void,
-}
-
 // state
 
 const { suspense } = useHomeData();
 
-const showLoadingOverlay = ref(true);
-
-// method
-
-const changeLoadingOverlay = (value: boolean) => {
-    showLoadingOverlay.value = value;
-};
-
-// provide / inject
-
-provide("loadingOverlay", {
-    showLoadingOverlay,
-    changeLoadingOverlay
-});
-
 // ssr
 
 const response = await suspense();

frontend/tools/logger.ts

@@ -1,5 +1,4 @@
 import fs from "fs/promises";
-import type { AxiosError } from "axios";
 
 type LogType = {
     title: string;

frontend/types/global.d.ts

@@ -88,10 +88,7 @@ declare global {
         colors: string[];
     };
 
-    type ProductListItem = Pick<
+    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">
-        Product,
-        "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors"
-    >;
 
     type Article = {
         id: number;
@@ -126,7 +123,7 @@ declare global {
         name: string;
         slug: string;
         icon: string;
-        product_count: string;
+        product_count: number;
         subcategorys: SubCategory[];
     };
 
@@ -136,7 +133,7 @@ declare global {
         slug: string;
         icon: string;
         image: string;
-        product_count: string;
+        product_count: number;
         parent: string;
         show: boolean;
     };