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

src/components/loaderSpin/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const LoaderSpin = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <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"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          strokeWidth="4"
+          strokeDasharray={126}
+          strokeDashoffset={126}
+        ></circle>
+      </svg>
+      <div className="absolute left-1/2 -translate-x-1/2">{children}</div>
+    </div>
+  );
+};
+
+export default LoaderSpin;

src/components/particle/index.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import {
+  type Container,
+  type ISourceOptions,
+  MoveDirection,
+  OutMode,
+} from "@tsparticles/engine";
+// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
+// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
+
+export default function Particle() {
+  const [init, setInit] = useState(false);
+
+  // this should be run only once per application lifetime
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+      // starting from v2 you can add only the features you need reducing the bundle size
+      //await loadAll(engine);
+      //await loadFull(engine);
+      await loadSlim(engine);
+      //await loadBasic(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const particlesLoaded = async (container?: Container): Promise<void> => {
+    console.log(container);
+  };
+
+  const options: ISourceOptions = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: "",
+        },
+      },
+      fpsLimit: 120,
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: "push",
+          },
+          onHover: {
+            enable: true,
+            mode: "repulse",
+          },
+        },
+        modes: {
+          push: {
+            quantity: 4,
+          },
+          repulse: {
+            distance: 200,
+            duration: 0.4,
+          },
+        },
+      },
+      particles: {
+        color: {
+          value: "#ffffff",
+        },
+        links: {
+          color: "#ffffff",
+          distance: 150,
+          enable: true,
+          opacity: 0.5,
+          width: 1,
+        },
+        move: {
+          direction: MoveDirection.none,
+          enable: true,
+          outModes: {
+            default: OutMode.out,
+          },
+          random: false,
+          speed: 3,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+          },
+          value: 80,
+        },
+        opacity: {
+          value: 0.5,
+        },
+        shape: {
+          type: "circle",
+        },
+        size: {
+          value: { min: 1, max: 5 },
+        },
+      },
+      detectRetina: true,
+    }),
+    []
+  );
+
+  if (init) {
+    return (
+      <Particles
+        id="tsparticles"
+        particlesLoaded={particlesLoaded}
+        options={options}
+      />
+    );
+  }
+
+  return <></>;
+}

src/components/pulsatingCircle/index.tsx

@@ -0,0 +1,14 @@
+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>
+      <div className="absolute w-24 h-24 border-4 border-yellow-400 rounded-full animate-pulse delay-75"></div>
+    </div>
+  );
+};
+
+export default PulsatingCircle;

src/components/typeWriter/index.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { TypewriterProps } from "../../types/props";
+
+const Typewriter = ({ text, speed = 100 }: TypewriterProps) => {
+  const [displayedText, setDisplayedText] = useState<string>("");
+  const [index, setIndex] = useState<number>(0);
+
+  useEffect(() => {
+    if (index < text.length) {
+      const timeoutId = setTimeout(() => {
+        setDisplayedText((prev) => prev + text.charAt(index));
+        setIndex((prev) => prev + 1);
+      }, speed);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [index, text, speed]);
+
+  return (
+    <div>
+      <h1 className="text-2xl md:text-3xl lg:text-4xl relative text-center">
+        {displayedText}
+      </h1>
+    </div>
+  );
+};
+
+export default Typewriter;