Sync main with dev

.env.development

@@ -32,3 +32,6 @@ NEXT_PUBLIC_APP_STRIPE_KEY=pk_test_51MAliSF4qMywXyoUvCPG6HDRQaRy4ach2pfDIj4sklm4
 
 NEXT_PUBLIC_KANA_SERVER_URL=kana-server.ctfguide.com
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=166652277588-4uk7g7irqlicacelg1nfgt0ejmskmo9h.apps.googleusercontent.com
+
+NEXT_PUBLIC_DOCKET_URL=https://docketinfra.ctfguide.com
+NEXT_PUBLIC_DOCKET_API_TOKEN=hellodocket12

package.json

@@ -33,6 +33,7 @@
     "@webcontainer/api": "^1.5.1-internal.5",
     "asciinema-player": "3.6.3",
     "autoprefixer": "^10.4.12",
+    "axios": "^1.8.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-remove-imports": "^1.8.0",
     "chart.js": "^4.4.3",
@@ -66,6 +67,7 @@
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.7",
     "react-firebase-hooks": "^5.1.1",
+    "react-globe.gl": "^2.33.2",
     "react-google-charts": "^4.0.1",
     "react-image-crop": "^11.0.5",
     "react-intersection-observer": "^9.13.1",
@@ -77,6 +79,7 @@
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.9.0",
     "react-select-country-list": "^2.2.3",
+    "react-simple-maps": "^3.0.0",
     "react-simplemde-editor": "^5.2.0",
     "react-swipeable": "^7.0.1",
     "react-text-loop": "^2.3.0",
@@ -97,6 +100,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.175.0",
+    "three-globe": "^2.42.4",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },

src/components/ConfigureContainerModal.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+export default function ConfigureContainerModal({ open, onClose, container }) {
+  if (!open || !container) return null;
+
+  return (
+    <div className="fixed  inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+      <div className="bg-neutral-900 border-t-4 border-blue-500 shadow-lg w-full max-w-3xl mx-4 p-8 relative flex flex-col max-h-[90vh] overflow-y-auto">
+        <button
+          className="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+
+        <h2 className="text-2xl font-bold text-white mb-6">Configure Container</h2>
+        <div className="bg-yellow-900/70 border border-yellow-600 text-yellow-200 rounded p-3 mb-6 flex items-center gap-3">
+          <i className="fa fa-exclamation-triangle text-yellow-400 text-xl"></i>
+          <span className="font-semibold">Editing container configurations is not available yet. Please DM support for changes.</span>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Subdomain</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.subdomain || ''}
+              readOnly
+              disabled
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Container Name</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.containerName || ''}
+              readOnly
+              disabled
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Image Name</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.imageName || ''}
+              readOnly
+              disabled
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Port</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.port || ''}
+              readOnly
+              disabled
+            />
+          </div>
+          {/* Add more configuration fields here as needed */}
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Environment Variables</label>
+            <textarea
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.env ? JSON.stringify(container.env, null, 2) : ''}
+              readOnly
+              disabled
+              rows={3}
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Command</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.command || ''}
+              readOnly
+              disabled
+            />
+          </div>
+          <div>
+            <label className="block text-gray-400 text-sm mb-1">Created At</label>
+            <input
+              type="text"
+              className="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 text-white rounded"
+              value={container.createdAt ? new Date(container.createdAt).toLocaleString() : ''}
+              readOnly
+              disabled
+            />
+          </div>
+        </div>
+        {/* You can add Save/Update actions here in the future */}
+      </div>
+    </div>
+  );
+}

src/components/FileEditorModal.jsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export default function FileEditorModal({ fileName, initialValue, onSave, onClose }) {
+  const [value, setValue] = useState(initialValue);
+
+  return createPortal(
+    <div className="fixed inset-0 bg-black bg-opacity-60 z-50 flex items-center justify-center">
+      <div className="bg-neutral-900 border-t-4 border-blue-500 shadow-lg p-4 w-full max-w-5xl">
+        <div className="flex justify-between items-center mb-2">
+          <div className="font-bold text-white text-lg">Edit: <span className="bg-neutral-700 px-2   text-gray-300">{fileName}</span></div>
+          <button onClick={onClose} className="text-gray-500 hover:text-red-600">✕</button>
+        </div>
+        <div className="mb-4">
+          <textarea
+            className="w-full h-64 font-mono bg-neutral-900 text-white rounded p-2 border border-neutral-700"
+            value={value}
+            onChange={e => setValue(e.target.value)}
+            spellCheck={false}
+            style={{ minHeight: 250 }}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <button
+            className="px-4 py-2 bg-blue-600 text-white = hover:bg-blue-700"
+            onClick={() => onSave(value)}
+          >Save</button>
+          <button
+            className="px-4 py-2 bg-neutral-700 text-white = hover:bg-neutral-800"
+            onClick={onClose}
+          >Cancel</button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

src/components/StandardNav.jsx

@@ -788,7 +788,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
       />
       <Upgrade open={upgradeModalOpen} setOpen={setUpgradeModalOpen} />
 
-        <div className="mx-auto   w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
+        <div className="mx-auto hidden   w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
           <h1 className="mx-auto  px-4 text-left">
                 We're experiencing issues with our database and API. You may encounter errors while using the platform. We're working on fixing it. Please join the Discord for updates. https://discord.gg/XJ8QfS6D
           </h1>

src/pages/create.jsx

@@ -495,6 +495,17 @@ export default function Create() {
               >
                 Home
               </Link>
+              <Link 
+                href="/create/compute"
+                className={`text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
+                  false  // Replace with actual route check
+                    ? 'border-blue-500 text-white' 
+                    : 'border-transparent text-neutral-400 hover:text-white hover:border-[#333333]'
+                }`}
+              >
+                <i className="fas fa-server mr-2"></i>
+                Docker Containers <span className="text-xs text-blue-400 px-1 ml-2  rounded bg-blue-900 text-white ">BETA</span>
+              </Link>
               <Link 
                 href="/create/earnings"
                 className={`text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
@@ -506,6 +517,7 @@ export default function Create() {
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings
               </Link>
+
               <Link 
                 href="/create/settings"
                 className={`hidden text-sm font-medium border-b-2 h-full flex items-center transition-colors ${