Created fireflies component

apps/site/package.json

@@ -12,6 +12,8 @@
 	},
 	"dependencies": {
 		"@portabletext/react": "^3.1.0",
+		"@react-three/drei": "9.114.3",
+		"@react-three/fiber": "8.17.10",
 		"@sanity/image-url": "^1.0.2",
 		"axios": "^1.12.2",
 		"bootstrap": "^5.3.3",
@@ -27,6 +29,7 @@
 		"react-use": "^17.5.1",
 		"sass": "^1.79.2",
 		"swr": "^2.3.6",
+		"three": "0.169.0",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {

apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx

@@ -15,7 +15,7 @@ const GetInvolved = () => {
 		<p>Otherwise, if you have some experience under your belt,</p>
 	);
 	const applyLink = (
-		<Button href="/apply" type="button" className={styles.applyButton} disabled>
+		<Button type="button" className={styles.applyButton} disabled>
 			Hacker Apps Closed
 		</Button>
 	);

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -8,10 +8,12 @@ import Moon from "@/assets/background/landing/moon.svg";
 import Trees from "@/assets/background/landing/main-trees.svg";
 
 import styles from "./Landing.module.scss";
+import Fireflies from "@/components/Fireflies/fireflies";
 
 const Landing = () => {
 	return (
 		<div className={styles.backgroundWrapper}>
+			<Fireflies />
 			<Image src={Moon} alt="moon" className={styles.moon} />
 
 			<section className={styles.landing}>

apps/site/src/components/Fireflies/fireflies.module.scss

@@ -0,0 +1,5 @@
+.container {
+	width: 100%;
+	height: 100vh;
+    position: absolute;
+}

apps/site/src/components/Fireflies/fireflies.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import styles from "./fireflies.module.scss";
+import { Canvas } from "@react-three/fiber";
+import { Sparkles } from "@react-three/drei";
+
+export default function Fireflies() {
+	return (
+		<div className={styles.container}>
+			<Canvas>
+				{/* This creates a 3D camera view */}
+				<ambientLight intensity={0.5} />
+
+				<Sparkles
+					count={100} // How many sparkles
+					scale={10} // How spread out they are
+					size={10} // How big each sparkle is
+					speed={0.5} // How fast they float
+					color="yellow" // Color
+				/>
+			</Canvas>
+		</div>
+	);
+}