Merge remote-tracking branch 'origin/main'

backend/product/views.py

@@ -146,7 +146,12 @@ class AllProductsView(APIView):
         try:
             category_id = request.query_params.get('category', None)
             if category_id:
-                sub_category = get_object_or_404(SubCategoryModel, pk=int(category_id))
+                try:
+                    category_id = int(category_id)
+                except ValueError:
+                    return Response({'detail': 'value error category id should be a number'}, status=status.HTTP_400_BAD_REQUEST)
+
+                sub_category = get_object_or_404(SubCategoryModel, pk=category_id)
                 products = ProductModel.objects.filter(category=sub_category)
             else:
                 products = ProductModel.objects.all()
@@ -167,8 +172,11 @@ class AllProductsView(APIView):
                 products = products.filter(Q(name__icontains=search_query) | Q(description__icontains=search_query))
 
             # Price filters
-            price_gte = request.query_params.get('price_gte', None)
+            try:
-            price_lte = request.query_params.get('price_lte', None)
+                price_gte = int(request.query_params.get('price_gte', None))
+                price_lte = int(request.query_params.get('price_lte', None))
+            except:
+                return Response({'detail': 'value error price_gte and price_lte should be a number'}, status=status.HTTP_400_BAD_REQUEST)
             if price_gte:
                 products = products.filter(price__gte=price_gte)
             if price_lte:

frontend/assets/css/tailwind.css

@@ -121,12 +121,18 @@
     --breakpoint-xs: 480px;
 
     /* ANIMATIONS */
-    --animate-marquee: marquee 3s linear infinite;
+    --animate-marquee: marquee 20s linear infinite;
+    --animate-marquee-reverse: marquee 20s linear infinite reverse;
     --animate-slide-down: slideDown 300ms ease-out;
     --animate-slide-up: slideUp 300ms ease-out;
     --animate-overlay-show: overlayShow 150ms ease-in;
     --animate-content-show: contentShow 150ms ease-in;
 
+    --animate-slide-down-fade: slideDownAndFade 300ms ease-out;
+    --animate-slide-left-fade: slideLeftAndFade 300ms ease-out;
+    --animate-slide-up-fade: slideUpAndFade 300ms ease-out;
+    --animate-slide-right-fade: slideRightAndFade 300ms ease-out;
+
     --animate-toast-hide: toastHide 100ms ease-in;
     --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
     --animate-toast-out: toastSlideOut 200ms ease-out;
@@ -205,6 +211,50 @@
             transform: translateX(calc(100% + var(--viewport-padding)));
         }
     }
