feat(ProductList.tsx): Added link to support chat and wrapped offline buy image in a link

src/pages/shop/section/productList/ProductList.tsx

@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import useAxios from "../../../../hooks/useAxios";
 import { RootState } from "../../../../redux/store";
 import { useSelector } from "react-redux";
-import offlineBuy from "../../../../assets/cover/offline-buy.jpg"
+import offlineBuy from "../../../../assets/cover/offline-buy.jpg";
 
 const ProductList = () => {
   const { id } = useSelector((state: RootState) => state.configIdState);
@@ -26,9 +26,16 @@ const ProductList = () => {
   return (
     <div className="relative w-full h-full max-md:mt-4 md:mt-8 " id="configs">
       <div className="w-full h-full gap-4 md:gap-6 flex flex-col p-5 justify-center items-center">
-      <div className="w-full h-auto"> 
-          <img src={offlineBuy} alt="offline buy" className="mx-auto rounded-lg w-full
-           max-w-[900px]"/>
+        <div className="w-full h-auto">
+          <div className="mx-auto rounded-lg w-full max-w-[900px] bg-white">
+            <a href="https://t.me/PersianPingSupport" target="_blank">
+              <img
+                src={offlineBuy}
+                alt="offline buy"
+                className="rounded-lg w-full h-full"
+              />
+            </a>
+          </div>
         </div>
         <h1 className="max-md:text-sm text-center text-2xl font-bold">
           برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده شود