Updated

frontend/components/global/Footer.vue

@@ -10,16 +10,11 @@
             class="flex flex-col gap-4 items-center justify-center relative z-20"
         >
             <div
-                class="flex items-center flex-col pb-[10px] pt-[80px] lg:py-[150px] justify-center"
+                class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:py-[150px] justify-center"
             >
-                <video
+                <img
-                    src="/video/loading.mp4"
+                    src="/img/heymlz/heymlz-small-idle.gif"
-                    autoplay
+                    class="size-[150px] lg:size-[220px] rounded-full drop-shadow-2xl"
-                    muted
-                    loop
-                    playsinline
-                    webkit-playsinline
-                    class="size-[150px] lg:size-[220px] rounded-full"
                 />
                 <span
                     class="font-bold text-2xl lg:text-5xl text-gradient bg-gradient-to-l from-blue-500 to-blue-700"

frontend/components/global/ServiceHighlights.vue

@@ -11,22 +11,22 @@ type Highlight = {
 
 const highlights = ref<Highlight[]>([
     {
-        icon: "/img/heymlz/footer-support.png",
+        icon: "/img/heymlz/footer-support.gif",
         title: "خدمات مشتری",
         description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
     },
     {
-        icon: "/img/heymlz/footer-send.png",
+        icon: "/img/heymlz/footer-send.gif",
         title: "ارسال سریع و رایگان",
         description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
     },
     {
-        icon: "/img/heymlz/footer-share.png",
+        icon: "/img/heymlz/footer-share.gif",
         title: "معرفی به دوستان",
         description: "ما را به دوستان خود معرفی کنید",
     },
     {
-        icon: "/img/heymlz/footer-security.png",
+        icon: "/img/heymlz/footer-security.gif",
         title: "پرداخت امن",
         description: "پرداخت شما به‌صورت امن پردازش می‌شود",
     },
@@ -43,7 +43,7 @@ const highlights = ref<Highlight[]>([
                     <div class="size-[70px] md:size-[100px] flex-center">
                         <NuxtImg
                             :src="highlight.icon"
-                            class="w-full scale-150"
+                            class="w-full"
                         />
                     </div>
 

frontend/components/home/Categories.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // imports
 
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -16,7 +15,6 @@ const swiper_instance = ref<SwiperClass | null>(null);
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
-
 </script>
 
 <template>
@@ -24,32 +22,28 @@ const onSwiper = (swiper: SwiperClass) => {
         ref="sectionTarget"
         class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
     >
-
         <div class="w-full relative translate-y-[-200px] z-10">
             <div class="flex-col-center gap-6">
                 <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
-                   دسته بندی ها
+                    دسته بندی ها
                 </span>
-                <p class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
+                <p
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها
+                    class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl"
-                    و
+                >
-                    متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
+                    با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
+                    و مجله در ستون و سطرآنچنان که
                 </p>
             </div>
         </div>
 
-
         <div class="w-full my-20 relative">
-            <video
+            <img
-                class="aspect-square w-[450px] translate-[-293px] absolute left-1/2 -translate-x-1/2 z-10"
+                class="aspect-square w-[450px] translate-[-309px] absolute left-1/2 -translate-x-1/2 z-10"
                 :style="{
                     filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                 }"
-                src="/video/heymlz/heymlz-handshake-part-1.webm"
+                src="/img/heymlz/heymlz-seat.gif"
-                autoplay
-                playsinline
-                webkit-playsinline
-                muted
             />
             <Swiper
                 :loop="true"
@@ -60,12 +54,12 @@ const onSwiper = (swiper: SwiperClass) => {
                 :breakpoints="{
                     640: {
                         centeredSlides: true,
-                        slidesPerView : 2.65
+                        slidesPerView: 2.65,
                     },
-                    1024 : {
+                    1024: {
                         centeredSlides: true,
-                        slidesPerView : 3.65
+                        slidesPerView: 3.65,
-                    }
+                    },
                 }"
             >
                 <SwiperSlide
@@ -108,12 +102,14 @@ const onSwiper = (swiper: SwiperClass) => {
 
         <div class="w-full flex justify-center items-center">
             <NuxtLink to="/category">
-                <Button variant="primary" class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+                <Button
-                        end-icon="ci:arrow-left">
+                    variant="primary"
+                    class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+                    end-icon="ci:arrow-left"
+                >
                     مشاهده همه دسته ها
                 </Button>
             </NuxtLink>
         </div>
-
     </section>
-</template>
+</template>

frontend/components/home/ProductsShowcase.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import useHomeData from "~/composables/api/home/useHomeData";
@@ -21,26 +20,32 @@ onMounted(() => {
 
     setTimeout(() => {
         showcaseElements.forEach((element, index) => {
-
+            gsapTimeline.fromTo(
-            gsapTimeline.fromTo(element, index === 0 ? {
+                element,
-                opacity: 1,
+                index === 0
-                scale: 1,
+                    ? {
-                // rotateX: -25,
+                          opacity: 1,
-                top: 0,
+                          scale: 1,
-                ease: "none"
+                          // rotateX: -25,
-            } : {
+                          top: 0,
-                opacity: 0,
+                          ease: "none",
-                scale: 1,
+                      }
-                // rotateX: -25,
+                    : {
-                top: 20,
+                          opacity: 0,
-                ease: "none"
+                          scale: 1,
-            }, {
+                          // rotateX: -25,
-                opacity: 1,
+                          top: 20,
-                scale: 1,
+                          ease: "none",
-                // rotateX: 0,
+                      },
-                top: 0,
+                {
-                ease: "none"
+                    opacity: 1,
-            }, index === 0 ? "-=0%" : undefined);
+                    scale: 1,
+                    // rotateX: 0,
+                    top: 0,
+                    ease: "none",
+                },
+                index === 0 ? "-=0%" : undefined
+            );
 
             if (index < showcaseElements.length - 1) {
                 gsapTimeline.to(element, {
@@ -48,10 +53,9 @@ onMounted(() => {
                     scale: 1.03,
                     // rotateX: 25,
                     top: -20,
-                    ease: "none"
+                    ease: "none",
                 });
             }
-
         });
 
         scrollTrigger = ScrollTrigger.create({
@@ -62,14 +66,13 @@ onMounted(() => {
             start: "top top",
             anticipatePin: 1,
             // markers: true,
-            end: "bottom top"
+            end: "bottom top",
         });
 
         setTimeout(() => {
             scrollTrigger.update();
             scrollTrigger.refresh();
         }, 1000);
-
     }, 1000);
 });
 
@@ -77,7 +80,6 @@ onUnmounted(() => {
     gsapTimeline.progress(1).pause();
     gsapTimeline.kill();
 });
-
 </script>
 
 <template>
@@ -100,14 +102,24 @@ onUnmounted(() => {
                     }"
                     alt=""
                 />
-                <div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
+                <div
-                    <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
+                    class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20"
+                >
+                    <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-[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">
+                    <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>
-                    <NuxtLink :to="slide.link">
+                    <NuxtLink :to="slide.link" class="relative">
+                        <NuxtImg
+                            src="/img/heymlz/heymlz-falling.gif"
+                            class="absolute top-[134px] left-1/2 -translate-1/2 w-[250px]"
+                        />
                         <Button
                             variant="primary"
                             end-icon="ci:arrow-left"
@@ -120,4 +132,4 @@ onUnmounted(() => {
             </NuxtLink>
         </div>
     </section>
-</template>
+</template>