feat : change color theme second custom

src/components/header/components/navbar/NavbarLink.tsx

@@ -7,7 +7,7 @@ const NavbarLink = ({ to, children, onClick }: NavbarLinkProps) => {
       to={to}
       className={(navData: NavData) =>
         navData.isActive
-          ? "block px-2 mx-3 py-2 text-base font-medium text-yellow-600 border-b-2 border-yellow-600"
+          ? "block px-2 mx-3 py-2 text-base font-medium text-secondTheme border-b-2 border-secondTheme"
           : "block px-2 mx-3 py-2 rounded-md text-base font-medium text-white"
       }
       onClick={onClick}

src/components/loaderSpin/index.tsx

@@ -5,7 +5,7 @@ const LoaderSpin = ({ children }: { children: React.ReactNode }) => {
     <div className="relative w-full h-full flex justify-center items-center">
       <svg className="max-md:w-32 max-md:h-32 w-52 h-52" viewBox="0 0 50 50">
         <circle
-          className="path stroke-yellow-600"
+          className="path stroke-secondTheme"
           cx="25"
           cy="25"
           r="20"

src/components/particle/index.tsx

@@ -87,7 +87,7 @@ export default function Particle() {
           density: {
             enable: false,
           },
-          value: 80,
+          value: 15,
         },
         opacity: {
           value: 0.5,

src/components/productBox/index.tsx

@@ -1,6 +1,8 @@
 import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
 import { ProductBoxProps } from "../../types/props";
 import Button from "../button";
+import MuiModal from "../../common/modal";
+import { useState } from "react";
 
 const ProductBox = ({
   title,
@@ -10,6 +12,10 @@ const ProductBox = ({
   btnText,
   variant,
 }: ProductBoxProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleModal = () => {
+    setIsOpen(true);
+  };
   return (
     <div
       className={`p-4 w-full h-full flex flex-col gap-3 justify-center items-center rounded-lg shadow-inner ${
@@ -20,6 +26,7 @@ const ProductBox = ({
           : variant === 3 && "shadow-indigo-800 bg-indigo-600"
       } bg-cover bg-center bg-banner`}
     >
+      <MuiModal isOpenModal={isOpen} setIsOpenModal={setIsOpen} />
       <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">
@@ -41,7 +48,12 @@ const ProductBox = ({
         {price} تومان
       </div>
       <div className="w-full h-full grid grid-cols-1">
-        <Button extra="shadow-inner shadow-gray-400">{btnText}</Button>
+        <Button
+          extra="shadow-inner shadow-gray-400"
+          onClick={() => toggleModal()}
+        >
+          {btnText}
+        </Button>
       </div>
     </div>
   );

src/components/pulsatingCircle/index.tsx

@@ -3,10 +3,10 @@ import { FC } from "react";
 const PulsatingCircle: FC = () => {
   return (
     <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">
+      <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-secondTheme rounded-full z-10">
         <span className="text-6xl md:text-8xl text-white">1</span>
       </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 className="absolute max-md:w-32 max-md:h-32 w-52 h-52 border-4 border-secondTheme rounded-full animate-pulse"></div>
     </div>
   );
 };