From e94104b115a0372b4f354a17f0e31ad99d006291 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 21 Dec 2024 19:45:59 +0330
Subject: [PATCH] Create category card component

---
 frontend/components/global/CategoryCard.vue | 47 +++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 frontend/components/global/CategoryCard.vue

diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
new file mode 100644
index 0000000..f62fa67
--- /dev/null
+++ b/frontend/components/global/CategoryCard.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+// types
+
+type Props = {
+    category: string;
+    count: number;
+    description: string;
+    picture: string;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div class="relative rounded-150 overflow-hidden w-full h-[500px]">
+        <img
+            class="absolute object-cover size-full"
+            :src="picture"
+            alt=""
+        />
+        <div class="bg-linear-to-t from-black/80 to-transparent absolute z-10 size-full" />
+
+        <div class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full">
+
+            <div class="flex flex-col gap-2 text-white">
+                <div class="typo-s-h-md">
+                    تمام دسته ها
+                    <span class="typo-p-xs -translate-y-1 inline-block mr-1">
+                        24
+                    </span>
+                </div>
+                <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
+            </div>
+
+            <Icon
+                size="24"
+                name="ci:arrow-left"
+                class="**:stroke-white mb-1"
+            />
+
+        </div>
+    </div>
+</template>
\ No newline at end of file