Updated

frontend/app.vue

@@ -1,5 +1,13 @@
-<script setup>
+<script lang="ts" setup>
+
+// import
+
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
+
+// state
+
+useState('showLoadingOverlay', () => true);
+
 </script>
 
 <template>

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 py-6 lg:py-[2.25rem] 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/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;
     }
 );
@@ -36,7 +31,7 @@ let gsapTimeline: gsap.core.Timeline;
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
-    changeLoadingOverlay(false);
+    showLoadingOverlay.value = false;
     swiper_instance.value = swiper;
 };
 
@@ -99,18 +94,11 @@ 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({
@@ -122,7 +110,6 @@ onMounted(() => {
         // markers: true,
         end: "bottom top"
     });
-
 });
 
 onUnmounted(() => {
@@ -133,15 +120,23 @@ 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"
+    >
 
         <div id="header-slider-wrapper" class="relative">
             <Swiper
                 ref="observerTarget"
                 :slides-per-view="slidesPerView"
                 :loop="true"
-                :space-between="40"
+                :space-between="20"
                 :centered-slides="true"
+                :breakpoints="{
+                    1024 : {
+                        spaceBetween : 40
+                    }
+                }"
                 @swiper="onSwiper"
             >
                 <SwiperSlide
@@ -160,19 +155,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 +183,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/nuxt.config.ts

@@ -69,8 +69,7 @@ export default defineNuxtConfig({
         "@nuxt/icon",
         "reka-ui/nuxt",
         "@vueuse/nuxt",
-        "@formkit/auto-animate/nuxt",
+        "@formkit/auto-animate/nuxt"
-        "@nuxt/test-utils/module",
     ],
 
     runtimeConfig: {

frontend/package.json

@@ -14,25 +14,25 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@nuxt/icon": "^1.9.1",
+    "@nuxt/icon": "^1.10.3",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@tanstack/vue-query": "^5.62.2",
+    "@tanstack/vue-query": "^5.66.9",
-    "@tanstack/vue-query-devtools": "^5.62.3",
+    "@tanstack/vue-query-devtools": "^5.66.9",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/integrations": "^12.4.0",
+    "@vueuse/integrations": "^12.7.0",
-    "@vueuse/nuxt": "^12.3.0",
+    "@vueuse/nuxt": "^12.7.0",
     "animate.css": "^4.1.1",
-    "axios": "^1.7.9",
+    "axios": "^1.8.1",
     "date-fns-jalali": "^4.1.0-0",
     "fast-average-color": "^9.4.0",
-    "gsap": "^3.12.5",
+    "gsap": "^3.12.7",
-    "isomorphic-dompurify": "^2.21.0",
+    "isomorphic-dompurify": "^2.22.0",
     "jalali-ts": "^8.0.0",
     "masonry-layout": "^4.2.2",
-    "nuxt": "^3.14.1592",
+    "nuxt": "^3.15.4",
     "reka-ui": "^1.0.0-alpha.6",
-    "swiper": "^11.1.15",
+    "swiper": "^11.2.4",
     "universal-cookie": "^7.2.2",
     "vue": "latest",
     "vue-router": "latest",
@@ -42,16 +42,10 @@
     "vue3-persian-datetime-picker": "^1.2.2"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^3.15.4",
+    "@tailwindcss/postcss": "^4.0.9",
-    "@tailwindcss/postcss": "^4.0.0-beta.5",
     "@types/masonry-layout": "^4.2.8",
-    "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
-    "happy-dom": "^16.8.1",
+    "postcss": "^8.5.3",
-    "msw": "^2.7.0",
+    "tailwindcss": "^4.0.9"
-    "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;
     };