added particles animation

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: "export",
+    compiler: {
+        removeConsole: true,
+    },
 }
 
 module.exports = nextConfig

package.json

@@ -48,6 +48,7 @@
         "tailwind-merge": "^2.2.1",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",
+        "tsparticles": "^3.3.0",
         "typewriter-effect": "^2.21.0"
     }
 }

src/components/hero.js

@@ -1,12 +1,12 @@
-import ReactCanvasNest from 'react-canvas-nest';
 import Typewriter from 'typewriter-effect';
+import Particles from './particles';
 
 export default function Hero() {
     return (
         <>
-            <main className=" flex justify-center items-center min-h-[80vh] md:min-h-[90vh] mt-14 sm:mt-0 flex-col ">
-                {/* <ReactCanvasNest className='canvasNest' config={{ pointColor: ' 86, 12, 125 ', count: 111 }} style={{ zIndex: 99 }} /> */}
-                <div className="flex items-center sm:justify-between w-full px-10 flex-col-reverse md:flex-row">
+            <main className=" flex relative justify-center items-center min-h-[80vh] md:min-h-[90vh] mt-14 sm:mt-0 flex-col ">
+                <Particles />
+                <div className="flex items-center sm:justify-between w-full px-10 flex-col-reverse md:flex-row z-10">
                     <div className="flex flex-col flex-auto w-full md:w-1/2 justify-center">
                         <h1 className="text-black text-4xl md:text-5xl font-bold">Your potential.<br /> Our passion.<br />
                         </h1>