feat : add section (productList , bestQuality) in shop page

src/components/productBox/index.tsx

@@ -0,0 +1,50 @@
+import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
+import { ProductBoxProps } from "../../types/props";
+import Button from "../button";
+
+const ProductBox = ({
+  title,
+  space,
+  users,
+  price,
+  btnText,
+  variant,
+}: ProductBoxProps) => {
+  return (
+    <div
+      className={`p-4 w-full h-full flex flex-col gap-3 justify-center items-center rounded-lg shadow-inner ${
+        variant === 1
+          ? "shadow-purple-800 bg-purple-600"
+          : variant === 2
+          ? "shadow-orange-800 bg-orange-600"
+          : variant === 3 && "shadow-indigo-800 bg-indigo-600"
+      } bg-cover bg-center bg-banner`}
+    >
+      <h1 className="max-md:text-xl md:text-2xl font-bold">{title}</h1>
+      <div className="w-full h-full p-2 flex gap-2 justify-between items-center">
+        <div className="w-full h-full flex flex-col gap-2">
+          <h2 className="max-md:text-lg md:text-xl text-center">{space} گیگ</h2>
+          <p className="max-md:text-sm md:text-lg text-center">
+            {users} کاربره
+          </p>
+        </div>
+        <div className="w-full h-full gap-4 grid grid-cols-3">
+          <GA className="w-5 lg:w-7 rounded-md" />
+          <US className="w-5 lg:w-7 rounded-md" />
+          <EC className="w-5 lg:w-7 rounded-md" />
+          <AM className="w-5 lg:w-7 rounded-md" />
+          <GB className="w-5 lg:w-7 rounded-md" />
+          <GD className="w-5 lg:w-7 rounded-md" />
+        </div>
+      </div>
+      <div className="w-full h-full bg-purple-950 text-center rounded-lg md:text-xl font-bold shadow-inner shadow-purple-600 px-4 py-2">
+        {price} تومان
+      </div>
+      <div className="w-full h-full grid grid-cols-1">
+        <Button extra="shadow-inner shadow-gray-400">{btnText}</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductBox;