ScroolToTop icon button

components/pageParts/products.tsx

@@ -36,14 +36,14 @@ export default function Products() {
       </div>
 
       {/* product filters */}
-      <div className="flex flex-wrap gap-3 items-center justify-center">
+      <div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
         {productFilterTypes.map((item, index) => (
           <button
             key={index}
             onClick={() => setProductFilter(item.name)}
             className={`${
               productFilter === item.name ? "bg-secondary" : ""
-            } flex items-center gap-2 hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-8 py-3 text-2xl rounded-tr-full rounded-bl-full `}
+            } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
           >
             <Text txt={item.name} />
             <Image
@@ -51,6 +51,7 @@ export default function Products() {
               alt="Truck images"
               width={50}
               height={50}
+              className="object-cover"
             />
           </button>
         ))}