diff --git a/README.md b/README.md
index e215bc4..f85c02a 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,121 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Codehive 🌐💻  
 
-## Getting Started
+Codehive is a web-based platform designed to provide a **collaborative coding environment** integrated with **communication services** and an **AI-powered code assistant**. It aims to empower developers and teams with seamless collaboration, code sharing, and debugging tools.  
 
-First, run the development server:
+## 🌟 **Key Features**  
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+### 🔗 **Collaborative Code Editor** 📝  
+- Supports coding in **Python**, **C**, **Java**, **JavaScript**, **C++**, and **TypeScript**.  
+- Share **Room IDs** or direct links to invite others.  
+- Real-time collaboration: Changes made by one user instantly reflect for all participants.  
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### 📹 **Video Calling and Chat** 💬  
+- Integrated video calling with on/off toggles.  
+- Built-in chat system for easy communication.  
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### ⚙️ **Custom Inputs and Code Execution** 🖥️  
+- Provide custom inputs for programs and execute code directly within the app.  
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### 🎨 **Themes and Code Snippets** 🌈  
+- Over **20+ themes** available for personalizing the code editor.  
+- Export code snippets as **PNG** images or files with respective language extensions.  
 
-## Learn More
+### 🤖 **Codehive Genie** 🧞  
+- AI-powered coding assistant integrated into Codehive.  
+- Provides assistance in:  
+  - Generating code.  
+  - Debugging and optimizing code.  
+- Powered by **Llama 3.3** via the **Groq AI Cloud**.  
 
-To learn more about Next.js, take a look at the following resources:
+### 📦 **In-Built Compiler** ⚡  
+- Run and test your code directly within the platform.  
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### 📱 **Responsive Design** 📱  
+- Fully optimized for use on **phones**, **tablets**, and **laptops**.  
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## 📸 Screenshots  
 
