diff --git a/package-lock.json b/package-lock.json index 333603a..9c6002a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "coolify", "version": "0.0.0", "dependencies": { + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.9.1", "bootstrap": "^5.3.8", "react": "^19.2.0", "react-bootstrap": "^2.10.10", @@ -1315,6 +1317,470 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@tsparticles/basic": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.9.1.tgz", + "integrity": "sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1", + "@tsparticles/move-base": "3.9.1", + "@tsparticles/plugin-hex-color": "3.9.1", + "@tsparticles/plugin-hsl-color": "3.9.1", + "@tsparticles/plugin-rgb-color": "3.9.1", + "@tsparticles/shape-circle": "3.9.1", + "@tsparticles/updater-color": "3.9.1", + "@tsparticles/updater-opacity": "3.9.1", + "@tsparticles/updater-out-modes": "3.9.1", + "@tsparticles/updater-size": "3.9.1" + } + }, + "node_modules/@tsparticles/engine": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz", + "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==", + "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, + "license": "MIT" + }, + "node_modules/@tsparticles/interaction-external-attract": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.9.1.tgz", + "integrity": "sha512-5AJGmhzM9o4AVFV24WH5vSqMBzOXEOzIdGLIr+QJf4fRh9ZK62snsusv/ozKgs2KteRYQx+L7c5V3TqcDy2upg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-bounce": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.9.1.tgz", + "integrity": "sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-bubble": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.9.1.tgz", + "integrity": "sha512-tbd8ox/1GPl+zr+KyHQVV1bW88GE7OM6i4zql801YIlCDrl9wgTDdDFGIy9X7/cwTvTrCePhrfvdkUamXIribQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-connect": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.9.1.tgz", + "integrity": "sha512-sq8YfUNsIORjXHzzW7/AJQtfi/qDqLnYG2qOSE1WOsog39MD30RzmiOloejOkfNeUdcGUcfsDgpUuL3UhzFUOA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-grab": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.9.1.tgz", + "integrity": "sha512-QwXza+sMMWDaMiFxd8y2tJwUK6c+nNw554+/9+tEZeTTk2fCbB0IJ7p/TH6ZGWDL0vo2muK54Njv2fEey191ow==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-pause": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.9.1.tgz", + "integrity": "sha512-Gzv4/FeNir0U/tVM9zQCqV1k+IAgaFjDU3T30M1AeAsNGh/rCITV2wnT7TOGFkbcla27m4Yxa+Fuab8+8pzm+g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-push": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.9.1.tgz", + "integrity": "sha512-GvnWF9Qy4YkZdx+WJL2iy9IcgLvzOIu3K7aLYJFsQPaxT8d9TF8WlpoMlWKnJID6H5q4JqQuMRKRyWH8aAKyQw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-remove": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.9.1.tgz", + "integrity": "sha512-yPThm4UDWejDOWW5Qc8KnnS2EfSo5VFcJUQDWc1+Wcj17xe7vdSoiwwOORM0PmNBzdDpSKQrte/gUnoqaUMwOA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-repulse": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.9.1.tgz", + "integrity": "sha512-/LBppXkrMdvLHlEKWC7IykFhzrz+9nebT2fwSSFXK4plEBxDlIwnkDxd3FbVOAbnBvx4+L8+fbrEx+RvC8diAw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-external-slow": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.9.1.tgz", + "integrity": "sha512-1ZYIR/udBwA9MdSCfgADsbDXKSFS0FMWuPWz7bm79g3sUxcYkihn+/hDhc6GXvNNR46V1ocJjrj0u6pAynS1KQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-particles-attract": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.9.1.tgz", + "integrity": "sha512-CYYYowJuGwRLUixQcSU/48PTKM8fCUYThe0hXwQ+yRMLAn053VHzL7NNZzKqEIeEyt5oJoy9KcvubjKWbzMBLQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-particles-collisions": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.9.1.tgz", + "integrity": "sha512-ggGyjW/3v1yxvYW1IF1EMT15M6w31y5zfNNUPkqd/IXRNPYvm0Z0ayhp+FKmz70M5p0UxxPIQHTvAv9Jqnuj8w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/interaction-particles-links": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.9.1.tgz", + "integrity": "sha512-MsLbMjy1vY5M5/hu/oa5OSRZAUz49H3+9EBMTIOThiX+a+vpl3sxc9AqNd9gMsPbM4WJlub8T6VBZdyvzez1Vg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/move-base": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.9.1.tgz", + "integrity": "sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/move-parallax": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.9.1.tgz", + "integrity": "sha512-whlOR0bVeyh6J/hvxf/QM3DqvNnITMiAQ0kro6saqSDItAVqg4pYxBfEsSOKq7EhjxNvfhhqR+pFMhp06zoCVA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/plugin-easing-quad": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.9.1.tgz", + "integrity": "sha512-C2UJOca5MTDXKUTBXj30Kiqr5UyID+xrY/LxicVWWZPczQW2bBxbIbfq9ULvzGDwBTxE2rdvIB8YFKmDYO45qw==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/plugin-hex-color": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.9.1.tgz", + "integrity": "sha512-vZgZ12AjUicJvk7AX4K2eAmKEQX/D1VEjEPFhyjbgI7A65eX72M465vVKIgNA6QArLZ1DLs7Z787LOE6GOBWsg==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/plugin-hsl-color": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.9.1.tgz", + "integrity": "sha512-jJd1iGgRwX6eeNjc1zUXiJivaqC5UE+SC2A3/NtHwwoQrkfxGWmRHOsVyLnOBRcCPgBp/FpdDe6DIDjCMO715w==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/plugin-rgb-color": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.9.1.tgz", + "integrity": "sha512-SBxk7f1KBfXeTnnklbE2Hx4jBgh6I6HOtxb+Os1gTp0oaghZOkWcCD2dP4QbUu7fVNCMOcApPoMNC8RTFcy9wQ==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "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.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.9.1.tgz", + "integrity": "sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-emoji": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.9.1.tgz", + "integrity": "sha512-ifvY63usuT+hipgVHb8gelBHSeF6ryPnMxAAEC1RGHhhXfpSRWMtE6ybr+pSsYU52M3G9+TF84v91pSwNrb9ZQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-image": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.9.1.tgz", + "integrity": "sha512-fCA5eme8VF3oX8yNVUA0l2SLDKuiZObkijb0z3Ky0qj1HUEVlAuEMhhNDNB9E2iELTrWEix9z7BFMePp2CC7AA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-line": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.9.1.tgz", + "integrity": "sha512-wT8NSp0N9HURyV05f371cHKcNTNqr0/cwUu6WhBzbshkYGy1KZUP9CpRIh5FCrBpTev34mEQfOXDycgfG0KiLQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-polygon": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.9.1.tgz", + "integrity": "sha512-dA77PgZdoLwxnliH6XQM/zF0r4jhT01pw5y7XTeTqws++hg4rTLV9255k6R6eUqKq0FPSW1/WBsBIl7q/MmrqQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-square": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.9.1.tgz", + "integrity": "sha512-DKGkDnRyZrAm7T2ipqNezJahSWs6xd9O5LQLe5vjrYm1qGwrFxJiQaAdlb00UNrexz1/SA7bEoIg4XKaFa7qhQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/shape-star": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.9.1.tgz", + "integrity": "sha512-kdMJpi8cdeb6vGrZVSxTG0JIjCwIenggqk0EYeKAwtOGZFBgL7eHhF2F6uu1oq8cJAbXPujEoabnLsz6mW8XaA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/slim": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.9.1.tgz", + "integrity": "sha512-CL5cDmADU7sDjRli0So+hY61VMbdroqbArmR9Av+c1Fisa5ytr6QD7Jv62iwU2S6rvgicEe9OyRmSy5GIefwZw==", + "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" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/basic": "3.9.1", + "@tsparticles/engine": "3.9.1", + "@tsparticles/interaction-external-attract": "3.9.1", + "@tsparticles/interaction-external-bounce": "3.9.1", + "@tsparticles/interaction-external-bubble": "3.9.1", + "@tsparticles/interaction-external-connect": "3.9.1", + "@tsparticles/interaction-external-grab": "3.9.1", + "@tsparticles/interaction-external-pause": "3.9.1", + "@tsparticles/interaction-external-push": "3.9.1", + "@tsparticles/interaction-external-remove": "3.9.1", + "@tsparticles/interaction-external-repulse": "3.9.1", + "@tsparticles/interaction-external-slow": "3.9.1", + "@tsparticles/interaction-particles-attract": "3.9.1", + "@tsparticles/interaction-particles-collisions": "3.9.1", + "@tsparticles/interaction-particles-links": "3.9.1", + "@tsparticles/move-parallax": "3.9.1", + "@tsparticles/plugin-easing-quad": "3.9.1", + "@tsparticles/shape-emoji": "3.9.1", + "@tsparticles/shape-image": "3.9.1", + "@tsparticles/shape-line": "3.9.1", + "@tsparticles/shape-polygon": "3.9.1", + "@tsparticles/shape-square": "3.9.1", + "@tsparticles/shape-star": "3.9.1", + "@tsparticles/updater-life": "3.9.1", + "@tsparticles/updater-rotate": "3.9.1", + "@tsparticles/updater-stroke-color": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-color": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.9.1.tgz", + "integrity": "sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-life": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.9.1.tgz", + "integrity": "sha512-Oi8aF2RIwMMsjssUkCB6t3PRpENHjdZf6cX92WNfAuqXtQphr3OMAkYFJFWkvyPFK22AVy3p/cFt6KE5zXxwAA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-opacity": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.9.1.tgz", + "integrity": "sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-out-modes": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.9.1.tgz", + "integrity": "sha512-cKQEkAwbru+hhKF+GTsfbOvuBbx2DSB25CxOdhtW2wRvDBoCnngNdLw91rs+0Cex4tgEeibkebrIKFDDE6kELg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-rotate": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.9.1.tgz", + "integrity": "sha512-9BfKaGfp28JN82MF2qs6Ae/lJr9EColMfMTHqSKljblwbpVDHte4umuwKl3VjbRt87WD9MGtla66NTUYl+WxuQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-size": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz", + "integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, + "node_modules/@tsparticles/updater-stroke-color": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.9.1.tgz", + "integrity": "sha512-3x14+C2is9pZYTg9T2TiA/aM1YMq4wLdYaZDcHm3qO30DZu5oeQq0rm/6w+QOGKYY1Z3Htg9rlSUZkhTHn7eDA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.9.1" + } + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", diff --git a/package.json b/package.json index 655f35a..9083e30 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "preview": "vite preview" }, "dependencies": { + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.9.1", "bootstrap": "^5.3.8", "react": "^19.2.0", "react-bootstrap": "^2.10.10", diff --git a/src/App.css b/src/App.css index 35c8d83..73432df 100644 --- a/src/App.css +++ b/src/App.css @@ -7,11 +7,26 @@ color: var(--white); } + .app-shell { position: relative; min-height: 100vh; overflow: hidden; background: linear-gradient(140deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.9)); + isolation: isolate; +} + +.global-particles { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + opacity: 0.85; +} + +#global-particles { + width: 100%; + height: 100%; } .app-shell::after { diff --git a/src/App.jsx b/src/App.jsx index 732acdc..b24911a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,6 @@ -import { useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; +import Particles from '@tsparticles/react'; +import { loadSlim } from '@tsparticles/slim'; import NavigationBar from './components/NavigationBar'; import Hero from './sections/Hero'; import About from './sections/About'; @@ -7,8 +9,13 @@ import Contact from './sections/Contact'; import Footer from './sections/Footer'; import './App.css'; import './sections/Hero.css'; +import particlesConfig from './particles-config'; function App() { + const particlesInit = useCallback(async engine => { + await loadSlim(engine); + }, []); + useEffect(() => { const revealElements = document.querySelectorAll('.reveal'); if (!('IntersectionObserver' in window) || !revealElements.length) return undefined; @@ -32,6 +39,9 @@ function App() { return (
+
diff --git a/src/particles-config.js b/src/particles-config.js new file mode 100644 index 0000000..65505ba --- /dev/null +++ b/src/particles-config.js @@ -0,0 +1,106 @@ +const particlesConfig = { + fullScreen: { + enable: false, + zIndex: 0, + }, + background: { + color: 'transparent', + }, + detectRetina: true, + fpsLimit: 60, + particles: { + number: { + value: 140, + density: { + enable: true, + area: 650, + }, + }, + color: { + value: ['#a5b4fc', '#f472b6', '#22d3ee', '#e0f2fe'], + }, + shape: { + type: 'circle', + }, + opacity: { + value: { + min: 0.2, + max: 0.6, + }, + animation: { + enable: true, + speed: 0.4, + minimumValue: 0.1, + sync: false, + }, + }, + size: { + value: { + min: 0.8, + max: 3.6, + }, + animation: { + enable: true, + speed: 2, + minimumValue: 0.4, + sync: false, + }, + }, + links: { + enable: true, + distance: 140, + color: '#94a3b8', + opacity: 0.25, + width: 1, + }, + move: { + enable: true, + speed: 1.1, + direction: 'none', + random: true, + straight: false, + outModes: { + default: 'out', + }, + trail: { + enable: false, + }, + }, + }, + interactivity: { + events: { + onHover: { + enable: true, + mode: 'bubble', + }, + onClick: { + enable: true, + mode: 'push', + }, + resize: true, + }, + modes: { + bubble: { + distance: 180, + size: 3.5, + duration: 2, + opacity: 0.8, + speed: 3, + }, + grab: { + distance: 220, + links: { + opacity: 0.3, + }, + }, + push: { + quantity: 2, + }, + repulse: { + distance: 140, + }, + }, + }, +}; + +export default particlesConfig; diff --git a/src/sections/Hero.css b/src/sections/Hero.css index 3fab38f..921c5b4 100644 --- a/src/sections/Hero.css +++ b/src/sections/Hero.css @@ -1,15 +1,105 @@ .hero-section { - padding-top: clamp(6rem, 8vw, 8rem); + position: relative; + padding-top: clamp(6rem, 8vw, 9rem); + padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; + min-height: clamp(80vh, 95vh, 900px); + display: flex; + align-items: center; + isolation: isolate; +} + +.hero-section .container { + position: relative; + z-index: 2; +} + +.hero-atmosphere { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; + z-index: 0; } .hero-backdrop { + position: absolute; + inset: -10% -15% 0; + background: + radial-gradient(circle at 20% 15%, rgba(236, 72, 153, 0.25), transparent 55%), + radial-gradient(circle at 70% 5%, rgba(14, 165, 233, 0.25), transparent 45%), + radial-gradient(circle at 80% 70%, rgba(129, 140, 248, 0.2), transparent 60%); + filter: blur(110px); + opacity: 0.55; + z-index: 0; +} + +.hero-grid-overlay { + position: absolute; + inset: 12% 8% 6%; + border-radius: 42px; + background-image: + linear-gradient(135deg, rgba(236, 72, 153, 0.2), transparent), + repeating-linear-gradient(0deg, rgba(226, 232, 240, 0.08) 0, rgba(226, 232, 240, 0.08) 1px, transparent 1px, transparent 80px), + repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.08) 0, rgba(226, 232, 240, 0.08) 1px, transparent 1px, transparent 80px); + opacity: 0.25; + filter: blur(0.5px); + z-index: 1; +} + +.hero-aurora { + position: absolute; + width: min(45vw, 520px); + height: min(45vw, 520px); + border-radius: 55%; + filter: blur(120px); + opacity: 0.35; + mix-blend-mode: screen; + animation: auroraPulse 22s ease-in-out infinite; + z-index: 1; +} + +.hero-aurora-one { + top: -12%; + left: -20%; + background: radial-gradient(circle, rgba(236, 72, 153, 0.45), transparent 65%); +} + +.hero-aurora-two { + top: 5%; + right: -10%; + background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 60%); + animation-delay: 4s; +} + +.hero-aurora-three { + bottom: -20%; + left: 25%; + background: radial-gradient(circle, rgba(45, 212, 191, 0.35), transparent 70%); + animation-delay: 8s; +} + +.hero-orbitals { position: absolute; inset: 0; - background: radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.18), transparent 55%), - radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.25), transparent 50%); - filter: blur(60px); - z-index: -1; + z-index: 3; + mix-blend-mode: screen; +} + +.orbital-node { + position: absolute; + border-radius: 999px; + background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(14, 165, 233, 0.15)); + box-shadow: + 0 0 18px rgba(99, 102, 241, 0.65), + 0 0 40px rgba(99, 102, 241, 0.25); + animation: orbitalDrift 16s ease-in-out infinite; +} + +.hero-content, +.hero-visual-col { + position: relative; + z-index: 2; } .hero-content { @@ -77,12 +167,24 @@ .hero-visual { position: relative; padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.5rem; } .hero-visual .glass-panel { background: rgba(15, 23, 42, 0.85); } +.hero-dashboard-card { + border: 1px solid rgba(99, 102, 241, 0.35); + box-shadow: + 0 25px 80px rgba(15, 23, 42, 0.55), + inset 0 0 35px rgba(99, 102, 241, 0.05); + background: radial-gradient(circle at 20% 10%, rgba(99, 102, 241, 0.25), transparent 55%), + rgba(15, 23, 42, 0.85); +} + .visual-card { border-radius: 28px; position: relative; @@ -166,29 +268,49 @@ margin: 0.35rem 0 0; } -.floating-card, -.rating-card { - position: absolute; - border-radius: 18px; - padding: 1.2rem 1.4rem; - width: max-content; - color: #fff; - min-width: 220px; +.visual-footnote { + display: flex; + gap: 1rem; + flex-wrap: wrap; + margin-top: 1.75rem; + padding-top: 1.25rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); + font-size: 0.85rem; + color: rgba(226, 232, 240, 0.75); } -.floating-card { - top: 15%; - right: 2rem; +.visual-footnote strong { + color: var(--white); + font-size: 0.95rem; +} + +.hero-floating-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.25rem; +} + +.hero-floating-card { display: flex; gap: 1rem; align-items: center; - animation: float 6s ease-in-out infinite; + border-radius: 20px; + padding: 1.35rem 1.5rem; + color: #fff; + min-height: 140px; + animation: float 8s ease-in-out infinite; + background: rgba(15, 23, 42, 0.78); +} + +.hero-floating-card:nth-child(2) { + animation-duration: 9s; + animation-direction: reverse; } .floating-icon { - width: 48px; - height: 48px; - border-radius: 16px; + width: 52px; + height: 52px; + border-radius: 18px; background: rgba(99, 102, 241, 0.2); display: flex; align-items: center; @@ -197,20 +319,15 @@ font-size: 1.25rem; } -.rating-card { - bottom: 5%; - left: 0; - display: flex; - align-items: center; - gap: 0.75rem; - animation: float 7s ease-in-out infinite reverse; -} - .rating-card svg { color: var(--secondary-color); font-size: 1.5rem; } +.rating-card { + gap: 0.85rem; +} + .rating-card strong { color: var(--white); font-size: 0.95rem; @@ -232,16 +349,17 @@ padding-top: 7rem; } - .floating-card, - .rating-card { - position: relative; - margin-top: 1.5rem; - inset: auto; - } - .hero-visual { padding: 0; } + + .hero-grid-overlay { + inset: 18% 5% 8%; + } + + .hero-floating-grid { + grid-template-columns: 1fr; + } } @media (max-width: 576px) { @@ -254,3 +372,30 @@ align-items: flex-start; } } + +@keyframes auroraPulse { + 0%, + 100% { + transform: scale(0.85) translate3d(0, 0, 0); + opacity: 0.25; + } + 50% { + transform: scale(1.05) translate3d(-10px, 10px, 0); + opacity: 0.45; + } +} + +@keyframes orbitalDrift { + 0% { + transform: translate3d(0, 0, 0) scale(1); + opacity: 0.7; + } + 50% { + transform: translate3d(12px, -18px, 0) scale(1.15); + opacity: 1; + } + 100% { + transform: translate3d(0, 0, 0) scale(1); + opacity: 0.7; + } +} diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx index 5131548..016146d 100644 --- a/src/sections/Hero.jsx +++ b/src/sections/Hero.jsx @@ -11,10 +11,40 @@ const stats = [ const capabilities = ['Responsible AI', 'Predictive ops', 'Edge-ready', 'Realtime control']; +const constellationNodes = [ + { id: 'alpha', top: '6%', left: '16%', size: '10px', delay: 0 }, + { id: 'beta', top: '18%', left: '72%', size: '8px', delay: 1.2 }, + { id: 'gamma', top: '42%', left: '12%', size: '6px', delay: 0.5 }, + { id: 'delta', top: '68%', left: '78%', size: '14px', delay: 1.8 }, + { id: 'epsilon', top: '82%', left: '32%', size: '7px', delay: 0.9 }, + { id: 'zeta', top: '30%', left: '88%', size: '9px', delay: 1.4 }, +]; + const Hero = () => { return (
-
+