From 1a3a1e99b8c5fee6935b931b26e87f5e873c05e0 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Tue, 31 Dec 2024 18:53:58 -0500
Subject: [PATCH 01/14] Landing changes started

---
 package-lock.json                             | 803 +++++++++++++++++-
 package.json                                  |   6 +-
 public/landing/bg.svg                         |  19 +
 public/landing/logos/meta.png                 | Bin 0 -> 1501 bytes
 public/landing/logos/microsoft.png            | Bin 0 -> 1906 bytes
 public/landing/logos/nvidia.png               | Bin 0 -> 1574 bytes
 public/landing/logos/roblox.png               | Bin 0 -> 1302 bytes
 public/landing/logos/samsung.png              | Bin 0 -> 1503 bytes
 public/landing/logos/ukg.png                  | Bin 0 -> 1234 bytes
 public/models/case.glb                        | Bin 0 -> 18240 bytes
 src/app/events/page.tsx                       |  10 +-
 src/app/globals.css                           |  49 +-
 src/app/page.tsx                              | 617 +-------------
 src/components/Navbar/PublicNavbar.tsx        | 143 +---
 src/components/admin/auth/ProtectedRoute.tsx  |   2 +-
 .../{client-events => events}/Calendar.tsx    |   6 +-
 .../CalendarDays.tsx                          |   4 +-
 src/components/events/CalendarSkeleton.tsx    |  38 +
 .../MonthlyEvent.tsx                          |  10 +-
 .../MonthlyEvents.tsx                         |   4 +-
 src/components/landing/Hero.tsx               |  46 +
 src/components/landing/LandingAbout.tsx       | 428 ++++++++++
 src/components/landing/LogoCarousel.tsx       |  52 ++
 src/components/landing/Scene.tsx              |  56 ++
 tailwind.config.ts                            |   2 +-
 25 files changed, 1536 insertions(+), 759 deletions(-)
 create mode 100644 public/landing/bg.svg
 create mode 100644 public/landing/logos/meta.png
 create mode 100644 public/landing/logos/microsoft.png
 create mode 100644 public/landing/logos/nvidia.png
 create mode 100644 public/landing/logos/roblox.png
 create mode 100644 public/landing/logos/samsung.png
 create mode 100644 public/landing/logos/ukg.png
 create mode 100644 public/models/case.glb
 rename src/components/{client-events => events}/Calendar.tsx (88%)
 rename src/components/{client-events => events}/CalendarDays.tsx (78%)
 create mode 100644 src/components/events/CalendarSkeleton.tsx
 rename src/components/{client-events => events}/MonthlyEvent.tsx (83%)
 rename src/components/{client-events => events}/MonthlyEvents.tsx (85%)
 create mode 100644 src/components/landing/Hero.tsx
 create mode 100644 src/components/landing/LandingAbout.tsx
 create mode 100644 src/components/landing/LogoCarousel.tsx
 create mode 100644 src/components/landing/Scene.tsx