+
+    @keyframes slideDownAndFade {
+        from {
+            opacity: 0;
+            transform: translateY(-2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideLeftAndFade {
+        from {
+            opacity: 0;
+            transform: translateX(2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideUpAndFade {
+        from {
+            opacity: 0;
+            transform: translateY(2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideRightAndFade {
+        from {
+            opacity: 0;
+            transform: translateX(-2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
 }
 
 /* CONTAINER */

frontend/components/cart/AddressModal.vue

@@ -188,7 +188,7 @@ const addNew = () => {
                             id="address"
                             placeholder="آدرس خود را بنویسید"
                             v-model="addressData.full_address"
-                            class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 text-sm placeholder-slate-400"
+                            class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
                         ></textarea>
                     </div>
                 </div>

frontend/components/global/Brands.vue

@@ -1,52 +1,34 @@
 <script setup lang="ts">
-
 // types
 
 type Props = {
     // brands: string[];
-}
+};
 
 // props
 
 const props = defineProps<Props>();
 const {} = toRefs(props);
-
-// state
-
-const { $gsap: gsap } = useNuxtApp();
-
-// lifecycle
-
-onMounted(() => {
-    gsap.to("#marquee-text-container", {
-        xPercent: -50, // Adjust based on content width
-        duration: 10,  // Adjust for desired speed
-        ease: "none",
-        repeat: -1
-    });
-});
-
 </script>
 
 <template>
     <div class="relative w-full flex flex-col justify-center h-[350px]">
-
         <div class="-rotate-z-2 z-20">
             <div
                 class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
             >
-            <span
-                v-for="i in 10"
-                class="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"
                 >
-                TEST {{ i }}
+                    TEST {{ i }}
-            </span>
+                </span>
+                <span
+                    v-for="i in 10"
+                    class="text-[50px] text-white whitespace-nowrap font-semibold"
+                >
+                    TEST {{ i }}
+                </span>
             </div>
         </div>
 
@@ -60,14 +42,13 @@ onMounted(() => {
                 >
                     TEST {{ i }}
                 </span>
-                    <span
+                <span
-                        v-for="i in 10"
+                    v-for="i in 10"
-                        class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
-                    >
+                >
                     TEST {{ i }}
                 </span>
             </div>
         </div>
-
     </div>
-</template>
+</template>

frontend/components/global/Footer.vue

@@ -19,8 +19,8 @@
                                 class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
                             />
                             <Button
-                                class="invert rounded-100 size-[3.5rem] !**:stroke-black"
+                                class="invert rounded-100 size-[3rem] !**:stroke-black"
-                                end-icon="ci:arrow-right"
+                                end-icon="ci:arrow-left"
                             />
                         </div>
                         <span class="text-slate-400 typo-p-sm">

frontend/components/global/Header.vue

@@ -19,24 +19,24 @@ const { logout } = useAuth();
 const nav_links = ref<NavLink[]>([
     {
         title: "خانه",
-        path: "/"
+        path: "/",
     },
     {
         title: "محصولات",
-        path: "/products"
+        path: "/products",
     },
     {
         title: "دسته بندی ها",
-        path: "/category"
+        path: "/category",
     },
     {
         title: "ارتباط با ما",
-        path: "#"
+        path: "/contact-us",
     },
     {
         title: "امکانات",
-        path: "#"
+        path: "#",
-    }
+    },
 ]);
 </script>
 
@@ -60,13 +60,25 @@ const nav_links = ref<NavLink[]>([
                         />
                     </button>
                     <NuxtLink to="/signin" v-else class="flex-center">
-                        <Icon name="ci:profile" size="24px" class="**:stroke-black" />
+                        <Icon
+                            name="ci:profile"
+                            size="24px"
+                            class="**:stroke-black"
+                        />
                     </NuxtLink>
                     <NuxtLink to="/products" class="flex-center">
-                        <Icon name="ci:search" size="21px" class="**:stroke-black" />
+                        <Icon
+                            name="ci:search"
+                            size="21px"
+                            class="**:stroke-black"
+                        />
                     </NuxtLink>
                     <button class="flex-center">
-                        <Icon name="ci:cart" size="24px" class="**:stroke-black" />
+                        <Icon
+                            name="ci:cart"
+                            size="24px"
+                            class="**:stroke-black"
+                        />
                     </button>
                 </div>
 
@@ -84,7 +96,12 @@ const nav_links = ref<NavLink[]>([
             </div>
 
             <div>
-                <svg xmlns="http://www.w3.org/2000/svg" height="23" fill="none" viewBox="0 0 220 40">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="23"
+                    fill="none"
+                    viewBox="0 0 220 40"
+                >
                     <path
                         fill="#0E1534"
                         d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"
@@ -95,7 +112,6 @@ const nav_links = ref<NavLink[]>([
                     ></path>
                 </svg>
             </div>
-
         </div>
     </header>
 </template>

frontend/components/global/Select.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    modelValue: string;
+    options: string[];
+    placeholder: string;
+};
+
+type Emit = {
+    "update:modelValue": [value: string];
+};
+
+// props
+
+defineProps<Props>();
+
+// emit
+
+const emit = defineEmits<Emit>();
+
+// state
+
+const selectedValue = ref();
+
+// watch
+
+watch(
+    () => selectedValue.value,
+    (newValue) => {
+        emit("update:modelValue", newValue);
+    }
+);
+</script>
+
+<template>
+    <SelectRoot v-model="selectedValue" dir="rtl">
+        <SelectTrigger
+            class="w-full flex items-center justify-between resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black cursor-pointer transition-all border-[1.5px] gap-3 typo-label-md px-4 py-[12.5px] selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
+            aria-label="Customise options"
+        >
+            <SelectValue
+                :placeholder="placeholder"
+                class="text-slate-400 font-iran-yekan-x"
+            />
+            <Icon name="bi:chevron-down" size="16" />
+        </SelectTrigger>
+
+        <SelectPortal>
+            <SelectContent
+                data-side="bottom"
+                class="min-w-[160px] w-full bg-slate-50 border-slate-200 rounded-lg border shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-[100]"
+                :side-offset="5"
+            >
+                <SelectViewport class="p-[5px]">
+                    <SelectGroup>
+                        <SelectItem
+                            v-for="(option, index) in options"
+                            :key="index"
+                            class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                            :value="option"
+                        >
+                            <SelectItemIndicator
+                                class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                            >
+                                <Icon name="bi:check" size="20" />
+                            </SelectItemIndicator>
+                            <SelectItemText
+                                class="text-end font-iran-yekan-x text-sm"
+                            >
+                                {{ option }}
+                            </SelectItemText>
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectViewport>
+            </SelectContent>
+        </SelectPortal>
+    </SelectRoot>
+</template>
+
+<style scoped></style>

frontend/pages/contact-us.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// state
+
+const contactInfo = ref({
+    name: "",
+    email: "",
+    phone: "",
+    requestType: "",
+    message: "",
+});
+
+const requestTypes = ref(["انتقادات", "پیشنهادات", "پیگیری سفارش"]);
+
+const contactWays = ref([
+    {
+        title: "آدرس",
+        ways: [
+            {
+                type: "link",
+                title: "mlz@gmail.com",
+                path: "mailto:mlz@gmail.com",
+            },
+        ],
+    },
+    {
+        title: "آدرس الکترونیکی",
+        ways: [
+            {
+                type: "link",
+                title: "mlz2@gmail.com",
+                path: "mailto:mlz2@gmail.com",
+            },
+            {
+                type: "link",
+                title: "mlz3@gmail.com",
+                path: "mailto:mlz3@gmail.com",
+            },
+        ],
+    },
+    {
+        title: "تلفن",
+        ways: [
+            {
+                type: "link",
+                title: "+33 (0) 31-305-210",
+                path: "tel:12345678",
+            },
+        ],
+    },
+]);
+</script>
+
+<template>
+    <div class="w-full container flex flex-col">
+        <div class="w-full flex-center py-[5rem]">
+            <div
+                class="flex flex-col items-center gap-[1.5rem] text-black w-full"
+            >
+                <h1 class="typo-h-3">ارتباط با ما</h1>
+                <p>
+                    ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر
+                    سوالی که ممکن است داشته باشید تماس بگیرید.
+                </p>
+            </div>
+        </div>
+        <div class="w-full flex items-start justify-between">
+            <div class="w-8/12 flex flex-col items-start gap-16">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-[.6rem] w-full">
+                    <div class="flex flex-col items-start w-full">
+                        <Input
+                            class="w-full"
+                            placeholder="نام و نام خانوادگی"
+                        />
+                    </div>
+                    <div class="flex flex-col items-start w-full">
+                        <Input class="w-full" placeholder="پست الکترونیکی" />
+                    </div>
+                    <div class="flex flex-col items-start w-full">
+                        <Input class="w-full" placeholder="شماره تلفن" />
+                    </div>
+                    <div class="flex flex-col items-start w-full relative">
+                        <Select
+                            v-model="contactInfo.requestType"
+                            :options="requestTypes"
+                            placeholder="نوع درخواست"
+                        />
+                    </div>
+                    <div
+                        class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]"
+                    >
+                        <textarea
+                            placeholder="پیغام شما"
+                            class="w-full flex items-center resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
+                        ></textarea>
+                    </div>
+                </div>
+                <div
+                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full"
+                >
+                    <div
+                        v-for="(way, index) in contactWays"
+                        :key="index"
+                        class="flex flex-col gap-3"
+                    >
+                        <span class="text-slate-500 typo-p-md">
+                            {{ way.title }}
+                        </span>
+                        <div
+                            v-for="(link, index) in way.ways"
+                            class="flex flex-col"
+                        >
+                            <a :href="link.path" class="text-black underline">{{
+                                link.title
+                            }}</a>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-3">
+                        <span class="text-slate-500 typo-p-md">
+                            شبکه های اجتماعی
+                        </span>
+                        <div class="flex items-center gap-3">
+                            <a href="#" class="">
+                                <Icon name="bi:telegram" size="20" />
+                            </a>
+                            <a href="#" class="">
+                                <Icon name="bi:instagram" size="20" />
+                            </a>
+                            <a href="#" class="">
+                                <Icon name="bi:twitter-x" size="20" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="w-4/12 h-full bg-red-300">
+                <img src="/mlz.jpeg" class="-mt-16" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>