diff --git a/marketing/package-lock.json b/marketing/package-lock.json
index b8297ad..b11329b 100644
--- a/marketing/package-lock.json
+++ b/marketing/package-lock.json
@@ -14,15 +14,21 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@tsparticles/engine": "^3.4.0",
+        "@tsparticles/react": "^3.0.0",
+        "@tsparticles/slim": "^3.4.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.67",
         "@types/react": "^18.2.41",
         "@types/react-dom": "^18.2.17",
+        "clsx": "^2.1.1",
+        "framer-motion": "^11.2.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.0",
         "react-router-dom": "^6.22.2",
         "react-scripts": "5.0.1",
+        "tailwind-merge": "^2.3.0",
         "tailwindcss": "^3.4.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -1965,9 +1971,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
-      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -3957,6 +3963,365 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tsparticles/basic": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.4.0.tgz",
+      "integrity": "sha512-a0HxG0GOhXof7NDqcqdyu9XpmCAQ0M402YECz/jsH4CkBpz3ut0BrgnyjT6Xcqna3pR1Kv1m516/sV2fwNnnQw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0",
+        "@tsparticles/move-base": "^3.4.0",
+        "@tsparticles/shape-circle": "^3.4.0",
+        "@tsparticles/updater-color": "^3.4.0",
+        "@tsparticles/updater-opacity": "^3.4.0",
+        "@tsparticles/updater-out-modes": "^3.4.0",
+        "@tsparticles/updater-size": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.4.0.tgz",
+      "integrity": "sha512-OqoMZYJCoiihNnexnnSmInEMNXr0Z8CmE1HSiFVeifgK1qUlonTFe2G09KdvNT8ZdvmIC513yTpFJNDbnMZYRQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true
+    },
+    "node_modules/@tsparticles/interaction-external-attract": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.4.0.tgz",
+      "integrity": "sha512-6enSRkoXyK0JvW8bJuj2xAUuu9VzDiFvRCPaL+5dcLcDpjheh8nWpGzrgo8p9VxLL5VRYv7PxnYPMviBMQ7WzA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bounce": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.4.0.tgz",
+      "integrity": "sha512-yiTJD8t+Uzpo9lyhHlaC+azu49dJtrFVhbVZdDaiTNm1L1stFQBrc+9NY63BfQDEkDmSz4uWvQXQMru2KY+40g==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bubble": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.4.0.tgz",
+      "integrity": "sha512-CQ1nC6Or8qAAkH7A2x3FkP473caM7UWQiiN4zR4JtSZu06+2Y0V09LXguQKx1RWDehgRvkylQ4Dgur4a5qNb8w==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-connect": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.4.0.tgz",
+      "integrity": "sha512-UBzs0iV7wLbrL2VIuCT25asUjjXGCiVC/kCM5NtG7+gd6wDB8DbjZPjHviI7AnEnJdBPeZ2eeYIVuLiO1Xpd3A==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-grab": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.4.0.tgz",
+      "integrity": "sha512-BsnwN1x+nYUCD7iSu/wLX//awAka1Vf5gnynBqgmz0odAlN3Wv2i9iR/JkzDQynmGLJPHffYgkXC8LWXgZZznQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-pause": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.4.0.tgz",
+      "integrity": "sha512-B6xvHLLktN9BHPcIbAxc7F68aDOnieKAxPwqSuvRtQrEP0Q3xcvTkw1TBwzehr9mZH+0SVGzPfH8BMWI4EP1Xg==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-push": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.4.0.tgz",
+      "integrity": "sha512-SriLK1X45CaLwzxjtDo5nCGtF8lwPwK5zYO6+UU+9djUzbh/dBlXQr63ovm/jYPE+yGPRxAhJLdiHpss6aaavQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-remove": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.4.0.tgz",
+      "integrity": "sha512-9W4v8s3J+4l9AXpAvvAMbdG0G6y0HHA+/ZmP/9CtVc1fqVDDrMHL0ojXuVlGMxVjKgwuO28x8+jOAuM7PHiSsQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-repulse": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.4.0.tgz",
+      "integrity": "sha512-5tM8uLGsKMUhZ2+Acy8XHrw1MN+apqNBhfVYoZ5UdH2soX1xAicSCrEpSObiS1xjCmkpRlkfls3Ygo4FHz3eSg==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-slow": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.4.0.tgz",
+      "integrity": "sha512-bBlKG3VS8g64+HiDlu9RbWt/3bIepEu25w8G2zTB+GQMBqDpKsMioWWKNT66w/661U1BlvUZWHaJE/OdMCZTZw==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-attract": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.4.0.tgz",
+      "integrity": "sha512-Ye6f37AZYaMExjsZSoOEMsTSFIPs3ZZCxiQmiCeH+gNK8yGXJDLkWwZUN0S7S4GJDf24Nt4S+gunKJxO8C3qGQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-collisions": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.4.0.tgz",
+      "integrity": "sha512-JmDyXlGS6vSrUxvgMf/t6hsnsAS4YRc9rZM3CcmfyUM9UG9/+vef/cekNDSVRzszk5KcFF70w2FLJ6EhYs0ecA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-links": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.4.0.tgz",
+      "integrity": "sha512-2UhzNsZCSF69L0PGwlJARNx3qrMdSrl5p/TgO5Q5w7iwBU1x/W27O+TDQvNdMHsOLPPUomUI+jJfRXY2snqp3Q==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/move-base": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.4.0.tgz",
+      "integrity": "sha512-4P9CzgVN7INogAvqkg/cEA+6WKeGUAtsgljJ2rUADgNBiScW1oJZAw/004AZiOlonLRiUZujUCNS4zlAg62ZvQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/move-parallax": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.4.0.tgz",
+      "integrity": "sha512-5GdTxro5y3+GFNabaHPFuJl2zOpiyDZJ0D96QAY/sRnI5NNASj7n9QgUeViPdAsOOIgrHgIMl43MqJSUbuK4tw==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/plugin-easing-quad": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.4.0.tgz",
+      "integrity": "sha512-JgZDeoES8ONrt+pKdDRrUkTKJRfjgRpTlLgr2KqqadI+lSOQIw/QJuXfCu25/47wJLcPUxP1melclp6X/IhNog==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "peerDependencies": {
+        "@tsparticles/engine": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-circle": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.4.0.tgz",
+      "integrity": "sha512-X1ynt8h7bO+xep12Vkxeo2fImbKzLMEZr0qY3vKZzhHcy0/lxoo505pwyVL2+V98eZNOu9fmQM7vlIt/0FGTcg==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-emoji": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.4.0.tgz",
+      "integrity": "sha512-fzuRdwzikhiE7bgagNJVFccvipy7+bcG6PGvfGmJO3FQIwYSTRV2mJVsI/uPQkBUGJyzJPncp7FzEix/D3PDCA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-image": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.4.0.tgz",
+      "integrity": "sha512-US7MYYFP0iMqWs9JiPNmqFSIxmsqkTF6gW6VvDDGtBEUxw3wubSEln3Gc3PQBpa/Tq0jwkUfd1/zkyahOrycUw==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-line": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.4.0.tgz",
+      "integrity": "sha512-pXItuUBtIatcQQLp+CS1HZjHtpGVqswFxDaFZv0b9Ulx+7I48i4T5r6LCF2ngo+3xcT+rDdAF/Ca/oCunztBBA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-polygon": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.4.0.tgz",
+      "integrity": "sha512-qA7nXwWufVZLyS1CT9cFNqcjgLRQQnILc3w1gkH7B80uGYg4bLgQcOZiI7OwifOFkgyI6Mvb0XRntl+NQaDDRA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-square": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.4.0.tgz",
+      "integrity": "sha512-pUXAbSnW5aTMFFjAP3GHMxqbah3ADibuQcEmIgts5tNUKY8Bl0Syx5pllpe81z2AMJCsQncC15/M19DU/H+YXw==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-star": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.4.0.tgz",
+      "integrity": "sha512-Gy4FLvVh0qBTVAZbBeV3MfsofYXycxO60/5HqNePsG3+sO/o5DKGZqf/Fw1Cacrb1QYg5A59P/122MZTMnLqEA==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/slim": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.4.0.tgz",
+      "integrity": "sha512-ukQqSdTzBlZHnD6MwRCdJBWbfgWSRNa4BG+H8IVAU5ggdQ7AbnDsdMG/o49cvstguGsKSbjmHYFNkDYGeKasuw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "@tsparticles/basic": "^3.4.0",
+        "@tsparticles/engine": "^3.4.0",
+        "@tsparticles/interaction-external-attract": "^3.4.0",
+        "@tsparticles/interaction-external-bounce": "^3.4.0",
+        "@tsparticles/interaction-external-bubble": "^3.4.0",
+        "@tsparticles/interaction-external-connect": "^3.4.0",
+        "@tsparticles/interaction-external-grab": "^3.4.0",
+        "@tsparticles/interaction-external-pause": "^3.4.0",
+        "@tsparticles/interaction-external-push": "^3.4.0",
+        "@tsparticles/interaction-external-remove": "^3.4.0",
+        "@tsparticles/interaction-external-repulse": "^3.4.0",
+        "@tsparticles/interaction-external-slow": "^3.4.0",
+        "@tsparticles/interaction-particles-attract": "^3.4.0",
+        "@tsparticles/interaction-particles-collisions": "^3.4.0",
+        "@tsparticles/interaction-particles-links": "^3.4.0",
+        "@tsparticles/move-parallax": "^3.4.0",
+        "@tsparticles/plugin-easing-quad": "^3.4.0",
+        "@tsparticles/shape-emoji": "^3.4.0",
+        "@tsparticles/shape-image": "^3.4.0",
+        "@tsparticles/shape-line": "^3.4.0",
+        "@tsparticles/shape-polygon": "^3.4.0",
+        "@tsparticles/shape-square": "^3.4.0",
+        "@tsparticles/shape-star": "^3.4.0",
+        "@tsparticles/updater-life": "^3.4.0",
+        "@tsparticles/updater-rotate": "^3.4.0",
+        "@tsparticles/updater-stroke-color": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-color": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.4.0.tgz",
+      "integrity": "sha512-joT5O/78p7n3jBq1aiFEp4wMevv8WtfjBJnODwEUO7aiHRozs9tA05djVLYZ7kjH0bLymJoPwxM46SEGSTsh+g==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-life": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.4.0.tgz",
+      "integrity": "sha512-bFx/3TTNNnWVmHkrfwXVlLc7R8QfbeX+KQ6dy09n+i2Vs3HnQUF7/VITjt0erNzyHfnqh+q+80gCn6X4brvwEQ==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-opacity": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.4.0.tgz",
+      "integrity": "sha512-OCWbebZykDh8ZbTiTQX+pBRXHfTMMJpNXbFps4lTSHXHMDsbEMl5a3/TEFeUk3rd0wkiRSCjPUSGKupoU5B14w==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-out-modes": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.4.0.tgz",
+      "integrity": "sha512-i80MSXpnfivKlfA0FbAxk2CfZGNG3rPNtx5Pz/ZCDQ71j1YFjztdwfugp9oueu/sLfOSw4hIKfyR062zpgZp6Q==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-rotate": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.4.0.tgz",
+      "integrity": "sha512-BKmzN8YLSUPe6OngmhmjPCBJ2RpBi88nfoNJekZnVJpbRses1pV632EaOIAEVT1xsUrwVhvsXYa9Sv5iZxfIRg==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-size": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.4.0.tgz",
+      "integrity": "sha512-3z7INo2E7HR+ps8V490mOiLcCaFmUJFgObXBO3lF6uZ1xe6SfvVsX2r1HpQLwIpq7Ph2ZqQ4tj8tBPyKtada7g==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "node_modules/@tsparticles/updater-stroke-color": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.4.0.tgz",
+      "integrity": "sha512-5pe/777vPZgzlNBkh8GQ3fjT6273wcwlBeq4UkDA/q6bI867d8W+Fi8yUsqfdiS6B5tKSvVsI8rFrfwjEvW0pg==",
+      "dependencies": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -5856,6 +6221,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -8393,6 +8766,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.6.tgz",
+      "integrity": "sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -16178,6 +16575,18 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
+      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -19082,9 +19491,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
-      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -20410,6 +20819,304 @@
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
     },