diff --git a/package-lock.json b/package-lock.json
index 39a5bc7..018fc8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,14 @@
       "name": "spcb-website",
       "version": "0.1.0",
       "dependencies": {
+        "@react-three/drei": "^9.120.5",
+        "@react-three/fiber": "^8.17.10",
         "@tanstack/react-query": "^5.59.17",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "firebase": "^10.14.1",
+        "framer-motion": "^11.15.0",
         "lucide-react": "^0.436.0",
         "next": "14.2.6",
         "puppeteer": "^23.11.1",
@@ -22,7 +25,8 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
         "tailwind-merge": "^2.5.2",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "three": "^0.172.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -69,6 +73,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -792,6 +808,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.6.tgz",
@@ -1066,6 +1100,221 @@
         "node": ">=18"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/three": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.5.tgz",
+      "integrity": "sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=6.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "three": ">=0.126"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-three/drei": {
+      "version": "9.120.5",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.120.5.tgz",
+      "integrity": "sha512-hSu3q+gq546Op4aihIkbdIsFfjrmOqcJyMPNGv/IqM0nycJtvv5IzL+MISLplFTNFI6xMBJ9ZwC+7dpq35/FOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@react-spring/three": "~9.7.5",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^2.9.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "react-composer": "^5.0.3",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.7.8",
+        "three-stdlib": "^2.34.0",
+        "troika-three-text": "^0.52.0",
+        "tunnel-rat": "^0.1.2",
+        "utility-types": "^3.11.0",
+        "uuid": "^9.0.1",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^8 || ^9.0.0-0",
+        "react": "^18",
+        "react-dom": "^18",
+        "three": ">=0.137"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "8.17.10",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.17.10.tgz",
+      "integrity": "sha512-S6bqa4DqUooEkInYv/W+Jklv2zjSYCXAhm6qKpAQyOXhTEt5gBXnA7W6aoJ0bjmp9pAeaSj/AZUoz1HCSof/uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/debounce": "^1.2.1",
+        "@types/react-reconciler": "^0.26.7",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "debounce": "^1.2.1",
+        "its-fine": "^1.0.6",
+        "react-reconciler": "^0.27.0",
+        "scheduler": "^0.21.0",
+        "suspend-react": "^0.1.3",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=18.0",
+        "react-dom": ">=18.0",
+        "react-native": ">=0.64",
+        "three": ">=0.133"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
@@ -1117,6 +1366,24 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
       "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/debounce": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.4.tgz",
+      "integrity": "sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1131,17 +1398,21 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1156,6 +1427,41 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
+      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.171.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.171.0.tgz",
+      "integrity": "sha512-oLuT1SAsT+CUg/wxUTFHo0K3NtJLnx9sJhZWQJp/0uXqFpzSk1hRHmvWvpaAWSfvx2db0lVKZ5/wV0I0isD2mQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+      "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1298,6 +1604,30 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.52",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.52.tgz",
+      "integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1688,6 +2018,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1797,6 +2136,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.9.0.tgz",
+      "integrity": "sha512-TpCujnP0vqPppTXXJRYpvIy0xq9Tro6jQf2iYUxlDpPCNxkvE/XGaTuwIxnhINOkVP/ob2CRYXtY3iVYXeMEzA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001653",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
@@ -2012,6 +2360,24 @@
         }
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2116,6 +2482,12 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2217,6 +2589,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.63",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.63.tgz",
+      "integrity": "sha512-S4ZOf2tI5nwFyhzGvsaRA86IvctD6JQtq4+NPSseO6E1AWW66qTDFHdAMBPlFiD7Dfe9TETy0Q7pa/kHcIYYMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/devtools-protocol": {
       "version": "0.0.1367902",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1367902.tgz",
@@ -2256,6 +2637,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3048,6 +3435,12 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3166,6 +3559,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3408,6 +3828,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/goober": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
@@ -3520,6 +3946,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.5.18",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.18.tgz",
+      "integrity": "sha512-znxR+2jecWluu/0KOBqUcvVyAB5tLff10vjMGrpAlz1eFY+ZhF1bY3r82V+Bk7WJdk03iTjtja9KFFz5BrqjSA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -3582,6 +4014,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3915,6 +4353,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -4067,6 +4511,27 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
@@ -4203,6 +4668,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -4271,6 +4745,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4279,6 +4763,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -4325,6 +4824,18 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4950,6 +5461,12 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5062,11 +5579,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5216,6 +5742,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-composer": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-composer/-/react-composer-5.0.3.tgz",
+      "integrity": "sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -5266,8 +5804,32 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
+      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -5309,6 +5871,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -5335,6 +5903,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5655,6 +6232,32 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -5953,6 +6556,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
@@ -6071,6 +6683,45 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.172.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.172.0.tgz",
+      "integrity": "sha512-6HMgMlzU97MsV7D/tY8Va38b83kz8YJX+BefKjspMNAv0Vx6dxMogHOrnRl/sbMIs3BPUKijPqDqJ/+UwJbIow==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.8.tgz",
+      "integrity": "sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==",
+      "deprecated": "Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.151.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.35.2",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.35.2.tgz",
+      "integrity": "sha512-Ns9ZdiFEAsiv8JvHS28Qgxg4YRTq13Ixa4EDUQZhUovZ3j/GLTou4zE887SLSqsuRZwuy3gklttn2ha5JaJpTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -6087,6 +6738,36 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.3",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.3.tgz",
+      "integrity": "sha512-jLhiwgV8kEkwWjvK12f2fHVpbOC75p7SgPQ0cgcz+IMtN5Bdyg4EuFdwuTOVu9ga8UeYdKBpzd1AxviyixtYTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.0",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.0.tgz",
+      "integrity": "sha512-00oxqIIehtEKInOTQekgyknBuRUj1POfOUE2q1OmL+Xlpp4gIu+S0oA0schTyXsDS4d9DkR04iqCdD40rF5R6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -6121,6 +6802,43 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz",
+      "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6282,11 +7000,53 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -6612,6 +7372,35 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.2.tgz",
+      "integrity": "sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 46e29c6..2f81dc5 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@react-three/drei": "^9.120.5",
+    "@react-three/fiber": "^8.17.10",
     "@tanstack/react-query": "^5.59.17",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "firebase": "^10.14.1",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
     "puppeteer": "^23.11.1",
@@ -23,7 +26,8 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.172.0"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/public/landing/bg.svg b/public/landing/bg.svg
new file mode 100644
index 0000000..5d9dbb5
--- /dev/null
+++ b/public/landing/bg.svg
@@ -0,0 +1,19 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8_33)">
+<g filter="url(#filter0_f_8_33)">
+<path d="M582.399 275.104C691.752 275.104 780.399 190.709 780.399 86.6038C780.399 -17.5019 691.752 -101.896 582.399 -101.896C473.047 -101.896 384.399 -17.5019 384.399 86.6038C384.399 190.709 473.047 275.104 582.399 275.104Z" fill="#0018E5" fill-opacity="0.1"/>
+<path d="M718.064 555.499C827.416 555.499 916.064 471.105 916.064 366.999C916.064 262.893 827.416 178.499 718.064 178.499C608.711 178.499 520.064 262.893 520.064 366.999C520.064 471.105 608.711 555.499 718.064 555.499Z" fill="#B0B8FF" fill-opacity="0.3"/>
+<path d="M864.159 857.398C973.512 857.398 1062.16 773.004 1062.16 668.898C1062.16 564.792 973.512 480.398 864.159 480.398C754.807 480.398 666.159 564.792 666.159 668.898C666.159 773.004 754.807 857.398 864.159 857.398Z" fill="#FF804E" fill-opacity="0.4"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_8_33" x="304.399" y="-181.896" width="837.76" height="1119.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_8_33"/>
+</filter>
+<clipPath id="clip0_8_33">
+<rect width="800" height="800" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/landing/logos/meta.png b/public/landing/logos/meta.png
new file mode 100644
index 0000000000000000000000000000000000000000..72ffa9f8f7e8a114fae5d2f4823214077efa86bd
GIT binary patch
literal 1501
zcmV<31tR*1P)<h;3K|Lk000e1NJLTq001%o000sQ1^@s68Iz5N00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1#(G5K~#7F?N(V#
zoK+OQGxGz5%F-#@OaXz&QkD$M&=3{_RG?La5`+}B0YV_b2t<VXKn&pt0|<%_6hb1A
zNEK9;L=%W0L6C|JTiExVvJ*g-Ve`8qgMX)NS`+)=Np9|b?mgc<=R22>|K<4-PJMm7
zm8q$z2JLKYY;;>%TCShBr@6UVBoqoS9YThNhB`bwJ-5k!Epu~oALBliw2Y07y?fsJ
zy1F`h`TCumoo{k;b9Ko-l%k>{i^avokEW-mQ=_A!)yOjlm)$WiFnFb^s><ZF#lgYB
zJdsHB7WtRN#Kc7X>eZ`OSFT(!*U-@5kY|u54B_#3Tw7b)w@+J~l$7MArKM$#<{^2`
zgpoJK$HxcpBBr{!y5h#hMkiNS*WcI+GcqzRTU%R)(l%Uh)Y#bA^dyBjIXNmWE-p@n
zhK9~?KW!x?rLD=yNeN=HJ}xe9jjpMwsd2!5OBEFr0qrX*D=S4sMZFOd6SGVEot>S(
z1O^6<(Kd8&+S}X3dU|^948!Q`@9(cdeoaV7Xi85{_f}I=(?FcIGORlcFE1}I=;-LU
zAmHhRTL=sJprD}J*d*NC+?*d78TkPhc`BX?3JUmsetz!(3=xO(m#6Ugd`Alli`N|-
z98%rf+-8i7jO;)#cjWW%1Z8t`^B|V0If|EuhX(@?V(skgJkUQ@sIRZ@inAmzOn|e5
zQmJ%@Z3yY@?fp_yQ&WtCUutb_^}@k5biAyrOzYaUYk{;qH8u4R?j<Ep3)k1zHx|f=
zwzs!8@oE+G^YdNMr)_3tb`Ky3@S;grmjJ*d{r&xGTrO9DId7mW9UL6|4#vy$j*gBF
z)4H&*@Gf4~leU+ZmbyR+^#=zB`xGdFK;X^>>zK80@H@1RI+FI+*47@Rq@>80WO#Tu
zf{x(=pHY+~5{bJaYjt#VP*<wl-Q6v#sHm`KTbPxV#mCyO=zLF4kF$Kdp`k%c$MDJz
z6B83Jv-cDi7wchMwg=$7Pl-kWbRRi;q8-Flgte`$?c4SB^<{N+bzyjTxPN(hxe%`4
z57Z9fs|BFny%S!8XlrYWX}z_z)f*5H(9WKNKQ99?>Z(LlRn?AMK%AVMOtDst=BkpC
zlFv&^OZVCH+1c4Y0qj+IpHWnRAX`Q7RKSo3xQV~Bv$HLHk+-n0@W{){tMjyj5!6DN
zLWVH{lAkEfW1LTG1hzi8fWU=h>!53$0--pcpP#>*mX;<x)etI(kMDu-E%>(psMsQy
z_V7|g<P6#caLkcGm++!mC*2KY1s9W&3kc$eIWmZz$sy-Z{)vW!goH@Dy1KrAA@`{g
z#6~RwdGahpFk}{$<;u!RAA&K3Tp-sVo@6zGmIJorD$G&lA|Qzu5UZN0si~_9+hHsB
zING_V9b#i+(})E4CQ2ye0XawDuM%1#OItNHHHpZdFK}ECtW0%vwf<3Gev=(q!|haX
z9-pmmVq#)&Z*NZuYUYK7g#{~~2M>7}K<mi+3^_wGGc$iD7nJ1W<VSgVdA%^?I%xYo
z==E#3MK`GU5EnHDVcbD|simdm1F=}VNcYs%)=nY@_YgOXqod<J<flr|>;WF=G1feW
zF+YNSUq#M(4f#Y3x_$=x@$j8-1pWFPfx<o4kiR2f6=`g2Y$lNX5XKlI!9^&p!K+Qq
z&d#dH`_x?`BO~c$Z-H2DVCV+^Ujznyigpct2}SYo@dErf>``uF?52D#$fpC3rHh;=
z`yG&(nHgXBcPOkElM4#S;6=Iz=!8^ORzC4-g$t=7ae32uR=L~V-R+JauF?tWxX4|e
z?Dc(pea9bHD=RBy<Pk6SJnrg4zd}g3w`qT1VBq>6j$F0jsnP?B00000NkvXXu0mjf
D=!VHa

literal 0
HcmV?d00001

diff --git a/public/landing/logos/microsoft.png b/public/landing/logos/microsoft.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa2d5d2f071c24014fe2e0984403a5d0322cc683
GIT binary patch
literal 1906
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

literal 0
HcmV?d00001

diff --git a/public/landing/logos/nvidia.png b/public/landing/logos/nvidia.png
new file mode 100644
index 0000000000000000000000000000000000000000..53b8abcc77ec4ab455d51725be29786395e45236
GIT binary patch
literal 1574
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
Y0|ypn<5kM`j{pDw07*qoM6N<$f*uO=uK)l5

literal 0
HcmV?d00001

diff --git a/public/landing/logos/roblox.png b/public/landing/logos/roblox.png
new file mode 100644
index 0000000000000000000000000000000000000000..d30e6a51e3ded9e671ecc4a3650244a566386f4c
GIT binary patch
literal 1302
zcmV+x1?l>UP)<h;3K|Lk000e1NJLTq002+`001or1^@s6Ij!un00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1gl9zK~#7F?O1Dw
zRaF#TQ)6Qf=%G$QL(Np!WG^d4iqswySwcl%^`nPHnb5C<$bJ+=G++eMkA#S#DWe%O
zEQ5#$qy}`*Y0Ou?UxWA_#n<SlbNxQgI?lTLo_+5eL_}O4e6t^Gt-beId+)W^9TA7a
z;cz${4u`|xa5x+ehvU3Km7F08g~DhQ!@$K=RaHCX0z)<bzzGvj+#J#A1NVUo;Gm5e
z@`>O*I?gT>i@@bz2lRWg287-i6r&{$+O35B0%J20#e+s?KIF@#0$_JPiU+{kz(HUa
zxDfmk_D5Bx0mV~+>5q`_R(UOoNr8MG<eRItaW6PV%HstL)C!~T&EjZ(htc6ld{PN<
zVJ*r|a0&Q7Z2MI27Vz;3^F0mwe_->ew(A0$HIi&pCSZFFig&=f0@2ml_bhapF#b9o
z4AgH$-;GA^QZSwSRVm)QrF0%E7fC)$!bIatdxRvrngxc3;o$RN6W9vdDUuIk^|a=K
zZtTZW>O2c>b`x~#v^^tZ?ol9bmv!E8@bk1$9U1%&uvhCmVGTw$9{gMDcgw(W33x0b
z`vyFy^|9bcBdZ77B_DX*>Vm#Ql7xn#rmqHk4}2RZsteAVi~2K0&J8aF<IJ|PKIXu0
zp>*nlFepE~Rr*hBz0tcbuv?`QHcIvbwM??X_`2Q9XC2rhIRJaEb7IiljPZX`Ib;0?
zl3Zot2K3ztIoI}`B=NFVW!DDdYz2R|9We)5a3}3m@6m-^CdDU{n1hA1LpB)o$>0Pd
zI|2R|nd1`%Osx+w{YSty$p^-<D@?mRbsmBGdQ8=V>RU#Kw`>_?#~_=9`iGIRXF#Xu
zM8+K0-2Xi#I!m<VD{4<!Un;{SNAx6E@Db^iYz&R`e+`>%$%kP<dqalK%AkGP;h3)j
zYv)aB40JYSWg)Rgq}tGe&-z@gkI0Z+Y1*R#`BI7FfZ=h|KUH7HJlGqwug}m4Q?|ot
z1@rL=H)hz>L-uIcIgl%C7dAc3jifY>W8C;kb3vZOA%VQJ%-GXR4CDvT(te(BrbMe{
z;MfE*zpK&qIE=Xv<G1PfT<42{&1#h~F1}G_>{p=EX>Uc$flNF2Von1u*FK)Ef>}iD
z+VKiK7W6Tet&unyFlKss!<YT4h|Lt(Ob+@OCO$&{Uy?XJ#k=TxPLh}Yb}9bu9bkvn
zUzg&IUm;1FHr%Y`WpHMy5OW{{>Oo98M-2#G_m{xW!0W(0QhLf__%{r`0j8Icbw&CI
zNofu`Sj!(I2_dyc7W<_&lWPMWLfz)LeDvrj`sfSkkN1y2w+%Ln*{GCA|0;>2QjCZ3
zO)zFA&fR|#{1W6(uA^nfsrZvCf^J<yE?{l@QM?asE2GA^$6q2V@J+l;uLbfJ$aa8C
zUFHQcp8iuIB0YgrT4fYY=t6p-*eu2A2ov26DremKjnr3{!IxK%c^rd(x<QMA1?&vw
z3&E?#7w>lybGs|p5L?m;lU=N7DymO_4E{{HE(RH+x#7Q<u^$GvD+xNc#f&>!lJuy?
z^zk?Ld^uZSF31-xBTk(&U@d3--zSH|;cz${4u`|xa5x+ehvPiPNyE#M`6<Qk8UO$Q
M07*qoM6N<$f{^H8U;qFB

literal 0
HcmV?d00001

diff --git a/public/landing/logos/samsung.png b/public/landing/logos/samsung.png
new file mode 100644
index 0000000000000000000000000000000000000000..806accf44eed47ed123899b34f55503aa5bee798
GIT binary patch
literal 1503
zcmai!`#%#37{;dz8^XaVCPbtTLt4kJ*~Oxpj*6U(7O_aVEHq>evqh6jQY+UF-56TY
zTxN_&8P!Q=7)Gkmh+M+va(4cKbAEW9@8@~n-@oZ6jvvwl8-M`-fTpJh##_M?iiD`C
zC>n1MF;V~&>ETBL0MvE=jS}Eq!8XNFiR66<1*q<YPAY~n5qS&=0I;*vSI+?f0N@o*
z4D!@frRh6<;kVuOUU`Xd@U5+ZyS@27(oGh>bf|6(G-gEI0AVw+L8ug5-&S4SOzgNJ
zjAtS%NjE?r9Wr~IuAV`o5|pBpK$mj%Krp{oLi`2;Ha6siKZ=~I@)vrRH+ESPdCd8q
zxR9>`!HR&YjZ!oHue!bgkNHuGw|PqqqeE34H%&gNtdv_&K(R!0&+7_0L4G+T&a|&q
zaM^6?Cpkg2FOPN2dQj{9!NSd<GzU~tYIs`D3jzsvDiv`VDZ1QejUrbFW6&}aqXACi
zNyO6@jj&u{4RS46_@RZIy*(SLCJC|}><)(kEvxB`km#e!t+w9~)Fd!WgC^_9p1-A8
zJ|dr>4!`B!yjB!e$4cg^ia_t;2D?B*8jhoDbx2n*vuHr0blN>ps!!qVUv7pzGmJJW
z|0oThvC@9+kqs!51>Kx8F>H>T%Boxod0a3e#fYL4TM(LwHhn$cm5D_;wZe?_20eR(
zv}9nvuPJsSl<9AkM~NK%9G`#Ma%L34B{eA+)FllFskNqw$ybc6gN4M>tiFvCnaBpg
zFu6wYPUxx$2${vVqMCgRblwc1yihH=vWuEVB*VhbSuN-nz$T{8kpf0lwO3RjbUbDH
zwU{4w*pKp-Un8k%)W%P_#CsNI9?Q}f<;*-{YZBr30tk%MW=!Sk4dT{gA*<UBoJLnw
z-$_{p{!z({f-56a^eONq{PmAx4R(1;%7(d+G3UL#BFtR6j!stQu34$y1idQWXZm>#
zv`0Cbd)BQt4IkdY&ha8RN^dk#`Ex0VB@7YqJg__ZVsx-EJv`YZ^R&1)CNX~ZzVfDa
zQbLGG`%S3b!=RlOC{CJefM0Dt=~B+$qZctRJ7U7+p5cI}(eR`RA$G4tq!O=P!e<A}
zsn>n=u3DlYN_PAiuC+KczW3eA7e54%7G0xHL_3`fY2_UxIq*Hk^CcD0@)v2cdYN6A
zn8vF8wq<OkL3vJ@M|zfNEUWMBwmie04LU~9<u%xMxjrca-^E}}mK@7qMf>8&PPrGh
z1V417m&(_esS%pfQR=p99`wkI6LefDbjm`xm}bgF&d^w(SQkn@zsADQc-MlwO#hXZ
zBss^`rPCSxedCAC?I82vws{k7XT-C>x|!#n{;p)SXWZ|1X$)My(_7M9YJ<JNaNEKY
zc29o?6pn<}>GqF`!>D*rgGv^@mB{i4^>(oL^(Ty*8Tng*Vb9oR*|(Ok0nDA*n;ZGT
zrapAs^hd&h_xrWh^PD1Qtt4`IfA5Y58!vB;+OB}aPUp)a&L!Pi8TP(o^)xu?XVTNc
za5JmmH3s&NepuBRm#-DC23y+QGRB{HmXBZR#MO6)`EuUI4Dp6?Tdp=7=;JUx?H)6a
zAv->>b$!3xQnMhZlj`(fk8eB7rj^Wx`$smh?p2PcHLWm>SH!0bmbT2KQno+0Hymly
zFyEnDz?E0Qt16(lP%Jq!V$Ple(d}~Qzdq0m<wO)0Q_R<|2^MkipI*Ot;va9jBtqkM
z4!60G0@N2*kHoiD==8cv7wkXWuLV8=ib4Ari#|ut%bg*Hz*?h)8A~w)^;bv7YdJM7
z*U-4F<c^<CjKlfZUNu5S+sj78LNk9+Qd;fYM@q3MYiU2&s+TsYz1~$J`f^ct7I<hp
z(3UA#iNCE6x|+(Nfc*-SV5Lp7&Caaf_L5b+=9cQ+g$aipv=gCSJiCu!j-S?eX-jwI
rcHbn+{d<CrZOs3V+7#kjE}q}|=nWgX;1*6-_!!{nejHPcBBcBSFMrZ0

literal 0
HcmV?d00001

diff --git a/public/landing/logos/ukg.png b/public/landing/logos/ukg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3bf920c023241df49fabfbf1be6bfdb803edca9
GIT binary patch
literal 1234
zcmV;@1TFiCP)<h;3K|Lk000e1NJLTq002Ay000{Z1^@s6AXV)A00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1ZPP^K~#7F?O0cc
zl}8jlce9#Aqb6Asf=P_2h7<ycNk~<LL=k&^P#-J^f(6@yeMQ9w6|4w~6%i2>LB$7s
zQxsR%URYLL8+NgG*Y*3HS@+zt^OyBaxE~zO%$)C>JM+)XnVBn+Lk>B-&dBIWMMcH$
zP<0?hnM~$hk~8@9|CdF`ZumS3aNdXd4N?mG$rLdgLwyH10RE*E{H9Q!Lf(QrhR~-Z
z)E6S79Q#9c^wo2aA#i$@@MA-vTKVcx@W&W?J*c^m0^c+poLw>Tet?>&IzJNpGXY**
zsBVz|Anyf2J%AKJR>S|IHsq;t3svS9Ya}tikJgf^!4lu2?Gr=e*Dp}@zhdH%J3-uF
ziQ15s0UkffVn|mB50-cv(i}1${Li#O5BRbwb7pT#Jjx-rRGsA;hLfLAe*tvrE2u)>
zQH^55YX&tH@{XhfC*_-{4$OcIf;5CI!%~PHFqb<zFdD_d;`aTLH2dBHF`7V4hSW7C
z_TjMNeE>B~vL}hS4><(k(r3Q-S*lhQC#6)A^VI-2!-Y}<_@pvkUJ*V)amMNy(^ACV
zVA?uC8fbUOX2=Sgpb+<OC@%e-u$|Vnd_(+6+;S-f@u8&aG&4Js-(L7Um6Y)NorA4!
zOsni*!R4&BGQ4fzEegd(`wplbAzQu*+6St;uW~7kljKhKhU(#~MScK@fL|leeb<<n
zRo4bwxX1PWW(Hpwh|8_@v1Cu=4Sl?6Lo-$W5zYl5UYB^ZRpnoJE&~;D4&ZzQHBH=p
z(^v!FH4$!&O`T`@Efe=csF_mzBhoex{H-kO1W?QHGLnouQ+^|b&nU@0stBIpt7Ci`
zn0hFo{v(0GdQ{#os%1QlI9nxZt1@S{JcZ9}$W7D6GrVVv&wW#`AK;WpH1etyfGdXd
zrNqD|9la&4B`s$Hob%!`yPc(8h}k{Dt;Ezn_xn}H-3PTCvR~XW6@(t}31e#~@#tXc
zWs(x;+*xtAsyoKi2LlQH?gh!7We&DWAntm|BoyaJ1oVJ6iMwG{f{CjiBx_$XF+n<`
z*v7=#A~gUy#t+2K*~`j6#P4LdJR<Ee(*wM|{sCjrL?WOs9yj64gS@@6^M{+GeUG?T
z2rmeH9oeLF+%Ksb0X`=XyHMOsOD|D==yKRMsy1fuKP3B-!VljP+ymksJas(Bz5`xf
zOzhp3nUZ(UrmBq>^#3IqS0S_H6@fvOpu<zd-SXa4rU7U#gZ+r-T|<2Vio*?$nYl&6
z&+Mrz<e4Am^5PkJSki%eYb^Y(MA%c^yx@OS+(qQEZkFu30eL&2=0WaCI`Gt3tB<_M
zvld^owYVh{dL}Z%a?h_ruqQDw_#jv)Rp;Xj@VCeCe}&?knk$bVYlOWEdmbM+d=K-F
zg@%DpT*Al1J!sBqL*nHE!M}$3LfmVH$%C_cFwGI<{rSrI6LLzweq#8%8ggcjfnS=y
w<qG{)-20vTmn(!%)Z(arJaWh(hu0g=0e!rFC*zlhQ~&?~07*qoM6N<$f~p!r#sB~S

literal 0
HcmV?d00001

diff --git a/public/models/case.glb b/public/models/case.glb
new file mode 100644
index 0000000000000000000000000000000000000000..a364f6910ad380984c03ff8ce0e79a521b2e7d24
GIT binary patch
literal 18240
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
Wad$=;{}oh5SxI^En$dI4&-h<87M9om

literal 0
HcmV?d00001

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index f4c5f0d..0e7ae93 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,13 +1,13 @@
 "use client";
-import Calendar from "@/components/client-events/Calendar";
-import MonthlyEvents from "@/components/client-events/MonthlyEvents";
+import Calendar from "@/components/events/Calendar";
+import MonthlyEvents from "@/components/events/MonthlyEvents";
 
 export default function Events() {
   return (
     <>
-      <div className="bg" />
-      <section className="relative min-h-screen">
-        <div className="mx-auto max-w-7xl px-10 py-8 text-white">
+      <section className="relative min-h-screen bg-[#04080d]">
+        <div className="noise-bg"/>
+        <div className="mx-auto max-w-7xl px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
           <Calendar />
         </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 2dbcc1c..973bec0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Michroma&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,12 +15,49 @@ textarea {
 }
 
 body {
-  font-family: "Krub", sans-serif;
+  font-family: "Inter", sans-serif;
+  background-color: #ffffff;
 }
 
-.bg {
-  background: linear-gradient(60deg, #000000, #3c4175);
-  inset: 0;
+
+.hero{
+  width: 100%; 
+  height: max(100svh,840px);
+  background-image: url('/landing/bg.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+.noise-bg {
   position: fixed;
-  z-index: -1;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.02;
+  background: 
+    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px 2500px,
+    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px 2500px;
+  background-blend-mode: difference;
+}
+
+
+
+.monthly-event {
+  background: radial-gradient(
+      138.71% 110.11% at 93.15% -36.58%,
+      #4255f911 25%,
+      rgba(25, 26, 30, 0.13) 100%
+    ),
+    radial-gradient(
+      61.66% 37.6% at 6.63% 95.08%,
+      #4255f911 25%,
+      rgba(25, 26, 30, 0.13) 100%
+    ),
+    rgba(26, 26, 26, 0.43);
+  box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
+  border: 1px solid #4255f911;
+
+  
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 05a3804..443a010 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,620 +1,15 @@
-// page.tsx
 "use client";
-
-import React from "react";
-import Image from "next/image";
-import { ChevronDown } from "lucide-react";
-import GlowingLine from "@/components/decorations/GlowingLine";
-import Link from "next/link";
-import { useState, useEffect } from "react";
-import SocialStats from "@/components/MemberCounts/SocialStats";
+import Hero from "@/components/landing/Hero";
+import LandingAbout from "@/components/landing/LandingAbout";
 
 const Website = () => {
-  const [isDesktop, setIsDesktop] = useState(false);
-
-  useEffect(() => {
-    const checkIfDesktop = () => {
-      setIsDesktop(window.innerWidth >= 768);
-    };
-
-    // Initial check
-    checkIfDesktop();
-
-    // Add event listener
-    window.addEventListener("resize", checkIfDesktop);
-
-    // Cleanup
-    return () => window.removeEventListener("resize", checkIfDesktop);
-  }, []);
-
   return (
-    <div className="min-h-screen w-full bg-black">
-      {/* Add Michroma font */}
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
-      `}</style>
-      {/* Hero Section with Background Image */}
-      <div
-        className="relative w-full"
-        style={{
-          backgroundImage:
-            'linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)), url("/landing/mainBackground.jpg")',
-          backgroundSize: "cover",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
-          minHeight: "100vh",
-        }}
-      >
-        {/* Hero Content */}
-        <div className="flex min-h-screen items-center px-4">
-          {/* Content Container with Grid */}
-          <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-8 md:grid-cols-2">
-            {/* Logo Section */}
-            <div className="relative flex items-center justify-center">
-              {/* Outer Glow */}
-              <div
-                className="absolute h-[300px] w-[300px] md:h-[700px] md:w-[900px]"
-                style={{
-                  background: `
-                    radial-gradient(circle at center,
-                      rgba(255,255,255,0.3) 0%,
-                      rgba(255,255,255,0.2) 10%,
-                      rgba(255,255,255,0.15) 20%,
-                      rgba(255,255,255,0.1) 30%,
-                      rgba(255,255,255,0.05) 40%,
-                      rgba(255,255,255,0.03) 50%,
-                      rgba(255,255,255,0.01) 60%,
-                      transparent 100%
-                    )
-                  `,
-                  transform: "translate(-50%, -50%)",
-                  left: "50%",
-                  top: "50%",
-                }}
-              />
-              {/* Inner Glow */}
-              <div
-                className="absolute h-[400px] w-[400px] md:h-[1000px] md:w-[1000px]"
-                style={{
-                  background: `
-                    radial-gradient(circle at center,
-                      rgba(255,255,255,0.3) 0%,
-                      rgba(255,255,255,0.2) 20%,
-                      rgba(255,255,255,0.1) 40%,
-                      transparent 50%
-                    )
-                  `,
-                  transform: "translate(-50%, -50%)",
-                  left: "50%",
-                  top: "50%",
-                }}
-              />
-              {/* Logo */}
-              <div className="relative h-[300px] w-[300px] md:h-[600px] md:w-[600px]">
-                <Image
-                  src="/landing/logo.png"
-                  alt="SPCB Logo"
-                  fill
-                  className="object-contain"
-                  style={{
-                    filter: "drop-shadow(0 0 10px rgba(255,255,255,1))",
-                  }}
-                  priority
-                />
-              </div>
-            </div>
-
-            {/* Text Section */}
-            <div className="flex flex-col items-center space-y-6 text-center md:items-end md:text-right">
-              <h1 className="font-['Michroma'] text-2xl font-bold leading-tight text-white md:text-[40px]">
-                The Society of PC Building
-              </h1>
-
-              {/* Social Stats */}
-              <div className="space-y-3 text-gray-300">
-                <SocialStats />
-              </div>
-
-              {/* Join Button */}
-              <button
-                className="mt-6 border-2 border-white px-6 py-2 font-['Michroma'] text-white transition-all duration-200 ease-in-out hover:scale-105 hover:border-orange-500 active:scale-100 md:px-8 md:py-3"
-                style={{
-                  borderRadius: "0.625rem",
-                  boxShadow: "0px 4px 80px 40px rgba(135, 198, 252, 0.25)",
-                }}
-              >
-                Join Us
-              </button>
-            </div>
-          </div>
-
-          {/* Scroll Indicator */}
-          <div className="absolute inset-x-0 bottom-0 mb-4 flex justify-center md:mb-10">
-            <div className="pointer-events-none animate-bounce">
-              <ChevronDown className="h-10 w-10 text-white md:h-16 md:w-16" />
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="min-h-screen w-full bg-[#04080d]">
+      <div className="noise-bg" />
+      <Hero />
+      <LandingAbout />
 
       {/* About Section */}
-      <div className="relative">
-        <svg
-          className="absolute inset-0 h-full w-full"
-          viewBox="0 0 1440 1024"
-          fill="none"
-          preserveAspectRatio="xMidYMid slice"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          {/* Base black background */}
-          <rect width="1440" height="1024" fill="#000000" />
-
-          {/* Gradient overlay for radial left */}
-          <rect
-            width="1440"
-            height="1024"
-            fill="url(#upperleft1)"
-            opacity="1"
-          />
-
-          <rect
-            width="1440"
-            height="1024"
-            fill="url(#upperright)"
-            opacity="1"
-          />
-          <rect
-            width="1440"
-            height="1024"
-            fill="url(#middleleft)"
-            opacity="0.7"
-          />
-          <rect
-            width="1440"
-            height="1024"
-            fill="url(#bottomright)"
-            opacity="0.6"
-          />
-          <rect
-            width="1440"
-            height="1024"
-            fill="url(#bottomleft)"
-            opacity="0.6"
-          />
-
-          {/* White polygon - using isDesktop state */}
-          {isDesktop && (
-            <polygon
-              points="1440,810 1440,1024 700,1024 770,915"
-              fill="white"
-            />
-          )}
-
-          <defs>
-            <radialGradient
-              id="upperleft1"
-              cx="0"
-              cy="0"
-              r="1"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="translate(500 212) rotate(76) scale(200 400)"
-            >
-              <stop offset="10%" stopColor="#FFCDC0" />
-              <stop offset="100%" stopColor="transparent" />
-            </radialGradient>
-            <radialGradient
-              id="upperright"
-              cx="0"
-              cy="0"
-              r="1"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="translate(802.5 312.106) rotate(76.1646) scale(203.178 343.26)"
-            >
-              <stop offset="0%" stopColor="#B0B8FF" />
-              <stop offset="100%" stopColor="transparent" />
-            </radialGradient>
-
-            <radialGradient
-              id="middleleft"
-              cx="0"
-              cy="0"
-              r="1"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="translate(82.5 712.106) rotate(76.1646) scale(303.178 1243.26)"
-            >
-              <stop offset="0%" stopColor="#FFCDC0" />
-              <stop offset="60%" stopColor="black" />
-            </radialGradient>
-
-            <linearGradient
-              id="bottomright"
-              x1="10%"
-              x2="100%"
-              y1="70%"
-              y2="100%"
-            >
-              <stop offset="40%" stopColor="black" />
-              <stop offset="100%" stopColor="white" />
-            </linearGradient>
-
-            <radialGradient
-              id="bottomleft"
-              cx="0"
-              cy="0"
-              r="1"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="translate(182.5 972.106) rotate(76.1646) scale(103.178 843.26)"
-            >
-              <stop offset="0%" stopColor="#FFCDC0" />
-              <stop offset="100%" stopColor="transparent" />
-            </radialGradient>
-          </defs>
-        </svg>
-
-        <div className="relative min-h-96 w-full py-32">
-          {/* Decorative Lines */}
-          <GlowingLine
-            xPoints={["3", "20"]}
-            yPoints={["15", "15"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["5", "23"]}
-            yPoints={["18", "18"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["75", "90"]}
-            yPoints={["10", "10"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["78", "98"]}
-            yPoints={["14", "14"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          {/* Content Box */}
-          <div className="relative mx-auto max-w-3xl px-4 pt-48">
-            <div
-              className="overflow-hidden rounded-lg p-8"
-              style={{
-                background:
-                  "linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 50%, rgba(28,42,106,0.9) 100%)",
-                boxShadow: `
-                0 0 100px 0px rgba(255, 255, 255, 0.1),
-                0 0 30px 0px rgba(28, 42, 106, 0.5),
-                0 0 15px 0px rgba(255, 255, 255, 0.2)
-              `,
-              }}
-            >
-              <div className="text-center">
-                <h2 className="mb-6 font-['Michroma'] text-4xl font-bold text-white">
-                  About
-                </h2>
-                <p className="mb-8 font-['Michroma'] text-lg text-gray-300">
-                  The Society of PC Building (SPCB) at the University of Florida
-                  is a community for students passionate about PC hardware,
-                  building, and tech. Whether you're a beginner or an expert,
-                  SPCB offers workshops, live demos, and events to help you
-                  learn, collaborate, and build custom rigs. Beyond PCs, we
-                  foster innovation, teamwork, and technical growth, connecting
-                  students through a shared love for technology.
-                </p>
-                <Link
-                  href="/about"
-                  className="inline-flex items-center rounded-full bg-white px-6 py-3 font-['Michroma'] text-sm font-medium text-black transition-all duration-200 hover:scale-105 hover:bg-orange-100"
-                >
-                  Learn More
-                  <svg
-                    className="ml-2 h-4 w-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    />
-                  </svg>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* Activities Section */}
-        <div className="relative min-h-screen w-full py-16 pt-32">
-          {/* Main vertical line */}
-          <GlowingLine
-            xPoints={["30", "30", "65", "65", "30", "30"]}
-            yPoints={["9", "53", "53", "85", "85", "100"]}
-            color="#FFA500"
-            thickness={3}
-            circleSize={8}
-          />
-          <GlowingLine
-            xPoints={[isDesktop ? "29" : "28", isDesktop ? "29" : "28"]}
-            yPoints={["0", "13"]}
-            color="#FFA500"
-            thickness={3}
-            circleSize={8}
-          />
-          <GlowingLine
-            xPoints={[isDesktop ? "28" : "26", isDesktop ? "28" : "26"]}
-            yPoints={["8", "14"]}
-            color="#FFA500"
-            thickness={3}
-            circleSize={8}
-          />
-          {/* Top right Blue Group */}
-          <GlowingLine
-            xPoints={["90", "99"]}
-            yPoints={["10", "10"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["80", "99"]}
-            yPoints={["12", "12"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["85", "94"]}
-            yPoints={["13", "13"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          {/* Middle Left Blue Group */}
-          <GlowingLine
-            xPoints={["1", "9"]}
-            yPoints={["59", "59"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["2", "20"]}
-            yPoints={["60", "60"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-          <GlowingLine
-            xPoints={["0", "7"]}
-            yPoints={["61", "61"]}
-            color="#1E90FF"
-            thickness={2}
-            circleSize={6}
-          />
-
-          {/* Content Cards */}
-          <div className="relative mx-auto max-w-7xl px-4">
-            {/* Socials Card - Left */}
-            <div className="relative left-[10%] mb-32 mt-32 w-[35%]">
-              <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
-                <div className="relative aspect-video w-full overflow-hidden rounded-lg">
-                  <Image
-                    src="/landing/images/socials.png"
-                    alt="Socials"
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="bg-[#020B24] p-4">
-                  <h3 className="font-['Michroma'] text-2xl font-bold text-white">
-                    Socials
-                  </h3>
-                </div>
-              </div>
-            </div>
-
-            {/* GBMs Card - Right */}
-            <div className="relative left-[55%] mb-32 w-[35%]">
-              <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
-                <div className="relative aspect-video w-full overflow-hidden rounded-lg">
-                  <Image
-                    src="/landing/images/gbms.png"
-                    alt="GBMs"
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="bg-[#020B24] p-4">
-                  <h3 className="font-['Michroma'] text-2xl font-bold text-white">
-                    GBMs
-                  </h3>
-                </div>
-              </div>
-            </div>
-
-            {/* PC Builds Card - Left */}
-            <div className="relative left-[10%] w-[35%]">
-              <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
-                <div className="relative aspect-video w-full overflow-hidden rounded-lg">
-                  <Image
-                    src="/landing/images/pc-builds.png"
-                    alt="PC Builds"
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="bg-[#020B24] p-4">
-                  <h3 className="font-['Michroma'] text-2xl font-bold text-white">
-                    PC Builds
-                  </h3>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* Social Links Section */}
-        <div className="relative min-h-96 w-full">
-          <div className="hidden md:block">
-            <GlowingLine
-              xPoints={["32", "32", "73", "73"]}
-              yPoints={["0", "20", "20", "35"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["31", "31"]}
-              yPoints={["4", "15"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["53", "60"]}
-              yPoints={["18", "18"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-          </div>
-
-          {/* Content */}
-          <div className="relative mx-auto max-w-6xl px-4 py-0 md:py-0">
-            <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
-              {/* Left side */}
-              <div className="pt-0 md:pb-0 md:pt-64">
-                <div className="flex items-center gap-4">
-                  <Image
-                    src="/navbar/logo.png"
-                    alt="SPCB Logo"
-                    width={150}
-                    height={150}
-                    className="h-[100px] w-[100px] rounded-full md:h-[200px] md:w-[200px]"
-                  />
-                </div>
-                <h2 className="my-4 text-2xl font-bold text-white md:my-6 md:text-4xl">
-                  Proudly building PCs.
-                </h2>
-                {/* Social Media Icons */}
-                <div className="flex gap-3 md:gap-4">
-                  <Link
-                    href="https://www.linkedin.com/company/the-society-of-pc-building"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="transition-transform hover:scale-110"
-                  >
-                    <Image
-                      src="/landing/linkedin.png"
-                      alt="LinkedIn"
-                      width={30}
-                      height={30}
-                      className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-                    />
-                  </Link>
-                  <Link
-                    href="https://www.instagram.com/pcbuildinguf/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="transition-transform hover:scale-110"
-                  >
-                    <Image
-                      src="/landing/instagram.png"
-                      alt="Instagram"
-                      width={30}
-                      height={30}
-                      className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-                    />
-                  </Link>
-                  <Link
-                    href="https://discord.com/invite/jfq9phWqTF"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="transition-transform hover:scale-110"
-                  >
-                    <Image
-                      src="/landing/discord.png"
-                      alt="Discord"
-                      width={30}
-                      height={30}
-                      className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-                    />
-                  </Link>
-                  <Link
-                    href="https://linktr.ee/pcbuildinguf"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="transition-transform hover:scale-110"
-                  >
-                    <Image
-                      src="/landing/linktree.png"
-                      alt="Linktree"
-                      width={30}
-                      height={30}
-                      className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-                    />
-                  </Link>
-                </div>
-              </div>
-
-              {/* Right side - GUD section */}
-              <div className="w-full pt-8 md:w-auto md:pt-96">
-                <div className="flex flex-col items-start gap-4 md:items-end">
-                  <div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
-                    <h2 className="order-2 text-2xl font-bold text-white md:order-1 md:text-4xl md:text-black">
-                      Gator User Design
-                    </h2>
-                    <Image
-                      src="/landing/gud.png"
-                      alt="GUD Logo"
-                      width={50}
-                      height={50}
-                      className="order-1 h-[40px] w-[40px] rounded-full md:order-2 md:h-[60px] md:w-[60px]"
-                    />
-                  </div>
-                  <Link
-                    href="https://www.instagram.com/gatoruserdesign/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center text-white hover:underline md:text-black"
-                  >
-                    Check us out
-                    <svg
-                      className="ml-2 h-4 w-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M14 5l7 7m0 0l-7 7m7-7H3"
-                      />
-                    </svg>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* Footer */}
-          <footer className="mt-0 pb-0 text-right md:mt-16">
-            <div className="mx-auto max-w-7xl px-4 pb-8">
-              <p className="text-sm text-white transition-colors md:text-black">
-                &copy; {new Date().getFullYear()} The Society of PC Building.
-                All rights reserved.
-              </p>
-            </div>
-          </footer>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 462a3cb..66cfd27 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -1,122 +1,33 @@
-"use client";
-
 import Link from "next/link";
-import Image from "next/image";
-import { useState } from "react";
-
-export default function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleMenu = () => setIsOpen(!isOpen);
+import { FaBars } from "react-icons/fa";
 
+export default function Nav() {
   return (
-    <>
-      {/* Add Michroma font */}
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
-      `}</style>
-
-      <nav className="z-50 bg-black">
-        {/* Main navbar */}
-        <div className="mx-auto px-12">
-          <div className="flex h-20 items-center justify-between">
-            {/* Logo */}
-            <div className="flex-shrink-0">
-              <Link href="/">
-                <Image
-                  src="/navbar/logo.png"
-                  alt="SPCB Logo"
-                  width={50}
-                  height={50}
-                  className="h-12 w-12"
-                />
-              </Link>
-            </div>
-
-            {/* Desktop Navigation */}
-            <div className="hidden space-x-12 lg:flex">
-              <Link
-                href="/projects"
-                className="font-['Michroma'] text-[20px] text-white transition-colors hover:text-orange-300"
-              >
-                Projects
-              </Link>
-              <Link
-                href="/events"
-                className="font-['Michroma'] text-[20px] text-white transition-colors hover:text-orange-300"
-              >
-                Events
-              </Link>
-              <Link
-                href="/about"
-                className="font-['Michroma'] text-[20px] text-white transition-colors hover:text-orange-300"
-              >
-                About
-              </Link>
-            </div>
-
-            {/* Mobile menu button */}
-            <div className="flex lg:hidden">
-              <button
-                onClick={toggleMenu}
-                className="inline-flex items-center justify-center rounded-md p-2 text-white transition-colors hover:text-gray-300"
-                aria-expanded={isOpen}
-              >
-                <span className="sr-only">Open main menu</span>
-                <svg
-                  className="h-6 w-6 transition-transform duration-200"
-                  style={{ transform: isOpen ? "rotate(90deg)" : "rotate(0)" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d={
-                      isOpen
-                        ? "M6 18L18 6M6 6l12 12"
-                        : "M4 6h16M4 12h16M4 18h16"
-                    }
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Mobile menu */}
-        <div
-          className={`transform overflow-hidden transition-all duration-300 ease-in-out lg:hidden ${isOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0"} `}
+    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-8 py-3 text-[#f1f1f1] 
+    backdrop-blur-lg sm:top-4 sm:rounded-full sm:border sm:py-1.5 sm:pl-6 sm:pr-4">
+      <figure>
+        <img
+          src="/iconography/spcb-color.png"
+          alt=""
+          className="w-11 sm:h-10 sm:w-10"
+        />
+      </figure>
+      <div className="hidden items-center gap-6 text-sm sm:flex">
+        <Link href={"/"}>Home</Link>
+        <Link href={"/about"}>About</Link>
+        <Link href={"/events"}>Events</Link>
+        <Link href={"/projects"}>Projects</Link>
+        <a
+          href="https://discord.gg/CmqKbnBDBG"
+          target="_blank"
+          className="rounded-full bg-[#B0B8FF] px-4 py-2 text-black"
         >
-          <div className="space-y-1 px-4 pb-3 pt-2">
-            <Link
-              href="/about"
-              className="block transform py-2 font-['Michroma'] text-[20px] text-white transition-all duration-200 hover:pl-2 hover:text-gray-300"
-            >
-              About
-            </Link>
-            <Link
-              href="/projects"
-              className="block transform py-2 font-['Michroma'] text-[20px] text-white transition-all duration-200 hover:pl-2 hover:text-gray-300"
-            >
-              Projects
-            </Link>
-            <Link
-              href="/events"
-              className="block transform py-2 font-['Michroma'] text-[20px] text-white transition-all duration-200 hover:pl-2 hover:text-gray-300"
-            >
-              Events
-            </Link>
-          </div>
-        </div>
-
-        {/* Red and blue lines at bottom */}
-        <div className="relative">
-          <div className="h-[4px] w-full bg-orange-600"></div>
-        </div>
-      </nav>
-    </>
+          SPCB Discord
+        </a>
+      </div>
+      <div className="flex items-center text-2xl sm:hidden">
+        <FaBars />
+      </div>
+    </nav>
   );
 }
diff --git a/src/components/admin/auth/ProtectedRoute.tsx b/src/components/admin/auth/ProtectedRoute.tsx
index 4615351..1045cb6 100644
--- a/src/components/admin/auth/ProtectedRoute.tsx
+++ b/src/components/admin/auth/ProtectedRoute.tsx
@@ -37,5 +37,5 @@ export default function ProtectedRoute({
     return null;
   }
 
-  return <main>{children}</main>;
+  return <main className="">{children}</main>;
 }
diff --git a/src/components/client-events/Calendar.tsx b/src/components/events/Calendar.tsx
similarity index 88%
rename from src/components/client-events/Calendar.tsx
rename to src/components/events/Calendar.tsx
index 8904517..3ae8b0b 100644
--- a/src/components/client-events/Calendar.tsx
+++ b/src/components/events/Calendar.tsx
@@ -12,6 +12,7 @@ import {
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import { useCachedEvents } from "@/hooks/useCachedEvents";
 import CalendarDays from "./CalendarDays";
+import CalendarSkeleton from "./CalendarSkeleton";
 
 export default function Calendar() {
   const [currentDate, setCurrentDate] = useState(new Date());
@@ -40,7 +41,7 @@ export default function Calendar() {
   return (
     <div className="pt-32 text-white">
       <div className="flex items-end justify-between">
-        <p className="font-title text-3xl">
+        <p className="font-Michroma text-3xl">
           {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">
@@ -64,7 +65,7 @@ export default function Calendar() {
         {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
           <div
             key={day}
-            className="border border-b-0 border-gray-500 p-3 text-xl"
+            className="border border-b-0 border-gray-800 bg-[#0A0E14] p-3 text-xl"
           >
             {day}
           </div>
@@ -73,6 +74,7 @@ export default function Calendar() {
 
       {/* Calendar Days */}
       {events && <CalendarDays daysToDisplay={daysToDisplay} currentDate={currentDate} events={events}/>}
+      {isLoading && <CalendarSkeleton daysToDisplay={daysToDisplay} currentDate={currentDate}/>}
     </div>
   );
 }
diff --git a/src/components/client-events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
similarity index 78%
rename from src/components/client-events/CalendarDays.tsx
rename to src/components/events/CalendarDays.tsx
index 3d7bf4d..c449b69 100644
--- a/src/components/client-events/CalendarDays.tsx
+++ b/src/components/events/CalendarDays.tsx
@@ -25,7 +25,7 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
         if (isCurrentMonth) {
           return (
             <div
-              className={`h-32 border-l border-t border-gray-500 p-2 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
+              className={`h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
               key={i}
             >
               <div className="flex justify-end">{format(day, "dd")}</div>
@@ -39,7 +39,7 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
         } else {
           return (
             <div
-              className={`border-l border-t border-gray-500 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
+              className={`border-l border-t border-gray-800 bg-[#0F1319] ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
               key={i}
             ></div>
           );
diff --git a/src/components/events/CalendarSkeleton.tsx b/src/components/events/CalendarSkeleton.tsx
new file mode 100644
index 0000000..81a4401
--- /dev/null
+++ b/src/components/events/CalendarSkeleton.tsx
@@ -0,0 +1,38 @@
+import { format, isSameDay } from "date-fns";
+
+type CalendarSkeletonProps = {
+  daysToDisplay: Date[];
+  currentDate: Date;
+};
+
+const CalendarSkeleton: React.FC<CalendarSkeletonProps> = ({
+  daysToDisplay,
+  currentDate,
+}) => {
+  return (
+    <div className="grid w-full grid-cols-7">
+      {daysToDisplay.map((day, i) => {
+        const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
+
+        if (isCurrentMonth) {
+          return (
+            <div
+              className={`h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
+              key={i}
+            >
+              <div className="flex justify-end">{format(day, "dd")}</div>
+            </div>
+          );
+        } else {
+          return (
+            <div
+              className={`border-l border-t border-gray-800 bg-[#0F1319] ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
+              key={i}
+            ></div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+export default CalendarSkeleton;
diff --git a/src/components/client-events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
similarity index 83%
rename from src/components/client-events/MonthlyEvent.tsx
rename to src/components/events/MonthlyEvent.tsx
index c82abec..adfb0aa 100644
--- a/src/components/client-events/MonthlyEvent.tsx
+++ b/src/components/events/MonthlyEvent.tsx
@@ -35,19 +35,19 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
 
   return (
     <div className="grid grid-cols-10">
-      <div className="col-span-2 flex flex-col justify-center gap-2 font-title text-4xl">
+      <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-4xl">
         <p>{dayOfWeek}</p>
         <p>{dayOfMonth}</p>
       </div>
-      <div className="col-span-8 w-full rounded-md bg-black bg-opacity-60 p-5 px-7">
-        <p className="text-2xl font-semibold">{event.title}</p>
+      <div className="monthly-event col-span-8 w-full rounded-md p-5 px-7">
+        <p className="text-xl font-semibold">{event.title}</p>
         <div className="flex gap-3 pt-2">
           <p>
             Location:{" "}
-            <span className="text-lg font-semibold">{event.location}</span>
+            <span className=" font-semibold">{event.location}</span>
           </p>
           <p>
-            Time: <span className="text-lg font-semibold">{time}</span>
+            Time: <span className="font-semibold">{time}</span>
           </p>
         </div>
         <p className="mt-2">{event.description}</p>
diff --git a/src/components/client-events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
similarity index 85%
rename from src/components/client-events/MonthlyEvents.tsx
rename to src/components/events/MonthlyEvents.tsx
index 71581dc..f6f27d1 100644
--- a/src/components/client-events/MonthlyEvents.tsx
+++ b/src/components/events/MonthlyEvents.tsx
@@ -21,14 +21,14 @@ export default function MonthlyEvents() {
   if (isLoading) {
     return (
       <div className="mt-16">
-        <h1 className="font-title text-4xl">December Events</h1>
+        <h1 className="font-Michroma text-3xl">December Events</h1>
       </div>
     );
   }
 
   return (
     <div className="mt-16">
-      <h1 className="font-title text-4xl">December Events</h1>
+      <h1 className="font-Michroma text-3xl">December Events</h1>
       <div className="mt-16 grid gap-12">
         {events?.map((_event) => <MonthlyEvent key={_event.id} event={_event} />)}
       </div>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
new file mode 100644
index 0000000..7151b22
--- /dev/null
+++ b/src/components/landing/Hero.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import Scene from './Scene'
+import LogoCarousel from './LogoCarousel'
+
+export default function Hero() {
+  return (
+    <div className="relative hero pt-24 pb-28 text-[#f1f1f1]">
+        <div className="flex-row flex items-center max-w-7xl mx-auto h-full px-4 sm:px-10 pb-6">
+          <div className="w-3/4">
+            <span className="bg-black text-xs px-4 py-1.5 rounded-full bg-opacity-50 border border-[#B0B8FF] border-opacity-40">
+              1000+ Active Members!
+            </span>
+            <h1 className="font-Michroma text-[44px] font-semibold pt-5">
+              <span className='hidden sm:inline'>The</span> Society of PC Building
+            </h1>
+            <p className="text-xl max-w-[620px] pt-3 leading-normal font-medium">
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi
+              aliquam officia perferendis rerum fuga voluptas unde.
+            </p>
+            <button className="mt-6 bg-black bg-opacity-80 py-2 px-8 rounded-md font-medium text-white border border-[#B0B8FF] border-opacity-40 ">
+              Join the Club!
+            </button>
+
+            <div className="mt-32">
+              <p className="text-sm opacity-80">
+                Led by a team of officers with experience at:
+              </p>
+              <div className="hidden sm:flex items-center gap-6 -mt-5 h-[103px]">
+                <img src="/landing/logos/roblox.png" alt="" />
+                <img src="/landing/logos/nvidia.png" alt="" />
+                <img src="/landing/logos/microsoft.png" alt="" />
+                <img src="/landing/logos/samsung.png" alt="" className="mt-px" />
+                <img src="/landing/logos/ukg.png" alt="" />
+                <img src="/landing/logos/meta.png" alt="" className="pb-0.5" />
+                <p className="opacity-70">+ More!</p>
+              </div>
+              <LogoCarousel/>
+            </div>
+          </div>
+          <div className="w-1/4 h-[280px] cursor-grab flex items-center">
+            <Scene />
+          </div>
+        </div>
+      </div>
+  )
+}
diff --git a/src/components/landing/LandingAbout.tsx b/src/components/landing/LandingAbout.tsx
new file mode 100644
index 0000000..65487f9
--- /dev/null
+++ b/src/components/landing/LandingAbout.tsx
@@ -0,0 +1,428 @@
+import Image from "next/image";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import GlowingLine from "../decorations/GlowingLine";
+
+export default function LandingAbout() {
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    const checkIfDesktop = () => {
+      setIsDesktop(window.innerWidth >= 768);
+    };
+
+    // Initial check
+    checkIfDesktop();
+
+    // Add event listener
+    window.addEventListener("resize", checkIfDesktop);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkIfDesktop);
+  }, []);
+  return (
+    <div className="relative">
+      <svg
+        className="absolute inset-0 h-full w-full"
+        viewBox="0 0 1440 1024"
+        fill="none"
+        preserveAspectRatio="xMidYMid slice"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {/* Gradient overlay for radial left */}
+
+        {/* White polygon - using isDesktop state */}
+        {isDesktop && (
+          <polygon points="1440,810 1440,1024 700,1024 770,915" fill="white" />
+        )}
+      </svg>
+
+      <div className="relative min-h-96 w-full py-32">
+        {/* Decorative Lines */}
+        <GlowingLine
+          xPoints={["3", "20"]}
+          yPoints={["15", "15"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["5", "23"]}
+          yPoints={["18", "18"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["75", "90"]}
+          yPoints={["10", "10"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["78", "98"]}
+          yPoints={["14", "14"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        {/* Content Box */}
+        <div className="relative mx-auto max-w-3xl px-4 pt-48">
+          <motion.div
+            initial={{ opacity: 0, y: 80 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            viewport={{ once: true, amount: 0.4 }}
+            className="overflow-hidden rounded-lg p-8"
+            style={{
+              background:
+                "linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 50%, rgba(28,42,106,0.9) 100%)",
+              boxShadow: `
+                0 0 100px 0px rgba(255, 255, 255, 0.1),
+                0 0 30px 0px rgba(28, 42, 106, 0.5),
+                0 0 15px 0px rgba(255, 255, 255, 0.2)
+              `,
+            }}
+          >
+            <div className="text-center">
+              <h2 className="mb-6 font-['Michroma'] text-4xl font-bold text-white">
+                About
+              </h2>
+              <p className="mb-8 text-xl text-gray-300">
+                The Society of PC Building (SPCB) at the University of Florida
+                is a community for students passionate about PC hardware,
+                building, and tech. Whether you're a beginner or an expert, SPCB
+                offers workshops, live demos, and events to help you learn,
+                collaborate, and build custom rigs. Beyond PCs, we foster
+                innovation, teamwork, and technical growth, connecting students
+                through a shared love for technology.
+              </p>
+              <Link
+                href="/about"
+                className="inline-flex items-center rounded-full bg-white px-6 py-3 font-['Michroma'] text-sm font-medium text-black transition-all duration-200 hover:scale-105 hover:bg-orange-100"
+              >
+                Learn More
+                <svg
+                  className="ml-2 h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  />
+                </svg>
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+      {/* Activities Section */}
+      <div className="relative min-h-screen w-full py-16 pt-32">
+        {/* Main vertical line */}
+        <GlowingLine
+          xPoints={["30", "30", "65", "65", "30", "30"]}
+          yPoints={["9", "53", "53", "85", "85", "100"]}
+          color="#FFA500"
+          thickness={3}
+          circleSize={8}
+        />
+        <GlowingLine
+          xPoints={[isDesktop ? "29" : "28", isDesktop ? "29" : "28"]}
+          yPoints={["0", "13"]}
+          color="#FFA500"
+          thickness={3}
+          circleSize={8}
+        />
+        <GlowingLine
+          xPoints={[isDesktop ? "28" : "26", isDesktop ? "28" : "26"]}
+          yPoints={["8", "14"]}
+          color="#FFA500"
+          thickness={3}
+          circleSize={8}
+        />
+        {/* Top right Blue Group */}
+        <GlowingLine
+          xPoints={["90", "99"]}
+          yPoints={["10", "10"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["80", "99"]}
+          yPoints={["12", "12"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["85", "94"]}
+          yPoints={["13", "13"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        {/* Middle Left Blue Group */}
+        <GlowingLine
+          xPoints={["1", "9"]}
+          yPoints={["59", "59"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["2", "20"]}
+          yPoints={["60", "60"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["0", "7"]}
+          yPoints={["61", "61"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+
+        {/* Content Cards */}
+        <div className="relative mx-auto max-w-7xl px-4">
+          {/* Socials Card - Left */}
+          <motion.div
+            className="relative left-[10%] mb-32 mt-32 w-[35%]"
+            initial={{ opacity: 0, y: 80 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            viewport={{ once: true, amount: 0.4 }}
+          >
+            <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
+              <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
+                <Image
+                  src="/landing/images/socials.png"
+                  alt="Socials"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div className="bg-[#020B24] p-4">
+                <h3 className="font-['Michroma'] text-2xl font-bold text-white">
+                  Socials
+                </h3>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* GBMs Card - Right */}
+          <motion.div
+            className="relative left-[55%] mb-32 w-[35%]"
+            initial={{ opacity: 0, y: 80 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            viewport={{ once: true, amount: 0.4 }}
+          >
+            <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
+              <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
+                <Image
+                  src="/landing/images/gbms.png"
+                  alt="GBMs"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div className="bg-[#020B24] p-4">
+                <h3 className="font-['Michroma'] text-2xl font-bold text-white">
+                  GBMs
+                </h3>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* PC Builds Card - Left */}
+          <motion.div
+            className="relative left-[10%] w-[35%]"
+            initial={{ opacity: 0, y: 80 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            viewport={{ once: true, amount: 0.4 }}
+          >
+            <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
+              <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
+                <Image
+                  src="/landing/images/pc-builds.png"
+                  alt="PC Builds"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div className="bg-[#020B24] p-4">
+                <h3 className="font-['Michroma'] text-2xl font-bold text-white">
+                  PC Builds
+                </h3>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+      {/* Social Links Section */}
+      <div className="relative min-h-96 w-full">
+        <div className="hidden md:block">
+          <GlowingLine
+            xPoints={["32", "32", "73", "73"]}
+            yPoints={["0", "20", "20", "35"]}
+            color="#FFA500"
+            thickness={3}
+            circleSize={8}
+          />
+          <GlowingLine
+            xPoints={["31", "31"]}
+            yPoints={["4", "15"]}
+            color="#FFA500"
+            thickness={3}
+            circleSize={8}
+          />
+          <GlowingLine
+            xPoints={["53", "60"]}
+            yPoints={["18", "18"]}
+            color="#FFA500"
+            thickness={3}
+            circleSize={8}
+          />
+        </div>
+
+        {/* Content */}
+        <div className="relative mx-auto max-w-6xl px-4 py-0 md:py-0">
+          <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
+            {/* Left side */}
+            <div className="pt-0 md:pb-0 md:pt-64">
+              <div className="flex items-center gap-4">
+                <Image
+                  src="/navbar/logo.png"
+                  alt="SPCB Logo"
+                  width={150}
+                  height={150}
+                  className="h-[100px] w-[100px] rounded-full md:h-[200px] md:w-[200px]"
+                />
+              </div>
+              <h2 className="my-4 text-2xl font-bold text-white md:my-6 md:text-4xl">
+                Proudly building PCs.
+              </h2>
+              {/* Social Media Icons */}
+              <div className="flex gap-3 md:gap-4">
+                <Link
+                  href="https://www.linkedin.com/company/the-society-of-pc-building"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform hover:scale-110"
+                >
+                  <Image
+                    src="/landing/linkedin.png"
+                    alt="LinkedIn"
+                    width={30}
+                    height={30}
+                    className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+                  />
+                </Link>
+                <Link
+                  href="https://www.instagram.com/pcbuildinguf/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform hover:scale-110"
+                >
+                  <Image
+                    src="/landing/instagram.png"
+                    alt="Instagram"
+                    width={30}
+                    height={30}
+                    className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+                  />
+                </Link>
+                <Link
+                  href="https://discord.com/invite/jfq9phWqTF"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform hover:scale-110"
+                >
+                  <Image
+                    src="/landing/discord.png"
+                    alt="Discord"
+                    width={30}
+                    height={30}
+                    className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+                  />
+                </Link>
+                <Link
+                  href="https://linktr.ee/pcbuildinguf"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform hover:scale-110"
+                >
+                  <Image
+                    src="/landing/linktree.png"
+                    alt="Linktree"
+                    width={30}
+                    height={30}
+                    className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+                  />
+                </Link>
+              </div>
+            </div>
+
+            {/* Right side - GUD section */}
+            <div className="w-full pt-8 md:w-auto md:pt-96">
+              <div className="flex flex-col items-start gap-4 md:items-end">
+                <div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
+                  <h2 className="order-2 text-2xl font-bold text-white md:order-1 md:text-4xl md:text-black">
+                    Gator User Design
+                  </h2>
+                  <Image
+                    src="/iconography/gud-color.png"
+                    alt="GUD Logo"
+                    width={50}
+                    height={50}
+                    className="order-1 h-[40px] w-[40px] rounded-full md:order-2 md:h-[60px] md:w-[60px]"
+                  />
+                </div>
+                <Link
+                  href="https://www.instagram.com/gatoruserdesign/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center text-white hover:underline md:text-black"
+                >
+                  Check us out
+                  <svg
+                    className="ml-2 h-4 w-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M14 5l7 7m0 0l-7 7m7-7H3"
+                    />
+                  </svg>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Footer */}
+        <footer className="mt-0 pb-0 text-right md:mt-16">
+          <div className="mx-auto max-w-7xl px-4 pb-8">
+            <p className="text-sm text-white transition-colors md:text-black">
+              &copy; {new Date().getFullYear()} The Society of PC Building. All
+              rights reserved.
+            </p>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landing/LogoCarousel.tsx b/src/components/landing/LogoCarousel.tsx
new file mode 100644
index 0000000..e2b6dad
--- /dev/null
+++ b/src/components/landing/LogoCarousel.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface Logo {
+  src: string;
+  alt: string;
+}
+
+const LogoCarousel: React.FC = () => {
+  const logos: Logo[] = [
+    { src: "/landing/logos/roblox.png", alt: "Roblox" },
+    { src: "/landing/logos/nvidia.png", alt: "NVIDIA" },
+    { src: "/landing/logos/microsoft.png", alt: "Microsoft" },
+    { src: "/landing/logos/samsung.png", alt: "Samsung" },
+    { src: "/landing/logos/ukg.png", alt: "UKG" },
+    { src: "/landing/logos/meta.png", alt: "Meta" }
+  ];
+
+  // Duplicate the logos array to create a seamless infinite effect
+  const duplicatedLogos = [...logos, ...logos];
+
+  return (
+    <div className="sm:hidden w-full overflow-hidden -mt-5 scale-90">
+      <motion.div
+        className="flex items-center gap-6"
+        animate={{
+          x: [0, -50 * logos.length],
+        }}
+        transition={{
+          x: {
+            duration: 20,
+            repeat: Infinity,
+            ease: "linear"
+          }
+        }}
+      >
+        {duplicatedLogos.map((logo, index) => (
+          <div key={index} className="flex-shrink-0">
+            <img 
+              src={logo.src} 
+              alt={logo.alt} 
+              className="w-auto object-contain"
+            />
+          </div>
+        ))}
+        <span className="text-gray-600">+ More!</span>
+      </motion.div>
+    </div>
+  );
+};
+
+export default LogoCarousel;
diff --git a/src/components/landing/Scene.tsx b/src/components/landing/Scene.tsx
new file mode 100644
index 0000000..5a20400
--- /dev/null
+++ b/src/components/landing/Scene.tsx
@@ -0,0 +1,56 @@
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Environment, useGLTF } from '@react-three/drei';
+import { useRef } from 'react';
+import { Group } from 'three';
+
+function Scene() {
+  return (
+    <Canvas
+      shadows
+      camera={{ position: [3, 3, 11.2], fov: 50 }}
+      style={{ height: "240px" }}
+    >
+      <ambientLight intensity={0.3} />
+      <directionalLight
+        castShadow
+        position={[5, 5, 5]}
+        intensity={1}
+        shadow-mapSize-width={1024}
+        shadow-mapSize-height={1024}
+      />
+      <Model position={[0, 0, 0]} />
+      <OrbitControls enableZoom={false} enablePan={false} />
+      <Environment preset="night" />
+    </Canvas>
+  );
+}
+
+export default Scene;
+
+interface ModelProps {
+  position: [number, number, number];
+}
+
+export function Model(props: ModelProps) {
+  const { nodes, materials } = useGLTF('/models/case.glb') as any; // Use "as any" to avoid issues with the GLTF loader
+  const ref = useRef<Group>(null);
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      ref.current.rotation.y += delta / 2;
+    }
+  });
+
+  return (
+    <group {...props} dispose={null} scale={0.8} ref={ref}>
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes['0'].geometry}
+        material={materials.lambert1}
+      />
+    </group>
+  );
+}
+
+useGLTF.preload('/models/case.glb');
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e167c1..74049d2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,7 +26,7 @@ const config = {
         'light-blue': "#8BC5F7",
       },
       fontFamily: {
-        title: ["Michroma", "sans-serif"],
+        Michroma: ["Michroma", "sans-serif"],
       },
     },
   },

From 9131087a3f50dfd8574282b1dfd665f6ca8a6289 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Tue, 31 Dec 2024 19:42:04 -0500
Subject: [PATCH 02/14] updates

---
 src/app/globals.css                     | 8 ++++----
 src/components/events/MonthlyEvents.tsx | 2 +-
 src/components/landing/LandingAbout.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 973bec0..0c55500 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -47,13 +47,13 @@ body {
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
-      #4255f911 25%,
-      rgba(25, 26, 30, 0.13) 100%
+      #4255f922 25%,
+      #0F1319 100%
     ),
     radial-gradient(
       61.66% 37.6% at 6.63% 95.08%,
-      #4255f911 25%,
-      rgba(25, 26, 30, 0.13) 100%
+      #4255f922 25%,
+      #0F1319 100%
     ),
     rgba(26, 26, 26, 0.43);
   box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
index f6f27d1..6c6e959 100644
--- a/src/components/events/MonthlyEvents.tsx
+++ b/src/components/events/MonthlyEvents.tsx
@@ -28,7 +28,7 @@ export default function MonthlyEvents() {
 
   return (
     <div className="mt-16">
-      <h1 className="font-Michroma text-3xl">December Events</h1>
+      <h1 className="font-Michroma text-4xl">December Events</h1>
       <div className="mt-16 grid gap-12">
         {events?.map((_event) => <MonthlyEvent key={_event.id} event={_event} />)}
       </div>
diff --git a/src/components/landing/LandingAbout.tsx b/src/components/landing/LandingAbout.tsx
index 65487f9..c8e837f 100644
--- a/src/components/landing/LandingAbout.tsx
+++ b/src/components/landing/LandingAbout.tsx
@@ -78,7 +78,7 @@ export default function LandingAbout() {
             className="overflow-hidden rounded-lg p-8"
             style={{
               background:
-                "linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 50%, rgba(28,42,106,0.9) 100%)",
+                "linear-gradient(90deg, #0F1319 0%, #0F1319 50%, rgba(28,42,106,0.7) 100%)",
               boxShadow: `
                 0 0 100px 0px rgba(255, 255, 255, 0.1),
                 0 0 30px 0px rgba(28, 42, 106, 0.5),

From 857db7f18c885ad8e6b0a053d502ab29fbba110f Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Tue, 31 Dec 2024 23:18:56 -0500
Subject: [PATCH 03/14] Events desktop version complete

---
 src/components/events/CalendarDays.tsx  | 88 ++++++++++++++++++++++++-
 src/components/events/MonthlyEvent.tsx  |  2 +-
 src/components/events/MonthlyEvents.tsx | 11 +++-
 src/components/landing/Hero.tsx         | 75 ++++++++++-----------
 src/components/landing/LandingAbout.tsx |  8 +--
 5 files changed, 137 insertions(+), 47 deletions(-)

diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
index c449b69..66a82a7 100644
--- a/src/components/events/CalendarDays.tsx
+++ b/src/components/events/CalendarDays.tsx
@@ -1,5 +1,7 @@
 import { FirebaseEvent } from "@/types/events";
 import { format, isSameDay } from "date-fns";
+import { useEffect, useState } from "react";
+import { FaXmark } from "react-icons/fa6";
 
 type CalendarDaysProps = {
   daysToDisplay: Date[];
@@ -30,8 +32,8 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
             >
               <div className="flex justify-end">{format(day, "dd")}</div>
               <div className="pt-2">
-                {dayEvents.map((_event,i) => (
-                    <div className="bg-light-blue text-black text-xs p-1 rounded-sm cursor-pointer" key={i}>{_event.title}</div>
+                {dayEvents.map((_event, i) => (
+                  <CalendarEvent _event={_event} key={i} />
                 ))}
               </div>
             </div>
@@ -50,3 +52,85 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
 };
 
 export default CalendarDays;
+
+type CalendarEventProps = {
+  _event: FirebaseEvent;
+};
+
+const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);
+
+  const handleEventClick = () => {
+    setShowEventModal((prev) => !prev);
+    document.body.style.overflow =
+      document.body.style.overflow === "hidden" ? "auto" : "hidden";
+  };
+
+  const time = _event.time.toDate().toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+
+  function formatDateToMMDDYY(date: Date): string {
+    const padZero = (num: number): string => num.toString().padStart(2, '0');
+    
+    const month = padZero(date.getMonth() + 1); // Months are 0-based
+    const day = padZero(date.getDate());
+    const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
+    
+    return `${month}/${day}/${year}`;
+}
+
+const date = formatDateToMMDDYY(_event.time.toDate())
+
+  
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.overflow === "hidden") {
+        document.body.style.overflow = "auto";
+      }
+    };
+  }, []);
+  return (
+    <>
+      <div
+        className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
+        onClick={handleEventClick}
+      >
+        {_event.title}
+      </div>
+
+      {showEventModal && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
+          <div className="relative w-full max-w-[400px] rounded-md bg-[#242424] border border-[#404040] px-6 py-10">
+            <button
+              onClick={handleEventClick}
+              className="absolute right-4 top-4 text-2xl"
+            >
+              <FaXmark />
+            </button>
+            <p className="text-xl font-medium">{_event.title}</p>
+            <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
+              <p className="">Location: {_event.location}</p>
+              <p className="">Time: {time}</p> <p className="">Date: {date}</p>
+            </div>
+            <p className="pt-3">{_event.description}</p>
+            <div className="flex gap-1.5 pt-4">
+          {_event.tags.map((tag, i) => (
+            <div
+              className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
+              key={tag}
+            >
+              <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+              {tag}
+            </div>
+          ))}
+        </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
index adfb0aa..abfda7b 100644
--- a/src/components/events/MonthlyEvent.tsx
+++ b/src/components/events/MonthlyEvent.tsx
@@ -51,7 +51,7 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
           </p>
         </div>
         <p className="mt-2">{event.description}</p>
-        <div className="flex justify-end gap-1.5 pt-1">
+        <div className="flex justify-end gap-1.5 pt-2">
           {event.tags.map((tag, i) => (
             <div
               className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
index 6c6e959..8ef7fab 100644
--- a/src/components/events/MonthlyEvents.tsx
+++ b/src/components/events/MonthlyEvents.tsx
@@ -1,6 +1,8 @@
 import { useCachedEvents } from "@/hooks/useCachedEvents";
 import React, { useState } from "react";
 import MonthlyEvent from "./MonthlyEvent";
+import { format } from "date-fns";
+import { FaSpinner } from "react-icons/fa";
 
 export default function MonthlyEvents() {
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
@@ -21,15 +23,18 @@ export default function MonthlyEvents() {
   if (isLoading) {
     return (
       <div className="mt-16">
-        <h1 className="font-Michroma text-3xl">December Events</h1>
+        <h1 className="font-Michroma text-3xl">{format(currentDate, 'MMMM')}Events</h1>
+        <div className="h-52 w-full flex items-center justify-center">
+          <span className="text-3xl animate-spin"><FaSpinner/></span>
+        </div>
       </div>
     );
   }
 
   return (
     <div className="mt-16">
-      <h1 className="font-Michroma text-4xl">December Events</h1>
-      <div className="mt-16 grid gap-12">
+      <h1 className="font-Michroma text-4xl">{format(currentDate, 'MMMM')} Events</h1>
+      <div className="mt-12 grid gap-12">
         {events?.map((_event) => <MonthlyEvent key={_event.id} event={_event} />)}
       </div>
     </div>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 7151b22..17db7a2 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -1,46 +1,47 @@
-import React from 'react'
-import Scene from './Scene'
-import LogoCarousel from './LogoCarousel'
+import React from "react";
+import Scene from "./Scene";
+import LogoCarousel from "./LogoCarousel";
 
 export default function Hero() {
   return (
-    <div className="relative hero pt-24 pb-28 text-[#f1f1f1]">
-        <div className="flex-row flex items-center max-w-7xl mx-auto h-full px-4 sm:px-10 pb-6">
-          <div className="w-3/4">
-            <span className="bg-black text-xs px-4 py-1.5 rounded-full bg-opacity-50 border border-[#B0B8FF] border-opacity-40">
-              1000+ Active Members!
-            </span>
-            <h1 className="font-Michroma text-[44px] font-semibold pt-5">
-              <span className='hidden sm:inline'>The</span> Society of PC Building
-            </h1>
-            <p className="text-xl max-w-[620px] pt-3 leading-normal font-medium">
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi
-              aliquam officia perferendis rerum fuga voluptas unde.
-            </p>
-            <button className="mt-6 bg-black bg-opacity-80 py-2 px-8 rounded-md font-medium text-white border border-[#B0B8FF] border-opacity-40 ">
-              Join the Club!
-            </button>
+    <div className="hero relative pb-28 pt-24 text-[#f1f1f1]">
+      <div className="mx-auto flex h-full max-w-7xl flex-row items-center px-4 pb-6 sm:px-10">
+        <div className="w-3/4">
+          <span className="rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs">
+            1000+ Active Members!
+          </span>
+          <h1 className="pt-5 font-Michroma text-[44px] font-semibold">
+            <span className="hidden sm:inline">The</span> Society of PC Building
+          </h1>
+          <p className="max-w-[620px] pt-3 text-lg font-medium leading-relaxed">
+            Join the Society of PC Building at UF—where students passionate
+            about hardware and tech connect, innovate, and build custom PCs
+            together.
+          </p>
+          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white">
+            Join the Club!
+          </button>
 
-            <div className="mt-32">
-              <p className="text-sm opacity-80">
-                Led by a team of officers with experience at:
-              </p>
-              <div className="hidden sm:flex items-center gap-6 -mt-5 h-[103px]">
-                <img src="/landing/logos/roblox.png" alt="" />
-                <img src="/landing/logos/nvidia.png" alt="" />
-                <img src="/landing/logos/microsoft.png" alt="" />
-                <img src="/landing/logos/samsung.png" alt="" className="mt-px" />
-                <img src="/landing/logos/ukg.png" alt="" />
-                <img src="/landing/logos/meta.png" alt="" className="pb-0.5" />
-                <p className="opacity-70">+ More!</p>
-              </div>
-              <LogoCarousel/>
+          <div className="mt-32">
+            <p className="text-sm opacity-80">
+              Led by a team of officers with experience at:
+            </p>
+            <div className="-mt-5 hidden h-[103px] items-center gap-6 sm:flex">
+              <img src="/landing/logos/roblox.png" alt="" />
+              <img src="/landing/logos/nvidia.png" alt="" />
+              <img src="/landing/logos/microsoft.png" alt="" />
+              <img src="/landing/logos/samsung.png" alt="" className="mt-px" />
+              <img src="/landing/logos/ukg.png" alt="" />
+              <img src="/landing/logos/meta.png" alt="" className="pb-0.5" />
+              <p className="opacity-70">+ More!</p>
             </div>
+            <LogoCarousel />
           </div>
-          <div className="w-1/4 h-[280px] cursor-grab flex items-center">
-            <Scene />
-          </div>
+        </div>
+        <div className="flex h-[280px] w-1/4 cursor-grab items-center">
+          <Scene />
         </div>
       </div>
-  )
+    </div>
+  );
 }
diff --git a/src/components/landing/LandingAbout.tsx b/src/components/landing/LandingAbout.tsx
index c8e837f..3a0e318 100644
--- a/src/components/landing/LandingAbout.tsx
+++ b/src/components/landing/LandingAbout.tsx
@@ -74,7 +74,7 @@ export default function LandingAbout() {
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.4 }}
+            viewport={{ once: true, amount: 0.3 }}
             className="overflow-hidden rounded-lg p-8"
             style={{
               background:
@@ -199,7 +199,7 @@ export default function LandingAbout() {
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.4 }}
+            viewport={{ once: true, amount: 0.25 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
               <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
@@ -224,7 +224,7 @@ export default function LandingAbout() {
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.4 }}
+            viewport={{ once: true, amount: 0.3 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
               <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
@@ -249,7 +249,7 @@ export default function LandingAbout() {
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.4 }}
+            viewport={{ once: true, amount: 0.3 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
               <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">

From a398163e18a46c8a7814611e77d6b97a0d64fb2e Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Wed, 1 Jan 2025 03:25:35 -0500
Subject: [PATCH 04/14] Mobile responsiveness started

---
 package-lock.json                       | 298 +++++++++++++++++++++++-
 package.json                            |   1 +
 src/app/globals.css                     |  13 +-
 src/components/Navbar/PublicNavbar.tsx  |   9 +-
 src/components/landing/Hero.tsx         |  24 +-
 src/components/landing/LogoCarousel.tsx |   2 +-
 src/components/landing/Scene.tsx        |   2 +-
 7 files changed, 324 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 018fc8b..7afb307 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "framer-motion": "^11.15.0",
         "lucide-react": "^0.436.0",
         "next": "14.2.6",
+        "ngrok": "^5.0.0-beta.2",
         "puppeteer": "^23.11.1",
         "react": "^18",
         "react-dom": "^18",
@@ -1321,6 +1322,18 @@
       "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "dev": true
     },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1335,6 +1348,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.59.17",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.17.tgz",
@@ -1372,6 +1397,18 @@
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
+    "node_modules/@types/cacheable-request": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "^3.1.4",
+        "@types/node": "*",
+        "@types/responselike": "^1.0.0"
+      }
+    },
     "node_modules/@types/debounce": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.4.tgz",
@@ -1384,12 +1421,27 @@
       "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
       "license": "MIT"
     },
+    "node_modules/@types/http-cache-semantics": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==",
+      "license": "MIT"
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/keyv": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.16.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
@@ -1436,6 +1488,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/responselike": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/stats.js": {
       "version": "0.17.3",
       "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
@@ -2101,6 +2162,33 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.6.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+      "license": "MIT",
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^6.0.1",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -2297,6 +2385,18 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2504,6 +2604,33 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decompress-response/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2542,6 +2669,15 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3855,6 +3991,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/got": {
+      "version": "11.8.6",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.2",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3952,6 +4113,19 @@
       "integrity": "sha512-znxR+2jecWluu/0KOBqUcvVyAB5tLff10vjMGrpAlz1eFY+ZhF1bY3r82V+Bk7WJdk03iTjtja9KFFz5BrqjSA==",
       "license": "Apache-2.0"
     },
+    "node_modules/hpagent": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/hpagent/-/hpagent-0.1.2.tgz",
+      "integrity": "sha512-ePqFXHtSQWAFXYmj+JtOTHr84iNrII4/QRlAAPPE+zqnKy4xJo7Ie1Y4kC7AdB+LxLxSTTzBMASsEcy0q8YyvQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -3969,6 +4143,19 @@
         "node": ">= 14"
       }
     },
+    "node_modules/http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "license": "MIT",
+      "dependencies": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
@@ -4581,8 +4768,7 @@
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -4632,7 +4818,6 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dev": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -4710,6 +4895,12 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4732,6 +4923,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -4790,6 +4990,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4958,6 +5167,38 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/ngrok": {
+      "version": "5.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/ngrok/-/ngrok-5.0.0-beta.2.tgz",
+      "integrity": "sha512-UzsyGiJ4yTTQLCQD11k1DQaMwq2/SsztBg2b34zAqcyjS25qjDpogMKPaCKHwe/APRTHeel3iDXcVctk5CNaCQ==",
+      "hasInstallScript": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "extract-zip": "^2.0.1",
+        "got": "^11.8.5",
+        "lodash.clonedeep": "^4.5.0",
+        "uuid": "^7.0.0 || ^8.0.0",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "ngrok": "bin/ngrok"
+      },
+      "engines": {
+        "node": ">=14.2"
+      },
+      "optionalDependencies": {
+        "hpagent": "^0.1.2"
+      }
+    },
+    "node_modules/ngrok/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4966,6 +5207,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5125,6 +5378,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5731,6 +5993,18 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5928,6 +6202,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5945,6 +6225,18 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/responselike": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
diff --git a/package.json b/package.json
index 2f81dc5..077affd 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "framer-motion": "^11.15.0",
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
+    "ngrok": "^5.0.0-beta.2",
     "puppeteer": "^23.11.1",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/app/globals.css b/src/app/globals.css
index 0c55500..7d7352c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,9 +20,7 @@ body {
 }
 
 
-.hero{
-  width: 100%; 
-  height: max(100svh,840px);
+.hero {
   background-image: url('/landing/bg.svg');
   background-size: cover;
   background-position: center;
@@ -30,6 +28,8 @@ body {
 }
 
 
+
+
 .noise-bg {
   position: fixed;
   inset: 0;
@@ -42,6 +42,13 @@ body {
   background-blend-mode: difference;
 }
 
+@media (max-width: 768px) {
+  .noise-bg {
+    background: 
+      repeating-radial-gradient(#fff 0 1%, #000 0 0.02%) 50% 0/500px 500px,
+      repeating-conic-gradient(#fff 0 1%, #000 0 0.02%) 50% 50%/500px 500px;
+  }
+}
 
 
 .monthly-event {
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 66cfd27..71d56ad 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -3,16 +3,15 @@ import { FaBars } from "react-icons/fa";
 
 export default function Nav() {
   return (
-    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-8 py-3 text-[#f1f1f1] 
-    backdrop-blur-lg sm:top-4 sm:rounded-full sm:border sm:py-1.5 sm:pl-6 sm:pr-4">
+    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-8 py-3 text-[#f1f1f1] backdrop-blur-lg md:top-4 md:rounded-full md:border md:py-1.5 md:pl-6 md:pr-4">
       <figure>
         <img
           src="/iconography/spcb-color.png"
           alt=""
-          className="w-11 sm:h-10 sm:w-10"
+          className="w-11 md:h-10 md:w-10"
         />
       </figure>
-      <div className="hidden items-center gap-6 text-sm sm:flex">
+      <div className="hidden items-center gap-6 text-sm md:flex">
         <Link href={"/"}>Home</Link>
         <Link href={"/about"}>About</Link>
         <Link href={"/events"}>Events</Link>
@@ -25,7 +24,7 @@ export default function Nav() {
           SPCB Discord
         </a>
       </div>
-      <div className="flex items-center text-2xl sm:hidden">
+      <div className="flex items-center text-2xl md:hidden">
         <FaBars />
       </div>
     </nav>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 17db7a2..f1d7e9b 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -4,17 +4,17 @@ import LogoCarousel from "./LogoCarousel";
 
 export default function Hero() {
   return (
-    <div className="hero relative pb-28 pt-24 text-[#f1f1f1]">
-      <div className="mx-auto flex h-full max-w-7xl flex-row items-center px-4 pb-6 sm:px-10">
-        <div className="w-3/4">
-          <span className="rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs">
+    <div className="sm:hero sm:h-[max(100svh,840px)] relative pb-28 pt-24 text-[#eaeaea]">
+      <div className="mx-auto flex-col-reverse lg:flex-row flex h-full max-w-7xl items-center px-6 pb-6 sm:px-10 mt-6 lg:mt-0">
+        <div className="w-full lg:w-3/4 text-center lg:text-left flex flex-col items-center lg:items-start pt-8 lg:pt-0">
+          <span className="hidden lg:inline rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs">
             1000+ Active Members!
           </span>
-          <h1 className="pt-5 font-Michroma text-[44px] font-semibold">
-            <span className="hidden sm:inline">The</span> Society of PC Building
+          <h1 className="pt-6 font-Michroma text-3xl sm:text-4xl lg:text-[44px] font-semibold">
+            The Society of PC Building
           </h1>
-          <p className="max-w-[620px] pt-3 text-lg font-medium leading-relaxed">
-            Join the Society of PC Building at UF—where students passionate
+          <p className="max-w-[620px] pt-4 sm:pt-6  sm:text-lg font-medium leading-relaxed ">
+            <span className="hidden sm:inline">Join the Society of PC Building at UF—where</span><span className="sm:hidden">Where</span> students passionate
             about hardware and tech connect, innovate, and build custom PCs
             together.
           </p>
@@ -22,11 +22,11 @@ export default function Hero() {
             Join the Club!
           </button>
 
-          <div className="mt-32">
+          <div className="mt-20 lg:mt-32">
             <p className="text-sm opacity-80">
               Led by a team of officers with experience at:
             </p>
-            <div className="-mt-5 hidden h-[103px] items-center gap-6 sm:flex">
+            <div className="-mt-5 hidden h-[103px] items-center gap-6 md:flex">
               <img src="/landing/logos/roblox.png" alt="" />
               <img src="/landing/logos/nvidia.png" alt="" />
               <img src="/landing/logos/microsoft.png" alt="" />
@@ -38,10 +38,10 @@ export default function Hero() {
             <LogoCarousel />
           </div>
         </div>
-        <div className="flex h-[280px] w-1/4 cursor-grab items-center">
+        <div className="flex lg:w-1/4 cursor-grab items-center max-h-[220px]">
           <Scene />
         </div>
-      </div>
+      </div>\
     </div>
   );
 }
diff --git a/src/components/landing/LogoCarousel.tsx b/src/components/landing/LogoCarousel.tsx
index e2b6dad..3acc702 100644
--- a/src/components/landing/LogoCarousel.tsx
+++ b/src/components/landing/LogoCarousel.tsx
@@ -20,7 +20,7 @@ const LogoCarousel: React.FC = () => {
   const duplicatedLogos = [...logos, ...logos];
 
   return (
-    <div className="sm:hidden w-full overflow-hidden -mt-5 scale-90">
+    <div className="md:hidden w-full overflow-hidden -mt-5 scale-90">
       <motion.div
         className="flex items-center gap-6"
         animate={{
diff --git a/src/components/landing/Scene.tsx b/src/components/landing/Scene.tsx
index 5a20400..e721be2 100644
--- a/src/components/landing/Scene.tsx
+++ b/src/components/landing/Scene.tsx
@@ -8,7 +8,7 @@ function Scene() {
     <Canvas
       shadows
       camera={{ position: [3, 3, 11.2], fov: 50 }}
-      style={{ height: "240px" }}
+      style={{ height: "180px" }}
     >
       <ambientLight intensity={0.3} />
       <directionalLight

From b95427e1cc94c635735da15361106b74e0d0db70 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Wed, 1 Jan 2025 04:33:55 -0500
Subject: [PATCH 05/14] Hero responsiveness completed

---
 src/components/Navbar/PublicNavbar.tsx |  2 +-
 src/components/landing/Hero.tsx        | 48 ++++++++++++++++++--------
 src/components/landing/Scene.tsx       |  2 +-
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 71d56ad..df56142 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -3,7 +3,7 @@ import { FaBars } from "react-icons/fa";
 
 export default function Nav() {
   return (
-    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-8 py-3 text-[#f1f1f1] backdrop-blur-lg md:top-4 md:rounded-full md:border md:py-1.5 md:pl-6 md:pr-4">
+    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-6 py-3 text-[#f1f1f1] backdrop-blur-lg md:top-4 md:rounded-full md:border md:py-1.5 md:pl-6 md:pr-4">
       <figure>
         <img
           src="/iconography/spcb-color.png"
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index f1d7e9b..87285d5 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -1,24 +1,28 @@
 import React from "react";
 import Scene from "./Scene";
 import LogoCarousel from "./LogoCarousel";
+import Image from "next/image";
+import {motion} from "framer-motion"
 
 export default function Hero() {
   return (
-    <div className="sm:hero sm:h-[max(100svh,840px)] relative pb-28 pt-24 text-[#eaeaea]">
-      <div className="mx-auto flex-col-reverse lg:flex-row flex h-full max-w-7xl items-center px-6 pb-6 sm:px-10 mt-6 lg:mt-0">
-        <div className="w-full lg:w-3/4 text-center lg:text-left flex flex-col items-center lg:items-start pt-8 lg:pt-0">
-          <span className="hidden lg:inline rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs">
+    <div className="hero relative pb-12 sm:pb-28 pt-28 sm:pt-24 text-[#eaeaea] sm:h-[max(100svh,840px)]">
+      <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
+        <div className="flex w-full flex-col items-center  text-center lg:w-3/4 lg:items-start lg:text-left">
+          <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
             1000+ Active Members!
           </span>
-          <h1 className="pt-6 font-Michroma text-3xl sm:text-4xl lg:text-[44px] font-semibold">
-            The Society of PC Building
+          <h1 className="font-Michroma leading-normal lg:leading-normal pt-4 text-[26px] font-semibold sm:text-4xl lg:text-[44px]">
+            The Society <br className="inline sm:hidden"/>of PC Building
           </h1>
-          <p className="max-w-[620px] pt-4 sm:pt-6  sm:text-lg font-medium leading-relaxed ">
-            <span className="hidden sm:inline">Join the Society of PC Building at UF—where</span><span className="sm:hidden">Where</span> students passionate
-            about hardware and tech connect, innovate, and build custom PCs
-            together.
+          <p className="max-w-[620px] pt-4 sm:pt-3 font-medium leading-relaxed text-[17px] sm:text-lg">
+            <span className="hidden sm:inline">
+              Join the Society of PC Building at UF—where
+            </span>
+            <span className="sm:hidden">Where</span> students passionate about
+            hardware and tech connect, innovate, and build custom PCs together.
           </p>
-          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white">
+          <button className="mt-4 sm:mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 py-2 px-8 font-medium text-white sm:text-base">
             Join the Club!
           </button>
 
@@ -38,10 +42,26 @@ export default function Hero() {
             <LogoCarousel />
           </div>
         </div>
-        <div className="flex lg:w-1/4 cursor-grab items-center max-h-[220px]">
+        {/* <div className="hidden max-h-[220px] cursor-grab items-center sm:flex lg:w-1/4">
           <Scene />
-        </div>
-      </div>\
+        </div> */}
+        <motion.div className="relative h-[240px] w-[240px] md:h-[460px] md:w-[460px]  -mr-6 lg:-mr-12"  initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+            viewport={{ once: true, amount: 0.3 }}>
+          <Image
+            src="/landing/logo.png"
+            alt="SPCB Logo"
+            fill
+            className="object-contain"
+            style={{
+              filter: "drop-shadow(0 0 10px rgba(255,255,255,1))",
+            }}
+            priority
+          />
+        </motion.div>
+      </div>
+
     </div>
   );
 }
diff --git a/src/components/landing/Scene.tsx b/src/components/landing/Scene.tsx
index e721be2..5a20400 100644
--- a/src/components/landing/Scene.tsx
+++ b/src/components/landing/Scene.tsx
@@ -8,7 +8,7 @@ function Scene() {
     <Canvas
       shadows
       camera={{ position: [3, 3, 11.2], fov: 50 }}
-      style={{ height: "180px" }}
+      style={{ height: "240px" }}
     >
       <ambientLight intensity={0.3} />
       <directionalLight

From 0866929ec553582d9fa3556c1032f74fab6b6c0a Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Wed, 1 Jan 2025 19:38:53 -0500
Subject: [PATCH 06/14] Finished mobile nav

---
 src/components/Navbar/PublicNavbar.tsx | 100 +++++++++++++++++++------
 src/components/landing/Hero.tsx        |   1 -
 2 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index df56142..4d538ef 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -1,31 +1,85 @@
 import Link from "next/link";
+import { useState } from "react";
 import { FaBars } from "react-icons/fa";
+import { FaXmark } from "react-icons/fa6";
+import { AnimatePresence, motion } from "framer-motion";
 
 export default function Nav() {
+  const [showMobileNav, setShowMobileNav] = useState<boolean>(false);
   return (
-    <nav className="fixed left-1/2 z-30 flex w-full max-w-5xl -translate-x-1/2 justify-between border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-30 px-6 py-3 text-[#f1f1f1] backdrop-blur-lg md:top-4 md:rounded-full md:border md:py-1.5 md:pl-6 md:pr-4">
-      <figure>
-        <img
-          src="/iconography/spcb-color.png"
-          alt=""
-          className="w-11 md:h-10 md:w-10"
-        />
-      </figure>
-      <div className="hidden items-center gap-6 text-sm md:flex">
-        <Link href={"/"}>Home</Link>
-        <Link href={"/about"}>About</Link>
-        <Link href={"/events"}>Events</Link>
-        <Link href={"/projects"}>Projects</Link>
-        <a
-          href="https://discord.gg/CmqKbnBDBG"
-          target="_blank"
-          className="rounded-full bg-[#B0B8FF] px-4 py-2 text-black"
-        >
-          SPCB Discord
-        </a>
-      </div>
-      <div className="flex items-center text-2xl md:hidden">
-        <FaBars />
+    <nav className="fixed left-1/2 z-30 w-full max-w-5xl -translate-x-1/2 px-0 text-[#f1f1f1] md:top-4 md:px-4">
+      <div className="border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
+        <div className="flex justify-between px-6 md:pl-6 md:pr-4">
+          <figure>
+            <img
+              src="/iconography/spcb-color.png"
+              alt=""
+              className="w-11 md:h-10 md:w-10"
+            />
+          </figure>
+          <div className="hidden items-center gap-6 text-sm md:flex">
+            <Link href={"/"}>Home</Link>
+            <Link href={"/about"}>About</Link>
+            <Link href={"/events"}>Events</Link>
+            <Link href={"/projects"}>Projects</Link>
+            <a
+              href="https://discord.gg/CmqKbnBDBG"
+              target="_blank"
+              className="rounded-full bg-[#B0B8FF] px-4 py-2 text-black"
+            >
+              SPCB Discord
+            </a>
+          </div>
+          <div
+            className="flex cursor-pointer items-center text-2xl md:hidden"
+            onClick={() => setShowMobileNav((prev) => !prev)}
+          >
+            {showMobileNav ? <FaXmark /> : <FaBars />}
+          </div>
+        </div>
+    
+        <AnimatePresence>
+          {showMobileNav && (
+            <motion.ul
+              className="mt-3 flex flex-col overflow-hidden text-lg"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+            >
+              <li
+                className="border-t border-gray-800 px-6 py-3"
+                onClick={() => setShowMobileNav(false)}
+              >
+                <Link href={"/"}>Home</Link>
+              </li>
+              <li
+                className="border-t border-gray-800 px-6 py-3"
+                onClick={() => setShowMobileNav(false)}
+              >
+                <Link href={"/about"}>About</Link>
+              </li>
+              <li
+                className="border-t border-gray-800 px-6 py-3"
+                onClick={() => setShowMobileNav(false)}
+              >
+                <Link href={"/events"}>Events</Link>
+              </li>
+              <li
+                className="border-t border-gray-800 px-6 py-3"
+                onClick={() => setShowMobileNav(false)}
+              >
+                <Link href={"/projects"}>Projects</Link>
+              </li>
+              <li
+                className="border-t border-gray-800 px-6 pt-3"
+                onClick={() => setShowMobileNav(false)}
+              >
+                <a href={"/https://discord.gg/CmqKbnBDBG"} target="_blank">SPCB Discord</a>
+              </li>
+            </motion.ul>
+          )}
+        </AnimatePresence>
       </div>
     </nav>
   );
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 87285d5..dc2df4f 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Scene from "./Scene";
 import LogoCarousel from "./LogoCarousel";
 import Image from "next/image";
 import {motion} from "framer-motion"

From 7620defd6793fcb2e90b235e9845729f73f95556 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Wed, 1 Jan 2025 19:39:50 -0500
Subject: [PATCH 07/14] Fix: Broken Discord link

---
 src/components/Navbar/PublicNavbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 4d538ef..281034b 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -75,7 +75,7 @@ export default function Nav() {
                 className="border-t border-gray-800 px-6 pt-3"
                 onClick={() => setShowMobileNav(false)}
               >
-                <a href={"/https://discord.gg/CmqKbnBDBG"} target="_blank">SPCB Discord</a>
+                <a href={"https://discord.gg/CmqKbnBDBG"} target="_blank">SPCB Discord</a>
               </li>
             </motion.ul>
           )}

From e70abaa5a02adf6b82c1301c6676fad7a1cbf955 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 03:37:18 -0500
Subject: [PATCH 08/14] Mobile responsiveness updates for hero and events

---
 src/app/events/page.tsx                 |   2 +-
 src/components/Navbar/PublicNavbar.tsx  |  70 ++++++++++-------
 src/components/events/Calendar.tsx      |  10 +--
 src/components/events/MonthlyEvent.tsx  | 100 ++++++++++++++++++------
 src/components/events/MonthlyEvents.tsx |  16 ++--
 src/components/landing/Hero.tsx         |   4 +-
 6 files changed, 134 insertions(+), 68 deletions(-)

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 0e7ae93..9051a5a 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -7,7 +7,7 @@ export default function Events() {
     <>
       <section className="relative min-h-screen bg-[#04080d]">
         <div className="noise-bg"/>
-        <div className="mx-auto max-w-7xl px-10 pt-24 pb-12 text-white">
+        <div className="mx-auto max-w-7xl px-6 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
           <Calendar />
         </div>
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 281034b..1ff624a 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -11,11 +11,13 @@ export default function Nav() {
       <div className="border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
         <div className="flex justify-between px-6 md:pl-6 md:pr-4">
           <figure>
-            <img
-              src="/iconography/spcb-color.png"
-              alt=""
-              className="w-11 md:h-10 md:w-10"
-            />
+            <a href="/">
+              <img
+                src="/iconography/spcb-color.png"
+                alt=""
+                className="w-11 md:h-10 md:w-10"
+              />
+            </a>
           </figure>
           <div className="hidden items-center gap-6 text-sm md:flex">
             <Link href={"/"}>Home</Link>
@@ -37,47 +39,57 @@ export default function Nav() {
             {showMobileNav ? <FaXmark /> : <FaBars />}
           </div>
         </div>
-    
+
         <AnimatePresence>
           {showMobileNav && (
-            <motion.ul
-              className="mt-3 flex flex-col overflow-hidden text-lg"
+            <motion.div
+              className="mt-3 flex flex-col overflow-hidden text-lg md:hidden"
               initial={{ height: 0, opacity: 0 }}
               animate={{ height: "auto", opacity: 1 }}
               exit={{ height: 0, opacity: 0 }}
               transition={{ duration: 0.3, ease: "easeInOut" }}
             >
-              <li
-                className="border-t border-gray-800 px-6 py-3"
+              <Link
+                href={"/"}
                 onClick={() => setShowMobileNav(false)}
-              >
-                <Link href={"/"}>Home</Link>
-              </li>
-              <li
                 className="border-t border-gray-800 px-6 py-3"
-                onClick={() => setShowMobileNav(false)}
               >
-                <Link href={"/about"}>About</Link>
-              </li>
-              <li
-                className="border-t border-gray-800 px-6 py-3"
+                Home
+              </Link>
+
+              <Link
+                href={"/about"}
                 onClick={() => setShowMobileNav(false)}
+                className="border-t border-gray-800 px-6 py-3"
               >
-                <Link href={"/events"}>Events</Link>
-              </li>
-              <li
+                About
+              </Link>
+
+              <Link
+                href={"/events"}
+                onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 py-3"
+              >
+                Events
+              </Link>
+
+              <Link
+                href={"/projects"}
                 onClick={() => setShowMobileNav(false)}
+                className="border-t border-gray-800 px-6 py-3"
               >
-                <Link href={"/projects"}>Projects</Link>
-              </li>
-              <li
-                className="border-t border-gray-800 px-6 pt-3"
+                Projects
+              </Link>
+
+              <a
+                href={"https://discord.gg/CmqKbnBDBG"}
+                target="_blank"
                 onClick={() => setShowMobileNav(false)}
+                className="border-t border-gray-800 px-6 pt-3"
               >
-                <a href={"https://discord.gg/CmqKbnBDBG"} target="_blank">SPCB Discord</a>
-              </li>
-            </motion.ul>
+                SPCB Discord
+              </a>
+            </motion.div>
           )}
         </AnimatePresence>
       </div>
diff --git a/src/components/events/Calendar.tsx b/src/components/events/Calendar.tsx
index 3ae8b0b..dfac765 100644
--- a/src/components/events/Calendar.tsx
+++ b/src/components/events/Calendar.tsx
@@ -39,20 +39,20 @@ export default function Calendar() {
   };
 
   return (
-    <div className="pt-32 text-white">
-      <div className="flex items-end justify-between">
-        <p className="font-Michroma text-3xl">
+    <div className="pt-24 md:pt-32 text-white">
+      <div className="flex items-end justify-between gap-5">
+        <p className="font-Michroma text-lg md:text-3xl">
           {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">
           <button
-            className="rounded-full p-2 hover:bg-light-blue"
+            className="rounded-full p-2 md:hover:bg-light-blue"
             onClick={handlePrevMonth}
           >
             <FaChevronLeft />
           </button>
           <button
-            className="rounded-full p-2 hover:bg-light-blue"
+            className="rounded-full p-2 md:hover:bg-light-blue"
             onClick={handleNextMonth}
           >
             <FaChevronRight />
diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
index abfda7b..3ac80f2 100644
--- a/src/components/events/MonthlyEvent.tsx
+++ b/src/components/events/MonthlyEvent.tsx
@@ -1,10 +1,13 @@
 import { FirebaseEvent } from "@/types/events";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 
 type MonthlyEventProps = {
   event: FirebaseEvent;
 };
 
 const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
+  const [expandMobileEvent, setExpandMobileEvent] = useState<boolean>(false);
   function parseDateTime(dateTime: Date): {
     timeString: string;
     dayOfMonth: string;
@@ -34,36 +37,81 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
   } = parseDateTime(event.time.toDate());
 
   return (
-    <div className="grid grid-cols-10">
-      <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-4xl">
-        <p>{dayOfWeek}</p>
-        <p>{dayOfMonth}</p>
+    <>
+      {/* Desktop version */}
+      <div className="hidden grid-cols-10 md:grid">
+        <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-4xl">
+          <p>{dayOfWeek}</p>
+          <p>{dayOfMonth}</p>
+        </div>
+        <div className="monthly-event col-span-8 w-full rounded-md p-5 px-7">
+          <p className="text-xl font-semibold">{event.title}</p>
+          <div className="flex gap-3 pt-2">
+            <p>
+              Location: <span className="font-semibold">{event.location}</span>
+            </p>
+            <p>
+              Time: <span className="font-semibold">{time}</span>
+            </p>
+          </div>
+          <p className="mt-2">{event.description}</p>
+          <div className="flex min-h-6 justify-end gap-1.5 pt-3">
+            {event.tags.map((tag, i) => (
+              <div
+                className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
+                key={tag}
+              >
+                <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+                {tag}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
-      <div className="monthly-event col-span-8 w-full rounded-md p-5 px-7">
-        <p className="text-xl font-semibold">{event.title}</p>
-        <div className="flex gap-3 pt-2">
-          <p>
-            Location:{" "}
-            <span className=" font-semibold">{event.location}</span>
-          </p>
-          <p>
-            Time: <span className="font-semibold">{time}</span>
-          </p>
+
+      {/* Mobile Version */}
+      <div
+        className="monthly-event w-full cursor-pointer px-4 md:hidden py-5 rounded-md"
+        onClick={() => setExpandMobileEvent((prev) => !prev)}
+      >
+        <div className="flex items-center justify-between gap-6">
+          <div className="flex cursor-pointer flex-col items-center">
+            <p>{dayOfWeek} </p>
+            <p>{dayOfMonth}</p>
+          </div>
+          <p className="">{event.title}</p>
         </div>
-        <p className="mt-2">{event.description}</p>
-        <div className="flex justify-end gap-1.5 pt-2">
-          {event.tags.map((tag, i) => (
-            <div
-              className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
-              key={tag}
+
+        <AnimatePresence>
+          {expandMobileEvent && (
+            <motion.div
+              className="text-sm overflow-hidden"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
             >
-              <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
-              {tag}
-            </div>
-          ))}
-        </div>
+              <div className="flex flex-wrap gap-5 pt-4">
+                <p>Location: {event.location}</p>
+                <p>Time: {time}</p>
+              </div>
+              <p className="pt-2">{event.description}</p>
+              <div className="flex gap-3 pt-4 h-10">
+                {event.tags.map((tag, i) => (
+                  <div
+                    className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
+                    key={tag}
+                  >
+                    <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+                    {tag}
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
index 8ef7fab..35fbf4c 100644
--- a/src/components/events/MonthlyEvents.tsx
+++ b/src/components/events/MonthlyEvents.tsx
@@ -22,8 +22,9 @@ export default function MonthlyEvents() {
   }
   if (isLoading) {
     return (
-      <div className="mt-16">
-        <h1 className="font-Michroma text-3xl">{format(currentDate, 'MMMM')}Events</h1>
+      <div className="mt-10 md:mt-16">
+        <h1 className="font-Michroma text-2xl md:text-4xl">{format(currentDate, 'MMMM')} Events</h1>
+        <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
         <div className="h-52 w-full flex items-center justify-center">
           <span className="text-3xl animate-spin"><FaSpinner/></span>
         </div>
@@ -31,10 +32,15 @@ export default function MonthlyEvents() {
     );
   }
 
+ 
+
   return (
-    <div className="mt-16">
-      <h1 className="font-Michroma text-4xl">{format(currentDate, 'MMMM')} Events</h1>
-      <div className="mt-12 grid gap-12">
+    <div className="mt-10 md:mt-16">
+      
+      <h1 className="font-Michroma text-2xl md:text-4xl">{format(currentDate, 'MMMM')} Events</h1>
+      
+      <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
+      <div className="mt-8 md:mt-12 grid gap-4 md:gap-12">
         {events?.map((_event) => <MonthlyEvent key={_event.id} event={_event} />)}
       </div>
     </div>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index dc2df4f..5c76ceb 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -5,7 +5,7 @@ import {motion} from "framer-motion"
 
 export default function Hero() {
   return (
-    <div className="hero relative pb-12 sm:pb-28 pt-28 sm:pt-24 text-[#eaeaea] sm:h-[max(100svh,840px)]">
+    <div className="hero relative pb-12 sm:pb-28 pt-24 sm:pt-24 text-[#eaeaea] sm:h-[max(100svh,840px)]">
       <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
         <div className="flex w-full flex-col items-center  text-center lg:w-3/4 lg:items-start lg:text-left">
           <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
@@ -21,7 +21,7 @@ export default function Hero() {
             <span className="sm:hidden">Where</span> students passionate about
             hardware and tech connect, innovate, and build custom PCs together.
           </p>
-          <button className="mt-4 sm:mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 py-2 px-8 font-medium text-white sm:text-base">
+          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 py-2 px-8 font-medium text-white sm:text-base">
             Join the Club!
           </button>
 

From 3049455d03e42f19c6f2d249d869f5ae08baf837 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 03:40:15 -0500
Subject: [PATCH 09/14] Updated page bg color

---
 src/app/events/page.tsx | 2 +-
 src/app/page.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 9051a5a..e5480da 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -5,7 +5,7 @@ import MonthlyEvents from "@/components/events/MonthlyEvents";
 export default function Events() {
   return (
     <>
-      <section className="relative min-h-screen bg-[#04080d]">
+      <section className="relative min-h-screen bg-[#050a10]">
         <div className="noise-bg"/>
         <div className="mx-auto max-w-7xl px-6 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 443a010..00fe72e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import LandingAbout from "@/components/landing/LandingAbout";
 
 const Website = () => {
   return (
-    <div className="min-h-screen w-full bg-[#04080d]">
+    <div className="min-h-screen w-full bg-[#050a10]">
       <div className="noise-bg" />
       <Hero />
       <LandingAbout />

From 52220f5889a3341acc69cefa60ce0d774ec84308 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 18:45:36 -0500
Subject: [PATCH 10/14] Events page mobile responseiveness

---
 package-lock.json                             |   1 -
 src/app/events/page.tsx                       |   2 +-
 src/components/events/Calendar.tsx            |  19 +++-
 src/components/events/CalendarDay.tsx         |  67 +++++++++++
 src/components/events/CalendarDays.tsx        | 107 +-----------------
 src/components/events/CalendarEvent.tsx       |  85 ++++++++++++++
 src/components/events/CalendarSkeleton.tsx    |  20 +---
 src/components/events/MobileCalendarEvent.tsx |  61 ++++++++++
 src/components/events/MonthlyEvent.tsx        |   2 +-
 src/components/events/MonthlyEvents.tsx       |   4 +-
 src/components/landing/LandingAbout.tsx       |   6 +-
 11 files changed, 241 insertions(+), 133 deletions(-)
 create mode 100644 src/components/events/CalendarDay.tsx
 create mode 100644 src/components/events/CalendarEvent.tsx
 create mode 100644 src/components/events/MobileCalendarEvent.tsx

diff --git a/package-lock.json b/package-lock.json
index 7afb307..101261b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5172,7 +5172,6 @@
       "resolved": "https://registry.npmjs.org/ngrok/-/ngrok-5.0.0-beta.2.tgz",
       "integrity": "sha512-UzsyGiJ4yTTQLCQD11k1DQaMwq2/SsztBg2b34zAqcyjS25qjDpogMKPaCKHwe/APRTHeel3iDXcVctk5CNaCQ==",
       "hasInstallScript": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "extract-zip": "^2.0.1",
         "got": "^11.8.5",
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index e5480da..9b39b1f 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -7,7 +7,7 @@ export default function Events() {
     <>
       <section className="relative min-h-screen bg-[#050a10]">
         <div className="noise-bg"/>
-        <div className="mx-auto max-w-7xl px-6 md:px-10 pt-24 pb-12 text-white">
+        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
           <Calendar />
         </div>
diff --git a/src/components/events/Calendar.tsx b/src/components/events/Calendar.tsx
index dfac765..ec376bc 100644
--- a/src/components/events/Calendar.tsx
+++ b/src/components/events/Calendar.tsx
@@ -60,8 +60,8 @@ export default function Calendar() {
         </div>
       </div>
 
-      {/* Days of the Week */}
-      <div className="mt-4 grid grid-cols-7 text-center font-semibold">
+      {/* Desktop Days of the Week */}
+      <div className="mt-4 hidden md:grid grid-cols-7 text-center font-semibold">
         {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
           <div
             key={day}
@@ -72,9 +72,22 @@ export default function Calendar() {
         ))}
       </div>
 
-      {/* Calendar Days */}
+      {/* Mobile Days of the Week */}
+      <div className="mt-4 md:hidden grid grid-cols-7 text-center font-semibold">
+        {["Su", "M", "T", "W", "Th", "F", "Sa"].map((day) => (
+          <div
+            key={day}
+            className="bg-[#0A0E14] p-3 sm:text-xl"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* While fetching show the calendar skeleton */}
       {events && <CalendarDays daysToDisplay={daysToDisplay} currentDate={currentDate} events={events}/>}
       {isLoading && <CalendarSkeleton daysToDisplay={daysToDisplay} currentDate={currentDate}/>}
+      
     </div>
   );
 }
diff --git a/src/components/events/CalendarDay.tsx b/src/components/events/CalendarDay.tsx
new file mode 100644
index 0000000..64b9d97
--- /dev/null
+++ b/src/components/events/CalendarDay.tsx
@@ -0,0 +1,67 @@
+import { FirebaseEvent } from "@/types/events";
+import { format } from "date-fns";
+import CalendarEvent from "./CalendarEvent";
+import MobileCalendarEvent from "./MobileCalendarEvent";
+
+type CalendarDayProps = {
+  dayEvents?: FirebaseEvent[];
+  daysInMonth: number;
+  isCurrentMonth: boolean;
+  index: number;
+  day: Date;
+};
+
+const CalendarDay: React.FC<CalendarDayProps> = ({
+  dayEvents,
+  daysInMonth,
+  isCurrentMonth,
+  index,
+  day,
+}) => {
+  if (!isCurrentMonth) {
+    return (
+      <>
+        {/* Desktop Calendar Day not in current month */}
+        <div
+          className={`hidden border-l border-t border-gray-800 bg-[#0F1319] p-2 text-[#808080] md:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+        >
+          <p className="flex justify-end">{format(day, "dd")}</p>
+        </div>
+
+        {/* Mobile Calendar Day not in current month */}
+        <div className="flex justify-center p-2 md:hidden">
+          <div className="p-2 text-[#808080]">{format(day, "dd")}</div>
+        </div>
+      </>
+    );
+  }
+  return (
+    <>
+      {/* Desktop Calendar day in current month */}
+      <div
+        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 md:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+      >
+        <div className="flex justify-end">{format(day, "dd")}</div>
+        {dayEvents && (
+          <div className="pt-2">
+            {dayEvents.map((_event, i) => (
+              <CalendarEvent _event={_event} key={i} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Mobile Calendar day in current month */}
+
+      <div className="flex justify-center pt-2 md:hidden">
+        {dayEvents && dayEvents.length > 0 ? (
+         <MobileCalendarEvent day={day} dayEvents={dayEvents}/>
+        ) : (
+          <div className="p-2">{format(day, "dd")}</div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CalendarDay;
diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
index 66a82a7..1ff41ef 100644
--- a/src/components/events/CalendarDays.tsx
+++ b/src/components/events/CalendarDays.tsx
@@ -1,7 +1,7 @@
 import { FirebaseEvent } from "@/types/events";
 import { format, isSameDay } from "date-fns";
-import { useEffect, useState } from "react";
-import { FaXmark } from "react-icons/fa6";
+import CalendarEvent from "./CalendarEvent";
+import CalendarDay from "./CalendarDay";
 
 type CalendarDaysProps = {
   daysToDisplay: Date[];
@@ -24,28 +24,7 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
           return isCurrentMonth && isSameDay(eventDate, day);
         });
 
-        if (isCurrentMonth) {
-          return (
-            <div
-              className={`h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
-              key={i}
-            >
-              <div className="flex justify-end">{format(day, "dd")}</div>
-              <div className="pt-2">
-                {dayEvents.map((_event, i) => (
-                  <CalendarEvent _event={_event} key={i} />
-                ))}
-              </div>
-            </div>
-          );
-        } else {
-          return (
-            <div
-              className={`border-l border-t border-gray-800 bg-[#0F1319] ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
-              key={i}
-            ></div>
-          );
-        }
+        return <CalendarDay index={i} day={day} daysInMonth={daysToDisplay.length} dayEvents={dayEvents} isCurrentMonth={isCurrentMonth}/>
       })}
     </div>
   );
@@ -53,84 +32,4 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
 
 export default CalendarDays;
 
-type CalendarEventProps = {
-  _event: FirebaseEvent;
-};
-
-const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
-  const [showEventModal, setShowEventModal] = useState<boolean>(false);
-
-  const handleEventClick = () => {
-    setShowEventModal((prev) => !prev);
-    document.body.style.overflow =
-      document.body.style.overflow === "hidden" ? "auto" : "hidden";
-  };
-
-  const time = _event.time.toDate().toLocaleString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-
-  function formatDateToMMDDYY(date: Date): string {
-    const padZero = (num: number): string => num.toString().padStart(2, '0');
-    
-    const month = padZero(date.getMonth() + 1); // Months are 0-based
-    const day = padZero(date.getDate());
-    const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
-    
-    return `${month}/${day}/${year}`;
-}
-
-const date = formatDateToMMDDYY(_event.time.toDate())
 
-  
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.overflow === "hidden") {
-        document.body.style.overflow = "auto";
-      }
-    };
-  }, []);
-  return (
-    <>
-      <div
-        className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
-        onClick={handleEventClick}
-      >
-        {_event.title}
-      </div>
-
-      {showEventModal && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
-          <div className="relative w-full max-w-[400px] rounded-md bg-[#242424] border border-[#404040] px-6 py-10">
-            <button
-              onClick={handleEventClick}
-              className="absolute right-4 top-4 text-2xl"
-            >
-              <FaXmark />
-            </button>
-            <p className="text-xl font-medium">{_event.title}</p>
-            <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
-              <p className="">Location: {_event.location}</p>
-              <p className="">Time: {time}</p> <p className="">Date: {date}</p>
-            </div>
-            <p className="pt-3">{_event.description}</p>
-            <div className="flex gap-1.5 pt-4">
-          {_event.tags.map((tag, i) => (
-            <div
-              className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
-              key={tag}
-            >
-              <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
-              {tag}
-            </div>
-          ))}
-        </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
new file mode 100644
index 0000000..6a73e82
--- /dev/null
+++ b/src/components/events/CalendarEvent.tsx
@@ -0,0 +1,85 @@
+import { FirebaseEvent } from "@/types/events";
+import { useEffect, useState } from "react";
+import { FaXmark } from "react-icons/fa6";
+
+type CalendarEventProps = {
+  _event: FirebaseEvent;
+};
+
+const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);
+
+  const handleEventClick = () => {
+    setShowEventModal((prev) => !prev);
+    document.body.style.overflow =
+      document.body.style.overflow === "hidden" ? "auto" : "hidden";
+  };
+
+  const time = _event.time.toDate().toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+
+  function formatDateToMMDDYY(date: Date): string {
+    const padZero = (num: number): string => num.toString().padStart(2, "0");
+
+    const month = padZero(date.getMonth() + 1); // Months are 0-based
+    const day = padZero(date.getDate());
+    const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
+
+    return `${month}/${day}/${year}`;
+  }
+
+  const date = formatDateToMMDDYY(_event.time.toDate());
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.overflow === "hidden") {
+        document.body.style.overflow = "auto";
+      }
+    };
+  }, []);
+  return (
+    <>
+      <div
+        className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
+        onClick={handleEventClick}
+      >
+        {_event.title}
+      </div>
+
+      {showEventModal && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
+          <div className="relative w-full max-w-[400px] rounded-md border border-[#242424] bg-[#050a10] px-6 py-10">
+            <button
+              onClick={handleEventClick}
+              className="absolute right-4 top-4 text-2xl"
+            >
+              <FaXmark />
+            </button>
+            <p className="text-xl font-medium">{_event.title}</p>
+            <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
+              <p className="">Location: {_event.location}</p>
+              <p className="">Time: {time}</p> <p className="">Date: {date}</p>
+            </div>
+            <p className="pt-3">{_event.description}</p>
+            <div className="flex gap-1.5 pt-4">
+              {_event.tags.map((tag, i) => (
+                <div
+                  className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
+                  key={tag}
+                >
+                  <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+                  {tag}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CalendarEvent;
diff --git a/src/components/events/CalendarSkeleton.tsx b/src/components/events/CalendarSkeleton.tsx
index 81a4401..271443d 100644
--- a/src/components/events/CalendarSkeleton.tsx
+++ b/src/components/events/CalendarSkeleton.tsx
@@ -1,4 +1,5 @@
 import { format, isSameDay } from "date-fns";
+import CalendarDay from "./CalendarDay";
 
 type CalendarSkeletonProps = {
   daysToDisplay: Date[];
@@ -13,24 +14,7 @@ const CalendarSkeleton: React.FC<CalendarSkeletonProps> = ({
     <div className="grid w-full grid-cols-7">
       {daysToDisplay.map((day, i) => {
         const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
-
-        if (isCurrentMonth) {
-          return (
-            <div
-              className={`h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
-              key={i}
-            >
-              <div className="flex justify-end">{format(day, "dd")}</div>
-            </div>
-          );
-        } else {
-          return (
-            <div
-              className={`border-l border-t border-gray-800 bg-[#0F1319] ${daysToDisplay.length % 7 === 0 ? "border-r" : ""} ${daysToDisplay.length - i <= 7 ? "border-b" : ""}`}
-              key={i}
-            ></div>
-          );
-        }
+        return <CalendarDay daysInMonth={daysToDisplay.length} index={i} isCurrentMonth={isCurrentMonth} day={day}/> 
       })}
     </div>
   );
diff --git a/src/components/events/MobileCalendarEvent.tsx b/src/components/events/MobileCalendarEvent.tsx
new file mode 100644
index 0000000..cf13885
--- /dev/null
+++ b/src/components/events/MobileCalendarEvent.tsx
@@ -0,0 +1,61 @@
+import { FirebaseEvent } from "@/types/events";
+import { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { FaXmark } from "react-icons/fa6";
+import MonthlyEvent from "./MonthlyEvent";
+
+type MobileCalendarEventProps = {
+  day: Date;
+  dayEvents: FirebaseEvent[];
+};
+
+const MobileCalendarEvent: React.FC<MobileCalendarEventProps> = ({
+  day,
+  dayEvents,
+}) => {
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);
+
+  const handleEventClick = () => {
+    setShowEventModal((prev) => !prev);
+    document.body.style.overflow =
+      document.body.style.overflow === "hidden" ? "auto" : "hidden";
+  };
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.overflow === "hidden") {
+        document.body.style.overflow = "auto";
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-light-orange" onClick={handleEventClick}>
+        {format(day, "dd")}
+      </div>
+      {showEventModal && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
+          <div className="relative w-full max-w-[400px] max-h-[400px] overflow-y-auto rounded-md border border-[#242424] bg-[#050a10] px-2 py-10">
+            <button
+              onClick={handleEventClick}
+              className="absolute right-4 top-4 text-2xl"
+            >
+              <FaXmark />
+            </button>
+           
+            <div className="grid gap-4 mt-6">
+                {dayEvents.map((_event, i) => (
+                    <MonthlyEvent event={_event} key={i}/>
+                ))}
+            </div>
+            
+            
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MobileCalendarEvent;
diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
index 3ac80f2..d1d3ff4 100644
--- a/src/components/events/MonthlyEvent.tsx
+++ b/src/components/events/MonthlyEvent.tsx
@@ -96,7 +96,7 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
                 <p>Time: {time}</p>
               </div>
               <p className="pt-2">{event.description}</p>
-              <div className="flex gap-3 pt-4 h-10">
+              <div className="flex gap-2 pt-4 h-10">
                 {event.tags.map((tag, i) => (
                   <div
                     className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
index 35fbf4c..09fbcc3 100644
--- a/src/components/events/MonthlyEvents.tsx
+++ b/src/components/events/MonthlyEvents.tsx
@@ -23,7 +23,7 @@ export default function MonthlyEvents() {
   if (isLoading) {
     return (
       <div className="mt-10 md:mt-16">
-        <h1 className="font-Michroma text-2xl md:text-4xl">{format(currentDate, 'MMMM')} Events</h1>
+        <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
         <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
         <div className="h-52 w-full flex items-center justify-center">
           <span className="text-3xl animate-spin"><FaSpinner/></span>
@@ -37,7 +37,7 @@ export default function MonthlyEvents() {
   return (
     <div className="mt-10 md:mt-16">
       
-      <h1 className="font-Michroma text-2xl md:text-4xl">{format(currentDate, 'MMMM')} Events</h1>
+      <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
       
       <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
       <div className="mt-8 md:mt-12 grid gap-4 md:gap-12">
diff --git a/src/components/landing/LandingAbout.tsx b/src/components/landing/LandingAbout.tsx
index 3a0e318..bac0dfe 100644
--- a/src/components/landing/LandingAbout.tsx
+++ b/src/components/landing/LandingAbout.tsx
@@ -198,7 +198,7 @@ export default function LandingAbout() {
             className="relative left-[10%] mb-32 mt-32 w-[35%]"
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
+            transition={{ duration: 0.7, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.25 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
@@ -223,7 +223,7 @@ export default function LandingAbout() {
             className="relative left-[55%] mb-32 w-[35%]"
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
+            transition={{ duration: 0.7, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.3 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
@@ -248,7 +248,7 @@ export default function LandingAbout() {
             className="relative left-[10%] w-[35%]"
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
+            transition={{ duration: 0.7, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.3 }}
           >
             <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">

From af22db5cd462f3caaba92aef0a0d110e0a054134 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 18:59:30 -0500
Subject: [PATCH 11/14] Fixed console errors

---
 src/components/events/CalendarDays.tsx     | 2 +-
 src/components/events/CalendarSkeleton.tsx | 4 ++--
 src/components/landing/Hero.tsx            | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
index 1ff41ef..be475c2 100644
--- a/src/components/events/CalendarDays.tsx
+++ b/src/components/events/CalendarDays.tsx
@@ -24,7 +24,7 @@ const CalendarDays: React.FC<CalendarDaysProps> = ({
           return isCurrentMonth && isSameDay(eventDate, day);
         });
 
-        return <CalendarDay index={i} day={day} daysInMonth={daysToDisplay.length} dayEvents={dayEvents} isCurrentMonth={isCurrentMonth}/>
+        return <CalendarDay index={i} day={day} daysInMonth={daysToDisplay.length} dayEvents={dayEvents} isCurrentMonth={isCurrentMonth} key={i}/>
       })}
     </div>
   );
diff --git a/src/components/events/CalendarSkeleton.tsx b/src/components/events/CalendarSkeleton.tsx
index 271443d..3a28e09 100644
--- a/src/components/events/CalendarSkeleton.tsx
+++ b/src/components/events/CalendarSkeleton.tsx
@@ -1,4 +1,4 @@
-import { format, isSameDay } from "date-fns";
+import { format } from "date-fns";
 import CalendarDay from "./CalendarDay";
 
 type CalendarSkeletonProps = {
@@ -14,7 +14,7 @@ const CalendarSkeleton: React.FC<CalendarSkeletonProps> = ({
     <div className="grid w-full grid-cols-7">
       {daysToDisplay.map((day, i) => {
         const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
-        return <CalendarDay daysInMonth={daysToDisplay.length} index={i} isCurrentMonth={isCurrentMonth} day={day}/> 
+        return <CalendarDay daysInMonth={daysToDisplay.length} index={i} isCurrentMonth={isCurrentMonth} day={day} key={i}/> 
       })}
     </div>
   );
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 5c76ceb..ecbcf1d 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -51,7 +51,8 @@ export default function Hero() {
           <Image
             src="/landing/logo.png"
             alt="SPCB Logo"
-            fill
+           width={460}
+           height={460}
             className="object-contain"
             style={{
               filter: "drop-shadow(0 0 10px rgba(255,255,255,1))",

From 49c149d3479786981a8cec3eaf347801fce7202f Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 19:06:04 -0500
Subject: [PATCH 12/14] Removed unused components and dependencies

---
 package-lock.json                | 776 +------------------------------
 package.json                     |   5 +-
 public/models/case.glb           | Bin 18240 -> 0 bytes
 src/components/landing/Scene.tsx |  56 ---
 4 files changed, 8 insertions(+), 829 deletions(-)
 delete mode 100644 public/models/case.glb
 delete mode 100644 src/components/landing/Scene.tsx

diff --git a/package-lock.json b/package-lock.json
index 101261b..18ccbeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,6 @@
       "name": "spcb-website",
       "version": "0.1.0",
       "dependencies": {
-        "@react-three/drei": "^9.120.5",
-        "@react-three/fiber": "^8.17.10",
         "@tanstack/react-query": "^5.59.17",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -26,8 +24,7 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
         "tailwind-merge": "^2.5.2",
-        "tailwindcss-animate": "^1.0.7",
-        "three": "^0.172.0"
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -74,18 +71,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -809,24 +794,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mediapipe/tasks-vision": {
-      "version": "0.10.17",
-      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
-      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@monogrid/gainmap-js": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
-      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
-      "license": "MIT",
-      "dependencies": {
-        "promise-worker-transferable": "^1.0.4"
-      },
-      "peerDependencies": {
-        "three": ">= 0.159.0"
-      }
-    },
     "node_modules/@next/env": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.6.tgz",
@@ -1101,221 +1068,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@react-spring/animated": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
-      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/shared": "~9.7.5",
-        "@react-spring/types": "~9.7.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-spring/core": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
-      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.5",
-        "@react-spring/shared": "~9.7.5",
-        "@react-spring/types": "~9.7.5"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-spring/donate"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-spring/rafz": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
-      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
-      "license": "MIT"
-    },
-    "node_modules/@react-spring/shared": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
-      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/rafz": "~9.7.5",
-        "@react-spring/types": "~9.7.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-spring/three": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.5.tgz",
-      "integrity": "sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.5",
-        "@react-spring/core": "~9.7.5",
-        "@react-spring/shared": "~9.7.5",
-        "@react-spring/types": "~9.7.5"
-      },
-      "peerDependencies": {
-        "@react-three/fiber": ">=6.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "three": ">=0.126"
-      }
-    },
-    "node_modules/@react-spring/types": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
-      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
-      "license": "MIT"
-    },
-    "node_modules/@react-three/drei": {
-      "version": "9.120.5",
-      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.120.5.tgz",
-      "integrity": "sha512-hSu3q+gq546Op4aihIkbdIsFfjrmOqcJyMPNGv/IqM0nycJtvv5IzL+MISLplFTNFI6xMBJ9ZwC+7dpq35/FOA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mediapipe/tasks-vision": "0.10.17",
-        "@monogrid/gainmap-js": "^3.0.6",
-        "@react-spring/three": "~9.7.5",
-        "@use-gesture/react": "^10.3.1",
-        "camera-controls": "^2.9.0",
-        "cross-env": "^7.0.3",
-        "detect-gpu": "^5.0.56",
-        "glsl-noise": "^0.0.0",
-        "hls.js": "^1.5.17",
-        "maath": "^0.10.8",
-        "meshline": "^3.3.1",
-        "react-composer": "^5.0.3",
-        "stats-gl": "^2.2.8",
-        "stats.js": "^0.17.0",
-        "suspend-react": "^0.1.3",
-        "three-mesh-bvh": "^0.7.8",
-        "three-stdlib": "^2.34.0",
-        "troika-three-text": "^0.52.0",
-        "tunnel-rat": "^0.1.2",
-        "utility-types": "^3.11.0",
-        "uuid": "^9.0.1",
-        "zustand": "^5.0.1"
-      },
-      "peerDependencies": {
-        "@react-three/fiber": "^8 || ^9.0.0-0",
-        "react": "^18",
-        "react-dom": "^18",
-        "three": ">=0.137"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@react-three/fiber": {
-      "version": "8.17.10",
-      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.17.10.tgz",
-      "integrity": "sha512-S6bqa4DqUooEkInYv/W+Jklv2zjSYCXAhm6qKpAQyOXhTEt5gBXnA7W6aoJ0bjmp9pAeaSj/AZUoz1HCSof/uA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.17.8",
-        "@types/debounce": "^1.2.1",
-        "@types/react-reconciler": "^0.26.7",
-        "@types/webxr": "*",
-        "base64-js": "^1.5.1",
-        "buffer": "^6.0.3",
-        "debounce": "^1.2.1",
-        "its-fine": "^1.0.6",
-        "react-reconciler": "^0.27.0",
-        "scheduler": "^0.21.0",
-        "suspend-react": "^0.1.3",
-        "zustand": "^3.7.1"
-      },
-      "peerDependencies": {
-        "expo": ">=43.0",
-        "expo-asset": ">=8.4",
-        "expo-file-system": ">=11.0",
-        "expo-gl": ">=11.0",
-        "react": ">=18.0",
-        "react-dom": ">=18.0",
-        "react-native": ">=0.64",
-        "three": ">=0.133"
-      },
-      "peerDependenciesMeta": {
-        "expo": {
-          "optional": true
-        },
-        "expo-asset": {
-          "optional": true
-        },
-        "expo-file-system": {
-          "optional": true
-        },
-        "expo-gl": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@react-three/fiber/node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
-    "node_modules/@react-three/fiber/node_modules/scheduler": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/@react-three/fiber/node_modules/zustand": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
-      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
@@ -1391,12 +1143,6 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
       "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
     },
-    "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.3",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
-      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
-      "license": "MIT"
-    },
     "node_modules/@types/cacheable-request": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
@@ -1409,18 +1155,6 @@
         "@types/responselike": "^1.0.0"
       }
     },
-    "node_modules/@types/debounce": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.4.tgz",
-      "integrity": "sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/draco3d": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
-      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
-      "license": "MIT"
-    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -1450,21 +1184,17 @@
         "undici-types": "~6.19.2"
       }
     },
-    "node_modules/@types/offscreencanvas": {
-      "version": "2019.7.3",
-      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
-      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
-      "license": "MIT"
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1479,15 +1209,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-reconciler": {
-      "version": "0.26.7",
-      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
-      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/responselike": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
@@ -1497,32 +1218,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/stats.js": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
-      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/three": {
-      "version": "0.171.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.171.0.tgz",
-      "integrity": "sha512-oLuT1SAsT+CUg/wxUTFHo0K3NtJLnx9sJhZWQJp/0uXqFpzSk1hRHmvWvpaAWSfvx2db0lVKZ5/wV0I0isD2mQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@tweenjs/tween.js": "~23.1.3",
-        "@types/stats.js": "*",
-        "@types/webxr": "*",
-        "@webgpu/types": "*",
-        "fflate": "~0.8.2",
-        "meshoptimizer": "~0.18.1"
-      }
-    },
-    "node_modules/@types/webxr": {
-      "version": "0.5.20",
-      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
-      "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
-      "license": "MIT"
-    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1665,30 +1360,6 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
-    "node_modules/@use-gesture/core": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
-      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
-      "license": "MIT"
-    },
-    "node_modules/@use-gesture/react": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
-      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
-      "license": "MIT",
-      "dependencies": {
-        "@use-gesture/core": "10.3.1"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
-    "node_modules/@webgpu/types": {
-      "version": "0.1.52",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.52.tgz",
-      "integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -2079,15 +1750,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/bidi-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
-      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
-      "license": "MIT",
-      "dependencies": {
-        "require-from-string": "^2.0.2"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2224,15 +1886,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camera-controls": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.9.0.tgz",
-      "integrity": "sha512-TpCujnP0vqPppTXXJRYpvIy0xq9Tro6jQf2iYUxlDpPCNxkvE/XGaTuwIxnhINOkVP/ob2CRYXtY3iVYXeMEzA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "three": ">=0.126.1"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001653",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
@@ -2460,24 +2113,6 @@
         }
       }
     },
-    "node_modules/cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.1"
-      },
-      "bin": {
-        "cross-env": "src/bin/cross-env.js",
-        "cross-env-shell": "src/bin/cross-env-shell.js"
-      },
-      "engines": {
-        "node": ">=10.14",
-        "npm": ">=6",
-        "yarn": ">=1"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2582,12 +2217,6 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
-    "node_modules/debounce": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
-      "license": "MIT"
-    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2725,15 +2354,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/detect-gpu": {
-      "version": "5.0.63",
-      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.63.tgz",
-      "integrity": "sha512-S4ZOf2tI5nwFyhzGvsaRA86IvctD6JQtq4+NPSseO6E1AWW66qTDFHdAMBPlFiD7Dfe9TETy0Q7pa/kHcIYYMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "webgl-constants": "^1.1.1"
-      }
-    },
     "node_modules/devtools-protocol": {
       "version": "0.0.1367902",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1367902.tgz",
@@ -2773,12 +2393,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/draco3d": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
-      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3571,12 +3185,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/fflate": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
-      "license": "MIT"
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3728,19 +3336,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3964,12 +3559,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/glsl-noise": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
-      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
-      "license": "MIT"
-    },
     "node_modules/goober": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
@@ -4107,12 +3696,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.5.18",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.18.tgz",
-      "integrity": "sha512-znxR+2jecWluu/0KOBqUcvVyAB5tLff10vjMGrpAlz1eFY+ZhF1bY3r82V+Bk7WJdk03iTjtja9KFFz5BrqjSA==",
-      "license": "Apache-2.0"
-    },
     "node_modules/hpagent": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/hpagent/-/hpagent-0.1.2.tgz",
@@ -4201,12 +3784,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "license": "MIT"
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4540,12 +4117,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "license": "MIT"
-    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -4698,27 +4269,6 @@
         "set-function-name": "^2.0.1"
       }
     },
-    "node_modules/its-fine": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
-      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react-reconciler": "^0.28.0"
-      },
-      "peerDependencies": {
-        "react": ">=18.0"
-      }
-    },
-    "node_modules/its-fine/node_modules/@types/react-reconciler": {
-      "version": "0.28.9",
-      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
-      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/jackspeak": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
@@ -4853,15 +4403,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -4945,16 +4486,6 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
-    "node_modules/maath": {
-      "version": "0.10.8",
-      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
-      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/three": ">=0.134.0",
-        "three": ">=0.134.0"
-      }
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4963,21 +4494,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/meshline": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
-      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "three": ">=0.137"
-      }
-    },
-    "node_modules/meshoptimizer": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
-      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
-      "license": "MIT"
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5722,12 +5238,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
-    "node_modules/potpack": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
-      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
-      "license": "ISC"
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5840,20 +5350,11 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/promise-worker-transferable": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
-      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "is-promise": "^2.1.0",
-        "lie": "^3.0.2"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -6015,18 +5516,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-composer": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/react-composer/-/react-composer-5.0.3.tgz",
-      "integrity": "sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.6.0"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -6077,32 +5566,8 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/react-reconciler": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
-      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.21.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0"
-      }
-    },
-    "node_modules/react-reconciler/node_modules/scheduler": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -6144,12 +5609,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -6176,15 +5635,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6523,32 +5973,6 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
     },
-    "node_modules/stats-gl": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
-      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/three": "*",
-        "three": "^0.170.0"
-      },
-      "peerDependencies": {
-        "@types/three": "*",
-        "three": "*"
-      }
-    },
-    "node_modules/stats-gl/node_modules/three": {
-      "version": "0.170.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
-      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
-      "license": "MIT"
-    },
-    "node_modules/stats.js": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
-      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
-      "license": "MIT"
-    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -6847,15 +6271,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/suspend-react": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
-      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=17.0"
-      }
-    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
@@ -6974,45 +6389,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/three": {
-      "version": "0.172.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.172.0.tgz",
-      "integrity": "sha512-6HMgMlzU97MsV7D/tY8Va38b83kz8YJX+BefKjspMNAv0Vx6dxMogHOrnRl/sbMIs3BPUKijPqDqJ/+UwJbIow==",
-      "license": "MIT"
-    },
-    "node_modules/three-mesh-bvh": {
-      "version": "0.7.8",
-      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.8.tgz",
-      "integrity": "sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==",
-      "deprecated": "Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.",
-      "license": "MIT",
-      "peerDependencies": {
-        "three": ">= 0.151.0"
-      }
-    },
-    "node_modules/three-stdlib": {
-      "version": "2.35.2",
-      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.35.2.tgz",
-      "integrity": "sha512-Ns9ZdiFEAsiv8JvHS28Qgxg4YRTq13Ixa4EDUQZhUovZ3j/GLTou4zE887SLSqsuRZwuy3gklttn2ha5JaJpTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/draco3d": "^1.4.0",
-        "@types/offscreencanvas": "^2019.6.4",
-        "@types/webxr": "^0.5.2",
-        "draco3d": "^1.4.1",
-        "fflate": "^0.6.9",
-        "potpack": "^1.0.1"
-      },
-      "peerDependencies": {
-        "three": ">=0.128.0"
-      }
-    },
-    "node_modules/three-stdlib/node_modules/fflate": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
-      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
-      "license": "MIT"
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -7029,36 +6405,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/troika-three-text": {
-      "version": "0.52.3",
-      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.3.tgz",
-      "integrity": "sha512-jLhiwgV8kEkwWjvK12f2fHVpbOC75p7SgPQ0cgcz+IMtN5Bdyg4EuFdwuTOVu9ga8UeYdKBpzd1AxviyixtYTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "bidi-js": "^1.0.2",
-        "troika-three-utils": "^0.52.0",
-        "troika-worker-utils": "^0.52.0",
-        "webgl-sdf-generator": "1.1.1"
-      },
-      "peerDependencies": {
-        "three": ">=0.125.0"
-      }
-    },
-    "node_modules/troika-three-utils": {
-      "version": "0.52.0",
-      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.0.tgz",
-      "integrity": "sha512-00oxqIIehtEKInOTQekgyknBuRUj1POfOUE2q1OmL+Xlpp4gIu+S0oA0schTyXsDS4d9DkR04iqCdD40rF5R6w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "three": ">=0.125.0"
-      }
-    },
-    "node_modules/troika-worker-utils": {
-      "version": "0.52.0",
-      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
-      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
-      "license": "MIT"
-    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -7093,43 +6439,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
-    "node_modules/tunnel-rat": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
-      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
-      "license": "MIT",
-      "dependencies": {
-        "zustand": "^4.3.2"
-      }
-    },
-    "node_modules/tunnel-rat/node_modules/zustand": {
-      "version": "4.5.5",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz",
-      "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -7291,53 +6600,11 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
-    "node_modules/utility-types": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
-      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/webgl-constants": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
-      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
-    },
-    "node_modules/webgl-sdf-generator": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
-      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
-      "license": "MIT"
-    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -7663,35 +6930,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/zustand": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.2.tgz",
-      "integrity": "sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=18.0.0",
-        "immer": ">=9.0.6",
-        "react": ">=18.0.0",
-        "use-sync-external-store": ">=1.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "use-sync-external-store": {
-          "optional": true
-        }
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 077affd..d9cd87a 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@react-three/drei": "^9.120.5",
-    "@react-three/fiber": "^8.17.10",
     "@tanstack/react-query": "^5.59.17",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -27,8 +25,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7",
-    "three": "^0.172.0"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/public/models/case.glb b/public/models/case.glb
deleted file mode 100644
index a364f6910ad380984c03ff8ce0e79a521b2e7d24..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 18240
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
Wad$=;{}oh5SxI^En$dI4&-h<87M9om

diff --git a/src/components/landing/Scene.tsx b/src/components/landing/Scene.tsx
deleted file mode 100644
index 5a20400..0000000
--- a/src/components/landing/Scene.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls, Environment, useGLTF } from '@react-three/drei';
-import { useRef } from 'react';
-import { Group } from 'three';
-
-function Scene() {
-  return (
-    <Canvas
-      shadows
-      camera={{ position: [3, 3, 11.2], fov: 50 }}
-      style={{ height: "240px" }}
-    >
-      <ambientLight intensity={0.3} />
-      <directionalLight
-        castShadow
-        position={[5, 5, 5]}
-        intensity={1}
-        shadow-mapSize-width={1024}
-        shadow-mapSize-height={1024}
-      />
-      <Model position={[0, 0, 0]} />
-      <OrbitControls enableZoom={false} enablePan={false} />
-      <Environment preset="night" />
-    </Canvas>
-  );
-}
-
-export default Scene;
-
-interface ModelProps {
-  position: [number, number, number];
-}
-
-export function Model(props: ModelProps) {
-  const { nodes, materials } = useGLTF('/models/case.glb') as any; // Use "as any" to avoid issues with the GLTF loader
-  const ref = useRef<Group>(null);
-
-  useFrame((state, delta) => {
-    if (ref.current) {
-      ref.current.rotation.y += delta / 2;
-    }
-  });
-
-  return (
-    <group {...props} dispose={null} scale={0.8} ref={ref}>
-      <mesh
-        castShadow
-        receiveShadow
-        geometry={nodes['0'].geometry}
-        material={materials.lambert1}
-      />
-    </group>
-  );
-}
-
-useGLTF.preload('/models/case.glb');

From fe036881b8e80b51fc5796fd8bb6410fc995aece Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 19:24:19 -0500
Subject: [PATCH 13/14] Fixed broken hero spacing

---
 src/app/globals.css                           | 1 +
 src/components/events/CalendarDays.tsx        | 1 -
 src/components/events/CalendarEvent.tsx       | 8 ++++----
 src/components/events/MobileCalendarEvent.tsx | 4 ++--
 src/components/landing/Hero.tsx               | 6 +++---
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7d7352c..6a41805 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17,6 +17,7 @@ textarea {
 body {
   font-family: "Inter", sans-serif;
   background-color: #ffffff;
+  overflow-x: hidden;
 }
 
 
diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
index be475c2..4a3d6e3 100644
--- a/src/components/events/CalendarDays.tsx
+++ b/src/components/events/CalendarDays.tsx
@@ -1,6 +1,5 @@
 import { FirebaseEvent } from "@/types/events";
 import { format, isSameDay } from "date-fns";
-import CalendarEvent from "./CalendarEvent";
 import CalendarDay from "./CalendarDay";
 
 type CalendarDaysProps = {
diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
index 6a73e82..19d927a 100644
--- a/src/components/events/CalendarEvent.tsx
+++ b/src/components/events/CalendarEvent.tsx
@@ -11,8 +11,8 @@ const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
 
   const handleEventClick = () => {
     setShowEventModal((prev) => !prev);
-    document.body.style.overflow =
-      document.body.style.overflow === "hidden" ? "auto" : "hidden";
+    document.body.style.overflowY =
+      document.body.style.overflowY === "hidden" ? "auto" : "hidden";
   };
 
   const time = _event.time.toDate().toLocaleString("en-US", {
@@ -35,8 +35,8 @@ const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
 
   useEffect(() => {
     return () => {
-      if (document.body.style.overflow === "hidden") {
-        document.body.style.overflow = "auto";
+      if (document.body.style.overflowY === "hidden") {
+        document.body.style.overflowY = "auto";
       }
     };
   }, []);
diff --git a/src/components/events/MobileCalendarEvent.tsx b/src/components/events/MobileCalendarEvent.tsx
index cf13885..9fc6076 100644
--- a/src/components/events/MobileCalendarEvent.tsx
+++ b/src/components/events/MobileCalendarEvent.tsx
@@ -18,13 +18,13 @@ const MobileCalendarEvent: React.FC<MobileCalendarEventProps> = ({
   const handleEventClick = () => {
     setShowEventModal((prev) => !prev);
     document.body.style.overflow =
-      document.body.style.overflow === "hidden" ? "auto" : "hidden";
+      document.body.style.overflowY === "hidden" ? "auto" : "hidden";
   };
 
   useEffect(() => {
     return () => {
       if (document.body.style.overflow === "hidden") {
-        document.body.style.overflow = "auto";
+        document.body.style.overflowY = "auto";
       }
     };
   }, []);
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index ecbcf1d..e1e5022 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -5,9 +5,9 @@ import {motion} from "framer-motion"
 
 export default function Hero() {
   return (
-    <div className="hero relative pb-12 sm:pb-28 pt-24 sm:pt-24 text-[#eaeaea] sm:h-[max(100svh,840px)]">
+    <div className="hero relative pb-12 lg:pt-24 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)]">
       <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
-        <div className="flex w-full flex-col items-center  text-center lg:w-3/4 lg:items-start lg:text-left">
+        <div className="flex w-full flex-col items-center text-center lg:w-3/4 lg:items-start lg:text-left">
           <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
             1000+ Active Members!
           </span>
@@ -44,7 +44,7 @@ export default function Hero() {
         {/* <div className="hidden max-h-[220px] cursor-grab items-center sm:flex lg:w-1/4">
           <Scene />
         </div> */}
-        <motion.div className="relative h-[240px] w-[240px] md:h-[460px] md:w-[460px]  -mr-6 lg:-mr-12"  initial={{ opacity: 0, y: 60 }}
+        <motion.div className="relative h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:h-[460px] lg:w-[460px]  -mr-6 lg:-mr-12"  initial={{ opacity: 0, y: 60 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.4, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.3 }}>

From 32319ca3198ca70f7002fecbbca613fd57cd1baa Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Thu, 2 Jan 2025 19:36:05 -0500
Subject: [PATCH 14/14] Added comments to hero section

---
 src/app/globals.css                    | 37 ++++++----------------
 src/app/page.tsx                       |  3 +-
 src/components/Navbar/PublicNavbar.tsx |  4 +++
 src/components/landing/Hero.tsx        | 43 ++++++++++++++++----------
 4 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6a41805..58c280f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -20,52 +20,35 @@ body {
   overflow-x: hidden;
 }
 
-
-.hero {
-  background-image: url('/landing/bg.svg');
+#hero {
+  background-image: url("/landing/bg.svg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-
-
-
 .noise-bg {
   position: fixed;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: 0.02;
-  background: 
-    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px 2500px,
-    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px 2500px;
+  background:
+    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px
+      2500px,
+    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px
+      2500px;
   background-blend-mode: difference;
 }
 
-@media (max-width: 768px) {
-  .noise-bg {
-    background: 
-      repeating-radial-gradient(#fff 0 1%, #000 0 0.02%) 50% 0/500px 500px,
-      repeating-conic-gradient(#fff 0 1%, #000 0 0.02%) 50% 50%/500px 500px;
-  }
-}
-
-
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
       #4255f922 25%,
-      #0F1319 100%
-    ),
-    radial-gradient(
-      61.66% 37.6% at 6.63% 95.08%,
-      #4255f922 25%,
-      #0F1319 100%
+      #0f1319 100%
     ),
+    radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f922 25%, #0f1319 100%),
     rgba(26, 26, 26, 0.43);
   box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
   border: 1px solid #4255f911;
-
-  
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 00fe72e..7de3548 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,11 +5,10 @@ import LandingAbout from "@/components/landing/LandingAbout";
 const Website = () => {
   return (
     <div className="min-h-screen w-full bg-[#050a10]">
+      {/* Applied a noise bg to the page for added depth */}
       <div className="noise-bg" />
       <Hero />
       <LandingAbout />
-
-      {/* About Section */}
     </div>
   );
 };
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 1ff624a..3a3fa5f 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -4,6 +4,9 @@ import { FaBars } from "react-icons/fa";
 import { FaXmark } from "react-icons/fa6";
 import { AnimatePresence, motion } from "framer-motion";
 
+
+// TODO: Fix the navbar apperance when viewing admin dashboard
+
 export default function Nav() {
   const [showMobileNav, setShowMobileNav] = useState<boolean>(false);
   return (
@@ -40,6 +43,7 @@ export default function Nav() {
           </div>
         </div>
 
+        {/* Animate the mobile nav-links downward when clicked */}
         <AnimatePresence>
           {showMobileNav && (
             <motion.div
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index e1e5022..622a002 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -1,30 +1,39 @@
 import React from "react";
 import LogoCarousel from "./LogoCarousel";
 import Image from "next/image";
-import {motion} from "framer-motion"
+import { motion } from "framer-motion";
 
 export default function Hero() {
   return (
-    <div className="hero relative pb-12 lg:pt-24 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)]">
+    <div className="relative pb-12 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)] lg:pt-24" id="hero">
+      {/* Flex-row on desktop devices but flex-col-reverse for devices lg and smaller */}
       <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
         <div className="flex w-full flex-col items-center text-center lg:w-3/4 lg:items-start lg:text-left">
+        {/* Hidden on mobile */}
           <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
             1000+ Active Members!
           </span>
-          <h1 className="font-Michroma leading-normal lg:leading-normal pt-4 text-[26px] font-semibold sm:text-4xl lg:text-[44px]">
-            The Society <br className="inline sm:hidden"/>of PC Building
+          <h1 className="pt-4 font-Michroma text-[26px] font-semibold leading-normal sm:text-4xl lg:text-[44px] lg:leading-normal">
+            The Society <br className="inline sm:hidden" />
+            of PC Building
           </h1>
-          <p className="max-w-[620px] pt-4 sm:pt-3 font-medium leading-relaxed text-[17px] sm:text-lg">
+
+          {/* On mobile devices shorten the description to limit text-length */}
+          <p className="max-w-[620px] pt-4 text-[17px] font-medium leading-relaxed sm:pt-3 sm:text-lg">
             <span className="hidden sm:inline">
               Join the Society of PC Building at UF—where
             </span>
             <span className="sm:hidden">Where</span> students passionate about
             hardware and tech connect, innovate, and build custom PCs together.
           </p>
-          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 py-2 px-8 font-medium text-white sm:text-base">
+
+
+          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white sm:text-base">
             Join the Club!
           </button>
 
+
+          {/* On mobile devices show the infinite carousel but on desktop static list */}
           <div className="mt-20 lg:mt-32">
             <p className="text-sm opacity-80">
               Led by a team of officers with experience at:
@@ -41,18 +50,20 @@ export default function Hero() {
             <LogoCarousel />
           </div>
         </div>
-        {/* <div className="hidden max-h-[220px] cursor-grab items-center sm:flex lg:w-1/4">
-          <Scene />
-        </div> */}
-        <motion.div className="relative h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:h-[460px] lg:w-[460px]  -mr-6 lg:-mr-12"  initial={{ opacity: 0, y: 60 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.4, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.3 }}>
+
+        {/* Animate SPCB logo upwards. Applied negative margin to center logo better */}
+        <motion.div
+          className="relative -mr-6 h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:-mr-12 lg:h-[460px] lg:w-[460px]"
+          initial={{ opacity: 0, y: 60 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+          viewport={{ once: true, amount: 0.3 }}
+        >
           <Image
             src="/landing/logo.png"
             alt="SPCB Logo"
-           width={460}
-           height={460}
+            width={460}
+            height={460}
             className="object-contain"
             style={{
               filter: "drop-shadow(0 0 10px rgba(255,255,255,1))",
@@ -60,8 +71,8 @@ export default function Hero() {
             priority
           />
         </motion.div>
-      </div>
 
+      </div>
     </div>
   );
 }