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

src/components/button/index.tsx

@@ -1,9 +1,13 @@
 import { ButtonProps } from "../../types/props";
 
-function Button({ children, onClick, extra }: ButtonProps) {
+function Button({ children, onClick, extra, active }: ButtonProps) {
   return (
     <button
-      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${extra}`}
+      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${
+        active
+          ? "bg-yellow-600 shadow-yellow-600 hover:shadow-gray-600 shadow-lg text-white"
+          : ""
+      } ${extra}`}
       onClick={onClick}
     >
       {children}

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;

src/components/pulsatingCircle/index.tsx

@@ -2,11 +2,11 @@ import { FC } from "react";
 
 const PulsatingCircle: FC = () => {
   return (
-    <div className="relative flex justify-center items-center w-52 h-52">
-      <div className="absolute flex justify-center items-center w-24 h-24 border-4 border-yellow-400 rounded-full z-10">
-        <span className="text-4xl text-yellow-400">1</span>
+    <div className="relative flex justify-center items-center w-full h-full">
+      <div className="relative flex justify-center items-center max-md:w-32 max-md:h-32 w-52 h-52 max-md:border-[10px] border-[15px] border-yellow-600 rounded-full z-10">
+        <span className="text-6xl md:text-8xl text-white">1</span>
       </div>
-      <div className="absolute w-24 h-24 border-4 border-yellow-400 rounded-full animate-pulse delay-75"></div>
+      <div className="absolute max-md:w-32 max-md:h-32 w-52 h-52 border-4 border-yellow-600 rounded-full animate-pulse"></div>
     </div>
   );
 };