+    "@tsparticles/basic": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.4.0.tgz",
+      "integrity": "sha512-a0HxG0GOhXof7NDqcqdyu9XpmCAQ0M402YECz/jsH4CkBpz3ut0BrgnyjT6Xcqna3pR1Kv1m516/sV2fwNnnQw==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0",
+        "@tsparticles/move-base": "^3.4.0",
+        "@tsparticles/shape-circle": "^3.4.0",
+        "@tsparticles/updater-color": "^3.4.0",
+        "@tsparticles/updater-opacity": "^3.4.0",
+        "@tsparticles/updater-out-modes": "^3.4.0",
+        "@tsparticles/updater-size": "^3.4.0"
+      }
+    },
+    "@tsparticles/engine": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.4.0.tgz",
+      "integrity": "sha512-OqoMZYJCoiihNnexnnSmInEMNXr0Z8CmE1HSiFVeifgK1qUlonTFe2G09KdvNT8ZdvmIC513yTpFJNDbnMZYRQ=="
+    },
+    "@tsparticles/interaction-external-attract": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.4.0.tgz",
+      "integrity": "sha512-6enSRkoXyK0JvW8bJuj2xAUuu9VzDiFvRCPaL+5dcLcDpjheh8nWpGzrgo8p9VxLL5VRYv7PxnYPMviBMQ7WzA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-bounce": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.4.0.tgz",
+      "integrity": "sha512-yiTJD8t+Uzpo9lyhHlaC+azu49dJtrFVhbVZdDaiTNm1L1stFQBrc+9NY63BfQDEkDmSz4uWvQXQMru2KY+40g==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-bubble": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.4.0.tgz",
+      "integrity": "sha512-CQ1nC6Or8qAAkH7A2x3FkP473caM7UWQiiN4zR4JtSZu06+2Y0V09LXguQKx1RWDehgRvkylQ4Dgur4a5qNb8w==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-connect": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.4.0.tgz",
+      "integrity": "sha512-UBzs0iV7wLbrL2VIuCT25asUjjXGCiVC/kCM5NtG7+gd6wDB8DbjZPjHviI7AnEnJdBPeZ2eeYIVuLiO1Xpd3A==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-grab": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.4.0.tgz",
+      "integrity": "sha512-BsnwN1x+nYUCD7iSu/wLX//awAka1Vf5gnynBqgmz0odAlN3Wv2i9iR/JkzDQynmGLJPHffYgkXC8LWXgZZznQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-pause": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.4.0.tgz",
+      "integrity": "sha512-B6xvHLLktN9BHPcIbAxc7F68aDOnieKAxPwqSuvRtQrEP0Q3xcvTkw1TBwzehr9mZH+0SVGzPfH8BMWI4EP1Xg==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-push": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.4.0.tgz",
+      "integrity": "sha512-SriLK1X45CaLwzxjtDo5nCGtF8lwPwK5zYO6+UU+9djUzbh/dBlXQr63ovm/jYPE+yGPRxAhJLdiHpss6aaavQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-remove": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.4.0.tgz",
+      "integrity": "sha512-9W4v8s3J+4l9AXpAvvAMbdG0G6y0HHA+/ZmP/9CtVc1fqVDDrMHL0ojXuVlGMxVjKgwuO28x8+jOAuM7PHiSsQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-repulse": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.4.0.tgz",
+      "integrity": "sha512-5tM8uLGsKMUhZ2+Acy8XHrw1MN+apqNBhfVYoZ5UdH2soX1xAicSCrEpSObiS1xjCmkpRlkfls3Ygo4FHz3eSg==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-external-slow": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.4.0.tgz",
+      "integrity": "sha512-bBlKG3VS8g64+HiDlu9RbWt/3bIepEu25w8G2zTB+GQMBqDpKsMioWWKNT66w/661U1BlvUZWHaJE/OdMCZTZw==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-particles-attract": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.4.0.tgz",
+      "integrity": "sha512-Ye6f37AZYaMExjsZSoOEMsTSFIPs3ZZCxiQmiCeH+gNK8yGXJDLkWwZUN0S7S4GJDf24Nt4S+gunKJxO8C3qGQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-particles-collisions": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.4.0.tgz",
+      "integrity": "sha512-JmDyXlGS6vSrUxvgMf/t6hsnsAS4YRc9rZM3CcmfyUM9UG9/+vef/cekNDSVRzszk5KcFF70w2FLJ6EhYs0ecA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/interaction-particles-links": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.4.0.tgz",
+      "integrity": "sha512-2UhzNsZCSF69L0PGwlJARNx3qrMdSrl5p/TgO5Q5w7iwBU1x/W27O+TDQvNdMHsOLPPUomUI+jJfRXY2snqp3Q==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/move-base": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.4.0.tgz",
+      "integrity": "sha512-4P9CzgVN7INogAvqkg/cEA+6WKeGUAtsgljJ2rUADgNBiScW1oJZAw/004AZiOlonLRiUZujUCNS4zlAg62ZvQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/move-parallax": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.4.0.tgz",
+      "integrity": "sha512-5GdTxro5y3+GFNabaHPFuJl2zOpiyDZJ0D96QAY/sRnI5NNASj7n9QgUeViPdAsOOIgrHgIMl43MqJSUbuK4tw==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/plugin-easing-quad": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.4.0.tgz",
+      "integrity": "sha512-JgZDeoES8ONrt+pKdDRrUkTKJRfjgRpTlLgr2KqqadI+lSOQIw/QJuXfCu25/47wJLcPUxP1melclp6X/IhNog==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "requires": {}
+    },
+    "@tsparticles/shape-circle": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.4.0.tgz",
+      "integrity": "sha512-X1ynt8h7bO+xep12Vkxeo2fImbKzLMEZr0qY3vKZzhHcy0/lxoo505pwyVL2+V98eZNOu9fmQM7vlIt/0FGTcg==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-emoji": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.4.0.tgz",
+      "integrity": "sha512-fzuRdwzikhiE7bgagNJVFccvipy7+bcG6PGvfGmJO3FQIwYSTRV2mJVsI/uPQkBUGJyzJPncp7FzEix/D3PDCA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-image": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.4.0.tgz",
+      "integrity": "sha512-US7MYYFP0iMqWs9JiPNmqFSIxmsqkTF6gW6VvDDGtBEUxw3wubSEln3Gc3PQBpa/Tq0jwkUfd1/zkyahOrycUw==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-line": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.4.0.tgz",
+      "integrity": "sha512-pXItuUBtIatcQQLp+CS1HZjHtpGVqswFxDaFZv0b9Ulx+7I48i4T5r6LCF2ngo+3xcT+rDdAF/Ca/oCunztBBA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-polygon": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.4.0.tgz",
+      "integrity": "sha512-qA7nXwWufVZLyS1CT9cFNqcjgLRQQnILc3w1gkH7B80uGYg4bLgQcOZiI7OwifOFkgyI6Mvb0XRntl+NQaDDRA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-square": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.4.0.tgz",
+      "integrity": "sha512-pUXAbSnW5aTMFFjAP3GHMxqbah3ADibuQcEmIgts5tNUKY8Bl0Syx5pllpe81z2AMJCsQncC15/M19DU/H+YXw==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/shape-star": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.4.0.tgz",
+      "integrity": "sha512-Gy4FLvVh0qBTVAZbBeV3MfsofYXycxO60/5HqNePsG3+sO/o5DKGZqf/Fw1Cacrb1QYg5A59P/122MZTMnLqEA==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/slim": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.4.0.tgz",
+      "integrity": "sha512-ukQqSdTzBlZHnD6MwRCdJBWbfgWSRNa4BG+H8IVAU5ggdQ7AbnDsdMG/o49cvstguGsKSbjmHYFNkDYGeKasuw==",
+      "requires": {
+        "@tsparticles/basic": "^3.4.0",
+        "@tsparticles/engine": "^3.4.0",
+        "@tsparticles/interaction-external-attract": "^3.4.0",
+        "@tsparticles/interaction-external-bounce": "^3.4.0",
+        "@tsparticles/interaction-external-bubble": "^3.4.0",
+        "@tsparticles/interaction-external-connect": "^3.4.0",
+        "@tsparticles/interaction-external-grab": "^3.4.0",
+        "@tsparticles/interaction-external-pause": "^3.4.0",
+        "@tsparticles/interaction-external-push": "^3.4.0",
+        "@tsparticles/interaction-external-remove": "^3.4.0",
+        "@tsparticles/interaction-external-repulse": "^3.4.0",
+        "@tsparticles/interaction-external-slow": "^3.4.0",
+        "@tsparticles/interaction-particles-attract": "^3.4.0",
+        "@tsparticles/interaction-particles-collisions": "^3.4.0",
+        "@tsparticles/interaction-particles-links": "^3.4.0",
+        "@tsparticles/move-parallax": "^3.4.0",
+        "@tsparticles/plugin-easing-quad": "^3.4.0",
+        "@tsparticles/shape-emoji": "^3.4.0",
+        "@tsparticles/shape-image": "^3.4.0",
+        "@tsparticles/shape-line": "^3.4.0",
+        "@tsparticles/shape-polygon": "^3.4.0",
+        "@tsparticles/shape-square": "^3.4.0",
+        "@tsparticles/shape-star": "^3.4.0",
+        "@tsparticles/updater-life": "^3.4.0",
+        "@tsparticles/updater-rotate": "^3.4.0",
+        "@tsparticles/updater-stroke-color": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-color": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.4.0.tgz",
+      "integrity": "sha512-joT5O/78p7n3jBq1aiFEp4wMevv8WtfjBJnODwEUO7aiHRozs9tA05djVLYZ7kjH0bLymJoPwxM46SEGSTsh+g==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-life": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.4.0.tgz",
+      "integrity": "sha512-bFx/3TTNNnWVmHkrfwXVlLc7R8QfbeX+KQ6dy09n+i2Vs3HnQUF7/VITjt0erNzyHfnqh+q+80gCn6X4brvwEQ==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-opacity": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.4.0.tgz",
+      "integrity": "sha512-OCWbebZykDh8ZbTiTQX+pBRXHfTMMJpNXbFps4lTSHXHMDsbEMl5a3/TEFeUk3rd0wkiRSCjPUSGKupoU5B14w==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-out-modes": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.4.0.tgz",
+      "integrity": "sha512-i80MSXpnfivKlfA0FbAxk2CfZGNG3rPNtx5Pz/ZCDQ71j1YFjztdwfugp9oueu/sLfOSw4hIKfyR062zpgZp6Q==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-rotate": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.4.0.tgz",
+      "integrity": "sha512-BKmzN8YLSUPe6OngmhmjPCBJ2RpBi88nfoNJekZnVJpbRses1pV632EaOIAEVT1xsUrwVhvsXYa9Sv5iZxfIRg==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-size": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.4.0.tgz",
+      "integrity": "sha512-3z7INo2E7HR+ps8V490mOiLcCaFmUJFgObXBO3lF6uZ1xe6SfvVsX2r1HpQLwIpq7Ph2ZqQ4tj8tBPyKtada7g==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
+    "@tsparticles/updater-stroke-color": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.4.0.tgz",
+      "integrity": "sha512-5pe/777vPZgzlNBkh8GQ3fjT6273wcwlBeq4UkDA/q6bI867d8W+Fi8yUsqfdiS6B5tKSvVsI8rFrfwjEvW0pg==",
+      "requires": {
+        "@tsparticles/engine": "^3.4.0"
+      }
+    },
     "@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -21879,6 +22586,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -23731,6 +24443,14 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
