(force) Update project: Added 60 new features and made various changes

{warning: this all chnaged}

src/pages/landing/index.tsx

@@ -0,0 +1,37 @@
+import { Helmet } from "react-helmet-async";
+import BestQuality from "./section/bestQuality/BestQuality";
+import FastSell from "./section/fastSell/FastSell";
+import Intro from "./section/intro/Intro";
+import NowSell from "./section/nowSell/NowSell";
+import ProductList from "./section/productList/ProductList";
+
+const Landing = () => {
+  return (
+    <>
+      <Helmet>
+        <title>پرشین پینگ | فروشگاه </title>
+        <meta
+          name="description"
+          content="پرشین پینگ - بهترین خدمات برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات بازی آنلاین, فروشگاه"
+        />
+        <meta name="robots" content="index, follow" />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Intro />
+          <FastSell />
+          <NowSell />
+          <ProductList />
+          <BestQuality />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Landing;

src/pages/landing/section/bestQuality/BestQuality.tsx

@@ -0,0 +1,25 @@
+import PulsatingCircle from "../../../../components/pulsatingCircle";
+
+const BestQuality = () => {
+  return (
+    <div className="w-full h-full mt-8 md:mt-10 mb-10 flex gap-10 flex-col justify-center items-center">
+      <div className="w-full h-full flex justify-center items-center">
+        <PulsatingCircle />
+      </div>
+      <div className="w-full h-full flex flex-col gap-2 md:gap-4 justify-center items-center">
+        <h1 className="text-base md:text-3xl lg:text-4xl font-bold">
+          به عنوان{" "}
+          <span className="text-base md:text-3xl lg:text-4xl text-secondTheme font-bold">
+            اولین و بهترین
+          </span>{" "}
+          ارائه دهنده{" "}
+        </h1>
+        <h1 className="relative max-md:right-5 max-lg:right-20 lg:right-40 text-base md:text-3xl lg:text-4xl font-bold">
+          مفتخریم که در خدمت شما باشیم
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default BestQuality;

src/pages/landing/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 mb-6 flex justify-center items-center">
+      <div className="w-full h-full flex flex-col 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/landing/section/intro/Intro.tsx

@@ -0,0 +1,34 @@
+import Button from "../../../../components/button";
+
+import Rocket3D from "../../../../assets/ui/Rocket.png";
+import SmoothScrollLink from "../../../../components/scrollLink";
+
+const Intro = () => {
+  return (
+    <div className="relative w-full h-full gap-6 grid grid-cols-1 py-6 md:grid-cols-2">
+      <div className="w-full h-full flex flex-col max-md:gap-5 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 text-center">بزرگترین فروشگاه</span>
+          <span className="text-secondTheme font-bold max-md:text-center">
+            خرید سی پی تنها با چند کلیک
+          </span>
+        </h1>
+        <p className="text-center text-xl text-gray-600">
+          سال ها تجربه پشت یک خرید شماست
+        </p>
+        <SmoothScrollLink to="#configs">
+          <Button >برو به فروشگاه</Button>
+        </SmoothScrollLink>
+      </div>
+      <div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden">
+        <img
+          src={Rocket3D}
+          alt="intro"
+          className="w-60 md:w-72 lg:w-[25rem] animate-bounce"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Intro;

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

@@ -0,0 +1,13 @@
+import Content from "./components/Content";
+
+const NowSell = () => {
+  return (
+    <div className="relative w-full h-full 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/landing/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/landing/section/productList/ProductList.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import ButtonList from "./components/ButtonList";
+import ListAllProduct from "./components/ListAllProduct";
+
+const ProductList = () => {
+  const [activeId, setActiveId] = useState<number>(0);
+
+  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">
+        <h1 className="max-md:text-sm text-center text-2xl font-bold">
+          برای انتخاب سی پی یا جم مورد نظر کلیک کنید تا براتون نمایش داده شود
+        </h1>
+        <ButtonList
+          activeId={activeId}
+          setActiveId={setActiveId}
+        />
+        <ListAllProduct activeId={activeId} />
+      </div>
+    </div>
+  );
+};
+
+export default ProductList;

src/pages/landing/section/productList/components/ButtonList.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react";
+import Button from "../../../../../components/button";
+
+const ButtonList = ({ activeId, setActiveId } : {activeId:number;setActiveId:Dispatch<SetStateAction<number>>}) => {
+  const ProductsList: { id: number; name: string; label?: string }[] = [
+    { id: 0, name: "یوسی پابجی", label: "uc pubg" },
+    { id: 1, name: "سی پی کالاف", label: "cp callof" },
+    { id: 2, name: "جم کلش", label: "gem clash" },
+  ];
+  return (
+    <div className="w-full h-full gap-4 flex flex-wrap flex-row justify-center">
+      {ProductsList?.map((product) => (
+        <Button
+          key={product.id}
+          active={product.id === activeId}
+          extra="md:py-2 md:text-lg max-sm:!px-1"
+          name={product.label || product.name}
+          onClick={() => setActiveId(product.id)}
+        >
+          {product.name}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export default ButtonList;

src/pages/landing/section/productList/components/ListAllProduct.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import Button from "../../../../../components/button";
+
+import clash1 from "../../../../../assets/product-image/clash/clashofclans-gem500.png";
+import clash2 from "../../../../../assets/product-image/clash/clashofclans-gem1200.png";
+import clash3 from "../../../../../assets/product-image/clash/clashofclans-gem2500.png";
+import clash4 from "../../../../../assets/product-image/clash/clashofclans-gem6500.png";
+
+import pubg1 from "../../../../../assets/product-image/pubg/uc-pubgmobile63.png";
+import pubg2 from "../../../../../assets/product-image/pubg/uc-pubgmobile340.png";
+import pubg3 from "../../../../../assets/product-image/pubg/uc-pubgmobile690.png";
+import pubg4 from "../../../../../assets/product-image/pubg/uc-pubgmobile1875.png";
+
+import callof1 from "../../../../../assets/product-image/callof/cp-callofduty80.png";
+import callof2 from "../../../../../assets/product-image/callof/cp-callofduty360.png";
+import callof3 from "../../../../../assets/product-image/callof/cp-callofduty880.png";
+import callof4 from "../../../../../assets/product-image/callof/cp-callofduty2400.png";
+
+const ListAllProduct = ({ activeId }: { activeId: number }) => {
+  const allProducts = [
+    [
+      { id: 1, title: "پابجی 1", image: pubg1 },
+      { id: 2, title: "پابجی 2", image: pubg2 },
+      { id: 3, title: "پابجی 3", image: pubg3 },
+      { id: 4, title: "پابجی 4", image: pubg4 },
+    ],
+    [
+      { id: 1, title: "کالاف 1", image: callof1 },
+      { id: 2, title: "کالاف 2", image: callof2 },
+      { id: 3, title: "کالاف 3", image: callof3 },
+      { id: 4, title: "کالاف 4", image: callof4 },
+    ],
+
+    [
+      { id: 1, title: "جم کلش 1", image: clash1 },
+      { id: 2, title: "جم کلش 2", image: clash2 },
+      { id: 3, title: "جم کلش 3", image: clash3 },
+      { id: 4, title: "جم کلش 4", image: clash4 },
+    ],
+  ];
+  const [product, setProduct] = useState(allProducts[activeId]);
+  useEffect(() => {
+    setProduct(allProducts[activeId]);
+  }, [activeId]);
+
+  return (
+    <>
+      <div
+        className="w-full h-full border-4 gap-5 border-spacing-1 shadow-lg shadow-white border-solid border-white rounded-lg p-3 grid max-sm:grid-cols-1 max-md:grid-cols-2 max-lg:grid-cols-3 lg:grid-cols-4"
+        id="listConfig"
+      >
+        {product.map((item) => {
+          return (
+            <div className="w-full h-full flex flex-col" key={item.id}>
+              <img src={item.image} alt={item.title} />
+              <div className="w-full h-full flex justify-center items-center">
+                <Button extra="!w-4/5">خرید</Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default ListAllProduct;