-## Deploy on Vercel
+### 🌟 Collaborative Editor  
+![Collaborative Editor](https://github.com/codehiveofficial/codehive/blob/main/public/img2.png?raw=true)  
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 🌟 Codehive Genie in Action  
+![Codehive Genie](https://github.com/codehiveofficial/codehive/blob/main/public/img3.png?raw=true)
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+### 🌟 Video Calling and Chat  
+![Video Calling](https://github.com/codehiveofficial/codehive/blob/main/public/Screenshot%202024-12-01%20015641.png)  
+
+### 🌟 Generate Beautiful Code Snippets
+![Code Snippets](https://github.com/codehiveofficial/codehive/blob/main/public/codehive_snippet%20(4).png)  
+
+
+## 🛠️ **Tech Stack**  
+
+### Frontend  
+- **Next.js** and **React.js**  
+- **TypeScript**  
+- **Tailwind CSS** for styling  
+- **Monaco Editor** for code editing (with themes)  
+- **HTML2Canvas** for snippet generation  
+
+### Backend  
+- **Codehive Genie** ([Repo](https://github.com/codehiveofficial/codehive-genie)):  
+  - Python-based **Flask API** utilizing **Llama 3.3** for AI-driven coding assistance.  
+  - Integrated with **Groq AI Cloud** for LLM parameterization.  
+
+- **Codehive Server** ([Repo](https://github.com/codehiveofficial/codehive-server)):  
+  - Built using **Node.js** and **Express**.  
+  - Handles **video calling** and **chat streaming** using **Socket.IO**.  
+
+
+## 🚀 **Installation Guide**  
+
+### 1. **Clone the Repo** 🔗  
+```bash  
+git clone https://github.com/codehiveofficial/codehive.git  
+cd codehive  
+```  
+
+### 2. **Install Dependencies** 📦  
+```bash  
+npm install --force  
+```  
+> **Note**: The `--force` flag is used because some packages do not yet support the newer React version. Don't worry, this won't cause any issues.  
+
+### 3. **Set Environment Variables** 🔧  
+Coordinate with the following repositories to set up the required environment variables:  
+- [Codehive Genie](https://github.com/codehiveofficial/codehive-genie)  
+- [Codehive Server](https://github.com/codehiveofficial/codehive-server)  
+
+Create a `.env` file in the root directory and configure the following variables:  
+```env  
+NEXT_PUBLIC_AUTH_SECRET= 
+NEXT_PUBLIC_CODEHIVE_GENIE_API_URL= 
+NEXT_PUBLIC_SOCKET_BACKEND_URL= 
+NEXT_PUBLIC_FRONTEND_URL= 
+NEXT_PUBLIC_CONTACT_US_API= 
+NEXT_PUBLIC_AUTH_MESSAGE=  
+```  
+
+### 4. **Run the Development Server** ▶️  
+```bash  
+npm run dev  
+```  
+Your server will be running on [http://localhost:3000](http://localhost:3000).  
+
+
+## 🌍 **Deployment**  
+- 🚀 We recommend deploying the **Next.js** app on **Vercel** for its seamless Next.js template support.  
+- 🛠️ For other repositories, follow their respective README instructions.  
+
+
+## 📜 **License**  
+Codehive is licensed under the **MIT License**.  
+[View License](https://github.com/codehiveofficial/codehive/blob/main/LICENSE)  
+
+
+## ❓ **Have Questions?**  
+For any queries, feel free to:  
+- 📬 Contact us via the **Contact Us** section on the website.  
+- 🚀 Raise an issue in the repository.  
+
+Enjoy a streamlined coding experience with **Codehive**! 🖥️✨  
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..0cfc9bd 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,12 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true, // Ignore ESLint errors during builds
+  },
+  typescript: {
+    ignoreBuildErrors: true, // Ignore TypeScript errors during builds
+  },
   /* config options here */
 };
 
diff --git a/package-lock.json b/package-lock.json
index ab0f02c..e0c0878 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,19 +8,36 @@
       "name": "codehive",
       "version": "0.1.0",
       "dependencies": {
+        "@material-tailwind/react": "^2.1.10",
+        "@monaco-editor/react": "^4.6.0",
+        "@types/simple-peer": "^9.11.8",
         "@types/uuid": "^10.0.0",
         "autoprefixer": "^10.4.20",
+        "axios": "^1.7.7",
+        "clsx": "^2.1.1",
+        "framer-motion": "^11.12.0",
+        "highlight.js": "^11.10.0",
+        "html2canvas": "^1.4.1",
         "lucide-react": "^0.454.0",
+        "monaco-themes": "^0.4.4",
         "next": "15.0.1",
         "peerjs": "^1.5.4",
         "react": "19.0.0-rc-69d4b800-20241021",
         "react-dom": "19.0.0-rc-69d4b800-20241021",
+        "react-icons": "^5.3.0",
+        "react-markdown": "^9.0.1",
+        "react-select": "^5.8.2",
+        "react-syntax-highlighter": "^15.6.1",
+        "simple-peer": "^9.11.1",
+        "socket.io-client": "^4.8.1",
+        "tailwind-merge": "^2.5.5",
         "uuid": "^11.0.2"
       },
       "devDependencies": {
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "eslint": "^8",
         "eslint-config-next": "15.0.1",
         "postcss": "^8.4.47",
@@ -40,6 +57,137 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
+      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
+      "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+      "dependencies": {
+        "@babel/parser": "^7.26.0",
+        "@babel/types": "^7.26.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
+      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.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==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/generator": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.25.9",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -49,6 +197,93 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -108,6 +343,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -533,7 +790,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -547,7 +803,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -556,7 +811,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -564,19 +818,201 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-xGU/mLDKDBp/qZ8Dp2XR7fKcTpDuFeZEBqoL9Bk/29kakKxNxjUGYSRHEFLsyOFf4VIhU6WGHdIS7tOA3QGJHA==",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
+    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@msgpack/msgpack": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz",
@@ -785,6 +1221,11 @@
       "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "dev": true
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -798,32 +1239,76 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "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/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
     "node_modules/@types/node": {
       "version": "20.17.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.1.tgz",
       "integrity": "sha512-j2VlPv1NnwPJbaCNv69FO/1z4lId0QmGvpT41YxitRtWlg96g/j8qcv2RKsLKe2F6OJgyXhupN1Xo17b2m139Q==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -838,6 +1323,36 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/simple-peer": {
+      "version": "9.11.8",
+      "resolved": "https://registry.npmjs.org/@types/simple-peer/-/simple-peer-9.11.8.tgz",
+      "integrity": "sha512-rvqefdp2rvIA6wiomMgKWd2UZNPe6LM2EV5AuY3CPQJF+8TbdrL5TjYdMf0VAjGczzlkH4l1NjDkihwbj3Xodw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -1080,8 +1595,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/acorn": {
       "version": "8.14.0",
@@ -1175,6 +1689,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1340,6 +1865,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1400,6 +1930,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -1409,12 +1949,62 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1480,6 +2070,29 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "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"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1514,7 +2127,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -1547,6 +2159,15 @@
         }
       ]
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1563,6 +2184,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1599,11 +2256,24 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1645,6 +2315,26 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1660,6 +2350,34 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1674,6 +2392,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1689,8 +2415,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -1753,7 +2478,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -1766,12 +2490,32 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -1806,6 +2550,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -1815,6 +2575,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1839,6 +2611,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1856,6 +2637,26 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
+      "integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -1869,6 +2670,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-ex/node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2039,7 +2858,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2491,6 +3309,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2505,6 +3332,11 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2551,6 +3383,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A=="
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -2560,6 +3397,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2584,6 +3433,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2620,6 +3474,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2645,6 +3518,27 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2657,6 +3551,38 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.12.0.tgz",
+      "integrity": "sha512-gZaZeqFM6pX9kMVti60hYAa75jGpSsGYWAHbBfIkuHN7DkVHVkxSxeNYnrGmHuM0zPkWTzQx10ZT+fDjn7N4SA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2681,7 +3607,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2713,6 +3638,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -2922,7 +3852,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2930,6 +3859,178 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.2.tgz",
+      "integrity": "sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/hastscript/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2943,7 +4044,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -2978,8 +4078,12 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
@@ -2995,9 +4099,31 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
       "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
@@ -3097,7 +4223,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -3138,6 +4263,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3195,6 +4329,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -3252,6 +4395,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -3435,8 +4589,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -3450,12 +4603,28 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "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
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3547,8 +4716,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3571,11 +4739,19 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -3583,6 +4759,27 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lowlight/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -3597,6 +4794,161 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ=="
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz",
+      "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3606,6 +4958,427 @@
         "node": ">= 8"
       }
     },
+    "node_modules/micromark": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz",
+      "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz",
+      "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.3.tgz",
+      "integrity": "sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz",
+      "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -3619,6 +5392,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3649,11 +5441,24 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz",
+      "integrity": "sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==",
+      "peer": true
+    },
+    "node_modules/monaco-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.4.tgz",
+      "integrity": "sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==",
+      "dependencies": {
+        "fast-plist": "^0.1.3"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -3795,7 +5600,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3977,7 +5781,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -3985,6 +5788,47 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4015,8 +5859,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
@@ -4034,6 +5877,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/peerjs": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/peerjs/-/peerjs-1.5.4.tgz",
@@ -4099,6 +5950,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -4287,17 +6149,38 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "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",
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4311,7 +6194,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4327,6 +6209,14 @@
         }
       ]
     },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.0.0-rc-69d4b800-20241021",
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc-69d4b800-20241021.tgz",
@@ -4346,11 +6236,146 @@
         "react": "19.0.0-rc-69d4b800-20241021"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "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-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
+    "node_modules/react-select": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz",
+      "integrity": "sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/react/node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-select/node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-select/node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
+      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
+    "node_modules/react-syntax-highlighter/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -4361,6 +6386,19 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4394,6 +6432,117 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "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=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -4412,11 +6561,41 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4433,7 +6612,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -4514,6 +6692,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -4675,6 +6872,34 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -4684,6 +6909,40 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4692,6 +6951,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -4700,6 +6973,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4864,6 +7145,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4910,6 +7204,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -4932,6 +7243,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -5014,7 +7330,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5022,6 +7337,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
@@ -5068,6 +7397,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5107,6 +7444,24 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -5270,8 +7625,88 @@
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
     },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
@@ -5314,8 +7749,15 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
     },
     "node_modules/uuid": {
       "version": "11.0.2",
@@ -5329,6 +7771,32 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/webrtc-adapter": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
@@ -5544,6 +8012,42 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
@@ -5567,6 +8071,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index b6920d1..3ca6ca9 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,36 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@material-tailwind/react": "^2.1.10",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/simple-peer": "^9.11.8",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.12.0",
+    "highlight.js": "^11.10.0",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^0.454.0",
+    "monaco-themes": "^0.4.4",
     "next": "15.0.1",
     "peerjs": "^1.5.4",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
+    "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
+    "react-select": "^5.8.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "simple-peer": "^9.11.1",
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^2.5.5",
     "uuid": "^11.0.2"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^8",
     "eslint-config-next": "15.0.1",
     "postcss": "^8.4.47",
diff --git a/public/Screenshot 2024-12-01 015641.png b/public/Screenshot 2024-12-01 015641.png
new file mode 100644
index 0000000..33b3281
Binary files /dev/null and b/public/Screenshot 2024-12-01 015641.png differ
diff --git a/public/abhayimg.png b/public/abhayimg.png
new file mode 100644
index 0000000..8f3867c
Binary files /dev/null and b/public/abhayimg.png differ
diff --git a/public/codehive_snippet (4).png b/public/codehive_snippet (4).png
new file mode 100644
index 0000000..93ac750
Binary files /dev/null and b/public/codehive_snippet (4).png differ
diff --git a/public/img2.png b/public/img2.png
new file mode 100644
index 0000000..4591e3b
Binary files /dev/null and b/public/img2.png differ
diff --git a/public/img3.png b/public/img3.png
new file mode 100644
index 0000000..92a011a
Binary files /dev/null and b/public/img3.png differ
diff --git a/public/khageshimg.png b/public/khageshimg.png
new file mode 100644
index 0000000..04e36ac
Binary files /dev/null and b/public/khageshimg.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..b145888
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/rb_1651.png b/public/rb_1651.png
new file mode 100644
index 0000000..8736554
Binary files /dev/null and b/public/rb_1651.png differ
diff --git a/public/rb_2035.png b/public/rb_2035.png
new file mode 100644
index 0000000..ccbc76a
Binary files /dev/null and b/public/rb_2035.png differ
diff --git a/src/app/combined/ChatModal.tsx b/src/app/combined/ChatModal.tsx
new file mode 100644
index 0000000..0ff1a44
--- /dev/null
+++ b/src/app/combined/ChatModal.tsx
@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from "react";
+import { io, Socket } from "socket.io-client";
+import { Send, X, MessageCircle } from "lucide-react";
+
+interface ChatMessage {
+  userId: string;
+  userName: string;
+  message: string;
+}
+
+interface ChatModalProps {
+  socket: Socket;
+  userName: string;
+}
+
+export default function ChatModal ({ socket, userName }:any) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [newMessage, setNewMessage] = useState("");
+  const [isOpen, setIsOpen] = useState(false); // Controls visibility of chat modal
+
+  useEffect(() => {
+    socket.on("receive_message", (data: ChatMessage) => {
+      setMessages((prevMessages) => [...prevMessages, data]);
+    });
+
+    return () => {
+      socket.off("receive_message");
+    };
+  }, [socket]);
+
+  const sendMessage = () => {
+    if (newMessage.trim() !== "" && socket.id) {
+      const messageData: ChatMessage = {
+        userId: socket.id,
+        userName,
+        message: newMessage,
+      };
+      socket.emit("chat_message", messageData);
+      setNewMessage("");
+    }
+  };
+
+  return (
+    <>
+      <div className="fixed bottom-4 right-4 z-50">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="p-3 bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          {isOpen ? <X size={24} /> : <MessageCircle size={24} />}
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="fixed bottom-16 right-4 z-50 rounded-lg shadow-2xl bg-gradient-to-br from-gray-900 to-gray-800 text-white">
+          <div className="flex flex-col lg:h-[600px] md:w-[400px] h-[500px] lg:w-[400px] w-[250px]">
+            {/* Header */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-700">
+              <h2 className="text-lg lg:text-xl font-semibold">Chat Room</h2>
+              <div className="flex items-center space-x-2">
+                <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="text-sm text-gray-300">Online</span>
+              </div>
+            </div>
+
+            {/* Messages Container */}
+            <div className="flex-1 p-4 overflow-y-auto scroll-smooth space-y-4">
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className={`flex flex-col ${
+                    message.userId === socket.id ? "items-end" : "items-start"
+                  }`}
+                >
+                  <div
+                    className={`max-w-[80%] px-4 py-2 rounded-2xl shadow-md ${
+                      message.userId === socket.id
+                        ? "bg-blue-600 text-right rounded-br-none"
+                        : "bg-gray-700 text-left rounded-bl-none"
+                    }`}
+                  >
+                    <p className="text-xs font-bold text-gray-300 mb-1">
+                      {message.userName}
+                    </p>
+                    <p className="text-lg">{message.message}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Input Area */}
+            <div className="p-4 border-t border-gray-700">
+              <div className="flex items-center space-x-2">
+                <input
+                  type="text"
+                  value={newMessage}
+                  onChange={(e) => setNewMessage(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      sendMessage();
+                    }
+                  }}
+                  className="flex-1 w-[100px] lg:w-[400px] lg:text-lg text-sm px-4 py-2 bg-gray-700 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
+                  placeholder="Type your message..."  
+                />
+                <button
+                  onClick={sendMessage}
+                  className="p-2 bg-blue-600 rounded-full hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <Send size={20} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
diff --git a/src/app/combined/GenieModal.tsx b/src/app/combined/GenieModal.tsx
new file mode 100644
index 0000000..f721550
--- /dev/null
+++ b/src/app/combined/GenieModal.tsx
@@ -0,0 +1,285 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import {
+  Loader2,
+  Sparkles,
+  Send,
+  X,
+  Copy,
+  Check,
+  PauseCircle,
+} from "lucide-react";
+
+interface ExtraProps {
+  inline?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CodeBlock = ({
+  inline,
+  className,
+  children,
+  ...props
+}: ExtraProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const match = /language-(\w+)/.exec(className || "");
+  const language = match ? match[1] : "plaintext";
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(String(children));
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  return !inline && match ? (
+    <div className="relative group">
+      {/* Floating Controls */}
+      <div className="absolute top-2 right-2 flex space-x-2 z-10">
+        {/* Language Tag */}
+        <div className="bg-gray-800 text-gray-200 text-xs font-bold px-2 py-1 rounded-md">
+          {language.toUpperCase()}
+        </div>
+
+        {/* Copy Button */}
+        <button
+          onClick={copyToClipboard}
+          className="p-2 text-gray-200 bg-gray-800 rounded-md hover:bg-gray-600 transition-all"
+          aria-label="Copy code"
+        >
+          {isCopied ? (
+            <Check className="w-4 h-4" />
+          ) : (
+            <Copy className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+
+      {/* Syntax Highlighter */}
+      <SyntaxHighlighter
+        style={materialDark}
+        language={language}
+        PreTag="div"
+        {...props}
+      >
+        {String(children).replace(/\n$/, "")}
+      </SyntaxHighlighter>
+    </div>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
+
+interface GenieModalProps {
+  onClose: () => void;
+  code?: string; // Optional code prop
+}
+
+export default function GenieModal({ onClose, code = "" }:any)  {
+  const [query, setQuery] = useState("");
+  const [includeCode, setIncludeCode] = useState(false);
+  const [response, setResponse] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const responseRef = useRef<HTMLDivElement>(null);
+  const stopSignalRef = useRef(false);
+
+  const typewriterEffect = async (text: string) => {
+    const chunkSize = 10;
+    for (let i = 0; i < text.length; i += chunkSize) {
+      if (stopSignalRef.current) break;
+      await new Promise((resolve) => setTimeout(resolve, 1));
+      setResponse((prev) => prev + text.slice(i, i + chunkSize));
+    }
+  };
+
+  const handleQuerySubmit = async () => {
+    setLoading(true);
+    setError("");
+    setResponse("");
+    console.log("Code:", code);
+    stopSignalRef.current = false;
+
+    const formattedQuery =
+      includeCode && code ? `Code: ${code}\nQuestion: ${query}` : query;
+
+    try {
+      const AUTH_SECRET = process.env.NEXT_PUBLIC_AUTH_SECRET;
+      const CODEHIVE_GENIE_API_URL =
+        process.env.NEXT_PUBLIC_CODEHIVE_GENIE_API_URL;
+
+      const response = await fetch(CODEHIVE_GENIE_API_URL!, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: AUTH_SECRET!,
+        },
+        body: JSON.stringify({ query: formattedQuery }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        setError(errorData.error || "An unknown error occurred.");
+        setLoading(false);
+        return;
+      }
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder("utf-8");
+
+      while (true) {
+        if (stopSignalRef.current) break;
+        const { value, done } = await reader!.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value);
+        await typewriterEffect(chunk);
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch the response. Please try again.");
+      setLoading(false);
+    }
+  };
+
+  const handleStopGeneration = () => {
+    stopSignalRef.current = true;
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (responseRef.current) {
+      responseRef.current.scrollTop = responseRef.current.scrollHeight;
+    }
+  }, [response]);
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/80 transition-opacity duration-300"
+        onClick={onClose}
+      />
+      <div className="relative w-full max-w-3xl sm:max-w-4xl md:max-w-5xl mx-4 h-[90vh] md:h-[85vh] bg-gray-900 rounded-2xl shadow-2xl overflow-hidden border border-gray-700">
+        {/* Header */}
+        <div className="absolute top-0 left-0 right-0 px-4 sm:px-6 py-4 bg-gray-800 border-b border-gray-700">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-6 h-6 text-blue-400" />
+              <h2 className="text-lg sm:text-2xl md:text-3xl font-bold text-gray-100">
+                CodeHive Genie
+              </h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-full hover:bg-gray-700 transition-colors"
+              aria-label="Close modal"
+            >
+              <X className="w-5 h-5 text-gray-400" />
+            </button>
+          </div>
+        </div>
+
+        <div className="h-full pt-20 pb-24 px-4 sm:px-6 overflow-y-auto">
+          <div
+            ref={responseRef}
+            className="min-h-[200px] max-h-[50vh] mb-6 p-6 bg-gray-800 rounded-xl border border-gray-700 shadow-sm overflow-y-auto text-gray-300"
+          >
+            {response ? (
+              <ReactMarkdown
+                components={{
+                  code: ({ inline, className, children, ...props }: any) => (
+                    <CodeBlock inline={inline} className={className} {...props}>
+                      {children}
+                    </CodeBlock>
+                  ),
+                }}
+              >
+                {response}
+              </ReactMarkdown>
+            ) : (
+              <span className="text-gray-400 font-sans">
+                Ask me anything about coding. I'm here to help! ✨
+              </span>
+            )}
+          </div>
+
+          {error && (
+            <div className="mb-6 p-4 bg-red-900 border border-red-700 rounded-xl text-red-300">
+              <p className="text-center">{error}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Input Area */}
+        {/* Input Area */}
+        <div className="absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gray-800 border-t border-gray-700">
+          <div className="flex flex-col sm:flex-row gap-4">
+            {/* Textarea */}
+            <textarea
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Ask me anything about coding..."
+              className="flex-1 p-4 h-24 sm:h-16 bg-gray-700 border border-gray-600 rounded-xl text-gray-100 placeholder-gray-400 resize-none focus:outline-none focus:ring-2 focus:ring-blue-400"
+            />
+
+            {/* Options and Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 sm:gap-2">
+              <label className="flex items-center gap-2 text-gray-300 sm:ml-2">
+                <input
+                  type="checkbox"
+                  checked={includeCode}
+                  onChange={(e) => setIncludeCode(e.target.checked)}
+                  className="w-4 h-4"
+                />
+                Include Code
+              </label>
+
+              {/* Pause Button */}
+              {loading && (
+                <button
+                  onClick={handleStopGeneration}
+                  className="py-2 px-4 sm:px-6 bg-red-600 text-white font-semibold rounded-xl hover:opacity-90 transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
+                >
+                  <PauseCircle className="w-6 h-6" />
+                </button>
+              )}
+
+              {/* Send Button */}
+              <button
+                onClick={handleQuerySubmit}
+                disabled={loading || !query.trim()}
+                className="py-3 px-6 sm:px-8 w-full sm:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl hover:opacity-90 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    <span className="hidden sm:inline">Processing...</span>
+                  </>
+                ) : (
+                  <>
+                    <Send className="w-5 h-5" />
+                    <span className="hidden sm:inline">Ask Genie</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
diff --git a/src/app/combined/[meetId]/page.tsx b/src/app/combined/[meetId]/page.tsx
new file mode 100644
index 0000000..17067f6
--- /dev/null
+++ b/src/app/combined/[meetId]/page.tsx
@@ -0,0 +1,890 @@
+"use client";
+import { languageOptions } from "@/constants/languageOptions";
+import LanguageDropdown from "@/app/editor/LanguageDropdown";
+import React, { use, useEffect, useRef, useState } from "react";
+import ThemeDropdown from "@/app/editor/ThemeDropdown";
+import OutputWindow from "@/app/editor/OutputWindow";
+import CustomInput from "@/app/editor/CustomInput";
+import CodeEditor from "@/app/editor/CodeEditor";
+import { defineTheme } from "@/lib/defineTheme";
+import { Socket, io } from "socket.io-client";
+import "@/app/combined/combined.css";
+import Peer from "simple-peer";
+import axios from "axios";
+import ChatModal from "../ChatModal";
+import {
+  downloadCodeAsFile,
+  downloadCodeAsImage,
+} from "@/helpers/downloadCode";
+import { FaVideo, FaVideoSlash } from "react-icons/fa6";
+import { FaMicrophone } from "react-icons/fa";
+import { IoMdExit } from "react-icons/io";
+import { MdFileDownload } from "react-icons/md";
+import { AiOutlineSnippets } from "react-icons/ai";
+import { FaMicrophoneSlash } from "react-icons/fa";
+import { AiOutlineAudioMuted } from "react-icons/ai";
+import { FaClipboard, FaCheck } from "react-icons/fa";
+import { RiRobot2Line } from "react-icons/ri";
+import { FaLink } from "react-icons/fa6";
+import GenieModal from "../GenieModal";
+import { useParams } from "next/navigation";
+
+interface Theme {
+  value: string;
+  label: string;
+}
+
+interface PeerConnection {
+  peer: Peer.Instance;
+  userName: string;
+}
+
+interface User {
+  userName: string;
+  videoEnabled: boolean;
+  audioEnabled: boolean;
+}
+
+const defaultCodeTemplates: Record<string, string> = {
+  javascript:
+    "// Write your JavaScript code here\nconsole.log('Hello, World!');",
+  python: "# Write your Python code here\nprint('Hello, World!')",
+  c: "#include <stdio.h>\n\nint main() {\n    printf('Hello, World!\\n');\n    return 0;\n}",
+  cpp: '#include <iostream>\n\nint main() {\n    std::cout << "Hello, World!" << std::endl;\n    return 0;\n}',
+  java: 'public class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}',
+  typescript:
+    "// Write your TypeScript code here\nconsole.log('Hello, World!');",
+};
+
+
+export default function CollaborativeIDE2({ userName }: any)  {
+  const [code, setCode] = useState(
+    defaultCodeTemplates[languageOptions[0].value]
+  );
+  const params = useParams();
+
+  useEffect(() => {
+    console.log(params);
+  }, []);
+  const [customInput, setCustomInput] = useState("");
+  const [outputDetails, setOutputDetails] = useState<any>(null);
+  const [theme, setTheme] = useState<Theme>({
+    value: "oceanic-next",
+    label: "Oceanic Next",
+  });
+  const [language, setLanguage] = useState(languageOptions[0]);
+  const [fontSize, setFontSize] = useState(18);
+  const [isLoading, setIsLoading] = useState(false);
+  const [remoteCursorPosition, setRemoteCursorPosition] = useState<{
+    lineNumber: number;
+    column: number;
+  } | null>(null);
+  const meetId = params.meetId;
+  const [roomId, setRoomId] = useState(meetId || "");
+  const [name, setName] = useState("");
+  const [peers, setPeers] = useState<{ [key: string]: PeerConnection }>({});
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
+  const [isJoined, setIsJoined] = useState(false);
+  const [myStream, setMyStream] = useState<MediaStream | null>(null);
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [mediaError, setMediaError] = useState<string>("");
+  const [streamReady, setStreamReady] = useState(false);
+  const socketRef = useRef<Socket>();
+  const userVideoRef = useRef<HTMLVideoElement>(null);
+  const peersRef = useRef<{ [key: string]: PeerConnection }>({});
+  const streamRef = useRef<MediaStream>();
+  const [meetlinkcopied, setMeetLinkCopied] = useState(false);
+
+  const [copied, setCopied] = useState(false);
+  const [isGenieModalOpen, setIsGenieModalOpen] = useState(false);
+
+  const setupVideoStream = async (
+    stream: MediaStream,
+    videoElement: HTMLVideoElement | null
+  ) => {
+    try {
+      if (!videoElement) {
+        throw new Error("Video element not found");
+      }
+      // Clear any existing stream
+      if (videoElement.srcObject) {
+        const oldStream = videoElement.srcObject as MediaStream;
+        oldStream.getTracks().forEach((track) => track.stop());
+      }
+      videoElement.srcObject = null;
+      videoElement.srcObject = stream;
+      // Ensure video tracks are enabled
+      stream.getVideoTracks().forEach((track) => {
+        track.enabled = isVideoEnabled;
+      });
+      // Ensure audio tracks are enabled
+      stream.getAudioTracks().forEach((track) => {
+        track.enabled = isAudioEnabled;
+      });
+      await videoElement.play().catch((playError) => {
+        console.error("Error playing video:", playError);
+        throw new Error("Failed to play video stream");
+      });
+      setStreamReady(true);
+      console.log("Video stream setup successfully");
+    } catch (err) {
+      console.error("Error in setupVideoStream:", err);
+      setMediaError(
+        "Failed to setup video stream. Please refresh and try again."
+      );
+      setStreamReady(false);
+    }
+  };
+
+  const initializeMediaStream = async () => {
+    try {
+      setIsInitializing(true);
+      setMediaError("");
+      console.log("Requesting media permissions...");
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 320 },
+          height: { ideal: 240 },
+          frameRate: { ideal: 15, max: 20 },
+        },
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      });
+      console.log("Media stream obtained:", stream);
+      console.log("Video tracks:", stream.getVideoTracks());
+      console.log("Audio tracks:", stream.getAudioTracks());
+      // Verify we have both audio and video tracks
+      if (stream.getVideoTracks().length === 0) {
+        throw new Error("No video track available");
+      }
+      if (stream.getAudioTracks().length === 0) {
+        throw new Error("No audio track available");
+      }
+      streamRef.current = stream;
+      setMyStream(stream);
+      await setupVideoStream(stream, userVideoRef.current);
+      setMediaError("");
+    } catch (err) {
+      console.error("Error in initializeMediaStream:", err);
+      setMediaError(
+        err instanceof Error
+          ? `Media access error: ${err.message}`
+          : "Failed to access camera and microphone. Please ensure you have granted the necessary permissions."
+      );
+      setStreamReady(false);
+    } finally {
+      setIsInitializing(false);
+    }
+  };
+
+  // Initialize media on component mount
+  useEffect(() => {
+    initializeMediaStream();
+    // Initialize theme
+    defineTheme("oceanic-next").then(() => {
+      setTheme({ value: "oceanic-next", label: "Oceanic Next" });
+    });
+    // Cleanup function
+    return () => {
+      if (streamRef.current) {
+        console.log("Stopping all tracks...");
+        streamRef.current.getTracks().forEach((track) => {
+          track.stop();
+          console.log(`Stopped track: ${track.kind}`);
+        });
+      }
+    };
+  }, []);
+
+  // Monitor video element and stream changes
+  useEffect(() => {
+    if (myStream && userVideoRef.current) {
+      console.log("Updating video element with new stream");
+      setupVideoStream(myStream, userVideoRef.current);
+    }
+  }, [myStream]);
+
+  // Socket initialization moved to room creation/joining
+  const initializeSocket = () => {
+    socketRef.current = io(process.env.NEXT_PUBLIC_SOCKET_BACKEND_URL, {
+      transports: ["websocket"],
+      upgrade: false,
+    });
+    socketRef.current.on("receiving_returned_signal", ({ signal, id }) => {
+      if (peersRef.current[id]) {
+        peersRef.current[id].peer.signal(signal);
+      }
+    });
+    socketRef.current.on(
+      "user_joined_with_signal",
+      ({ signal, callerID, userName: peerUserName }) => {
+        if (streamRef.current) {
+          const peer = addPeer(signal, callerID, streamRef.current);
+          peersRef.current[callerID] = { peer, userName: peerUserName };
+          setPeers((users) => ({
+            ...users,
+            [callerID]: { peer, userName: peerUserName },
+          }));
+        }
+      }
+    );
+    socketRef.current.on("user_left", ({ userId }) => {
+      if (peersRef.current[userId]) {
+        peersRef.current[userId].peer.destroy();
+        const videoElement = peersRef.current[userId].videoElement;
+        if (videoElement && videoElement.parentNode) {
+          videoElement.parentNode.removeChild(videoElement);
+        }
+        const newPeers = { ...peersRef.current };
+        delete newPeers[userId];
+        peersRef.current = newPeers;
+        setPeers(newPeers);
+      }
+    });
+  };
+
+  const createRoom = async () => {
+    if (!streamRef.current) {
+      setMediaError(
+        "Please ensure camera and microphone access is granted before creating a room."
+      );
+      return;
+    }
+    if (!name) {
+      alert("Please enter your name");
+      return;
+    }
+    try {
+      initializeSocket();
+      // Ensure video stream is properly set up before creating room
+      socketRef.current?.emit("create_room", async (newRoomId: string) => {
+        setRoomId(newRoomId);
+        await joinRoomClicked(newRoomId);
+      });
+    } catch (err) {
+      console.error("Error creating room:", err);
+      setMediaError("Failed to create room. Please try again.");
+    }
+  };
+
+  const joinRoomClicked = async (roomIdToJoin: string) => {
+    if (!streamRef.current) {
+      setMediaError(
+        "Please ensure camera and microphone access is granted before joining a room."
+      );
+      return;
+    }
+    if (!name) {
+      alert("Please enter your name");
+      return;
+    }
+    try {
+      if (!socketRef.current) {
+        initializeSocket();
+      }
+
+      socketRef.current?.emit("join_room", {
+        roomId: roomIdToJoin,
+        userName,
+      });
+      socketRef.current?.on(
+        "user_joined",
+        ({ userId, userName: peerUserName }) => {
+          if (streamRef.current) {
+            const peer = createPeer(
+              userId,
+              socketRef.current?.id || "",
+              streamRef.current
+            );
+            peersRef.current[userId] = { peer, userName: peerUserName };
+            setPeers((currentPeers) => ({
+              ...currentPeers,
+              [userId]: { peer, userName: peerUserName },
+            }));
+          }
+        }
+      );
+      socketRef.current?.on(
+        "receive_code_change",
+        ({ code, cursorPosition }) => {
+          setCode(code);
+          setRemoteCursorPosition(cursorPosition);
+        }
+      );
+      setIsJoined(true);
+      setRoomId(roomIdToJoin);
+      await initializeMediaStream();
+    } catch (err) {
+      console.error("Error joining room:", err);
+      setMediaError("Failed to join room. Please try again.");
+    }
+  };
+
+  const createPeer = (
+    userToSignal: string,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: true,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("sending_signal", {
+        userToSignal,
+        callerID,
+        signal,
+      });
+    });
+    // Listen for stream events to add video of other peers
+    peer.on("stream", (remoteStream) => {
+      // Function to attach the remote stream to a video element
+      addVideoStream(remoteStream, userToSignal);
+    });
+    return peer;
+  };
+
+  const addPeer = (
+    incomingSignal: Peer.SignalData,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: false,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("returning_signal", { signal, callerID });
+    });
+    peer.on("stream", (remoteStream) => {
+      addVideoStream(remoteStream, callerID);
+    });
+    peer.signal(incomingSignal);
+    return peer;
+  };
+
+  const addVideoStream = (stream: any, userId: any) => {
+    const videoElement = document.createElement("video");
+    videoElement.srcObject = stream;
+    videoElement.autoplay = true;
+    videoElement.playsInline = true;
+    videoElement.classList.add(
+      "peer-video",
+      "rounded-lg",
+      // "aspect-video",
+      "bg-gray-800",
+      "overflow-hidden",
+      // "scroll-container",
+      "w-full"
+      // "object-cover"
+    );
+    const videoContainer = document.getElementById("video-container");
+    if (videoContainer) {
+      videoContainer.appendChild(videoElement);
+    }
+    // Store the reference if needed for cleanup later
+    peersRef.current[userId].videoElement = videoElement;
+  };
+
+  // Code Editor Functions
+  const handleThemeChange = (
+    selectedOption: { label: string; value: string } | null
+  ) => {
+    if (selectedOption) {
+      if (["light", "vs-dark"].includes(selectedOption.value)) {
+        setTheme(selectedOption);
+      } else {
+        defineTheme(selectedOption.value).then(() => setTheme(selectedOption));
+      }
+    }
+  };
+
+  const handleLanguageChange = (option: any) => {
+    setLanguage(option);
+    setCode(defaultCodeTemplates[option.value] || "// Write your code here");
+    setOutputDetails(null);
+  };
+
+  const onCodeChange = (action: string, newCode: string) => {
+    setCode(newCode);
+    socketRef.current?.emit("code_change", {
+      roomId,
+      code: newCode,
+      cursorPosition: remoteCursorPosition,
+    });
+  };
+
+  const executeCode = async () => {
+    setIsLoading(true);
+    const startTime = Date.now();
+    try {
+      const response = await axios.post(
+        "https://emkc.org/api/v2/piston/execute",
+        {
+          language: language.value,
+          version: "*",
+          files: [{ name: "code", content: code }],
+          stdin: customInput,
+        }
+      );
+      const endTime = Date.now();
+      const compilationTime = ((endTime - startTime) / 1000).toFixed(2);
+      const runData = response.data.run;
+      const outputData = {
+        stdout: runData.stdout,
+        stderr: runData.stderr,
+        status: runData.stderr ? "Error" : "Compilation Successful",
+        time: compilationTime,
+        memory: "N/A",
+      };
+      setOutputDetails(outputData);
+    } catch (error) {
+      console.error("Error executing code:", error);
+      setOutputDetails({
+        stdout: "",
+        stderr: "Execution failed",
+        status: "Failed",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Video Controls
+  const toggleVideo = () => {
+    if (streamRef.current) {
+      streamRef.current.getVideoTracks().forEach((track) => {
+        track.enabled = !isVideoEnabled;
+      });
+      setIsVideoEnabled(!isVideoEnabled);
+      socketRef.current?.emit("toggle_video", {
+        roomId,
+        enabled: !isVideoEnabled,
+      });
+    }
+  };
+
+  const toggleAudio = () => {
+    if (streamRef.current) {
+      streamRef.current.getAudioTracks().forEach((track) => {
+        track.enabled = !isAudioEnabled;
+      });
+      setIsAudioEnabled(!isAudioEnabled);
+      socketRef.current?.emit("toggle_audio", {
+        roomId,
+        enabled: !isAudioEnabled,
+      });
+    }
+  };
+
+  const leaveRoom = () => {
+    Object.values(peersRef.current).forEach(({ peer, videoElement }) => {
+      peer.destroy();
+      if (videoElement && videoElement.parentNode) {
+        videoElement.parentNode.removeChild(videoElement);
+      }
+    });
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+    }
+    socketRef.current?.disconnect();
+    setIsJoined(false);
+    setPeers({});
+    setRoomId("");
+    setMyStream(null);
+    setMediaError("");
+    window.location.reload();
+  };
+
+  const copyToClipboard = (
+    text: string,
+    setCopied: React.Dispatch<React.SetStateAction<boolean>>
+  ) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2500);
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err);
+      });
+  };
+
+  const copyMeetLink = (
+    text: string,
+    setMeetLinkCopied: React.Dispatch<React.SetStateAction<boolean>>
+  ) => {
+    navigator.clipboard
+      .writeText(`${process.env.NEXT_PUBLIC_FRONTEND_URL}/combined/` + text)
+      .then(() => {
+        setMeetLinkCopied(true);
+        setTimeout(() => setMeetLinkCopied(false), 2500);
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err);
+      });
+  };
+
+  const toggleGenieModal = () => {
+    setIsGenieModalOpen(!isGenieModalOpen);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900">
+      {isInitializing ? (
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-white">
+            Initializing camera and microphone...
+          </div>
+        </div>
+      ) : !isJoined ? (
+        <div className="flex flex-col items-center justify-center min-h-screen gap-4 p-4">
+          {mediaError && (
+            <div className="bg-red-500 text-white p-4 rounded-lg mb-4">
+              {mediaError}
+              <button
+                onClick={initializeMediaStream}
+                className="ml-4 bg-white text-red-500 px-3 py-1 rounded hover:bg-gray-100"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+          <div className="relative w-64 aspect-video bg-gray-800 rounded-lg overflow-hidden mb-4">
+            <video
+              ref={userVideoRef}
+              autoPlay
+              playsInline
+              muted
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+              Preview
+            </div>
+            {!streamReady && !mediaError && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
+                <div className="text-white text-center">Loading video...</div>
+              </div>
+            )}
+          </div>
+          <div className="space-y-4 w-[90vw] lg:w-fit md:w-fit">
+            <div className="flex flex-col gap-2">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Enter your name"
+                className="border w-full p-2 rounded-lg"
+              />
+              <button
+                onClick={createRoom}
+                disabled={!streamReady}
+                className="w-full bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Create New Room
+              </button>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-2">
+              <input
+                type="text"
+                value={roomId}
+                onChange={(e) => setRoomId(e.target.value)}
+                placeholder="Enter Room ID"
+                className="border p-2 rounded-lg"
+              />
+              <button
+                onClick={() => joinRoomClicked(roomId)}
+                disabled={!streamReady}
+                className="bg-green-500 text-white w-full px-6 py-2 rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Join Room
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="container mx-auto p-4">
+          {socketRef.current && (
+            <ChatModal socket={socketRef.current} userName={name} />
+          )}
+          {/* Top bar with room info and controls */}
+          <div className="mb-4 lg:flex justify-between items-center">
+            <div className="flex justify-between items-center mr-2 space-x-2 text-white bg-gray-800 px-4 py-2 rounded-lg shadow-lg">
+              <div className="flex gap-2">
+                <span className="font-sm lg:font-medium">Room ID:</span>
+                <span className="text-blue-400 hidden lg:block font-semibold">
+                  {roomId}
+                </span>
+                <span className="text-blue-400 block lg:hidden font-semibold">
+                  {roomId.slice(0, 4)}...
+                </span>
+              </div>
+              <div className="flex gap-2">
+                <span
+                  onClick={() => copyToClipboard(roomId, setCopied)}
+                  className={`ml-2 p-2 rounded-full cursor-pointer transition ${
+                    copied ? "bg-green-500" : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                  title={copied ? "Copied!" : "Copy Room ID"}
+                >
+                  {copied ? (
+                    <FaCheck className="text-white" />
+                  ) : (
+                    <FaClipboard className="text-white" />
+                  )}
+                </span>
+                <span
+                  onClick={() => copyMeetLink(roomId, setMeetLinkCopied)}
+                  className={`ml-2 p-2 rounded-full cursor-pointer transition ${
+                    meetlinkcopied
+                      ? "bg-green-500"
+                      : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                  title={meetlinkcopied ? "Copied!" : "Copy Meet Link"}
+                >
+                  {meetlinkcopied ? (
+                    <FaCheck className="text-white" />
+                  ) : (
+                    <FaLink className="text-white" />
+                  )}
+                </span>
+              </div>
+            </div>
+
+            <div className="hidden lg:flex gap-2">
+              <button
+                onClick={toggleVideo}
+                className={`px-4 py-2 rounded-lg ${
+                  isVideoEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isVideoEnabled ? "Turn Off Video" : "Turn On Video"}
+              </button>
+              <button
+                onClick={toggleAudio}
+                className={`px-4 py-2 rounded-lg ${
+                  isAudioEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isAudioEnabled ? "Turn Off Audio" : "Turn On Audio"}
+              </button>
+              <button
+                onClick={leaveRoom}
+                className="px-4 py-2 rounded-lg bg-red-500 text-white"
+              >
+                Leave Room
+              </button>
+              <button
+                onClick={downloadCodeAsFile.bind(null, code, language.value)}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                Download File
+              </button>
+              <button
+                onClick={downloadCodeAsImage.bind(
+                  null,
+                  code,
+                  "codehive_snippet.png"
+                )}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                Download Snippet (PNG)
+              </button>
+            </div>
+            <div className="flex items-center justify-center mt-2 lg:hidden gap-2">
+              <button
+                onClick={toggleVideo}
+                className={`px-4 py-2 rounded-lg ${
+                  isVideoEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isVideoEnabled ? <FaVideoSlash /> : <FaVideo />}
+              </button>
+              <button
+                onClick={toggleAudio}
+                className={`px-4 py-2 rounded-lg ${
+                  isAudioEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isAudioEnabled ? <FaMicrophoneSlash /> : <FaMicrophone />}
+              </button>
+              <button
+                onClick={leaveRoom}
+                className="px-4 py-2 rounded-lg bg-red-500 text-white"
+              >
+                <IoMdExit />
+              </button>
+              <button
+                onClick={downloadCodeAsFile.bind(null, code, language.value)}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                <MdFileDownload />
+              </button>
+              <button
+                onClick={downloadCodeAsImage.bind(
+                  null,
+                  code,
+                  "codehive_snippet.png"
+                )}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                <AiOutlineSnippets />
+              </button>
+            </div>
+          </div>
+          {/* Main content area */}
+          <div className="flex lg:flex-row flex-col gap-4">
+            {/* Left side - Videos */}
+            <div className="w-full lg:w-1/4 flex flex-col gap-2">
+              {/* Self video */}
+              <div className="relative w-full">
+                <div className="aspect-video bg-gray-800 rounded-lg overflow-hidden scroll-container">
+                  <video
+                    ref={userVideoRef}
+                    autoPlay
+                    muted
+                    playsInline
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+                    You
+                  </div>
+                </div>
+              </div>
+              {/* Container for peer videos */}
+              <div
+                id="video-container"
+                className="w-full lg:block lg:h-[80vh] lg:overflow-x-hidden scroll-container"
+              >
+                {Object.entries(peers).map(
+                  ([peerId, { peer, userName: peerUserName }]) => (
+                    <div key={peerId} className="lg:relative mt-4 lg:w-full">
+                      {/* <PeerVideo peer={peer} userName={peerUserName} /> */}
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+            {/* Right side - Code Editor */}
+            <div className="w-full lg:w-3/4 space-y-4">
+              <div className="flex justify-between items-center">
+                <div className="hidden lg:flex gap-4">
+                  <LanguageDropdown onSelectChange={handleLanguageChange} />
+                  <ThemeDropdown
+                    handleThemeChange={handleThemeChange}
+                    theme={theme}
+                  />
+                  <button
+                    onClick={toggleGenieModal}
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"
+                  >
+                    <RiRobot2Line />
+                    <span>Genie</span>
+                  </button>
+                </div>
+                {isGenieModalOpen && <GenieModal onClose={toggleGenieModal} code={code} />}
+                <div className="hidden lg:flex items-center gap-2">
+                  <label className="text-white">Font Size:</label>
+                  <input
+                    type="number"
+                    value={fontSize}
+                    onChange={(e) => setFontSize(Number(e.target.value))}
+                    className="w-12 px-2 py-1 rounded"
+                    min="10"
+                    max="40"
+                  />
+                </div>
+                <div className="flex w-full lg:hidden gap-4 flex-col items-center justify-center">
+                  <div className="flex w-full lg:hidden gap-4 themecenter">
+                    <LanguageDropdown onSelectChange={handleLanguageChange} />
+                    <ThemeDropdown
+                      handleThemeChange={handleThemeChange}
+                      theme={theme}
+                    />
+                    <div className="flex items-center lg:hidden gap-2">
+                      {/* <label className="text-white">Font Size:</label> */}
+                      <input
+                        type="number"
+                        value={fontSize}
+                        onChange={(e) => setFontSize(Number(e.target.value))}
+                        className="w-14 px-2 py-1 rounded"
+                        min="10"
+                        max="40"
+                      />
+                    </div>
+                  </div>
+                  <button
+                    onClick={toggleGenieModal}
+                    className="px-4 w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                  >
+                    Generate Code with Genie
+                  </button>
+                  {isGenieModalOpen && (
+                    <GenieModal onClose={toggleGenieModal} />
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col lg:grid lg:grid-cols-3 gap-4">
+                <div className="lg:col-span-2 lg:overflow-x-hidden lg:w-full w-full">
+                  <CodeEditor
+                    onCodeChange={onCodeChange}
+                    fontSize={fontSize}
+                    language={language.value}
+                    theme={theme.value}
+                    code={code}
+                    remoteCursorPosition={remoteCursorPosition}
+                    onCursorPositionChange={function (position: {
+                      lineNumber: number;
+                      column: number;
+                    }): void {
+                      throw new Error("Function not implemented.");
+                    }}
+                  />
+                </div>
+
+                <div className="flex justify-items-center flex-col gap-2 lg:col-span-1 lg:space-y-4">
+                  <button
+                    className="w-full lg:w-full lg:px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50"
+                    disabled={!code || isLoading}
+                    onClick={executeCode}
+                  >
+                    {isLoading ? "Running..." : "Run Code"}
+                  </button>
+                  <div className="flex justify-items-center">
+                    <OutputWindow outputDetails={outputDetails} />
+                  </div>
+                  <div className="flex justify-items-center">
+                    <CustomInput
+                      customInput={customInput}
+                      setCustomInput={setCustomInput}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/src/app/combined/combined.css b/src/app/combined/combined.css
new file mode 100644
index 0000000..2e8b1bb
--- /dev/null
+++ b/src/app/combined/combined.css
@@ -0,0 +1,28 @@
+.scroll-container {
+  max-height: 400px;
+  max-width: 100%;
+  overflow-y: auto;
+}
+
+.scroll-container::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.scroll-container::-webkit-scrollbar-track {
+  background: #808080;
+  border-radius: 4px;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+  background: white;
+  border-radius: 4px;
+}
+
+.peer-video {
+  margin-bottom: 10px;
+}
+
+.themecenter {
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/app/combined/page.tsx b/src/app/combined/page.tsx
new file mode 100644
index 0000000..eecf11b
--- /dev/null
+++ b/src/app/combined/page.tsx
@@ -0,0 +1,884 @@
+"use client";
+import { languageOptions } from "@/constants/languageOptions";
+import LanguageDropdown from "@/app/editor/LanguageDropdown";
+import React, { useEffect, useRef, useState } from "react";
+import ThemeDropdown from "@/app/editor/ThemeDropdown";
+import OutputWindow from "@/app/editor/OutputWindow";
+import CustomInput from "@/app/editor/CustomInput";
+import CodeEditor from "@/app/editor/CodeEditor";
+import { defineTheme } from "@/lib/defineTheme";
+import { Socket, io } from "socket.io-client";
+import "@/app/combined/combined.css";
+import Peer from "simple-peer";
+import axios from "axios";
+import ChatModal from "./ChatModal";
+import {
+  downloadCodeAsFile,
+  downloadCodeAsImage,
+} from "@/helpers/downloadCode";
+import { FaVideo, FaVideoSlash } from "react-icons/fa6";
+import { FaMicrophone } from "react-icons/fa";
+import { IoMdExit } from "react-icons/io";
+import { MdFileDownload } from "react-icons/md";
+import { AiOutlineSnippets } from "react-icons/ai";
+import { FaMicrophoneSlash } from "react-icons/fa";
+import { AiOutlineAudioMuted } from "react-icons/ai";
+import { FaClipboard, FaCheck } from "react-icons/fa";
+import { RiRobot2Line } from "react-icons/ri";
+import { FaLink } from "react-icons/fa6";
+import GenieModal from "./GenieModal";
+
+interface Theme {
+  value: string;
+  label: string;
+}
+
+interface PeerConnection {
+  peer: Peer.Instance;
+  userName: string;
+}
+
+interface User {
+  userName: string;
+  videoEnabled: boolean;
+  audioEnabled: boolean;
+}
+
+const defaultCodeTemplates: Record<string, string> = {
+  javascript:
+    "// Write your JavaScript code here\nconsole.log('Hello, World!');",
+  python: "# Write your Python code here\nprint('Hello, World!')",
+  c: "#include <stdio.h>\n\nint main() {\n    printf('Hello, World!\\n');\n    return 0;\n}",
+  cpp: '#include <iostream>\n\nint main() {\n    std::cout << "Hello, World!" << std::endl;\n    return 0;\n}',
+  java: 'public class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}',
+  typescript:
+    "// Write your TypeScript code here\nconsole.log('Hello, World!');",
+};
+
+interface CollaborativeIDEProps {
+  userName: string;
+}
+
+export default function CollaborativeIDE({ userName }: any) {
+  const [code, setCode] = useState(
+    defaultCodeTemplates[languageOptions[0].value]
+  );
+  const [customInput, setCustomInput] = useState("");
+  const [outputDetails, setOutputDetails] = useState<any>(null);
+  const [theme, setTheme] = useState<Theme>({
+    value: "oceanic-next",
+    label: "Oceanic Next",
+  });
+  const [language, setLanguage] = useState(languageOptions[0]);
+  const [fontSize, setFontSize] = useState(18);
+  const [isLoading, setIsLoading] = useState(false);
+  const [remoteCursorPosition, setRemoteCursorPosition] = useState<{
+    lineNumber: number;
+    column: number;
+  } | null>(null);
+  const [roomId, setRoomId] = useState("");
+  const [name, setName] = useState("");
+  const [peers, setPeers] = useState<{ [key: string]: PeerConnection }>({});
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
+  const [isJoined, setIsJoined] = useState(false);
+  const [myStream, setMyStream] = useState<MediaStream | null>(null);
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [mediaError, setMediaError] = useState<string>("");
+  const [streamReady, setStreamReady] = useState(false);
+  const socketRef = useRef<Socket>();
+  const userVideoRef = useRef<HTMLVideoElement>(null);
+  const peersRef = useRef<{ [key: string]: PeerConnection }>({});
+  const streamRef = useRef<MediaStream>();
+  const [meetlinkcopied, setMeetLinkCopied] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [isGenieModalOpen, setIsGenieModalOpen] = useState(false);
+
+  const setupVideoStream = async (
+    stream: MediaStream,
+    videoElement: HTMLVideoElement | null
+  ) => {
+    try {
+      if (!videoElement) {
+        throw new Error("Video element not found");
+      }
+      // Clear any existing stream
+      if (videoElement.srcObject) {
+        const oldStream = videoElement.srcObject as MediaStream;
+        oldStream.getTracks().forEach((track) => track.stop());
+      }
+      videoElement.srcObject = null;
+      videoElement.srcObject = stream;
+      // Ensure video tracks are enabled
+      stream.getVideoTracks().forEach((track) => {
+        track.enabled = isVideoEnabled;
+      });
+      // Ensure audio tracks are enabled
+      stream.getAudioTracks().forEach((track) => {
+        track.enabled = isAudioEnabled;
+      });
+      await videoElement.play().catch((playError) => {
+        console.error("Error playing video:", playError);
+        throw new Error("Failed to play video stream");
+      });
+      setStreamReady(true);
+      console.log("Video stream setup successfully");
+    } catch (err) {
+      console.error("Error in setupVideoStream:", err);
+      setMediaError(
+        "Failed to setup video stream. Please refresh and try again."
+      );
+      setStreamReady(false);
+    }
+  };
+
+  const initializeMediaStream = async () => {
+    try {
+      setIsInitializing(true);
+      setMediaError("");
+      console.log("Requesting media permissions...");
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 320 },
+          height: { ideal: 240 },
+          frameRate: { ideal: 15, max: 20 },
+        },
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      });
+      console.log("Media stream obtained:", stream);
+      console.log("Video tracks:", stream.getVideoTracks());
+      console.log("Audio tracks:", stream.getAudioTracks());
+      // Verify we have both audio and video tracks
+      if (stream.getVideoTracks().length === 0) {
+        throw new Error("No video track available");
+      }
+      if (stream.getAudioTracks().length === 0) {
+        throw new Error("No audio track available");
+      }
+      streamRef.current = stream;
+      setMyStream(stream);
+      await setupVideoStream(stream, userVideoRef.current);
+      setMediaError("");
+    } catch (err) {
+      console.error("Error in initializeMediaStream:", err);
+      setMediaError(
+        err instanceof Error
+          ? `Media access error: ${err.message}`
+          : "Failed to access camera and microphone. Please ensure you have granted the necessary permissions."
+      );
+      setStreamReady(false);
+    } finally {
+      setIsInitializing(false);
+    }
+  };
+
+  // Initialize media on component mount
+  useEffect(() => {
+    initializeMediaStream();
+    // Initialize theme
+    defineTheme("oceanic-next").then(() => {
+      setTheme({ value: "oceanic-next", label: "Oceanic Next" });
+    });
+    // Cleanup function
+    return () => {
+      if (streamRef.current) {
+        console.log("Stopping all tracks...");
+        streamRef.current.getTracks().forEach((track) => {
+          track.stop();
+          console.log(`Stopped track: ${track.kind}`);
+        });
+      }
+    };
+  }, []);
+
+  // Monitor video element and stream changes
+  useEffect(() => {
+    if (myStream && userVideoRef.current) {
+      console.log("Updating video element with new stream");
+      setupVideoStream(myStream, userVideoRef.current);
+    }
+  }, [myStream]);
+
+  // Socket initialization moved to room creation/joining
+  const initializeSocket = () => {
+    socketRef.current = io(process.env.NEXT_PUBLIC_SOCKET_BACKEND_URL, {
+      transports: ["websocket"],
+      upgrade: false,
+    });
+    socketRef.current.on("receiving_returned_signal", ({ signal, id }) => {
+      if (peersRef.current[id]) {
+        peersRef.current[id].peer.signal(signal);
+      }
+    });
+    socketRef.current.on(
+      "user_joined_with_signal",
+      ({ signal, callerID, userName: peerUserName }) => {
+        if (streamRef.current) {
+          const peer = addPeer(signal, callerID, streamRef.current);
+          peersRef.current[callerID] = { peer, userName: peerUserName };
+          setPeers((users) => ({
+            ...users,
+            [callerID]: { peer, userName: peerUserName },
+          }));
+        }
+      }
+    );
+    socketRef.current.on("user_left", ({ userId }) => {
+      if (peersRef.current[userId]) {
+        peersRef.current[userId].peer.destroy();
+        const videoElement = peersRef.current[userId].videoElement;
+        if (videoElement && videoElement.parentNode) {
+          videoElement.parentNode.removeChild(videoElement);
+        }
+        const newPeers = { ...peersRef.current };
+        delete newPeers[userId];
+        peersRef.current = newPeers;
+        setPeers(newPeers);
+      }
+    });
+  };
+
+  const createRoom = async () => {
+    if (!streamRef.current) {
+      setMediaError(
+        "Please ensure camera and microphone access is granted before creating a room."
+      );
+      return;
+    }
+    if (!name) {
+      alert("Please enter your name");
+      return;
+    }
+    try {
+      initializeSocket();
+      // Ensure video stream is properly set up before creating room
+      socketRef.current?.emit("create_room", async (newRoomId: string) => {
+        setRoomId(newRoomId);
+        await joinRoomClicked(newRoomId);
+      });
+    } catch (err) {
+      console.error("Error creating room:", err);
+      setMediaError("Failed to create room. Please try again.");
+    }
+  };
+
+  const joinRoomClicked = async (roomIdToJoin: string) => {
+    if (!streamRef.current) {
+      setMediaError(
+        "Please ensure camera and microphone access is granted before joining a room."
+      );
+      return;
+    }
+    if (!name) {
+      alert("Please enter your name");
+      return;
+    }
+    try {
+      if (!socketRef.current) {
+        initializeSocket();
+      }
+
+      socketRef.current?.emit("join_room", {
+        roomId: roomIdToJoin,
+        userName,
+      });
+      socketRef.current?.on(
+        "user_joined",
+        ({ userId, userName: peerUserName }) => {
+          if (streamRef.current) {
+            const peer = createPeer(
+              userId,
+              socketRef.current?.id || "",
+              streamRef.current
+            );
+            peersRef.current[userId] = { peer, userName: peerUserName };
+            setPeers((currentPeers) => ({
+              ...currentPeers,
+              [userId]: { peer, userName: peerUserName },
+            }));
+          }
+        }
+      );
+      socketRef.current?.on(
+        "receive_code_change",
+        ({ code, cursorPosition }) => {
+          setCode(code);
+          setRemoteCursorPosition(cursorPosition);
+        }
+      );
+      setIsJoined(true);
+      setRoomId(roomIdToJoin);
+      await initializeMediaStream();
+    } catch (err) {
+      console.error("Error joining room:", err);
+      setMediaError("Failed to join room. Please try again.");
+    }
+  };
+
+  const createPeer = (
+    userToSignal: string,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: true,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("sending_signal", {
+        userToSignal,
+        callerID,
+        signal,
+      });
+    });
+    // Listen for stream events to add video of other peers
+    peer.on("stream", (remoteStream) => {
+      // Function to attach the remote stream to a video element
+      addVideoStream(remoteStream, userToSignal);
+    });
+    return peer;
+  };
+
+  const addPeer = (
+    incomingSignal: Peer.SignalData,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: false,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("returning_signal", { signal, callerID });
+    });
+    peer.on("stream", (remoteStream) => {
+      addVideoStream(remoteStream, callerID);
+    });
+    peer.signal(incomingSignal);
+    return peer;
+  };
+
+  const addVideoStream = (stream: any, userId: any) => {
+    const videoElement = document.createElement("video");
+    videoElement.srcObject = stream;
+    videoElement.autoplay = true;
+    videoElement.playsInline = true;
+    videoElement.classList.add(
+      "peer-video",
+      "rounded-lg",
+      // "aspect-video",
+      "bg-gray-800",
+      "overflow-hidden",
+      // "scroll-container",
+      "w-full"
+      // "object-cover"
+    );
+    const videoContainer = document.getElementById("video-container");
+    if (videoContainer) {
+      videoContainer.appendChild(videoElement);
+    }
+    // Store the reference if needed for cleanup later
+    peersRef.current[userId].videoElement = videoElement;
+  };
+
+  // Code Editor Functions
+  const handleThemeChange = (
+    selectedOption: { label: string; value: string } | null
+  ) => {
+    if (selectedOption) {
+      if (["light", "vs-dark"].includes(selectedOption.value)) {
+        setTheme(selectedOption);
+      } else {
+        defineTheme(selectedOption.value).then(() => setTheme(selectedOption));
+      }
+    }
+  };
+
+  const handleLanguageChange = (option: any) => {
+    setLanguage(option);
+    setCode(defaultCodeTemplates[option.value] || "// Write your code here");
+    setOutputDetails(null);
+  };
+
+  const onCodeChange = (action: string, newCode: string) => {
+    setCode(newCode);
+    socketRef.current?.emit("code_change", {
+      roomId,
+      code: newCode,
+      cursorPosition: remoteCursorPosition,
+    });
+  };
+
+  const executeCode = async () => {
+    setIsLoading(true);
+    const startTime = Date.now();
+    try {
+      const response = await axios.post(
+        "https://emkc.org/api/v2/piston/execute",
+        {
+          language: language.value,
+          version: "*",
+          files: [{ name: "code", content: code }],
+          stdin: customInput,
+        }
+      );
+      const endTime = Date.now();
+      const compilationTime = ((endTime - startTime) / 1000).toFixed(2);
+      const runData = response.data.run;
+      const outputData = {
+        stdout: runData.stdout,
+        stderr: runData.stderr,
+        status: runData.stderr ? "Error" : "Compilation Successful",
+        time: compilationTime,
+        memory: "N/A",
+      };
+      setOutputDetails(outputData);
+    } catch (error) {
+      console.error("Error executing code:", error);
+      setOutputDetails({
+        stdout: "",
+        stderr: "Execution failed",
+        status: "Failed",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Video Controls
+  const toggleVideo = () => {
+    if (streamRef.current) {
+      streamRef.current.getVideoTracks().forEach((track) => {
+        track.enabled = !isVideoEnabled;
+      });
+      setIsVideoEnabled(!isVideoEnabled);
+      socketRef.current?.emit("toggle_video", {
+        roomId,
+        enabled: !isVideoEnabled,
+      });
+    }
+  };
+
+  const toggleAudio = () => {
+    if (streamRef.current) {
+      streamRef.current.getAudioTracks().forEach((track) => {
+        track.enabled = !isAudioEnabled;
+      });
+      setIsAudioEnabled(!isAudioEnabled);
+      socketRef.current?.emit("toggle_audio", {
+        roomId,
+        enabled: !isAudioEnabled,
+      });
+    }
+  };
+
+  const leaveRoom = () => {
+    Object.values(peersRef.current).forEach(({ peer, videoElement }) => {
+      peer.destroy();
+      if (videoElement && videoElement.parentNode) {
+        videoElement.parentNode.removeChild(videoElement);
+      }
+    });
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+    }
+    socketRef.current?.disconnect();
+    setIsJoined(false);
+    setPeers({});
+    setRoomId("");
+    setMyStream(null);
+    setMediaError("");
+    window.location.reload();
+  };
+
+  const copyToClipboard = (
+    text: string,
+    setCopied: React.Dispatch<React.SetStateAction<boolean>>
+  ) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2500);
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err);
+      });
+  };
+
+  const copyMeetLink = (
+    text: string,
+    setMeetLinkCopied: React.Dispatch<React.SetStateAction<boolean>>
+  ) => {
+    navigator.clipboard
+      .writeText(`${process.env.NEXT_PUBLIC_FRONTEND_URL}/combined/` + text)
+      .then(() => {
+        setMeetLinkCopied(true);
+        setTimeout(() => setMeetLinkCopied(false), 2500);
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err);
+      });
+  };
+
+  const toggleGenieModal = () => {
+    setIsGenieModalOpen(!isGenieModalOpen);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900">
+      {isInitializing ? (
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-white">
+            Initializing camera and microphone...
+          </div>
+        </div>
+      ) : !isJoined ? (
+        <div className="flex flex-col items-center justify-center min-h-screen gap-4 p-4">
+          {mediaError && (
+            <div className="bg-red-500 text-white p-4 rounded-lg mb-4">
+              {mediaError}
+              <button
+                onClick={initializeMediaStream}
+                className="ml-4 bg-white text-red-500 px-3 py-1 rounded hover:bg-gray-100"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+          <div className="relative w-64 aspect-video bg-gray-800 rounded-lg overflow-hidden mb-4">
+            <video
+              ref={userVideoRef}
+              autoPlay
+              playsInline
+              muted
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+              Preview
+            </div>
+            {!streamReady && !mediaError && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
+                <div className="text-white text-center">Loading video...</div>
+              </div>
+            )}
+          </div>
+          <div className="space-y-4 w-[90vw] lg:w-fit md:w-fit">
+            <div className="flex flex-col gap-2">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Enter your name"
+                className="border w-full p-2 rounded-lg"
+              />
+              <button
+                onClick={createRoom}
+                disabled={!streamReady}
+                className="w-full bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Create New Room
+              </button>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-2">
+              <input
+                type="text"
+                value={roomId}
+                onChange={(e) => setRoomId(e.target.value)}
+                placeholder="Enter Room ID"
+                className="border p-2 rounded-lg"
+              />
+              <button
+                onClick={() => joinRoomClicked(roomId)}
+                disabled={!streamReady}
+                className="bg-green-500 text-white w-full px-6 py-2 rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Join Room
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="container mx-auto p-4">
+          {socketRef.current && (
+            <ChatModal socket={socketRef.current} userName={name} />
+          )}
+          {/* Top bar with room info and controls */}
+          <div className="mb-4 lg:flex justify-between items-center">
+            <div className="flex justify-between items-center mr-2 space-x-2 text-white bg-gray-800 px-4 py-2 rounded-lg shadow-lg">
+              <div className="flex gap-2">
+                <span className="font-sm lg:font-medium">Room ID:</span>
+                <span className="text-blue-400 hidden lg:block font-semibold">
+                  {roomId}
+                </span>
+                <span className="text-blue-400 block lg:hidden font-semibold">
+                  {roomId.slice(0, 4)}...
+                </span>
+              </div>
+              <div className="flex gap-2">
+                <span
+                  onClick={() => copyToClipboard(roomId, setCopied)}
+                  className={`ml-2 p-2 rounded-full cursor-pointer transition ${
+                    copied ? "bg-green-500" : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                  title={copied ? "Copied!" : "Copy Room ID"}
+                >
+                  {copied ? (
+                    <FaCheck className="text-white" />
+                  ) : (
+                    <FaClipboard className="text-white" />
+                  )}
+                </span>
+                <span
+                  onClick={() => copyMeetLink(roomId, setMeetLinkCopied)}
+                  className={`ml-2 p-2 rounded-full cursor-pointer transition ${
+                    meetlinkcopied
+                      ? "bg-green-500"
+                      : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                  title={meetlinkcopied ? "Copied!" : "Copy Meet Link"}
+                >
+                  {meetlinkcopied ? (
+                    <FaCheck className="text-white" />
+                  ) : (
+                    <FaLink className="text-white" />
+                  )}
+                </span>
+              </div>
+            </div>
+
+            <div className="hidden lg:flex gap-2">
+              <button
+                onClick={toggleVideo}
+                className={`px-4 py-2 rounded-lg ${
+                  isVideoEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isVideoEnabled ? "Turn Off Video" : "Turn On Video"}
+              </button>
+              <button
+                onClick={toggleAudio}
+                className={`px-4 py-2 rounded-lg ${
+                  isAudioEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isAudioEnabled ? "Turn Off Audio" : "Turn On Audio"}
+              </button>
+              <button
+                onClick={leaveRoom}
+                className="px-4 py-2 rounded-lg bg-red-500 text-white"
+              >
+                Leave Room
+              </button>
+              <button
+                onClick={downloadCodeAsFile.bind(null, code, language.value)}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                Download File
+              </button>
+              <button
+                onClick={downloadCodeAsImage.bind(
+                  null,
+                  code,
+                  "codehive_snippet.png"
+                )}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                Download Snippet (PNG)
+              </button>
+            </div>
+            <div className="flex items-center justify-center mt-2 lg:hidden gap-2">
+              <button
+                onClick={toggleVideo}
+                className={`px-4 py-2 rounded-lg ${
+                  isVideoEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isVideoEnabled ? <FaVideoSlash /> : <FaVideo />}
+              </button>
+              <button
+                onClick={toggleAudio}
+                className={`px-4 py-2 rounded-lg ${
+                  isAudioEnabled ? "bg-blue-500" : "bg-red-500"
+                } text-white`}
+              >
+                {isAudioEnabled ? <FaMicrophoneSlash /> : <FaMicrophone />}
+              </button>
+              <button
+                onClick={leaveRoom}
+                className="px-4 py-2 rounded-lg bg-red-500 text-white"
+              >
+                <IoMdExit />
+              </button>
+              <button
+                onClick={downloadCodeAsFile.bind(null, code, language.value)}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                <MdFileDownload />
+              </button>
+              <button
+                onClick={downloadCodeAsImage.bind(
+                  null,
+                  code,
+                  "codehive_snippet.png"
+                )}
+                className="px-4 py-2 rounded-lg bg-blue-500 text-white"
+              >
+                <AiOutlineSnippets />
+              </button>
+            </div>
+          </div>
+          {/* Main content area */}
+          <div className="flex lg:flex-row flex-col gap-4">
+            {/* Left side - Videos */}
+            <div className="w-full lg:w-1/4 flex flex-col gap-2">
+              {/* Self video */}
+              <div className="relative w-full">
+                <div className="aspect-video bg-gray-800 rounded-lg overflow-hidden scroll-container">
+                  <video
+                    ref={userVideoRef}
+                    autoPlay
+                    muted
+                    playsInline
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+                    You
+                  </div>
+                </div>
+              </div>
+              {/* Container for peer videos */}
+              <div
+                id="video-container"
+                className="w-full lg:block lg:h-[80vh] lg:overflow-x-hidden scroll-container"
+              >
+                {Object.entries(peers).map(
+                  ([peerId, { peer, userName: peerUserName }]) => (
+                    <div key={peerId} className="lg:relative mt-4 lg:w-full">
+                      {/* <PeerVideo peer={peer} userName={peerUserName} /> */}
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+            {/* Right side - Code Editor */}
+            <div className="w-full lg:w-3/4 space-y-4">
+              <div className="flex justify-between items-center">
+                <div className="hidden lg:flex gap-4">
+                  <LanguageDropdown onSelectChange={handleLanguageChange} />
+                  <ThemeDropdown
+                    handleThemeChange={handleThemeChange}
+                    theme={theme}
+                  />
+                  <button
+                    onClick={toggleGenieModal}
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"
+                  >
+                    <RiRobot2Line />
+                    <span>Genie</span>
+                  </button>
+                </div>
+                {isGenieModalOpen && <GenieModal onClose={toggleGenieModal} code={code} />}
+                <div className="hidden lg:flex items-center gap-2">
+                  <label className="text-white">Font Size:</label>
+                  <input
+                    type="number"
+                    value={fontSize}
+                    onChange={(e) => setFontSize(Number(e.target.value))}
+                    className="w-12 px-2 py-1 rounded"
+                    min="10"
+                    max="40"
+                  />
+                </div>
+                <div className="flex w-full lg:hidden gap-4 flex-col items-center justify-center">
+                  <div className="flex w-full lg:hidden gap-4 themecenter">
+                    <LanguageDropdown onSelectChange={handleLanguageChange} />
+                    <ThemeDropdown
+                      handleThemeChange={handleThemeChange}
+                      theme={theme}
+                    />
+                    <div className="flex items-center lg:hidden gap-2">
+                      {/* <label className="text-white">Font Size:</label> */}
+                      <input
+                        type="number"
+                        value={fontSize}
+                        onChange={(e) => setFontSize(Number(e.target.value))}
+                        className="w-14 px-2 py-1 rounded"
+                        min="10"
+                        max="40"
+                      />
+                    </div>
+                  </div>
+                  <button
+                    onClick={toggleGenieModal}
+                    className="px-4 w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                  >
+                    Generate Code with Genie
+                  </button>
+                  {isGenieModalOpen && (
+                    <GenieModal onClose={toggleGenieModal} />
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col lg:grid lg:grid-cols-3 gap-4">
+                <div className="lg:col-span-2 lg:overflow-x-hidden lg:w-full w-full">
+                  <CodeEditor
+                    onCodeChange={onCodeChange}
+                    fontSize={fontSize}
+                    language={language.value}
+                    theme={theme.value}
+                    code={code}
+                    remoteCursorPosition={remoteCursorPosition}
+                    onCursorPositionChange={function (position: {
+                      lineNumber: number;
+                      column: number;
+                    }): void {
+                      throw new Error("Function not implemented.");
+                    }}
+                  />
+                </div>
+
+                <div className="flex justify-items-center flex-col gap-2 lg:col-span-1 lg:space-y-4">
+                  <button
+                    className="w-full lg:w-full lg:px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50"
+                    disabled={!code || isLoading}
+                    onClick={executeCode}
+                  >
+                    {isLoading ? "Running..." : "Run Code"}
+                  </button>
+                  <div className="flex justify-items-center">
+                    <OutputWindow outputDetails={outputDetails} />
+                  </div>
+                  <div className="flex justify-items-center">
+                    <CustomInput
+                      customInput={customInput}
+                      setCustomInput={setCustomInput}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/editor/CodeEditor.tsx b/src/app/editor/CodeEditor.tsx
new file mode 100644
index 0000000..b5a6266
--- /dev/null
+++ b/src/app/editor/CodeEditor.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from "react";
+import Editor, { useMonaco } from "@monaco-editor/react";
+
+interface CodeEditorProps {
+  code: string;
+  onCodeChange: (action: string, newCode: string) => void;
+  onCursorPositionChange: (position: {
+    lineNumber: number;
+    column: number;
+  }) => void;
+  fontSize: number;
+  language: string;
+  theme: string;
+  remoteCursorPosition: { lineNumber: number; column: number } | null;
+}
+
+export default function CodeEditor({
+  code,
+  onCodeChange,
+  onCursorPositionChange,
+  fontSize,
+  language,
+  theme,
+  remoteCursorPosition,
+}: any) {
+  const editorRef = useRef<any>(null);
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    if (monaco && editorRef.current) {
+      const editor = editorRef.current;
+
+      // Listen to changes in cursor position
+      editor.onDidChangeCursorPosition((event: any) => {
+        const position = event.position;
+        onCursorPositionChange(position); // Emit cursor position change
+      });
+
+      // Add the remote cursor decoration if remote cursor position exists
+      if (remoteCursorPosition) {
+        const decoration = {
+          range: new monaco.Range(
+            remoteCursorPosition.lineNumber,
+            remoteCursorPosition.column,
+            remoteCursorPosition.lineNumber,
+            remoteCursorPosition.column
+          ),
+          options: {
+            className: "remote-cursor",
+            stickiness:
+              monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+          },
+        };
+        const decorations = editor.deltaDecorations([], [decoration]);
+
+        // Cleanup previous decorations
+        return () => editor.deltaDecorations(decorations, []);
+      }
+    }
+  }, [monaco, onCursorPositionChange, remoteCursorPosition]);
+
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+  };
+
+  const handleEditorChange = (value: string | undefined) => {
+    onCodeChange("code", value || "");
+  };
+
+  return (
+    <div className="code-editor-container overflow-x-hidden lg:overflow-x-hidden">
+      <Editor
+        height="90vh"
+        width="100vh"
+        language={language}
+        value={code}
+        theme={theme}
+        onChange={handleEditorChange}
+        options={{
+          fontSize,
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+        }}
+        onMount={handleEditorDidMount}
+      />
+      <style jsx global>{`
+        .remote-cursor {
+          border-left: 2px solid red;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/src/app/editor/CustomInput.tsx b/src/app/editor/CustomInput.tsx
new file mode 100644
index 0000000..e3e111a
--- /dev/null
+++ b/src/app/editor/CustomInput.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+interface CustomInputProps {
+  customInput: string;
+  setCustomInput: (value: string) => void;
+}
+
+export default function CustomInput({ customInput, setCustomInput }: any) {
+  return (
+    <div className="flex flex-col w-full">
+      {/* <h1 className="text-xl lg:text-3xl text-white font-bold mb-4">
+        Custom Input
+      </h1> */}
+      <textarea
+        rows={5}
+        value={customInput}
+        onChange={(e) => setCustomInput(e.target.value)}
+        placeholder="Set custom input"
+        className="focus:outline-none lg:w-full border-2 text-black border-black rounded-md px-4 py-2 bg-gray-500 mt-2 placeholder-gray-300"
+      ></textarea>
+    </div>
+  );
+}
diff --git a/src/app/editor/LanguageDropdown.tsx b/src/app/editor/LanguageDropdown.tsx
new file mode 100644
index 0000000..4014ddc
--- /dev/null
+++ b/src/app/editor/LanguageDropdown.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Select from "react-select";
+import { customStyles } from "@/constants/customStyles";
+import { languageOptions } from "@/constants/languageOptions";
+
+interface LanguageDropdownProps {
+  onSelectChange: (selectedOption: any) => void;
+}
+
+const modifiedCustomStyles = {
+  ...customStyles,
+  control: (provided: any) => ({
+    ...provided,
+    // minWidth: '200px', // Set your desired minimum width here
+  }),
+};
+
+export default function LanguageDropdown({ onSelectChange }: any) {
+  return (
+    <Select
+      className="lg:w-[200px]"
+      placeholder="Select language"
+      options={languageOptions}
+      defaultValue={languageOptions[0]}
+      styles={modifiedCustomStyles}
+      onChange={(selectedOption: any) => onSelectChange(selectedOption)}
+    />
+  );
+};
diff --git a/src/app/editor/OutputWindow.tsx b/src/app/editor/OutputWindow.tsx
new file mode 100644
index 0000000..1911900
--- /dev/null
+++ b/src/app/editor/OutputWindow.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+interface OutputDetails {
+  stdout?: string;
+  stderr?: string;
+  status?: string;
+  memory?: string;
+  time?: string;
+}
+
+export default function OutputWindow({ outputDetails }: any) {
+  return (
+    <div className="lg:w-full w-[90vw] p-6 bg-[#1e293b] rounded-lg text-white">
+      <h1 className="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Output
+      </h1>
+      <div className="w-full h-56 bg-[#0f172a] rounded-lg overflow-y-auto p-4 mb-4">
+        <pre className="font-semibold text-lg whitespace-pre-wrap">
+          <span className="text-green-400">{outputDetails?.stdout || ""}</span>
+          <span className="text-red-500">{outputDetails?.stderr || ""}</span>
+        </pre>
+      </div>
+      <div className="bg-[#0f172a] rounded-lg p-4">
+        <p className="text-md my-2">
+          Status:
+          <span
+            className={`font-medium ml-1 px-2 py-1 rounded-md ${
+              outputDetails?.status === "Error" ? "bg-red-500" : "bg-green-500"
+            } text-gray-900`}
+          >
+            {outputDetails?.status || "N/A"}
+          </span>
+        </p>
+        <p className="text-md my-2">
+          Memory:{" "}
+          <span className="font-medium px-2 py-1 bg-blue-500 text-gray-900 rounded-md">
+            {outputDetails?.memory || "N/A"}
+          </span>
+        </p>
+        <p className="text-md my-2">
+          Time:{" "}
+          <span className="font-medium px-2 py-1 bg-yellow-500 text-gray-900 rounded-md">
+            {outputDetails?.time || "N/A"}s
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/editor/ThemeDropdown.tsx b/src/app/editor/ThemeDropdown.tsx
new file mode 100644
index 0000000..0fe04ba
--- /dev/null
+++ b/src/app/editor/ThemeDropdown.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import Select from "react-select";
+import monacoThemes from "monaco-themes/themes/themelist.json";
+import { customStyles } from "@/constants/customStyles";
+import { SingleValue } from "react-select";
+
+interface ThemeDropdownProps {
+  handleThemeChange: (selectedOption: SingleValue<{ label: string; value: string }>) => void;
+  theme: { label: string; value: string };
+}
+
+// Modify customStyles to include a minimum width
+const modifiedCustomStyles = {
+  ...customStyles,
+  control: (provided: any) => ({
+    ...provided,
+    // minWidth: '170px', // Set your desired minimum width here
+  }),
+};
+
+export default function ThemeDropdown({ handleThemeChange, theme }: any){
+  return (
+    <Select
+      placeholder={`Select Theme`}
+      options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({
+        label: themeName,
+        value: themeId,
+        key: themeId,
+      }))}
+      value={theme}
+      styles={modifiedCustomStyles}
+      className="lg:w-[200px]"
+      onChange={handleThemeChange}
+    />
+  );
+};
+
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
new file mode 100644
index 0000000..17bb2d1
--- /dev/null
+++ b/src/app/editor/page.tsx
@@ -0,0 +1,225 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import CodeEditor from "./CodeEditor";
+import { languageOptions } from "@/constants/languageOptions";
+import { defineTheme } from "@/lib/defineTheme";
+import LanguageDropdown from "./LanguageDropdown";
+import ThemeDropdown from "./ThemeDropdown";
+import OutputWindow from "./OutputWindow";
+import CustomInput from "./CustomInput";
+import axios from "axios";
+import io from "socket.io-client";
+import { v4 as uuidv4 } from "uuid";
+
+const socket = io(process.env.NEXT_PUBLIC_SOCKET_BACKEND_URL);
+
+interface Theme {
+  value: string;
+  label: string;
+}
+
+export interface LandingProps {
+  code?: string;
+}
+
+const defaultCodeTemplates: Record<string, string> = {
+  javascript: "// Write your JavaScript code here\nconsole.log('Hello, World!');",
+  python: "# Write your Python code here\nprint('Hello, World!')",
+  c: "#include <stdio.h>\n\nint main() {\n    printf('Hello, World!\\n');\n    return 0;\n}",
+  cpp: "#include <iostream>\n\nint main() {\n    std::cout << \"Hello, World!\" << std::endl;\n    return 0;\n}",
+  java: "public class Main {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}",
+  typescript: "// Write your TypeScript code here\nconsole.log('Hello, World!');",
+};
+
+export default function Landing(props:any){
+  const [roomId, setRoomId] = useState<string>("");
+  const [code, setCode] = useState<string>(
+    props.code || defaultCodeTemplates[languageOptions[0].value] || "// Write your code here"
+  );
+  const [customInput, setCustomInput] = useState<string>("");
+  const [outputDetails, setOutputDetails] = useState<any>(null);
+  const [theme, setTheme] = useState<Theme>({ value: "oceanic-next", label: "Oceanic Next" });
+  const [language, setLanguage] = useState(languageOptions[0]);
+  const [fontSize, setFontSize] = useState<number>(18);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [remoteCursorPosition, setRemoteCursorPosition] = useState<{ lineNumber: number; column: number } | null>(null);
+
+  useEffect(() => {
+    defineTheme("oceanic-next").then(() => {
+      setTheme({ value: "oceanic-next", label: "Oceanic Next" });
+    });
+
+    // Listen for incoming code and cursor changes
+    socket.on("receive_code_change", ({ code, cursorPosition }) => {
+      setCode(code);
+      setRemoteCursorPosition(cursorPosition); // Update remote cursor position
+    });
+
+    return () => {
+      socket.off("receive_code_change");
+    };
+  }, []);
+
+  const handleThemeChange = (th: any) => {
+    if (["light", "vs-dark"].includes(th.value)) {
+      setTheme(th);
+    } else {
+      defineTheme(th.value).then(() => setTheme(th));
+    }
+  };
+
+  const handleLanguageChange = (option: any) => {
+    setLanguage(option);
+    setCode(defaultCodeTemplates[option.value] || "// Write your code here");
+    setOutputDetails(null);
+  };
+
+  const onCodeChange = (action: string, newCode: string) => {
+    setCode(newCode);
+    socket.emit("code_change", {
+      roomId,
+      code: newCode,
+      cursorPosition: remoteCursorPosition, // Send cursor position along with code changes
+    });
+  };
+
+  const onCursorPositionChange = (position: any) => {
+    socket.emit("cursor_position_change", {
+      roomId,
+      cursorPosition: position,
+    });
+  };
+
+  const createRoom = () => {
+    const newRoomId = uuidv4();
+    setRoomId(newRoomId);
+    socket.emit("join_room", newRoomId);
+    console.log(`Created and joined room: ${newRoomId}`);
+  };
+
+  const joinRoom = () => {
+    if (roomId) {
+      socket.emit("join_room", roomId);
+      console.log(`Joined room: ${roomId}`);
+    }
+  };
+
+  const executeCode = async () => {
+    setIsLoading(true);
+    const startTime = Date.now();
+
+    try {
+      const response = await axios.post("https://emkc.org/api/v2/piston/execute", {
+        language: language.value,
+        version: "*",
+        files: [{ name: "code", content: code }],
+        stdin: customInput,
+      });
+
+      const endTime = Date.now();
+      const compilationTime = ((endTime - startTime) / 1000).toFixed(2);
+
+      const runData = response.data.run;
+      const outputData = {
+        stdout: runData.stdout,
+        stderr: runData.stderr,
+        status: runData.stderr ? "Error" : "Compilation Successful",
+        time: compilationTime,
+        memory: "N/A",
+      };
+
+      setOutputDetails(outputData);
+    } catch (error) {
+      console.error("Error executing code:", error);
+      setOutputDetails({ stdout: "", stderr: "Execution failed", status: "Failed" });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-600">
+      <div className="flex justify-center p-4 space-x-4">
+        <input
+          type="text"
+          placeholder="Enter Room ID"
+          value={roomId}
+          onChange={(e) => setRoomId(e.target.value)}
+          className="border text-black rounded-md p-2"
+        />
+        <button
+          onClick={createRoom}
+          className="bg-green-600 text-black rounded-md px-4 py-2 hover:bg-green-700"
+        >
+          Create Room
+        </button>
+        <button
+          onClick={joinRoom}
+          className="bg-blue-600 text-black rounded-md px-4 py-2 hover:bg-blue-700"
+        >
+          Join Room
+        </button>
+      </div>
+
+      <div className="flex flex-row w-full justify-between bg-gray-600 md:justify-start">
+        <div className="md:px-4 py-2 px-2 w-5/12 md:w-auto">
+          <LanguageDropdown onSelectChange={handleLanguageChange} />
+        </div>
+        <div className="md:px-4 py-2 px-2 w-5/12 md:w-auto">
+          <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
+        </div>
+        <div className="flex justify-end mt-2">
+          <div className="flex flex-row items-center border-2 border-black rounded bg-white shadow-md">
+            <label className="font-thin ml-2 mr-2">Font:</label>
+            <input
+              type="number"
+              value={fontSize}
+              onChange={(e) => setFontSize(Number(e.target.value))}
+              className="border border-black mr-1 rounded px-2 custom-input"
+              min="10"
+              max="40"
+              style={{
+                color: "#000",
+                fontSize: "0.8rem",
+                lineHeight: "1.75rem",
+                width: "100%",
+                background: "#fff",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex bg-gray-600 flex-col md:flex-row w-full justify-start px-4 mt-4">
+        <div className="md:flex flex-col w-full md:w-3/4 md:h-full h-96 justify-start items-end">
+          <CodeEditor
+            onCodeChange={onCodeChange}
+            onCursorPositionChange={onCursorPositionChange}
+            fontSize={fontSize}
+            language={language.value}
+            theme={theme.value}
+            code={code}
+            remoteCursorPosition={remoteCursorPosition}
+          />
+        </div>
+        <div className="w-full md:w-4/12 p-4 ml-auto">
+          <div className="flex w-full justify-between">
+            <button
+              className={`mb-4 bg-black text-white border-2 border-black z-10 rounded-md px-4 py-2 hover:bg-white hover:text-black transition duration-200 ease-in-out transform hover:scale-105 shadow-md`}
+              disabled={!code || isLoading}
+              onClick={executeCode}
+            >
+              {isLoading ? "Compiling..." : "Compile"}
+            </button>
+          </div>
+          <OutputWindow outputDetails={outputDetails} />
+          <div className="flex flex-col items-end">
+            <CustomInput customInput={customInput} setCustomInput={setCustomInput} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..a49335c 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/fonts/SpaceGrotesk-Bold.ttf b/src/app/fonts/SpaceGrotesk-Bold.ttf
new file mode 100644
index 0000000..0408641
Binary files /dev/null and b/src/app/fonts/SpaceGrotesk-Bold.ttf differ
diff --git a/src/app/fonts/SpaceGrotesk-Light.ttf b/src/app/fonts/SpaceGrotesk-Light.ttf
new file mode 100644
index 0000000..d41bccc
Binary files /dev/null and b/src/app/fonts/SpaceGrotesk-Light.ttf differ
diff --git a/src/app/fonts/SpaceGrotesk-Medium.ttf b/src/app/fonts/SpaceGrotesk-Medium.ttf
new file mode 100644
index 0000000..7d44b66
Binary files /dev/null and b/src/app/fonts/SpaceGrotesk-Medium.ttf differ
diff --git a/src/app/fonts/SpaceGrotesk-Regular.ttf b/src/app/fonts/SpaceGrotesk-Regular.ttf
new file mode 100644
index 0000000..981bcf5
Binary files /dev/null and b/src/app/fonts/SpaceGrotesk-Regular.ttf differ
diff --git a/src/app/fonts/SpaceGrotesk-SemiBold.ttf b/src/app/fonts/SpaceGrotesk-SemiBold.ttf
new file mode 100644
index 0000000..e7e02e5
Binary files /dev/null and b/src/app/fonts/SpaceGrotesk-SemiBold.ttf differ
diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c9..b2a5b7a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Space Grotesk Bold";
+  src: url("./fonts/SpaceGrotesk-Bold.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Light";
+  src: url("./fonts/SpaceGrotesk-Light.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Medium";
+  src: url("./fonts/SpaceGrotesk-Medium.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Regular";
+  src: url("./fonts/SpaceGrotesk-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Semibold";
+  src: url("./fonts/SpaceGrotesk-SemiBold.ttf");
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dc76b10..adf78fa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import './globals.css';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Video Calling App',
-  description: 'Simple video calling application using WebRTC',
+  title: 'Codehive',
+  description: 'Collaborate. Code. Communicate.',
 };
 
 export default function RootLayout({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e3b9709..79fbea2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,32 @@
 "use client";
+import About from "@/components/About";
+import Contact from "@/components/Contact";
+import Hero from "@/components/Hero";
+import Aboutus from "@/components/Aboutus";
+import FeaturesSection from "@/components/FeaturesSection";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 
 export default function Home() {
   return (
-    <main>
-      Hello
+    <main className="bg-black p-1">
+      <Navbar />
+      <Hero />
+      <div id="features" className="flex flex-col gap-4 items-center justify-center mt-10 md:mt-32 lg:mt-40">
+        <p className="font-spacegrotesksemibold text-center text-white text-3xl md:text-4xl lg:text-5xl">
+          Features of Codehive
+        </p>
+        <FeaturesSection />
+      </div>
+      <About />
+      <div id="developers" className="flex flex-col mt-10 md:mt-15 lg:mt-10 items-center justify-center">
+        <p className="font-spacegrotesksemibold text-center text-white text-3xl mb-10 md:text-4xl lg:text-5xl">
+          Meet the Developers of Codehive
+        </p>
+        <Aboutus />
+      </div>
+      <Contact />
+      <Footer />
     </main>
   );
 }
diff --git a/src/app/temp/page.tsx b/src/app/temp/page.tsx
new file mode 100644
index 0000000..03fab1c
--- /dev/null
+++ b/src/app/temp/page.tsx
@@ -0,0 +1,355 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { Socket, io } from "socket.io-client";
+import Peer from "simple-peer";
+
+interface User {
+  userName: string;
+  videoEnabled: boolean;
+  audioEnabled: boolean;
+}
+
+interface PeerConnection {
+  peer: Peer.Instance;
+  userName: string;
+}
+
+interface VideoCallProps {
+  userName: string;
+}
+
+export default function VideoCall({ userName }:any){
+  const [roomId, setRoomId] = useState<string>("");
+  const [peers, setPeers] = useState<{ [key: string]: PeerConnection }>({});
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
+  const [isJoined, setIsJoined] = useState(false);
+  const [myStream, setMyStream] = useState<MediaStream | null>(null);
+
+  const socketRef = useRef<Socket>();
+  const userVideoRef = useRef<HTMLVideoElement>(null);
+  const peersRef = useRef<{ [key: string]: PeerConnection }>({});
+  const streamRef = useRef<MediaStream>();
+
+  // Initialize user's media stream
+  const initializeUserMedia = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 640 },
+          height: { ideal: 480 },
+          frameRate: { ideal: 20, max: 24 },
+        },
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+        },
+      });
+
+      streamRef.current = stream;
+      setMyStream(stream);
+
+      if (userVideoRef.current) {
+        userVideoRef.current.srcObject = stream;
+      }
+
+      return stream;
+    } catch (err) {
+      console.error("Error accessing media devices:", err);
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    socketRef.current = io(process.env.NEXT_PUBLIC_SOCKET_BACKEND_URL, {
+      transports: ["websocket"],
+      upgrade: false,
+    });
+
+    return () => {
+      socketRef.current?.disconnect();
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (myStream && userVideoRef.current) {
+      userVideoRef.current.srcObject = myStream;
+    }
+  }, [myStream]);
+
+  const createRoom = async () => {
+    const stream = await initializeUserMedia();
+    if (stream) {
+      socketRef.current?.emit("create_room", (newRoomId: string) => {
+        setRoomId(newRoomId);
+        joinRoom(newRoomId, stream);
+      });
+    }
+  };
+
+  const joinRoom = async (roomIdToJoin: string, stream?: MediaStream) => {
+    try {
+      const mediaStream = stream || (await initializeUserMedia());
+      if (!mediaStream) return;
+
+      socketRef.current?.emit("join_room", {
+        roomId: roomIdToJoin,
+        userName,
+      });
+
+      socketRef.current?.on("room_users", (users: { [key: string]: User }) => {
+        const peers: { [key: string]: PeerConnection } = {};
+
+        Object.entries(users).forEach(([userId, userData]) => {
+          if (userId !== socketRef.current?.id && mediaStream) {
+            const peer = createPeer(
+              userId,
+              socketRef.current?.id || "",
+              mediaStream
+            );
+            peers[userId] = { peer, userName: userData.userName };
+          }
+        });
+
+        peersRef.current = peers;
+        setPeers(peers);
+      });
+
+      socketRef.current?.on(
+        "user_joined_with_signal",
+        ({ signal, callerID, userName }) => {
+          const peer = addPeer(signal, callerID, mediaStream);
+          peersRef.current[callerID] = { peer, userName };
+          setPeers((prev) => ({
+            ...prev,
+            [callerID]: { peer, userName },
+          }));
+        }
+      );
+
+      socketRef.current?.on("receiving_returned_signal", ({ signal, id }) => {
+        peersRef.current[id].peer.signal(signal);
+      });
+
+      socketRef.current?.on("user_left", ({ userId }) => {
+        if (peersRef.current[userId]) {
+          peersRef.current[userId].peer.destroy();
+          const newPeers = { ...peersRef.current };
+          delete newPeers[userId];
+          peersRef.current = newPeers;
+          setPeers(newPeers);
+        }
+      });
+
+      setIsJoined(true);
+      setRoomId(roomIdToJoin);
+    } catch (err) {
+      console.error("Error joining room:", err);
+    }
+  };
+
+  const createPeer = (
+    userToSignal: string,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: true,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("sending_signal", {
+        userToSignal,
+        callerID,
+        signal,
+      });
+    });
+
+    return peer;
+  };
+
+  const addPeer = (
+    incomingSignal: Peer.SignalData,
+    callerID: string,
+    stream: MediaStream
+  ) => {
+    const peer = new Peer({
+      initiator: false,
+      trickle: false,
+      stream,
+      config: {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:global.stun.twilio.com:3478" },
+        ],
+      },
+    });
+
+    peer.on("signal", (signal) => {
+      socketRef.current?.emit("returning_signal", { signal, callerID });
+    });
+
+    peer.signal(incomingSignal);
+
+    return peer;
+  };
+
+  const toggleVideo = () => {
+    if (streamRef.current) {
+      streamRef.current.getVideoTracks().forEach((track) => {
+        track.enabled = !isVideoEnabled;
+      });
+      setIsVideoEnabled(!isVideoEnabled);
+      socketRef.current?.emit("toggle_video", {
+        roomId,
+        enabled: !isVideoEnabled,
+      });
+    }
+  };
+
+  const toggleAudio = () => {
+    if (streamRef.current) {
+      streamRef.current.getAudioTracks().forEach((track) => {
+        track.enabled = !isAudioEnabled;
+      });
+      setIsAudioEnabled(!isAudioEnabled);
+      socketRef.current?.emit("toggle_audio", {
+        roomId,
+        enabled: !isAudioEnabled,
+      });
+    }
+  };
+
+  const leaveRoom = () => {
+    Object.values(peersRef.current).forEach(({ peer }) => peer.destroy());
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+    }
+    socketRef.current?.disconnect();
+    setIsJoined(false);
+    setPeers({});
+    setRoomId("");
+    setMyStream(null);
+  };
+
+  return (
+    <div className="p-4 max-w-7xl mx-auto">
+      {!isJoined ? (
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={createRoom}
+            className="bg-blue-500 text-white px-4 py-2 rounded"
+          >
+            Create Room
+          </button>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={roomId}
+              onChange={(e) => setRoomId(e.target.value)}
+              placeholder="Enter Room ID"
+              className="border p-2 rounded"
+            />
+            <button
+              onClick={() => joinRoom(roomId)}
+              className="bg-green-500 text-white px-4 py-2 rounded"
+            >
+              Join Room
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          <div className="text-lg font-semibold">Room ID: {roomId}</div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="relative w-full h-[360px] bg-gray-900 rounded-lg overflow-hidden">
+              <video
+                ref={userVideoRef}
+                autoPlay
+                muted
+                playsInline
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+                You ({userName})
+              </div>
+            </div>
+            {Object.entries(peers).map(
+              ([peerId, { peer, userName: peerUserName }]) => (
+                <PeerVideo key={peerId} peer={peer} userName={peerUserName} />
+              )
+            )}
+          </div>
+          <div className="flex gap-4 justify-center mt-4">
+            <button
+              onClick={toggleVideo}
+              className={`px-6 py-2 rounded-full ${
+                isVideoEnabled ? "bg-blue-500" : "bg-red-500"
+              } text-white transition-colors duration-200`}
+            >
+              {isVideoEnabled ? "Turn Off Video" : "Turn On Video"}
+            </button>
+            <button
+              onClick={toggleAudio}
+              className={`px-6 py-2 rounded-full ${
+                isAudioEnabled ? "bg-blue-500" : "bg-red-500"
+              } text-white transition-colors duration-200`}
+            >
+              {isAudioEnabled ? "Turn Off Audio" : "Turn On Audio"}
+            </button>
+            <button
+              onClick={leaveRoom}
+              className="px-6 py-2 rounded-full bg-red-500 text-white transition-colors duration-200"
+            >
+              Leave Room
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface PeerVideoProps {
+  peer: Peer.Instance;
+  userName: string;
+}
+
+const PeerVideo: React.FC<PeerVideoProps> = ({ peer, userName }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    peer.on("stream", (stream) => {
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+    });
+  }, [peer]);
+
+  return (
+    <div className="relative w-full h-[360px] bg-gray-900 rounded-lg overflow-hidden">
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        className="w-full h-full object-cover"
+      />
+      <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 px-2 py-1 rounded text-white">
+        {userName}
+      </div>
+    </div>
+  );
+};
+
+
diff --git a/src/app/video/page.tsx b/src/app/video/page.tsx
index 8c58cc5..8d44249 100644
--- a/src/app/video/page.tsx
+++ b/src/app/video/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+
 import VideoCall from "@/components/VideoCall";
 
 export default function page() {
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..81c76fc
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,79 @@
+import Link from "next/link";
+import aboutImg from "../../public/rb_2035.png";
+import Image from "next/image";
+export default function About() {
+  return (
+    <section id="about" className="py-24 relative xl:mr-0 lg:mr-5 mr-0">
+      <div className="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
+        <div className="w-full justify-start items-center xl:gap-12 gap-10 grid lg:grid-cols-2 grid-cols-1">
+          {/* Content Section */}
+          <div className="w-full flex-col justify-center lg:items-start items-center gap-10 inline-flex">
+            <div className="w-full flex-col justify-center items-start gap-8 flex">
+              <div className="flex-col justify-start lg:items-start items-center gap-4 flex">
+                
+                <div className="w-full flex-col justify-start lg:items-start items-center gap-3 flex">
+                  <h2 className=" font-spacegrotesksemibold text-white text-3xl md:text-4xl lg:text-5xl leading-normal lg:text-start text-center">
+                    About Codehive
+                  </h2>
+                  <p className="text-gray-300 text-base font-normal leading-relaxed lg:text-start">
+                    At Codehive, our mission is to make coding a shared and 
+                    accessible experience for everyone. We envision a world where 
+                    developers, learners, and innovators connect seamlessly, breaking 
+                    barriers to creativity and productivity. 
+                  </p>
+                </div>
+              </div>
+              <div className="w-full flex-col justify-center items-start gap-6 flex">
+                <p className="text-gray-300 text-base font-normal leading-relaxed">
+                  As a team of passionate developers, we believe that innovation 
+                  thrives in collaboration. Our platform is designed to bring people 
+                  together, empowering them to code, communicate, and create in real-time. 
+                  Whether you're brainstorming with a team or learning with peers, 
+                  Codehive provides the tools to turn ideas into reality.
+                </p>
+                <p className="text-gray-300 text-base font-normal leading-relaxed">
+                  With every feature, we aim to bridge gaps in communication, enhance 
+                  productivity, and create a supportive environment for developers of all levels. 
+                  Codehive is not just about writing code—it's about writing stories 
+                  of growth, connection, and innovation.
+                </p>
+              </div>
+            </div>
+            <Link href="/combined">
+              <button className="sm:w-fit w-full group px-3.5 py-2 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out justify-center items-center flex">
+                <span className="px-1.5 text-white text-sm font-medium leading-6 group-hover:-translate-x-0.5 transition-all duration-700 ease-in-out">
+                  Try Now
+                </span>
+                <svg
+                  className="group-hover:translate-x-0.5 transition-all duration-700 ease-in-out"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                >
+                  <path
+                    d="M6.75265 4.49658L11.2528 8.99677L6.75 13.4996"
+                    stroke="#FFFFFF"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </Link>
+          </div>
+          {/* Image Section */}
+          <div className="w-full lg:justify-start justify-center items-start flex">
+           
+              <Image
+                className="sm:mt-5 sm:ml-5 w-full h-full rounded-3xl object-cover"
+                src={aboutImg}
+                alt="About Us illustration"
+              />
+            </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/AboutCard.tsx b/src/components/AboutCard.tsx
new file mode 100644
index 0000000..a2cf1e5
--- /dev/null
+++ b/src/components/AboutCard.tsx
@@ -0,0 +1,154 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+
+const MouseEnterContext = createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+>(undefined);
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) / 25;
+    const y = (e.clientY - top - height / 2) / 25;
+    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsMouseEntered(true);
+    if (!containerRef.current) return;
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    setIsMouseEntered(false);
+    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
+  };
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn(
+          "lg:py-20 md:py-10 py-2 flex items-center justify-center",
+          containerClassName
+        )}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "flex items-center justify-center relative transition-all duration-200 ease-linear",
+            className
+          )}
+          style={{
+            transformStyle: "preserve-3d",
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>
+  );
+};
+
+export const CardBody = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d]",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: React.ElementType;
+  children: React.ReactNode;
+  className?: string;
+  translateX?: number | string;
+  translateY?: number | string;
+  translateZ?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  rotateZ?: number | string;
+  [key: string]: any;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isMouseEntered] = useMouseEnter();
+
+  useEffect(() => {
+    handleAnimations();
+  }, [isMouseEntered]);
+
+  const handleAnimations = () => {
+    if (!ref.current) return;
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+    }
+  };
+
+  return (
+    <Tag
+      ref={ref}
+      className={cn("w-fit transition duration-200 ease-linear", className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext);
+  if (context === undefined) {
+    throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+  }
+  return context;
+};
diff --git a/src/components/Aboutus.tsx b/src/components/Aboutus.tsx
new file mode 100644
index 0000000..0a15f59
--- /dev/null
+++ b/src/components/Aboutus.tsx
@@ -0,0 +1,158 @@
+"use client";
+import Image from "next/image";
+import React from "react";
+import { CardBody, CardContainer, CardItem } from "./AboutCard";
+import img1 from "../../public/khageshimg.png";
+import img2 from "../../public/abhayimg.png";
+import Link from "next/link";
+
+const Aboutus = () => {
+  return (
+    <div className="flex flex-col lg:flex-row md:flex-col lg:gap-8 md:gap-8 gap-2 items-center justify-center">
+      <CardContainer className="inter-var">
+        <CardBody className="bg-black flex items-center justify-center flex-col relative group/card border-white/[0.2] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
+          <CardItem translateZ="50" className="text-xl font-spacegrotesksemibold text-white">
+            Khagesh Sharma
+          </CardItem>
+          <CardItem
+            as="p"
+            translateZ="60"
+            className="text-white font-spacegroteskregular text-md text-center max-w-sm mt-2"
+          >
+            A Full-Stack Web Developer and DevOps Engineer
+          </CardItem>
+          <CardItem translateZ="100" className="w-full mt-4">
+            <Image
+              src={img1}
+              height="1000"
+              width="1000"
+              className="h-[400px] w-full object-cover rounded-xl group-hover/card:shadow-xl"
+              alt="thumbnail"
+            />
+          </CardItem>
+          <div className="flex justify-center items-center mt-4 gap-4">
+            <CardItem
+              translateZ={20}
+              as={Link}
+              href="https://www.linkedin.com/in/khageshsharma/"
+              target="__blank"
+              className="px-4 py-2 rounded-xl text-xs font-normal bg-blue-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="lucide lucide-linkedin w-6 h-6 text-white transition-colors"
+              >
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect width="4" height="12" x="2" y="9"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+              </svg>
+            </CardItem>
+            <CardItem
+              translateZ={20}
+              as={Link}
+              className="px-4 py-2 rounded-xl bg-white text-xs font-bold"
+              href="https://github.com/Khagesh2409"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="lucide lucide-github w-6 h-6 text-gray-900 hover:text-black transition-colors"
+              >
+                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+                <path d="M9 18c-4.51 2-5-2-7-2"></path>
+              </svg>
+            </CardItem>
+          </div>
+        </CardBody>
+      </CardContainer>
+      <CardContainer className="inter-var">
+        <CardBody className="bg-black flex items-center justify-center flex-col relative group/card border-white/[0.2] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
+          <CardItem translateZ="50" className="text-xl font-spacegrotesksemibold text-white">
+            Abhay Dixit
+          </CardItem>
+          <CardItem
+            as="p"
+            translateZ="60"
+            className="text-white font-spacegroteskregular text-center text-md max-w-sm mt-2"
+          >
+            A Full-Stack Web Developer and AI/ML Developer
+          </CardItem>
+          <CardItem translateZ="100" className="w-full mt-4">
+            <Image
+              src={img2}
+              height="1000"
+              width="1000"
+              className="h-[400px] w-full object-cover rounded-xl group-hover/card:shadow-xl"
+              alt="thumbnail"
+            />
+          </CardItem>
+          <div className="flex justify-center items-center mt-4 gap-4">
+            <CardItem
+              translateZ={20}
+              as={Link}
+              href="https://www.linkedin.com/in/abhay-dixit-546b85254/"
+              target="__blank"
+              className="px-4 py-2 rounded-xl text-xs font-normal text-white bg-blue-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="lucide lucide-linkedin w-6 h-6 text-white transition-colors"
+              >
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect width="4" height="12" x="2" y="9"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+              </svg>
+            </CardItem>
+            <CardItem
+              translateZ={20}
+              as={Link}
+              className="px-4 py-2 rounded-xl bg-white text-xs font-bold"
+              href="https://github.com/abhaydixit07"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="lucide lucide-github w-6 h-6 text-gray-900 hover:text-black transition-colors"
+              >
+                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+                <path d="M9 18c-4.51 2-5-2-7-2"></path>
+              </svg>
+            </CardItem>
+          </div>
+        </CardBody>
+      </CardContainer>
+    </div>
+  );
+};
+
+export default Aboutus;
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 0000000..1663cec
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,139 @@
+"use client";
+import { useState } from "react";
+import Phone from "./Phone";
+import { a } from "framer-motion/client";
+
+export default function Contact() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleInputChange = (e: any) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const isFieldValid = (field: any) => {
+    switch (field) {
+      case "name":
+        return formData.name.trim().length > 0;
+      case "email":
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email);
+      case "message":
+        return formData.message.trim().length > 0;
+      default:
+        return false;
+    }
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+
+    // Validate fields and alert if any are empty or invalid
+    if (!isFieldValid("name") || !isFieldValid("email") || !isFieldValid("message")) {
+      alert("All fields are required and must be valid.");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(process.env.NEXT_PUBLIC_CONTACT_US_API!, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: process.env.NEXT_PUBLIC_AUTH_MESSAGE!,
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (!response.ok) {
+        throw new Error((await response.json()).message || "Failed to send message.");
+      }
+      alert("Message sent successfully!");
+
+      setFormData({ name: "", email: "", message: "" });
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <section id="contact" className="pt-16 pb-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 grid-cols-1 gap-x-24">
+          <div className="flex items-center lg:mb-0 mb-10">
+            <div className="w-full">
+              <h2 className="font-spacegrotesksemibold text-white text-3xl md:text-4xl lg:text-5xl leading-normal lg:text-start text-center mb-9">
+                Contact Us
+              </h2>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="relative">
+                  <label htmlFor="name" className="block font-spacegrotesksemibold text-gray-100 mb-2">
+                    Your Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    className={`w-full h-14 pl-4 pr-10 text-gray-900 border-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:border-indigo-500 font-spacegroteskregular`}
+                    placeholder="Your Name"
+                  />
+                </div>
+                <div className="relative">
+                  <label htmlFor="email" className="block font-spacegrotesksemibold text-gray-100 mb-2">
+                    Email Address
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className={`w-full h-14 pl-4 pr-10 text-gray-900 border-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:border-indigo-500 font-spacegroteskregular`}
+                    placeholder="Email Address"
+                  />
+                </div>
+                <div className="relative">
+                  <label htmlFor="text" className="block font-spacegrotesksemibold text-gray-100 mb-2">
+                    Your Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleInputChange}
+                    className={`w-full h-24 pl-4 pr-4 pt-4 text-gray-900 resize-none border-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:border-indigo-500 font-spacegroteskregular`}
+                    placeholder="Your Message"
+                  ></textarea>
+                </div>
+                <button
+                  type="submit"
+                  className="w-full h-14 text-white font-spacegrotesksemibold rounded-lg transition-all duration-300 bg-gradient-to-r from-blue-600 to-violet-600"
+                >
+                  {isSubmitting ? "Sending..." : "Send Message"}
+                </button>
+              </form>
+            </div>
+          </div>
+          <div className="lg:max-w-xl w-full h-[600px] flex items-center lg:pt-32 justify-center">
+            <div className="z-10">
+              <Phone filled={isFieldValid("name") && isFieldValid("email") && isFieldValid("message")} formdata={formData} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/FeaturesSection.tsx b/src/components/FeaturesSection.tsx
new file mode 100644
index 0000000..f8275ec
--- /dev/null
+++ b/src/components/FeaturesSection.tsx
@@ -0,0 +1,107 @@
+"use client";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Feature1 from "../../public/img2.png";
+import Feature2 from "../../public/Screenshot 2024-12-01 015641.png";
+import Feature3 from "../../public/img3.png";
+
+const FeaturesSection = () => {
+  const features = [
+    {
+      icon: "🌐",
+      title: "Collaborative Coding Redefined",
+      description:
+        "Codehive offers a real-time collaborative coding playground, enabling seamless teamwork. With support for 5+ programming languages and 20+ color themes, it's designed to cater to diverse developer preferences.",
+      image: Feature1,
+      color: "bg-black",
+    },
+    {
+      icon: "💡",
+      title: "Integrated Communication Tools",
+      description:
+        "Stay connected with inbuilt video calling and chat features, making collaboration smooth and efficient. Download your code as styled snippets or files, simplifying project sharing and documentation.",
+      image: Feature2,
+      color: "bg-black",
+    },
+    {
+      icon: "🌟",
+      title: "AI-Powered Coding Assistance",
+      description:
+        "Genie, our fine-tuned AI chatbot, provides smart code suggestions and instant corrections, empowering developers to write cleaner, more efficient code.",
+      image: Feature3,
+      color: "bg-black",
+    },
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.3,
+      },
+    },
+  };
+
+  const itemVariants = (fromLeft: boolean) => ({
+    hidden: {
+      opacity: 0,
+      x: fromLeft ? -100 : 100,
+    },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  });
+
+  return (
+    <motion.div
+      className="container lg:w-[80vw] mx-auto px-4 lg:py-8 md:py-8 py-4 font-spacegroteskmedium"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+    >
+      {features.map((feature, index) => (
+        <motion.div
+          key={feature.title}
+          className={`flex flex-col md:flex-row items-center mb-16 rounded-2xl overflow-hidden shadow-md ${
+            feature.color
+          } ${index % 2 === 1 ? "md:flex-row-reverse" : ""}`}
+          variants={containerVariants}
+        >
+          <motion.div
+            className="md:w-1/2 p-8"
+            variants={itemVariants(index % 2 === 0)}
+          >
+            <div className="text-5xl mb-4 lg:text-start md:text-start text-center">
+              {feature.icon}
+            </div>
+            <h2 className="lg:text-3xl font-spacegroteskregular bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-violet-600 text-xl lg:text-start md:text-start text-center font-bold mb-4">
+              {feature.title}
+            </h2>
+            <p className="text-white font-spacegrotesklight lg:text-lg text-md lg:text-start md:text-start text-center leading-relaxed">
+              {feature.description}
+            </p>
+          </motion.div>
+          <motion.div
+            className="md:w-1/2 lg:p-8 md:p-8 p-2"
+            variants={itemVariants(index % 2 === 1)}
+          >
+            <Image
+              src={feature.image}
+              alt={feature.title}
+              className="w-full h-auto rounded-2xl shadow-xl transform transition-transform duration-300 hover:scale-105"
+            />
+          </motion.div>
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+};
+
+export default FeaturesSection;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..ac6cdb6
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,79 @@
+import logo from "../../public/logo.png";
+import Image from "next/image";
+
+const Footer = () => {
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  };
+  return (
+    <footer className="w-full mt-32 py-14 bg-black border-t border-white/[0.2]">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center ">
+        <div
+          onClick={() => scrollToSection("home")}
+          className="flex gap-4 items-center justify-center"
+        >
+          <Image src={logo} className="h-10 w-10" alt="Codehive Logo" />
+          <p className="font-spacegrotesksemibold text-white text-2xl cursor-pointer">
+            Codehive
+          </p>
+        </div>
+        <div className="max-w-3xl mx-auto">
+          <ul className="text-lg flex items-center justify-center font-spacegroteskregular flex-col gap-7 md:flex-row md:gap-12 transition-all duration-500 py-16">
+            <li>
+              <button
+                onClick={() => scrollToSection("home")}
+                className="text-white hover:text-blue-700"
+              >
+                Home
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("features")}
+                className="text-white hover:text-blue-700"
+              >
+                Features
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("about")}
+                className="text-white hover:text-blue-700"
+              >
+                About
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("developers")}
+                className="text-white hover:text-blue-700"
+              >
+                Developers
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("contact")}
+                className="text-white hover:text-blue-700"
+              >
+                Contact
+              </button>
+            </li>
+          </ul>
+          <span className="text-lg font-spacegroteskregular text-gray-500 text-center block">
+            ©<a href="/">Codehive</a> {new Date().getFullYear()}, All rights
+            reserved.
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..9b4eef3
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,118 @@
+import Link from "next/link";
+export default function Hero() {
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  };
+  return (
+    <div
+      id="home"
+      className=" relative overflow-hidden before:absolute z-10 before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-[1] before:transform before:-translate-x-1/2 text-white"
+    >
+      <div className="absolute  pointer-events-none"></div>
+
+      <div className="max-w-[85rem] mx-auto px-6 lg:px-8 pt-40 lg:pb-12 md:pb-12 pb-32">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-spacegroteskbold tracking-tight leading-tight">
+            Collaborate. Code. Communicate.
+            <br />
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-violet-600">
+              All in One Place.
+            </span>
+          </h1>
+          <p className="mt-5 text-lg font-spacegroteskregular text-neutral-400 max-w-2xl mx-auto">
+            Welcome to Codehive, your ultimate collaborative coding platform.
+            Code together in real time, share ideas with built-in chat and video
+            calls, and unleash the power of AI with Codehive Genie for smarter
+            coding solutions.
+          </p>
+        </div>
+
+        {/* Call to Action */}
+        <div className="mt-8 flex justify-center gap-4">
+          <Link
+            className="inline-flex items-center gap-x-3 px-6 py-3 rounded-lg font-spacegrotesksemibold text-sm text-white bg-gradient-to-r from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 shadow-lg transition-all"
+            href="/combined"
+          >
+            Get Started
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </Link>
+          <button
+            className="inline-flex items-center gap-x-3 px-6 py-3 rounded-lg font-spacegrotesksemibold text-sm border border-neutral-700 text-neutral-200 hover:bg-neutral-800 shadow transition-all"
+            onClick={() => scrollToSection("features")}
+          >
+            Learn More
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M17 8l4 4m0 0l-4 4m4-4H3"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Highlights Section */}
+        <div className="mt-12 hidden lg:grid md:grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
+          <div>
+            <h3 className="text-xl font-spacegroteskbold text-blue-400">
+              Real-Time Collaboration
+            </h3>
+            <p className="mt-2 text-neutral-400 font-spacegroteskregular">
+              Code together across devices with live updates.
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-spacegroteskbold text-violet-400">
+              AI Assistance
+            </h3>
+            <p className="mt-2 text-neutral-400 font-spacegroteskregular">
+              Get code fixes, suggestions, and generation with Codehive Genie.
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-spacegroteskbold text-blue-400">
+              Integrated Tools
+            </h3>
+            <p className="mt-2 text-neutral-400 font-spacegroteskregular">
+              Chat, video calls, and file sharing for seamless teamwork.
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-spacegroteskbold text-violet-400">
+              Customizable Themes
+            </h3>
+            <p className="mt-2 text-neutral-400 font-spacegroteskregular">
+              Choose from 20+ editor themes to suit your style.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..d496d13
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,129 @@
+"use client";
+import React, { useState } from "react";
+import logo from "../../public/logo.png";
+import Image from "next/image";
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+      setIsMenuOpen(false);
+    }
+  };
+
+  return (
+    <nav className="bg-opacity-50 backdrop-blur-md fixed w-full z-20 top-0 start-0 rounded-lg shadow-lg">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="" className="flex items-center space-x-3 rtl:space-x-reverse">
+          <Image src={logo} className="h-10 w-10" alt="Codehive Logo" />
+          <span className="self-center text-white lg:text-2xl md:text-2xl lg:block md:block text-2xl hidden font-semibold whitespace-nowrap">
+            Codehive
+          </span>
+        </a>
+        <div className="flex gap-1 md:gap-2 md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+          <button
+            type="button"
+            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center"
+          >
+            <a href="/combined">Get started</a>
+          </button>
+          <button
+            onClick={toggleMenu}
+            type="button"
+            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            aria-controls="navbar-sticky"
+            aria-expanded={isMenuOpen}
+          >
+            <span className="sr-only">Open main menu</span>
+            <svg
+              className="w-5 h-5"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 17 14"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M1 1h15M1 7h15M1 13h15"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          className={`
+            absolute 
+            top-[75%] 
+            right-0 
+            w-full
+            lg:w-auto
+            lg:static 
+            lg:block
+            rounded-lg
+            p-1
+            ${isMenuOpen ? "block" : "hidden"}
+          `}
+          id="navbar-sticky"
+        >
+          <ul className="bg-black lg:bg-transparent w-full flex flex-col p-4 lg:p-0 mt-4 font-medium border border-white rounded-lg lg:space-x-8 rtl:space-x-reverse lg:flex-row lg:mt-0 lg:border-0">
+            <li>
+              <button
+                onClick={() => scrollToSection("home")}
+                className="block py-2 px-3 text-white hover:text-blue-700 rounded lg:bg-transparent lg:p-0"
+                aria-current="page"
+              >
+                Home
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("features")}
+                className="block py-2 text-white px-3 rounded hover:text-blue-700 lg:hover:bg-transparent lg:p-0"
+              >
+                Features
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("about")}
+                className="block py-2 text-white px-3 rounded hover:text-blue-700 lg:hover:bg-transparent lg:p-0"
+              >
+                About Us
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("developers")}
+                className="block py-2 text-white px-3 rounded hover:text-blue-700 lg:hover:bg-transparent lg:p-0"
+              >
+                Developers
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => scrollToSection("contact")}
+                className="block py-2 text-white px-3 rounded hover:text-blue-700 lg:hover:bg-transparent lg:p-0"
+              >
+                Contact Us
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/Phone.tsx b/src/components/Phone.tsx
new file mode 100644
index 0000000..52a5936
--- /dev/null
+++ b/src/components/Phone.tsx
@@ -0,0 +1,132 @@
+
+"use client";
+import { motion } from "framer-motion";
+import { FiBatteryCharging, FiWifi } from "react-icons/fi";
+import { useState } from "react";
+
+
+export default function Phone({ filled, formdata }: any) {
+  return (
+    <section className="grid place-content-center min-h-screen">
+      <FloatingPhone filled={filled} formdata={formdata}/>
+    </section>
+  );
+}
+
+function FloatingPhone({ filled, formdata }: any)  {
+  return (
+    <div
+      style={{
+        transformStyle: "preserve-3d",
+        transform: "rotateY(-30deg) rotateX(15deg)",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      }}
+      className="rounded-[24px] bg-gradient-to-br from-neutral-100 to-gray-500"
+    >
+      <motion.div
+        initial={{
+          transform: "translateZ(8px) translateY(-2px)",
+        }}
+        animate={{
+          transform: "translateZ(32px) translateY(-8px)",
+        }}
+        transition={{
+          repeat: Infinity,
+          repeatType: "mirror",
+          duration: 2,
+          ease: "easeInOut",
+        }}
+        className="relative h-96 w-56 rounded-[24px] border-2 border-b-4 border-r-4 border-white border-l-gray-200 border-t-gray-200 bg-gray-900 p-1 pl-[3px] pt-[3px]"
+      >
+        <HeaderBar />
+        <Screen filled={filled} formdata={formdata}/>
+      </motion.div>
+    </div>
+  );
+};
+
+const HeaderBar = () => {
+  return (
+    <>
+      <div className="absolute left-[50%] top-2.5 z-10 h-2 w-16 -translate-x-[50%] rounded-md bg-gray-700"></div>
+      <div className="absolute right-3 top-2 z-10 flex gap-2">
+        <FiWifi className="text-gray-900" />
+        <FiBatteryCharging className="text-gray-900" />
+      </div>
+    </>
+  );
+};
+
+
+
+const Screen = ({ filled, formdata }: any) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch(process.env.NEXT_PUBLIC_CONTACT_US_API!, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: process.env.NEXT_PUBLIC_AUTH_MESSAGE!,
+        },
+        body: JSON.stringify(formdata),
+      });
+
+      if (!response.ok) {
+        throw new Error((await response.json()).message || "Failed to send message.");
+      }
+      alert("Message sent successfully!");
+      window.location.reload();
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative z-0 grid h-full w-full place-content-center overflow-hidden rounded-[20px] bg-gray-300">
+            <div className="relative flex justify-center items-center mb-4">
+        <svg
+          width="60"
+          height="60"
+          viewBox="0 0 60 60"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          
+        >
+          
+        </svg>
+        <img
+          src="./logo.png"
+          alt="logo"
+          className="absolute h-15 w-14"
+          style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+        />
+      </div>
+
+      <div className="text-center px-4 mb-4">
+        <h2 className="text-xl font-semibold text-gray-800 mb-2">
+          Collaborate. Code. Communicate.
+        </h2>
+        <p className="text-sm text-gray-600 mb-4">
+          Let's connect and bring ideas to life.
+        </p>
+      </div>
+
+      <button
+        onClick={handleSubmit}
+        className="absolute bottom-4 left-4 right-4 z-10 rounded-lg bg-gradient-to-r from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 text-white py-2.5 text-sm font-medium transition-colors duration-300 ease-in-out shadow-md"
+        disabled={loading}
+      >
+        {loading ? "Sending..." : filled ? "Send Message" : "Contact Us"}
+      </button>
+
+      <div className="absolute -bottom-72 left-[50%] h-96 w-96 -translate-x-[50%] rounded-full bg-gradient-to-r from-blue-600 to-violet-600 opacity-40" />
+    </div>
+  );
+};
+
diff --git a/src/constants/customStyles.ts b/src/constants/customStyles.ts
new file mode 100644
index 0000000..55903a0
--- /dev/null
+++ b/src/constants/customStyles.ts
@@ -0,0 +1,52 @@
+export const customStyles = {
+    control: (styles:any) => ({
+      ...styles,
+      width: "100%",
+      maxWidth: "14rem",
+      minWidth: "4rem",
+      borderRadius: "5px",
+      color: "#000",
+      fontSize: "0.8rem",
+      lineHeight: "1.75rem",
+      backgroundColor: "#FFFFFF",
+      cursor: "pointer",
+      border: "2px solid #000000",
+      ":hover": {
+        border: "2px solid #000000",
+        boxShadow: "none",
+      },
+    }),
+    option: (styles:any) => {
+      return {
+        ...styles,
+        color: "#000",
+        fontSize: "0.8rem",
+        lineHeight: "1.75rem",
+        width: "100%",
+        background: "#fff",
+        ":hover": {
+          backgroundColor: "rgb(243 244 246)",
+          color: "#000",
+          cursor: "pointer",
+        },
+      };
+    },
+    menu: (styles:any) => {
+      return {
+        ...styles,
+        backgroundColor: "#fff",
+        maxWidth: "14rem",
+        border: "2px solid #000000",
+        borderRadius: "5px",
+      };
+    },
+  
+    placeholder: (defaultStyles:any) => {
+      return {
+        ...defaultStyles,
+        color: "#000",
+        fontSize: "0.8rem",
+        lineHeight: "1.75rem",
+      };
+    },
+  };
\ No newline at end of file
diff --git a/src/constants/languageOptions.ts b/src/constants/languageOptions.ts
new file mode 100644
index 0000000..073a862
--- /dev/null
+++ b/src/constants/languageOptions.ts
@@ -0,0 +1,280 @@
+export const languageOptions:Array<any> = [
+    {
+      id: 63,
+      name: "JavaScript (Node.js 12.14.0)",
+      label: "JavaScript",
+      value: "javascript",
+    },
+    // {
+    //   id: 45,
+    //   name: "Assembly (NASM 2.14.02)",
+    //   label: "Assembly (NASM 2.14.02)",
+    //   value: "assembly",
+    // },
+    // {
+    //   id: 46,
+    //   name: "Bash (5.0.0)",
+    //   label: "Bash (5.0.0)",
+    //   value: "bash",
+    // },
+    // {
+    //   id: 47,
+    //   name: "Basic (FBC 1.07.1)",
+    //   label: "Basic (FBC 1.07.1)",
+    //   value: "basic",
+    // },
+    // {
+    //   id: 75,
+    //   name: "C (Clang 7.0.1)",
+    //   label: "C (Clang 7.0.1)",
+    //   value: "c",
+    // },
+    // {
+    //   id: 76,
+    //   name: "C++ (Clang 7.0.1)",
+    //   label: "C++ (Clang 7.0.1)",
+    //   value: "cpp",
+    // },
+    // {
+    //   id: 48,
+    //   name: "C (GCC 7.4.0)",
+    //   label: "C (GCC 7.4.0)",
+    //   value: "c",
+    // },
+    // {
+    //   id: 52,
+    //   name: "C++ (GCC 7.4.0)",
+    //   label: "C++ (GCC 7.4.0)",
+    //   value: "cpp",
+    // },
+    // {
+    //   id: 49,
+    //   name: "C (GCC 8.3.0)",
+    //   label: "C (GCC 8.3.0)",
+    //   value: "c",
+    // },
+    // {
+    //   id: 53,
+    //   name: "C++ (GCC 8.3.0)",
+    //   label: "C++ (GCC 8.3.0)",
+    //   value: "cpp",
+    // },
+    {
+      id: 50,
+      name: "C (GCC 9.2.0)",
+      label: "C",
+      value: "c",
+    },
+    {
+      id: 54,
+      name: "C++ (GCC 9.2.0)",
+      label: "C++",
+      value: "cpp",
+    },
+    // {
+    //   id: 86,
+    //   name: "Clojure (1.10.1)",
+    //   label: "Clojure (1.10.1)",
+    //   value: "clojure",
+    // },
+    // {
+    //   id: 51,
+    //   name: "C# (Mono 6.6.0.161)",
+    //   label: "C# (Mono 6.6.0.161)",
+    //   value: "csharp",
+    // },
+    // {
+    //   id: 77,
+    //   name: "COBOL (GnuCOBOL 2.2)",
+    //   label: "COBOL (GnuCOBOL 2.2)",
+    //   value: "cobol",
+    // },
+    // {
+    //   id: 55,
+    //   name: "Common Lisp (SBCL 2.0.0)",
+    //   label: "Common Lisp (SBCL 2.0.0)",
+    //   value: "lisp",
+    // },
+    // {
+    //   id: 56,
+    //   name: "D (DMD 2.089.1)",
+    //   label: "D (DMD 2.089.1)",
+    //   value: "d",
+    // },
+    // {
+    //   id: 57,
+    //   name: "Elixir (1.9.4)",
+    //   label: "Elixir (1.9.4)",
+    //   value: "elixir",
+    // },
+    // {
+    //   id: 58,
+    //   name: "Erlang (OTP 22.2)",
+    //   label: "Erlang (OTP 22.2)",
+    //   value: "erlang",
+    // },
+    // {
+    //   id: 44,
+    //   label: "Executable",
+    //   name: "Executable",
+    //   value: "exe",
+    // },
+    // {
+    //   id: 87,
+    //   name: "F# (.NET Core SDK 3.1.202)",
+    //   label: "F# (.NET Core SDK 3.1.202)",
+    //   value: "fsharp",
+    // },
+    // {
+    //   id: 59,
+    //   name: "Fortran (GFortran 9.2.0)",
+    //   label: "Fortran (GFortran 9.2.0)",
+    //   value: "fortran",
+    // },
+    // {
+    //   id: 60,
+    //   name: "Go (1.13.5)",
+    //   label: "Go (1.13.5)",
+    //   value: "go",
+    // },
+    // {
+    //   id: 88,
+    //   name: "Groovy (3.0.3)",
+    //   label: "Groovy (3.0.3)",
+    //   value: "groovy",
+    // },
+    // {
+    //   id: 61,
+    //   name: "Haskell (GHC 8.8.1)",
+    //   label: "Haskell (GHC 8.8.1)",
+    //   value: "haskell",
+    // },
+    {
+      id: 62,
+      name: "Java (OpenJDK 13.0.1)",
+      label: "Java",
+      value: "java",
+    },
+  
+    // {
+    //   id: 78,
+    //   name: "Kotlin (1.3.70)",
+    //   label: "Kotlin (1.3.70)",
+    //   value: "kotlin",
+    // },
+    // {
+    //   id: 64,
+    //   name: "Lua (5.3.5)",
+    //   label: "Lua (5.3.5)",
+    //   value: "lua",
+    // },
+  
+    // {
+    //   id: 79,
+    //   name: "Objective-C (Clang 7.0.1)",
+    //   label: "Objective-C (Clang 7.0.1)",
+    //   value: "objectivec",
+    // },
+    // {
+    //   id: 65,
+    //   name: "OCaml (4.09.0)",
+    //   label: "OCaml (4.09.0)",
+    //   value: "ocaml",
+    // },
+    // {
+    //   id: 66,
+    //   name: "Octave (5.1.0)",
+    //   label: "Octave (5.1.0)",
+    //   value: "octave",
+    // },
+    // {
+    //   id: 67,
+    //   name: "Pascal (FPC 3.0.4)",
+    //   label: "Pascal (FPC 3.0.4)",
+    //   value: "pascal",
+    // },
+    // {
+    //   id: 85,
+    //   name: "Perl (5.28.1)",
+    //   label: "Perl (5.28.1)",
+    //   value: "perl",
+    // },
+    // {
+    //   id: 68,
+    //   name: "PHP (7.4.1)",
+    //   label: "PHP (7.4.1)",
+    //   value: "php",
+    // },
+    // {
+    //   id: 43,
+    //   label: "Plain Text",
+    //   name: "Plain Text",
+    //   value: "text",
+    // },
+    // {
+    //   id: 69,
+    //   name: "Prolog (GNU Prolog 1.4.5)",
+    //   label: "Prolog (GNU Prolog 1.4.5)",
+    //   value: "prolog",
+    // },
+    // {
+    //   id: 70,
+    //   name: "Python (2.7.17)",
+    //   label: "Python (2.7.17)",
+    //   value: "python",
+    // },
+    {
+      id: 71,
+      name: "Python (3.8.1)",
+      label: "Python",
+      value: "python",
+    },
+    // {
+    //   id: 80,
+    //   name: "R (4.0.0)",
+    //   label: "R (4.0.0)",
+    //   value: "r",
+    // },
+    // {
+    //   id: 72,
+    //   name: "Ruby (2.7.0)",
+    //   label: "Ruby (2.7.0)",
+    //   value: "ruby",
+    // },
+    // {
+    //   id: 73,
+    //   name: "Rust (1.40.0)",
+    //   label: "Rust (1.40.0)",
+    //   value: "rust",
+    // },
+    // {
+    //   id: 81,
+    //   name: "Scala (2.13.2)",
+    //   label: "Scala (2.13.2)",
+    //   value: "scala",
+    // },
+    // {
+    //   id: 82,
+    //   name: "SQL (SQLite 3.27.2)",
+    //   label: "SQL (SQLite 3.27.2)",
+    //   value: "sql",
+    // },
+    // {
+    //   id: 83,
+    //   name: "Swift (5.2.3)",
+    //   label: "Swift (5.2.3)",
+    //   value: "swift",
+    // },
+    {
+      id: 74,
+      name: "TypeScript (3.7.4)",
+      label: "TypeScript",
+      value: "typescript",
+    },
+    // {
+    //   id: 84,
+    //   name: "Visual Basic.Net (vbnc 0.0.0.5943)",
+    //   label: "Visual Basic.Net (vbnc 0.0.0.5943)",
+    //   value: "vbnet",
+    // },
+  ];
\ No newline at end of file
diff --git a/src/helpers/downloadCode.ts b/src/helpers/downloadCode.ts
new file mode 100644
index 0000000..e90e510
--- /dev/null
+++ b/src/helpers/downloadCode.ts
@@ -0,0 +1,103 @@
+import html2canvas from 'html2canvas';
+
+export const downloadCodeAsFile = (code:any, language: any) => {
+  const extensionDictionary: { [key: string]: string } = {
+    'javascript': 'js',
+    'c': 'c',
+    'cpp': 'cpp',
+    'java': 'java',
+    'python': 'py',
+    'typescript': 'ts',
+  }
+  console.log(language);
+  const blob = new Blob([code], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'codehive.' + extensionDictionary[language];
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+export const downloadCodeAsImage = async (code:string, filename:string) => {
+  
+  const wrapperElement = document.createElement('div');
+
+  
+  Object.assign(wrapperElement.style, {
+    position: 'absolute',
+    left: '-9999px',
+    display: 'inline-block',
+    backgroundColor: '#1e1e1e', 
+    padding: '20px',
+    borderRadius: '10px',
+    boxShadow: '0 6px 18px rgba(0, 0, 0, 0.6)',
+  });
+
+  // Create the dots container
+  const dotsContainer = document.createElement('div');
+  Object.assign(dotsContainer.style, {
+    display: 'flex',
+    gap: '8px',
+    marginBottom: '10px',
+  });
+
+  
+  const colors = ['#ff5f57', '#febc2e', '#28c840']; // Red, Yellow, Green
+  colors.forEach((color) => {
+    const dot = document.createElement('span');
+    Object.assign(dot.style, {
+      width: '12px',
+      height: '12px',
+      backgroundColor: color,
+      borderRadius: '50%',
+      display: 'inline-block',
+    });
+    dotsContainer.appendChild(dot);
+  });
+
+  
+  wrapperElement.appendChild(dotsContainer);
+
+  
+  const codeElement = document.createElement('pre');
+  codeElement.textContent = code;
+
+  
+  Object.assign(codeElement.style, {
+    fontFamily: '"Fira Code", monospace',
+    fontSize: '18px', 
+    fontWeight: 'bold', 
+    backgroundColor: '#1e1e1e', 
+    color: '#dcdcdc', 
+    padding: '16px',
+    borderRadius: '8px',
+    lineHeight: '1.7',
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden',
+  });
+
+  
+  
+
+  wrapperElement.appendChild(codeElement);
+
+ 
+  document.body.appendChild(wrapperElement);
+
+  
+  const canvas = await html2canvas(wrapperElement, { scale: 2 });
+  const dataUrl = canvas.toDataURL('image/png');
+
+  // Create a link to download the image
+  const a = document.createElement('a');
+  a.href = dataUrl;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+
+  
+  document.body.removeChild(wrapperElement);
+};
diff --git a/src/lib/defineTheme.ts b/src/lib/defineTheme.ts
new file mode 100644
index 0000000..71e57f8
--- /dev/null
+++ b/src/lib/defineTheme.ts
@@ -0,0 +1,67 @@
+import { loader } from "@monaco-editor/react";
+
+const monacoThemes = {
+  active4d: "Active4D",
+  "all-hallows-eve": "All Hallows Eve",
+  amy: "Amy",
+  "birds-of-paradise": "Birds of Paradise",
+  blackboard: "Blackboard",
+  "brilliance-black": "Brilliance Black",
+  "brilliance-dull": "Brilliance Dull",
+  "chrome-devtools": "Chrome DevTools",
+  "clouds-midnight": "Clouds Midnight",
+  clouds: "Clouds",
+  cobalt: "Cobalt",
+  dawn: "Dawn",
+  dreamweaver: "Dreamweaver",
+  eiffel: "Eiffel",
+  "espresso-libre": "Espresso Libre",
+  github: "GitHub",
+  idle: "IDLE",
+  katzenmilch: "Katzenmilch",
+  "kuroir-theme": "Kuroir Theme",
+  lazy: "LAZY",
+  "magicwb--amiga-": "MagicWB (Amiga)",
+  "merbivore-soft": "Merbivore Soft",
+  merbivore: "Merbivore",
+  "monokai-bright": "Monokai Bright",
+  monokai: "Monokai",
+  "night-owl": "Night Owl",
+  "oceanic-next": "Oceanic Next",
+  "pastels-on-dark": "Pastels on Dark",
+  "slush-and-poppies": "Slush and Poppies",
+  "solarized-dark": "Solarized-dark",
+  "solarized-light": "Solarized-light",
+  spacecadet: "SpaceCadet",
+  sunburst: "Sunburst",
+  "textmate--mac-classic-": "Textmate (Mac Classic)",
+  "tomorrow-night-blue": "Tomorrow-Night-Blue",
+  "tomorrow-night-bright": "Tomorrow-Night-Bright",
+  "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
+  "tomorrow-night": "Tomorrow-Night",
+  tomorrow: "Tomorrow",
+  twilight: "Twilight",
+  "upstream-sunburst": "Upstream Sunburst",
+  "vibrant-ink": "Vibrant Ink",
+  "xcode-default": "Xcode_default",
+  zenburnesque: "Zenburnesque",
+  iplastic: "iPlastic",
+  idlefingers: "idleFingers",
+  krtheme: "krTheme",
+  monoindustrial: "monoindustrial",
+};
+
+const defineTheme = (theme: keyof typeof monacoThemes) => {
+  return new Promise<void>((res) => {
+    Promise.all([
+      loader.init(),
+      import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
+    ]).then(([monaco, themeData]) => {
+      console.log("define theme:",theme,themeData)
+      monaco.editor.defineTheme(theme, themeData);
+      res();
+    });
+  });
+};
+
+export { defineTheme };
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..cec6ac9
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..d0cebf2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,13 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      fontFamily: {
+        spacegroteskbold: "Space Grotesk Bold",
+        spacegrotesklight: "Space Grotesk Light",
+        spacegroteskmedium: "Space Grotesk Medium",
+        spacegroteskregular: "Space Grotesk Regular",
+        spacegrotesksemibold: "Space Grotesk Semibold",
+      },
     },
   },
   plugins: [],
