feat : add section fastSell and add section nowSell and add particle bg

src/pages/shop/index.tsx

@@ -1,11 +1,15 @@
-import Alert from "../../components/alert/Alert";
+import FastSell from "./section/fastSell/FastSell";
+import Intro from "./section/intro/Intro";
+import NowSell from "./section/nowSell/NowSell";
 
 const Shop = () => {
   return (
-    <div className="relative w-full h-full px-4 py-2">
-      <Alert type="warning" message="">
-        به زودی صفحه فروشگاه اضافه می شود
-      </Alert>
+    <div className="relative w-full h-full py-2">
+      <div className="relative w-full h-full glass px-4 py-2">
+        <Intro />
+        <FastSell />
+        <NowSell />
+      </div>
     </div>
   );
 };

src/pages/shop/section/fastSell/FastSell.tsx

@@ -0,0 +1,19 @@
+import { FaPowerOff } from "react-icons/fa6";
+import LoaderSpin from "../../../../components/loaderSpin";
+import Typewriter from "../../../../components/typeWriter";
+
+const FastSell = () => {
+  return (
+    <div className="relative w-full h-full md:mt-14 mb-8 flex justify-center items-center">
+      <div className="w-full h-full flex flex-col gap-5 justify-center items-center">
+        <LoaderSpin>
+          <FaPowerOff className="max-md:text-6xl text-8xl text-white" />
+        </LoaderSpin>
+        <Typewriter text="میبینی ؟ همینقدر" />
+        <Typewriter text="ساده و سریــــــــــــــع" />
+      </div>
+    </div>
+  );
+};
+
+export default FastSell;

src/pages/shop/section/intro/Intro.tsx

@@ -0,0 +1,30 @@
+import Button from "../../../../components/button";
+
+const Intro = () => {
+  return (
+    <div className="relative w-full h-full md:pt-40 mb-16 md:mb-32 gap-6 grid grid-cols-1 py-8 md:grid-cols-2">
+      <div className="w-full h-full flex flex-col gap-8 justify-center mx-auto items-center">
+        <h1 className="text-start flex flex-col gap-3 md:gap-4 text-3xl md:text-4xl lg:text-5xl">
+          <span className="inline-block">بزرگترین فروشگاه</span>
+          <span className="text-yellow-600 font-bold max-md:text-center">
+            کاهش پینگ
+          </span>{" "}
+          <span className="inline-block max-md:text-center">در ایران</span>
+        </h1>
+        <p className="text-center text-xl text-gray-600">
+          سال ها تجربه پشت یک کانفیگ شماست
+        </p>
+        <Button>همین الان میخرم</Button>
+      </div>
+      <div className="w-full h-full flex justify-center py-4 mx-auto items-center">
+        <img
+          src="https://persain-game.com/front_end/img/Iphone%2015.png"
+          alt="intro"
+          className="w-60 md:w-72 lg:w-80"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Intro;

src/pages/shop/section/nowSell/NowSell.tsx

@@ -0,0 +1,13 @@
+import Content from "./components/Content";
+
+const NowSell = () => {
+  return (
+    <div className="relative w-full h-full mt-16 p-5">
+      <div className="relative w-full max-md:h-[15rem] md:h-[20rem] lg:h-[25rem] p-2 rounded-2xl bg-white shadow-lg bg-banner bg-center bg-cover shadow-current flex justify-center items-center">
+        <Content />
+      </div>
+    </div>
+  );
+};
+
+export default NowSell;

src/pages/shop/section/nowSell/components/Content.tsx

@@ -0,0 +1,23 @@
+import Button from "../../../../../components/button";
+
+const Content = () => {
+  return (
+    <div className="w-full h-full flex flex-col text-center max-md:gap-3 gap-5 justify-center text-black items-center max-md:py-5 px-5 py-10">
+      <h1 className="text-4xl max-md:text-2xl lg:text-5xl font-bold">
+        با چندین سال
+      </h1>
+      <h1 className="text-4xl max-md:text-2xl lg:text-5xl font-bold">
+        تجربـــــــــــــــــــه
+      </h1>
+      <p className="text-2xl max-md:text-sm text-gray-500">
+        بهترین نتیجه رو بهتون تقدیم میکنیم
+      </p>
+      <Button extra="!bg-black text-white text-2xl max-md:text-lg max-md:!py-2 mt-4 !py-4 !px-10 !rounded-xl">
+        {" "}
+        همین الان میخرم
+      </Button>
+    </div>
+  );
+};
+
+export default Content;

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

@@ -0,0 +1,5 @@
+const ProductList = () => {
+  return <div className="relative w-full h-full"></div>;
+};
+
+export default ProductList;

src/pages/tutorial/section/Tutorials.tsx

@@ -15,22 +15,10 @@ const Tutorials = () => {
     },
     {
       id: 3,
-      name: "آموزش cisco در اندروید",
-    },
-    {
-      id: 4,
-      name: "آموزش cisco در آیفون",
-    },
-    {
-      id: 5,
       name: "آموزش سرویس مولتی",
     },
     {
-      id: 6,
-      name: "آموزش cisco در ویندوز",
-    },
-    {
-      id: 7,
+      id: 4,
       name: "آموزش open vpn در اندروید",
     },
   ];

src/pages/tutorial/section/components/Leran.tsx

@@ -20,35 +20,21 @@ const Learn = ({ activeTutorial, tutorialList }: LearnProps) => {
     {
       id: 3,
       images: [
-        { urlimg: "https://persain-game.com/front_end/img/cisco-android1.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-android2.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-android3.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
       ],
     },
     {
       id: 4,
       images: [
-        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone1.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone2.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone3.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
       ],
     },
-    {
-      id: 5,
-      images: [],
-    },
-    {
-      id: 6,
-      images: [
-        { urlimg: "https://persain-game.com/front_end/img/cisco-pc.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-pc2.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/cisco-pc3.jpg" },
-      ],
-    },
-    {
-      id: 7,
-      images: [],
-    },
   ];
   const [loading, setLoading] = useState<boolean>(true);
   const [list, setList] = useState(
@@ -85,12 +71,13 @@ const Learn = ({ activeTutorial, tutorialList }: LearnProps) => {
               {tutorialImagesState?.map((i) => {
                 return (
                   <div key={i.id}>
-                    {i.images?.map((item) => {
+                    {i.images?.map((item, index) => {
                       return (
                         <img
                           className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
                           src={item.urlimg}
                           alt="images"
+                          key={index}
                           onLoad={(e) => handleLoadingImage(e)}
                         />
                       );