added products page

frontend/pages/products.vue

@@ -2,19 +2,27 @@
 
 <template>
     <div class="w-full container flex flex-col">
-        <div class="w-full flex justify-between items-center py-[5rem]">
-            <div class="flex flex-col items-start gap-[1.5rem] text-black">
-                <div class="flex-center gap-[.75rem]">
+        <div class="w-full flex justify-end items-center py-[5rem]">
+            <div
+                class="flex flex-col items-start gap-[1.5rem] text-black w-full"
+            >
+                <!-- <div class="flex-center gap-[.75rem]">
                     <span>خانه</span>
                     <span>/</span>
                     <span>محصولات</span>
                     <span>/</span>
                     <span>همه</span>
-                </div>
+                </div> -->
                 <h1 class="typo-hero-2">همه محصولات</h1>
             </div>
 
-            <FilterButton />
+            <div class="w-full flex items-center justify-end gap-4">
+                <Input
+                    placeholder="جست و جو محصول ..."
+                    class="bg-slate-50 !border-slate-200 hover:border-slate-300 focus:!border-slate-800 w-8/12"
+                />
+                <FilterButton />
+            </div>
         </div>
         <ul class="w-full grid grid-cols-3 gap-[1.5rem]">
             <li v-for="i in 9" :key="i">