feat: make hero fancy

lumium-renderer/js/download.js

@@ -1,5 +1,5 @@
-export function download(filename, text) {
-    var element = document.createElement('a');
+export const download = (filename, text) => {
+    const element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
     element.setAttribute('download', filename);
 
@@ -9,4 +9,4 @@ export function download(filename, text) {
     element.click();
 
     document.body.removeChild(element);
-}
+}

lumium-space/package.json

@@ -38,10 +38,12 @@
         "react-mt-svg-lines": "^0.9.1",
         "react-query": "^3.39.1",
         "react-redux": "^7.2.8",
+        "react-tsparticles": "^2.6.0",
         "supertokens-auth-react": "^0.22.3",
         "supertokens-node": "^9.2.3",
         "swr": "^0.4.2",
         "ts-jest": "^29.0.2",
+        "tsparticles": "^2.6.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {

lumium-space/src/sections/landing/CallToAction.tsx

@@ -8,10 +8,107 @@ import {
     Icon,
     IconProps,
 } from '@chakra-ui/react';
+import { useCallback } from 'react';
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
 
 export function CallToAction() {
+    const particlesInit = useCallback(async engine => {
+        console.log(engine);
+        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+        // starting from v2 you can add only the features you need reducing the bundle size
+        await loadFull(engine);
+    }, []);
+
+    const particlesLoaded = useCallback(async container => {
+        await console.log(container);
+    }, []);
+
     return (
-        <Container maxW={'5xl'}>
+        <>
+        <Particles
+            id="tsparticles"
+            init={particlesInit}
+            loaded={particlesLoaded}
+            options={{
+                background: {
+                    opacity: 0,
+                    color: {
+                        value: "#1f1f1f",
+                    },
+                },
+                fullScreen: {
+                    enable: false
+                },
+                fpsLimit: 120,
+                interactivity: {
+                    events: {
+                        onClick: {
+                            enable: false,
+                            mode: "push",
+                        },
+                        onHover: {
+                            enable: false,
+                            mode: "repulse",
+                        },
+                        resize: false,
+                    },
+                    modes: {
+                        push: {
+                            quantity: 4,
+                        },
+                        repulse: {
+                            distance: 200,
+                            duration: 0.4,
+                        },
+                    },
+                },
+                particles: {
+                    color: {
+                        value: "#ffffff",
+                    },
+                    links: {
+                        color: "#ffffff",
+                        distance: 150,
+                        enable: false,
+                        opacity: 0.5,
+                        width: 1,
+                    },
+                    collisions: {
+                        enable: true,
+                    },
+                    move: {
+                        direction: "none",
+                        enable: true,
+                        outModes: {
+                            default: "bounce",
+                        },
+                        random: false,
+                        speed: 1,
+                        straight: false,
+                    },
+                    number: {
+                        density: {
+                            enable: true,
+                            area: 800,
+                        },
+                        value: 80,
+                    },
+                    opacity: {
+                        value: 0.5,
+                    },
+                    shape: {
+                        type: "circle",
+                    },
+                    size: {
+                        value: { min: 1, max: 5 },
+                    },
+                },
+                detectRetina: true,
+            }}
+            />
+        <Container maxW={'5xl'} h={'100vh'}>
             <Stack
                 textAlign={'center'}
                 align={'center'}
@@ -52,6 +149,7 @@ export function CallToAction() {
                 </Flex>
             </Stack>
         </Container>
+                        </> 
     );
 }
 

lumium-space/src/styles/global.css

@@ -8,4 +8,17 @@ body {
 
 body::-webkit-scrollbar {
   display: none;
+}
+
+
+/* TODO: Use Tailwind */
+#tsparticles {
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 0;
 }

package.json

@@ -42,4 +42,4 @@
     "resolutions": {
         "@types/react": "17.0.15"
     }
-}
+}