Add fireworks particles on click to the pricing page

package.json

@@ -32,6 +32,7 @@
     "react-window-ui": "^2.2.0",
     "tsparticles": "^1.37.3",
     "tsparticles-preset-confetti": "^1.0.0",
+    "tsparticles-preset-fireworks": "^1.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/components/FireworksParticles.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { tsParticles } from 'tsparticles';
+import { loadFireworksPreset } from 'tsparticles-preset-fireworks';
+
+const FireworksParticles = () => {
+  useEffect(() => {
+    loadFireworksPreset(tsParticles);
+    tsParticles.load('pricing-page', {
+      preset: 'fireworks',
+    });
+  }, []);
+
+  return null;
+};
+
+export default FireworksParticles;

src/components/PricingPage.tsx

@@ -1,8 +1,11 @@
 import { Text, SimpleGrid, Box, Button } from '@chakra-ui/react';
+import { tsParticles } from 'tsparticles';
+import FireworksParticles from './FireworksParticles';
 
 const PricingPage = () => {
   return (
-    <Box p={8} backgroundColor="#0d1117" pb={4}>
+    <Box p={8} backgroundColor="#0d1117" pb={4} id="pricing-page" onClick={() => tsParticles.load('pricing-page', { preset: 'fireworks' })}>
+      <FireworksParticles />
       <SimpleGrid columns={{ base: 1, md: 4 }} spacing={10}>
         <Box
           display="flex"