From 232c0fb5ee81eeaf3649aca8a9eec83755fe0bcd Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Tue, 4 Feb 2025 23:40:59 +0330
Subject: [PATCH] Add gradient to categories section

---
 frontend/components/home/Categories.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index a95a60f..15afeae 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -29,13 +29,20 @@ const onSwiper = (swiper: SwiperClass) => {
 </script>
 
 <template>
-    <section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40">
-        <div class="w-full flex justify-center items-center">
+    <section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40 relative overflow-hidden">
+
+        <div class="w-full flex justify-center items-center relative z-10">
             <span class="text-white 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"
+            alt=""
+        />
+
         <div class="w-full my-20 relative">
             <Swiper
                 :loop="true"