foxerBN/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve styles

Browse Source
This commit is contained in:
richardtekula
2025-11-11 09:49:01 +01:00
parent 64e2965d1c
commit c96b6b07e2
7 changed files with 837 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

466
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

15
src/App.css
View File

@@ -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 {

12
src/App.jsx
View File

@@ -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 (
<div className="app-shell">
<div className="global-particles" aria-hidden="true">
<Particles id="global-particles" init={particlesInit} options={particlesConfig} />
</div>
<NavigationBar />
<main>
<Hero />

106
src/particles-config.js Normal file
View File

@@ -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;

217
src/sections/Hero.css
View File

@@ -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;
}
}

72
src/sections/Hero.jsx
View File

@@ -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 (
<section id="home" className="hero-section section">
<div className="hero-backdrop" />
<div className="hero-atmosphere" aria-hidden="true">
<div className="hero-backdrop" />
<div className="hero-grid-overlay" />
<div className="hero-aurora hero-aurora-one" />
<div className="hero-aurora hero-aurora-two" />
<div className="hero-aurora hero-aurora-three" />
<div className="hero-orbitals">
{constellationNodes.map(node => (
<span
key={node.id}
className="orbital-node"
style={{
top: node.top,
left: node.left,
width: node.size,
height: node.size,
animationDelay: `${node.delay}s`,
}}
/>
))}
</div>
</div>
<Container>
<Row className="align-items-center">
<Col lg={6} className="hero-content">
@@ -57,7 +87,7 @@ const Hero = () => {
</Col>
<Col lg={6} className="hero-visual-col">
<div className="hero-visual reveal delay-3">
<div className="visual-card glass-panel">
<div className="visual-card glass-panel hero-dashboard-card">
<div className="visual-header">
<div>
<p className="visual-label">Realtime AI cockpit</p>
@@ -90,22 +120,32 @@ const Hero = () => {
<h4>18 regions</h4>
</div>
</div>
</div>
<div className="floating-card glass-panel">
<div className="floating-icon">
<Activity />
</div>
<div>
<p>Signals streaming</p>
<h4>14.2k / min</h4>
<small>Autonomous monitoring stabilised</small>
<div className="visual-footnote">
<span>
Stability window <strong>98.4%</strong>
</span>
<span>
Audit sync <strong>3&nbsp;min ago</strong>
</span>
</div>
</div>
<div className="rating-card glass-panel">
<Stars />
<div>
<p>Impact rating</p>
<strong>AAA ethical compliance</strong>
<div className="hero-floating-grid">
<div className="hero-floating-card glass-panel">
<div className="floating-icon">
<Activity />
</div>
<div>
<p>Signals streaming</p>
<h4>14.2k / min</h4>
<small>Autonomous monitoring stabilised</small>
</div>
</div>
<div className="rating-card hero-floating-card glass-panel">
<Stars />
<div>
<p>Impact rating</p>
<strong>AAA ethical compliance</strong>
</div>
</div>
</div>
<div className="hero-gradient-orb" />