+    "framer-motion": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.6.tgz",
+      "integrity": "sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -29171,6 +29891,14 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tailwind-merge": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
+      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "requires": {
+        "@babel/runtime": "^7.24.1"
+      }
+    },
     "tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/marketing/package.json b/marketing/package.json
index 533cfbd..de45061 100644
--- a/marketing/package.json
+++ b/marketing/package.json
@@ -9,15 +9,21 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@tsparticles/engine": "^3.4.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.4.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.67",
     "@types/react": "^18.2.41",
     "@types/react-dom": "^18.2.17",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
     "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/marketing/src/components/sparkles.tsx b/marketing/src/components/sparkles.tsx
new file mode 100644
index 0000000..ac2e90c
--- /dev/null
+++ b/marketing/src/components/sparkles.tsx
@@ -0,0 +1,434 @@
+"use client";
+import React from "react";
+import { useEffect, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import type { Container, SingleOrMultiple } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import { cn } from "../utils/cn";
+import { motion, useAnimation } from "framer-motion";
+
+type ParticlesProps = {
+  id?: string;
+  className?: string;
+  background?: string;
+  particleSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  speed?: number;
+  particleColor?: string;
+  particleDensity?: number;
+};
+export const SparklesCore = (props: ParticlesProps) => {
+  const {
+    id,
+    className,
+    background,
+    minSize,
+    maxSize,
+    speed,
+    particleColor,
+    particleDensity,
+  } = props;
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+  const controls = useAnimation();
+
+  const particlesLoaded = async (container?: Container) => {
+    if (container) {
+      console.log(container);
+      controls.start({
+        opacity: 1,
+        transition: {
+          duration: 1,
+        },
+      });
+    }
+  };
+
+  return (
+    <motion.div animate={controls} className={cn("opacity-0", className)}>
+      {init && (
+        <Particles
+          id={id || "tsparticles"}
+          className={cn("h-full w-full")}
+          particlesLoaded={particlesLoaded}
+          options={{
+            background: {
+              color: {
+                value: background || "#0d47a1",
+              },
+            },
+            fullScreen: {
+              enable: false,
+              zIndex: 1,
+            },
+
+            fpsLimit: 120,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: false,
+                  mode: "repulse",
+                },
+                resize: true as any,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              bounce: {
+                horizontal: {
+                  value: 1,
+                },
+                vertical: {
+                  value: 1,
+                },
+              },
+              collisions: {
+                absorb: {
+                  speed: 2,
+                },
+                bounce: {
+                  horizontal: {
+                    value: 1,
+                  },
+                  vertical: {
+                    value: 1,
+                  },
+                },
+                enable: false,
+                maxSpeed: 50,
+                mode: "bounce",
+                overlap: {
+                  enable: true,
+                  retries: 0,
+                },
+              },
+              color: {
+                value: particleColor || "#ffffff",
+                animation: {
+                  h: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  s: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  l: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                },
+              },
+              effect: {
+                close: true,
+                fill: true,
+                options: {},
+                type: {} as SingleOrMultiple<string> | undefined,
+              },
+              groups: {},
+              move: {
+                angle: {
+                  offset: 0,
+                  value: 90,
+                },
+                attract: {
+                  distance: 200,
+                  enable: false,
+                  rotate: {
+                    x: 3000,
+                    y: 3000,
+                  },
+                },
+                center: {
+                  x: 50,
+                  y: 50,
+                  mode: "percent",
+                  radius: 0,
+                },
+                decay: 0,
+                distance: {},
+                direction: "none",
+                drift: 0,
+                enable: true,
+                gravity: {
+                  acceleration: 9.81,
+                  enable: false,
+                  inverse: false,
+                  maxSpeed: 50,
+                },
+                path: {
+                  clamp: true,
+                  delay: {
+                    value: 0,
+                  },
+                  enable: false,
+                  options: {},
+                },
+                outModes: {
+                  default: "out",
+                },
+                random: false,
+                size: false,
+                speed: {
+                  min: 0.1,
+                  max: 1,
+                },
+                spin: {
+                  acceleration: 0,
+                  enable: false,
+                },
+                straight: false,
+                trail: {
+                  enable: false,
+                  length: 10,
+                  fill: {},
+                },
+                vibrate: false,
+                warp: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  width: 400,
+                  height: 400,
+                },
+                limit: {
+                  mode: "delete",
+                  value: 0,
+                },
+                value: particleDensity || 120,
+              },
+              opacity: {
+                value: {
+                  min: 0.1,
+                  max: 1,
+                },
+                animation: {
+                  count: 0,
+                  enable: true,
+                  speed: speed || 4,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              reduceDuplicates: false,
+              shadow: {
+                blur: 0,
+                color: {
+                  value: "#000",
+                },
+                enable: false,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+              shape: {
+                close: true,
+                fill: true,
+                options: {},
+                type: "circle",
+              },
+              size: {
+                value: {
+                  min: minSize || 1,
+                  max: maxSize || 3,
+                },
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 5,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              stroke: {
+                width: 0,
+              },
+              zIndex: {
+                value: 0,
+                opacityRate: 1,
+                sizeRate: 1,
+                velocityRate: 1,
+              },
+              destroy: {
+                bounds: {},
+                mode: "none",
+                split: {
+                  count: 1,
+                  factor: {
+                    value: 3,
+                  },
+                  rate: {
+                    value: {
+                      min: 4,
+                      max: 9,
+                    },
+                  },
+                  sizeOffset: true,
+                },
+              },
+              roll: {
+                darken: {
+                  enable: false,
+                  value: 0,
+                },
+                enable: false,
+                enlighten: {
+                  enable: false,
+                  value: 0,
+                },
+                mode: "vertical",
+                speed: 25,
+              },
+              tilt: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                enable: false,
+              },
+              twinkle: {
+                lines: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+                particles: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+              },
+              wobble: {
+                distance: 5,
+                enable: false,
+                speed: {
+                  angle: 50,
+                  move: 10,
+                },
+              },
+              life: {
+                count: 0,
+                delay: {
+                  value: 0,
+                  sync: false,
+                },
+                duration: {
+                  value: 0,
+                  sync: false,
+                },
+              },
+              rotate: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                path: false,
+              },
+              orbit: {
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 1,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                },
+                enable: false,
+                opacity: 1,
+                rotation: {
+                  value: 45,
+                },
+                width: 1,
+              },
+              links: {
+                blink: false,
+                color: {
+                  value: "#fff",
+                },
+                consent: false,
+                distance: 100,
+                enable: false,
+                frequency: 1,
+                opacity: 1,
+                shadow: {
+                  blur: 5,
+                  color: {
+                    value: "#000",
+                  },
+                  enable: false,
+                },
+                triangles: {
+                  enable: false,
+                  frequency: 1,
+                },
+                width: 1,
+                warp: false,
+              },
+              repulse: {
+                value: 0,
+                enabled: false,
+                distance: 1,
+                duration: 1,
+                factor: 1,
+                speed: 1,
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      )}
+    </motion.div>
+  );
+};
diff --git a/marketing/src/sections/About.tsx b/marketing/src/sections/About.tsx
new file mode 100644
index 0000000..2c866df
--- /dev/null
+++ b/marketing/src/sections/About.tsx
@@ -0,0 +1,54 @@
+import { SparklesCore } from "../components/sparkles";
+
+export default function About() {
+    return (
+      <div className="flex flex-col items-center px-6 py-10 mx-auto max-w-7xl">
+        <div className="max-w-4xl text-center">
+          <h2 className="mb-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            About
+          </h2>
+          <div className="flex flex-wrap justify-center">
+            <div className="w-full p-4 md:w-1/2 md:pr-8">
+              <p className="text-lg leading-8 text-gray-600">
+                The team united around a shared frustration: constantly feeling out of the loop about campus events and activities.
+                We often wanted to participate but missed opportunities because we learned about them too late.
+              </p>
+            </div>
+            <div className="w-full p-4 md:w-1/2 md:pl-8">
+              <p className="text-lg leading-8 text-gray-600">
+                Motivated by this challenge, we aimed to create a solution that keeps students informed and connected.
+                Our goal was to develop a platform where students could easily find out what’s happening on campus and stay engaged with their community.
+              </p>
+            </div>
+            <div className="w-full p-4 pb-16">
+              <p className="text-lg leading-8 text-gray-600">
+                This vision led to the creation of...
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="w-full">
+          <h1 className="mb-4 text-3xl font-bold tracking-tight text-center text-gray-900 sm:text-7xl">Campus Buddy</h1>
+          <div className="relative w-full h-40">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-full blur-sm" />
+            <div className="absolute inset-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
+            <div className="absolute inset-x-1/4 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/2 blur-sm" />
+            <div className="absolute top-0 w-1/2 h-px inset-x-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+  
+            <SparklesCore
+              background="transparent"
+              minSize={0.4}
+              maxSize={1}
+              particleDensity={1200}
+              className="w-full h-full"
+              particleColor="#3A86FF"
+            />
+  
+            {/* Radial Gradient to prevent sharp edges */}
+            <div className="absolute inset-0 w-full h-full bg-white [mask-image:radial-gradient(350px_200px_at_top,transparent_50%,white)]"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
\ No newline at end of file
diff --git a/marketing/src/utils/cn.ts b/marketing/src/utils/cn.ts
new file mode 100644
index 0000000..cec6ac9
--- /dev/null
+++ b/marketing/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/marketing/src/views/Home.tsx b/marketing/src/views/Home.tsx
index 4112cfd..9d9a5dc 100644
--- a/marketing/src/views/Home.tsx
+++ b/marketing/src/views/Home.tsx
@@ -5,9 +5,11 @@ import Team from "../sections/Team";
 import MainLanding from "../sections/MainLanding";
 import SubscribeForUpdates from "../sections/SubscribeForUpdates";
 import LogoCloud from "../sections/LogoCloud";
+import About from "../sections/About";
 
 const navigation = [
   { name: "Our Clients", href: "#logo-cloud" },
+  { name: "About", href: "#about" },
   { name: "Team", href: "#team" },
 ];
 
@@ -26,7 +28,7 @@ export default function Home() {
               <span className="sr-only">CampusBuddy</span>
               <img
                 style={{ width: "50px", height: "auto " }}
-                className="h-8 w-auto"
+                className="w-auto h-8"
                 src="/Campus_Buddy_Logo.png"
                 alt="CampusBuddy Logo"
               />
@@ -39,7 +41,7 @@ export default function Home() {
               onClick={() => setMobileMenuOpen(true)}
             >
               <span className="sr-only">Open main menu</span>
-              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+              <Bars3Icon className="w-6 h-6" aria-hidden="true" />
             </button>
           </div>
           <div className="hidden lg:flex lg:gap-x-12">
@@ -71,12 +73,12 @@ export default function Home() {
           onClose={setMobileMenuOpen}
         >
           <div className="fixed inset-0 z-50" />
-          <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full px-6 py-6 overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
             <div className="flex items-center justify-between">
               <a href="#" className="-m-1.5 p-1.5">
                 <span className="sr-only">CampusBuddy</span>
                 <img
-                  className="h-8 w-auto"
+                  className="w-auto h-8"
                   src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                   alt=""
                 />
@@ -87,17 +89,17 @@ export default function Home() {
                 onClick={() => setMobileMenuOpen(false)}
               >
                 <span className="sr-only">Close menu</span>
-                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                <XMarkIcon className="w-6 h-6" aria-hidden="true" />
               </button>
             </div>
-            <div className="mt-6 flow-root">
+            <div className="flow-root mt-6">
               <div className="-my-6 divide-y divide-gray-500/10">
-                <div className="space-y-2 py-6">
+                <div className="py-6 space-y-2">
                   {navigation.map((item) => (
                     <a
                       key={item.name}
                       href={item.href}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                      className="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-900 rounded-lg hover:bg-gray-50"
                     >
                       {item.name}
                     </a>
@@ -120,6 +122,9 @@ export default function Home() {
       <div id="logo-cloud">
         <LogoCloud />
       </div>
+      <div id="about">
+        <About />
+      </div>
       <div id="team">
         <Team />
       </div>