diff --git a/package-lock.json b/package-lock.json
index 7d04fbb..688c313 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,20 @@
       "name": "blocestate-dapp",
       "version": "0.0.0",
       "dependencies": {
+        "@headlessui/react": "^2.1.10",
+        "@heroicons/react": "^2.1.5",
+        "@radix-ui/react-label": "^2.1.0",
+        "@tabler/icons-react": "^3.19.0",
+        "clsx": "^2.1.1",
+        "framer-motion": "^11.11.9",
+        "pinata-web3": "^0.5.1",
         "react": "^18.3.1",
+        "react-datetime-picker": "^6.0.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.27.0"
+        "react-dropzone": "^14.2.10",
+        "react-router-dom": "^6.27.0",
+        "sweetalert2": "^11.14.4",
+        "tailwind-merge": "^2.5.4"
       },
       "devDependencies": {
         "@eslint/js": "^9.11.1",
@@ -345,6 +356,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chainsafe/is-ip": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@chainsafe/is-ip/-/is-ip-2.0.2.tgz",
+      "integrity": "sha512-ndGqEMG1W5WkGagaqOZHpPU172AGdxr+LD15sv3WIUvT5oCFUrG1Y0CW/v2Egwj4JXEvSibaIIIqImsm98y1nA==",
+      "license": "MIT"
+    },
+    "node_modules/@chainsafe/netmask": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@chainsafe/netmask/-/netmask-2.0.0.tgz",
+      "integrity": "sha512-I3Z+6SWUoaljh3TBzCnCxjlUyN8tA+NAk5L6m9IxvCf1BENQTePzPMis97CoN/iMW1St3WN+AWCCRp+TTBRiDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@chainsafe/is-ip": "^2.0.1"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -837,6 +863,87 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.25",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.25.tgz",
+      "integrity": "sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "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==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-6mLa2fjMDAFQi+/R10B+zU3edsUk/MDtENB2zHho0lqKU1uzhAfJLUduWds4nCo8wbl3vULtC5rJfZAQ1yqIng==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.8.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18",
+        "react-dom": "^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -951,6 +1058,50 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
+      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
+      "license": "MIT"
+    },
+    "node_modules/@multiformats/dns": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@multiformats/dns/-/dns-1.0.6.tgz",
+      "integrity": "sha512-nt/5UqjMPtyvkG9BQYdJ4GfLK3nMqGpFZOzf4hAmIa0sJh2LlS9YKXZ4FgwBDsaHvzZqR/rUFIywIc7pkHNNuw==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@types/dns-packet": "^5.6.5",
+        "buffer": "^6.0.3",
+        "dns-packet": "^5.6.1",
+        "hashlru": "^2.3.0",
+        "p-queue": "^8.0.1",
+        "progress-events": "^1.0.0",
+        "uint8arrays": "^5.0.2"
+      }
+    },
+    "node_modules/@multiformats/mafmt": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@multiformats/mafmt/-/mafmt-12.1.6.tgz",
+      "integrity": "sha512-tlJRfL21X+AKn9b5i5VnaTD6bNttpSpcqwKVmDmSHLwxoz97fAHaepqFOk/l1fIu94nImIXneNbhsJx/RQNIww==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@multiformats/multiaddr": "^12.0.0"
+      }
+    },
+    "node_modules/@multiformats/multiaddr": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@multiformats/multiaddr/-/multiaddr-12.3.1.tgz",
+      "integrity": "sha512-yoGODQY4nIj41ENJClucS8FtBoe8w682bzbKldEQr9lSlfdHqAsRC+vpJAOBpiMwPps1tHua4kxrDmvprdhoDQ==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@chainsafe/is-ip": "^2.0.1",
+        "@chainsafe/netmask": "^2.0.0",
+        "@multiformats/dns": "^1.0.3",
+        "multiformats": "^13.0.0",
+        "uint8-varint": "^2.0.1",
+        "uint8arrays": "^5.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1000,6 +1151,168 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.18.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz",
+      "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.4",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz",
+      "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz",
+      "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
+      "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -1216,6 +1529,68 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tabler/icons": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.19.0.tgz",
+      "integrity": "sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.19.0.tgz",
+      "integrity": "sha512-AqEWGI0tQWgqo6ZjMO5yJ9sYT8oXLuAM/up0hN9iENS6IdtNZryKrkNSiMgpwweNTpl8wFFG/dAZ959S91A/uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.19.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz",
+      "integrity": "sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz",
+      "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1257,6 +1632,15 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/dns-packet": {
+      "version": "5.6.5",
+      "resolved": "https://registry.npmjs.org/@types/dns-packet/-/dns-packet-5.6.5.tgz",
+      "integrity": "sha512-qXOC7XLOEe43ehtWJCMnQXvgcIpv6rPmQ1jXT98Ad8A3TB1Ue50jsCbSSSyuazScEuZ/Q026vHbrOTVkmwA+7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1269,6 +1653,15 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "22.7.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.7.tgz",
+      "integrity": "sha512-SRxCrrg9CL/y54aiMCG3edPKdprgMVGDXjA3gB8UmmBW5TcXzRUYAh8EWzTnSJFAd1rgImPELza+A3bJ+qxz8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -1313,6 +1706,15 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz",
+      "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1539,6 +1941,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/attr-accept": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.4.tgz",
+      "integrity": "sha512-2pA6xFIbdTUDCAwjN8nQwI+842VwzbDUXO2IYlpPXQIORgKnavorcr4Ce3rwh+zsNg9zK7QPsdvDj3Lum4WX4w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1592,12 +2009,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "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-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"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1666,6 +2114,30 @@
         "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"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1776,6 +2248,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1791,6 +2272,18 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1846,6 +2339,15 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "dev": true
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -1954,6 +2456,24 @@
         "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-element-overflow": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/detect-element-overflow/-/detect-element-overflow-1.4.2.tgz",
+      "integrity": "sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/detect-element-overflow?sponsor=1"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1968,6 +2488,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dns-packet": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
+      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -2496,6 +3028,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2554,6 +3092,29 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2566,6 +3127,18 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2614,6 +3187,26 @@
       "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"
+        }
+      ],
+      "license": "MIT",
+      "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",
@@ -2640,6 +3233,32 @@
         "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==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2654,6 +3273,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.9",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
+      "integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
+      "license": "MIT",
+      "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/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2749,6 +3393,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-user-locale": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.2.tgz",
+      "integrity": "sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mem": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2917,6 +3573,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hashlru": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hashlru/-/hashlru-2.3.0.tgz",
+      "integrity": "sha512-0cMsjjIC8I+D3M44pOQdsy0OHXGLVz6Z0beRuufhKa0KfaD2wGwAev6jILzXsd3/vpnNQJmWyZtIILqM1N+n5A==",
+      "license": "MIT"
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -2929,6 +3591,26 @@
         "node": ">= 0.4"
       }
     },
+    "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"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3164,6 +3846,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-ipfs": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/is-ipfs/-/is-ipfs-8.0.4.tgz",
+      "integrity": "sha512-upkO6a8WgBSZMMmuPzmF2NQLWXtiJtHxdEfEiMWrOzCKoZ+XEiM0XlK4fFMfo/PyiRmPMJ4PsNrXyvJeqMrJXA==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@multiformats/mafmt": "^12.1.6",
+        "@multiformats/multiaddr": "^12.1.14",
+        "iso-url": "^1.1.3",
+        "multiformats": "^13.0.1",
+        "uint8arrays": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -3353,6 +4052,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/iso-url": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/iso-url/-/iso-url-1.2.1.tgz",
+      "integrity": "sha512-9JPDgCN4B7QPkLtYAAOrEuAWvP9rWvR5offAr0/SeF046wIkglqH3VXgYYP6NcsKslH80UIVgmPqNe3j7tG2ng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
@@ -3549,6 +4257,43 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/make-event-props": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz",
+      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
+    "node_modules/map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-defer": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "license": "MIT",
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3573,6 +4318,36 @@
         "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3601,6 +4376,12 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/multiformats": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-13.3.0.tgz",
+      "integrity": "sha512-CBiqvsufgmpo01VT5ze94O+uc+Pbf6f/sThlvWss0sBZmAOu6GQn5usrYV2sf2mr17FWYc0rO8c/CNe2T90QAA==",
+      "license": "Apache-2.0 OR MIT"
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -3637,6 +4418,43 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -3667,7 +4485,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"
       }
@@ -3787,6 +4604,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3817,6 +4643,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-queue": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.0.1.tgz",
+      "integrity": "sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^5.0.1",
+        "p-timeout": "^6.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.3.tgz",
+      "integrity": "sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -3913,6 +4767,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinata-web3": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/pinata-web3/-/pinata-web3-0.5.1.tgz",
+      "integrity": "sha512-iPrDARwf+5PNxXbXzjskQji6LvBUqk0uFzchyhMjYArxJ3/4a+iIhh+E50lj9a8ceYtaD6hfu4ZhWAfUW9gifA==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.7.7",
+        "form-data": "^4.0.0",
+        "is-ipfs": "^8.0.4",
+        "node-fetch": "^3.3.1"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -4122,17 +4988,28 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/progress-events": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/progress-events/-/progress-events-1.0.1.tgz",
+      "integrity": "sha512-MOzLIwhpt64KIVN64h1MwdKWiyKFNc/S6BoYKPIVUHFg0/eIEyBulhWCgn678v/4c0ri3FdGuzXymNCv02MUIw==",
+      "license": "Apache-2.0 OR MIT"
+    },
     "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/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==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4174,6 +5051,113 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-calendar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.0.0.tgz",
+      "integrity": "sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-clock": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-clock/-/react-clock-5.0.0.tgz",
+      "integrity": "sha512-Cj3XqwLB1svtGWiw/A6vmLIPb9OhA/BsWUpS46lXTNTilK7zmP2zmtFgQEAfWUssc3nERXkMXzI0YrkzDpc0gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.5.0",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-clock?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-date-picker": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-11.0.0.tgz",
+      "integrity": "sha512-l+siu5HSZ/ciGL1293KCAHl4o9aD5rw16V4tB0C43h7QbMv2dWGgj7Dxgt8iztLaPVtEfOt/+sxNiTYw4WVq6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "make-event-props": "^1.6.0",
+        "react-calendar": "^5.0.0",
+        "react-fit": "^2.0.0",
+        "update-input-width": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-date-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-datetime-picker": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/react-datetime-picker/-/react-datetime-picker-6.0.1.tgz",
+      "integrity": "sha512-G7W8bK0SLuO66RVWYGD2q1bD4Wk4pUOpJCq9r44A4P33uq0aAtd3dT1HNEu2fvlmMpYxC4J571ZPI9bUG46pDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "make-event-props": "^1.6.0",
+        "react-calendar": "^5.0.0",
+        "react-clock": "^5.0.0",
+        "react-date-picker": "^11.0.0",
+        "react-fit": "^2.0.0",
+        "react-time-picker": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-datetime-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4186,11 +5170,53 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.10",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.10.tgz",
+      "integrity": "sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
+    "node_modules/react-fit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-2.0.1.tgz",
+      "integrity": "sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-element-overflow": "^1.4.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-fit?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "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-refresh": {
       "version": "0.14.2",
@@ -4231,6 +5257,34 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-time-picker": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-7.0.0.tgz",
+      "integrity": "sha512-k6mUjkI+OsY73mg0yjMxqkLXv/UXR1LN7AARNqfyGZOwqHqo1JrjL3lLHTHWQ86HmPTBL/dZACbIX/fV1NLmWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "make-event-props": "^1.6.0",
+        "react-clock": "^5.0.0",
+        "react-fit": "^2.0.0",
+        "update-input-width": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-time-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4782,6 +5836,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.4.tgz",
+      "integrity": "sha512-8QMzjxCuinwm18EK5AtYvuhP+lRMRxTWVXy8om9wGlULsXSI4TD29kyih3VYrSXMMBlD4EShFvNC7slhTC7j0w==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
+      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "license": "MIT",
+      "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",
@@ -4896,6 +5976,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
+      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4981,6 +6067,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uint8-varint": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/uint8-varint/-/uint8-varint-2.0.4.tgz",
+      "integrity": "sha512-FwpTa7ZGA/f/EssWAb5/YV6pHgVF1fViKdW8cWaEarjB8t7NyofSWBdOTyFPaGuUG4gx3v1O3PQ8etsiOs3lcw==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "uint8arraylist": "^2.0.0",
+        "uint8arrays": "^5.0.0"
+      }
+    },
+    "node_modules/uint8arraylist": {
+      "version": "2.4.8",
+      "resolved": "https://registry.npmjs.org/uint8arraylist/-/uint8arraylist-2.4.8.tgz",
+      "integrity": "sha512-vc1PlGOzglLF0eae1M8mLRTBivsvrGsdmJ5RbK3e+QRvRLOZfZhQROTwH/OfyF3+ZVUg9/8hE8bmKP2CvP9quQ==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "uint8arrays": "^5.0.1"
+      }
+    },
+    "node_modules/uint8arrays": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-5.1.0.tgz",
+      "integrity": "sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "multiformats": "^13.0.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -4996,6 +6110,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -5026,6 +6146,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/update-input-width": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/update-input-width/-/update-input-width-1.4.2.tgz",
+      "integrity": "sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/update-input-width?sponsor=1"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5101,6 +6230,24 @@
         }
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 0a13de4..db82ca4 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.10",
+    "@heroicons/react": "^2.1.5",
+    "@radix-ui/react-label": "^2.1.0",
+    "@tabler/icons-react": "^3.19.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.11.9",
+    "pinata-web3": "^0.5.1",
     "react": "^18.3.1",
+    "react-datetime-picker": "^6.0.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-dropzone": "^14.2.10",
+    "react-router-dom": "^6.27.0",
+    "sweetalert2": "^11.14.4",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
diff --git a/src/App.jsx b/src/App.jsx
index b83a654..7a86ea7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,10 +2,10 @@ import { Route, Routes } from "react-router-dom"
 import Footer from "./components/fixed/Footer"
 import Navbar from "./components/fixed/Navbar"
 import AuctionDetail from "./views/AuctionDetail"
-import CreateAuction from "./views/CreateAuction"
 import Verification from "./views/Verification"
 import Home from "./views/Home"
 import Auction from "./views/Auction"
+import { CreateAuction } from "./views/CreateAuction"
 
 function App() {
 
diff --git a/src/components/ui/bottom-gradient.jsx b/src/components/ui/bottom-gradient.jsx
new file mode 100644
index 0000000..fa2a8ab
--- /dev/null
+++ b/src/components/ui/bottom-gradient.jsx
@@ -0,0 +1,8 @@
+export const BottomGradient = () => {
+    return (
+        <>
+            <span className="group-hover/btn:opacity-100 block transition duration-500 opacity-0 absolute h-px w-full -bottom-px inset-x-0 bg-gradient-to-r from-transparent via-blue-400 to-transparent" />
+            <span className="group-hover/btn:opacity-100 blur-sm block transition duration-500 opacity-0 absolute h-px w-1/2 mx-auto -bottom-px inset-x-10 bg-gradient-to-r from-transparent via-blue-100 to-transparent" />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ui/file-upload.jsx b/src/components/ui/file-upload.jsx
new file mode 100644
index 0000000..07b1a69
--- /dev/null
+++ b/src/components/ui/file-upload.jsx
@@ -0,0 +1,215 @@
+/* eslint-disable prefer-const */
+import { cn } from "../../lib/utils";
+import { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { IconUpload } from "@tabler/icons-react";
+import { useDropzone } from "react-dropzone";
+import { useMotionTemplate, useMotionValue } from "framer-motion";
+import React from "react";
+
+const mainVariant = {
+    initial: {
+        x: 0,
+        y: 0,
+    },
+    animate: {
+        x: 0,
+        y: -20,
+        opacity: 0.9,
+    },
+};
+
+export const FileUpload = ({ setImage, fileType }) => {
+    const [file, setFile] = useState(null);
+    const fileInputRef = useRef(null);
+
+    const handleFileChange = (newFiles) => {
+        if (newFiles.length > 0) {
+            const selectedFile = newFiles[0];
+            const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+            if (!allowedTypes.includes(selectedFile.type)) {
+                return;
+            }
+            setFile(selectedFile);
+            console.log(selectedFile.name);
+            setImage(selectedFile);
+        }
+    };
+
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const { getRootProps, isDragActive } = useDropzone({
+        multiple: false, // Allow only single file upload
+        noClick: true,
+        onDrop: handleFileChange,
+        onDropRejected: (error) => {
+            console.log(error);
+        },
+    });
+
+    const radius = 100;
+    const [visible, setVisible] = useState(false);
+
+    let mouseX = useMotionValue(0);
+    let mouseY = useMotionValue(0);
+
+    function handleMouseMove({ currentTarget, clientX, clientY }) {
+        let { left, top } = currentTarget.getBoundingClientRect();
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top);
+    }
+
+    return (
+        <motion.div
+            style={{
+                background: useMotionTemplate`
+                    radial-gradient(
+                        ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
+                        var(--blue-500),
+                        transparent 80%
+                    )
+                `,
+            }}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+            className="p-[2px] rounded-lg transition duration-300 group/input w-full shadow-input border-1"
+            {...getRootProps()}
+        >
+            <motion.div
+                onClick={handleClick}
+                whileHover="animate"
+                className="p-10 group/file block rounded-lg cursor-pointer w-full relative overflow-hidden"
+            >
+                <input
+                    ref={fileInputRef}
+                    id="file-upload-handle"
+                    type="file"
+                    onChange={(e) => handleFileChange(Array.from(e.target.files || []))}
+                    className="hidden"
+                />
+                <div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)]">
+                    <GridPattern />
+                </div>
+                <div className="flex flex-col items-center justify-center">
+                    <p className="text-center relative z-20 font-sans font-bold text-neutral-700 text-base">
+                        Upload your real estate {fileType}
+                    </p>
+                    <p className="text-center relative z-20 font-sans font-normal text-neutral-400 text-base mt-2">
+                        Drag or drop your {fileType} here or click to upload
+                    </p>
+                    <div className="relative w-full mt-10 max-w-xl mx-auto">
+                        {file && ( // Changed to check for a single file
+                            <motion.div
+                                key="file-upload"
+                                layoutId="file-upload"
+                                className={cn(
+                                    "relative overflow-hidden z-40 bg-white flex flex-col items-start justify-start md:h-24 p-4 mt-4 w-full mx-auto rounded-md",
+                                    "shadow-sm"
+                                )}
+                            >
+                                <div className="flex justify-between w-full items-center gap-4">
+                                    <motion.p
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        layout
+                                        className="text-base text-neutral-700 truncate max-w-xs"
+                                    >
+                                        {file.name}
+                                    </motion.p>
+                                    <motion.p
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        layout
+                                        className="rounded-lg px-2 py-1 w-fit flex-shrink-0 text-sm text-neutral-600 shadow-input"
+                                    >
+                                        {(file.size / (1024 * 1024)).toFixed(2)} MB
+                                    </motion.p>
+                                </div>
+
+                                <div className="flex text-sm md:flex-row flex-col items-start md:items-center w-full mt-2 justify-between text-neutral-600">
+                                    <motion.p
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        layout
+                                        className="px-1 py-0.5 rounded-md bg-gray-100 dark:bg-neutral-800 "
+                                    >
+                                        {file.type}
+                                    </motion.p>
+
+                                    <motion.p
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        layout
+                                    >
+                                        modified{" "}
+                                        {new Date(file.lastModified).toLocaleDateString()}
+                                    </motion.p>
+                                </div>
+                            </motion.div>
+                        )}
+                        {!file && (
+                            <motion.div
+                                layoutId="file-upload"
+                                variants={mainVariant}
+                                transition={{
+                                    type: "spring",
+                                    stiffness: 300,
+                                    damping: 20,
+                                }}
+                                className={cn(
+                                    "relative group-hover/file:shadow-2xl z-40 bg-white dark:bg-neutral-900 flex items-center justify-center h-32 mt-4 w-full max-w-[8rem] mx-auto rounded-md",
+                                    "shadow-[0px_10px_50px_rgba(0,0,0,0.1)]"
+                                )}
+                            >
+                                {isDragActive ? (
+                                    <motion.p
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        className="text-neutral-600 flex flex-col items-center"
+                                    >
+                                        Drop it
+                                        <IconUpload className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
+                                    </motion.p>
+                                ) : (
+                                    <IconUpload className="h-4 w-4 text-neutral-600 dark:text-neutral-300" />
+                                )}
+                            </motion.div>
+                        )}
+
+                        {!file && (
+                            <motion.div
+                                className="absolute opacity-0 border border-dashed border-sky-400 inset-0 z-30 bg-transparent flex items-center justify-center h-32 mt-4 w-full max-w-[8rem] mx-auto rounded-md"
+                            ></motion.div>
+                        )}
+                    </div>
+                </div>
+            </motion.div>
+        </motion.div>
+    );
+};
+
+export function GridPattern() {
+    const columns = 41;
+    const rows = 11;
+    return (
+        <div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
+            {Array.from({ length: rows }).map((_, row) =>
+                Array.from({ length: columns }).map((_, col) => {
+                    const index = row * columns + col;
+                    return (
+                        <div
+                            key={`${col}-${row}`}
+                            className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${index % 2 === 0
+                                ? "bg-gray-50 dark:bg-neutral-950"
+                                : "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
+                                }`}
+                        />
+                    );
+                })
+            )}
+        </div>
+    );
+}
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..6499db5
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,58 @@
+/* eslint-disable prefer-const */
+// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+"use client";
+import React, { useState, forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
+
+const Input = forwardRef(({ className, type, ...props }, ref) => {
+  const radius = 100; // change this to increase the radius of the hover effect
+  const [visible, setVisible] = useState(false);
+
+  let mouseX = useMotionValue(0);
+  let mouseY = useMotionValue(0);
+
+  function handleMouseMove({ currentTarget, clientX, clientY }) {
+    let { left, top } = currentTarget.getBoundingClientRect();
+
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+
+  return (
+    <motion.div
+      style={{
+        background: useMotionTemplate`
+          radial-gradient(
+            ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
+            var(--blue-500),
+            transparent 80%
+          )
+        `,
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      className="p-[2px] rounded-lg transition duration-300 w-full"
+    >
+      <input
+        type={type}
+        className={cn(
+          `h-10 w-full border-none bg-gray-50 text-black shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent 
+            file:text-sm file:font-medium placeholder:text-neutral-400
+            focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400
+            disabled:cursor-not-allowed disabled:opacity-50
+            group-hover/input:shadow-none transition duration-400
+            `,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    </motion.div>
+  );
+});
+
+Input.displayName = "Input";
+
+export { Input };
\ No newline at end of file
diff --git a/src/components/ui/label-input-container.jsx b/src/components/ui/label-input-container.jsx
new file mode 100644
index 0000000..67b1b2e
--- /dev/null
+++ b/src/components/ui/label-input-container.jsx
@@ -0,0 +1,11 @@
+import { cn } from "../../lib/utils";
+
+const LabelInputContainer = ({ children, className }) => {
+    return (
+        <div className={cn("flex flex-col space-y-2 w-full", className)}>
+            {children}
+        </div>
+    );
+};
+
+export default LabelInputContainer;
\ No newline at end of file
diff --git a/src/components/ui/label.jsx b/src/components/ui/label.jsx
new file mode 100644
index 0000000..536ddd9
--- /dev/null
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,24 @@
+
+// Label component extends from shadcnui - https://ui.shadcn.com/docs/components/label
+
+"use client";
+import React, { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "../../lib/utils";
+
+const Label = forwardRef(
+  ({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(
+        "text-sm font-medium text-black leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/src/components/ui/select-menus.jsx b/src/components/ui/select-menus.jsx
new file mode 100644
index 0000000..6c98678
--- /dev/null
+++ b/src/components/ui/select-menus.jsx
@@ -0,0 +1,91 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
+
+const courseCategory = [
+  { id: 1, type: 'House' },
+  { id: 2, type: 'Apartment' },
+  { id: 3, type: 'Shophouse' },
+  { id: 4, type: 'Garden'}
+];
+
+export default function SelectMenus({ setType }) {
+  const [selected, setSelected] = useState(courseCategory[0]);
+
+  useEffect(() => {
+    if (typeof setType === 'function') {
+      setType(selected.id); // Call setType if it's a function
+    }
+  }, [selected, setType]);
+
+  const radius = 100; // Change this to increase the radius of the hover effect
+  const [visible, setVisible] = useState(false);
+
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  function handleMouseMove({ currentTarget, clientX, clientY }) {
+    const { left, top } = currentTarget.getBoundingClientRect();
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+
+  return (
+    <Listbox value={selected} onChange={setSelected}>
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+            radial-gradient(
+              ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+              var(--blue-500),
+              transparent 80%
+            )
+          `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <ListboxButton className="file:border-0 file:bg-transparent 
+          file:text-sm file:font-medium placeholder:text-neutral-400
+          focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400
+          disabled:cursor-not-allowed disabled:opacity-50
+          group-hover/input:shadow-none transition duration-400 shadow-input relative w-full cursor-default rounded-md bg-gray-50 py-2 pl-3 pr-10 text-left text-black focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm sm:leading-6"
+        >
+          <span className="flex items-center">
+            <span className="block truncate">{selected.type}</span>
+          </span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+            <ChevronUpDownIcon aria-hidden="true" className="h-5 w-5 text-gray-400" />
+          </span>
+        </ListboxButton>
+        <ListboxOptions
+          transition
+          className="z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          {courseCategory.map((category) => (
+            <ListboxOption
+              key={category.id}
+              value={category}
+              className="group relative w-full cursor-default select-none py-2 pl-3 pr-9 text-gray-900 data-[focus]:bg-blue-500 data-[focus]:text-white"
+            >
+              <div className="flex items-center">
+                <span className="block truncate font-normal group-data-[selected]:font-semibold">
+                  {category.type}
+                </span>
+              </div>
+              <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-500 group-data-[focus]:text-white [.group:not([data-selected])_&]:hidden">
+                <CheckIcon aria-hidden="true" className="h-5 w-5" />
+              </span>
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
+      </motion.div>
+    </Listbox>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/textarea.jsx b/src/components/ui/textarea.jsx
new file mode 100644
index 0000000..7ad7b96
--- /dev/null
+++ b/src/components/ui/textarea.jsx
@@ -0,0 +1,58 @@
+/* eslint-disable prefer-const */
+// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+"use client";
+import React, { useState, forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
+
+const TextArea = forwardRef(({ className, ...props }, ref) => {
+  const radius = 100; // change this to increase the radius of the hover effect
+  const [visible, setVisible] = useState(false);
+
+  // Initialize motion values for mouse X and Y positions
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  function handleMouseMove({ currentTarget, clientX, clientY }) {
+    const { left, top } = currentTarget.getBoundingClientRect();
+
+    // Update the mouse X and Y positions
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+
+  return (
+    <motion.div
+      style={{
+        background: useMotionTemplate`
+          radial-gradient(
+            ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+            var(--blue-500),
+            transparent 80%
+          )
+        `,
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      className="p-[2px] rounded-lg transition duration-300 group/input"
+    >
+      <textarea
+        className={cn(
+          `flex w-full border-none bg-gray-50 text-black shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent 
+          file:text-sm file:font-medium placeholder:text-neutral-400
+          focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400
+          disabled:cursor-not-allowed disabled:opacity-50
+          group-hover/input:shadow-none transition duration-400`,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    </motion.div>
+  );
+});
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..c3f5c1c
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
\ No newline at end of file
diff --git a/src/views/CreateAuction.jsx b/src/views/CreateAuction.jsx
index ff2959d..b18401a 100644
--- a/src/views/CreateAuction.jsx
+++ b/src/views/CreateAuction.jsx
@@ -1,7 +1,425 @@
-const CreateAuction = () => {
+"use client";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Label } from "../components/ui/label";
+import { Input } from "../components/ui/input";
+import { TextArea } from "../components/ui/textarea";
+import { BottomGradient } from "../components/ui/bottom-gradient";
+import { FileUpload } from "../components/ui/file-upload";
+import LabelInputContainer from "../components/ui/label-input-container";
+import Swal from "sweetalert2";
+import { PinataSDK } from "pinata-web3";
+import DateTimePicker from "react-datetime-picker";
+
+export function CreateAuction() {
+  const navigate = useNavigate();
+
+  const [address, setAddress] = useState("");
+  const [province, setProvince] = useState("");
+  const [city, setCity] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [category, setCategory] = useState("");
+  const [area, setArea] = useState("");
+  const [builtYear, setBuiltYear] = useState("");
+  const [description, setDescription] = useState("");
+  const [image, setImage] = useState(null);
+
+  const [certificateNumber, setCertificateNumber] = useState("");
+  const [startAuction, setStartAuction] = useState("");
+  const [endAuction, setEndAuction] = useState("");
+  const [startPrice, setStartPrice] = useState("");
+
+  // const pinata = new PinataSDK({
+  //   pinataJwt: `${import.meta.env.VITE_JWT}`,
+  //   pinataGateway: `${import.meta.env.VITE_DOMAIN_PINATA}`,
+  // });
+
+  const successAlert = () => {
+    Swal.fire({
+      text: "You've successfully created a new auction!",
+      icon: "success",
+      confirmButtonText: "Done",
+      confirmButtonColor: "#1f6feb",
+      customClass: {
+        confirmButton: "w-full",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        navigate("/auction");
+      }
+    });
+  };
+
+  const failedAlert = () => {
+    Swal.fire({
+      text: "Oops... There's something wrong while creating the auction. Please try again!",
+      icon: "error",
+      confirmButtonText: "Done",
+      confirmButtonColor: "#cc0029",
+    });
+  };
+
+  // if (isLoading) {
+  //   return <LoadingScreen />;
+  // }
+
+  const handleSubmit = async() => {
+    if (
+      address && 
+      province && 
+      city && 
+      postalCode && 
+      category && 
+      area && 
+      builtYear && 
+      description && 
+      image && 
+      certificateNumber && 
+      startAuction && 
+      endAuction && 
+      startPrice
+    ) {
+      console.log("All fields are filled, form is ready to submit");
+      console.log("Address:", address);
+      console.log("Province:", province);
+      console.log("City:", city);
+      console.log("Postal Code:", postalCode);
+      console.log("Category:", category);
+      console.log("Area:", area);
+      console.log("Built Year:", builtYear);
+      console.log("Description:", description);
+      console.log("Image:", image);
+      console.log("Certificate Number:", certificateNumber);
+      console.log("Start Auction:", startAuction);
+      console.log("End Auction:", endAuction);
+      console.log("Start Price:", startPrice);
+      } else {
+      console.log("Please fill in all required fields");
+      failedAlert()
+    }
+  };
+
   return (
-    <div>CreateAuction</div>
-  )
-}
+    <div className="w-full h-full mx-auto p-4 md:p-6 shadow-input bg-gray-100 flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+      <div
+        data-aos="fade-up"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duration="500"
+        className="bg-white w-full lg:w-1/2 p-8 rounded-md shadow-input"
+      >
+        <h2 className="font-bold text-xl text-neutral-800">
+          Real Estate Details{" "}
+        </h2>
+        <p className="text-neutral-600 text-base w-full mt-2 mb-8">
+          Provide essential details about the real estate, including location,
+          type, etc. Ensure the information is accurate to attract potential
+          bidders.
+        </p>
+        <div className="w-full flex flex-col space-y-4">
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+            >
+              Address
+            </Label>
+            <Input
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              placeholder="Ex : Northway Street No.50"
+              type="text"
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+            />
+          </LabelInputContainer>
+          <div className="grid grid-cols-2 gap-3">
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+              >
+                Province
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : East Java"
+                type="text"
+                value={province}
+                onChange={(e) => setProvince(e.target.value)}
+              />
+            </LabelInputContainer>
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+              >
+                City
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : Surabaya"
+                type="text"
+                value={city}
+                onChange={(e) => setCity(e.target.value)}
+              />
+            </LabelInputContainer>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+              >
+                Postal Code
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : 60114"
+                type="number"
+                value={postalCode}
+                onChange={(e) => setPostalCode(e.target.value)}
+              />
+            </LabelInputContainer>
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                htmlFor="description"
+              >
+                Built Year
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : 1920"
+                type="number"
+                min={1}
+                step={1}
+                value={builtYear}
+                onChange={(e) => setBuiltYear(e.target.value)}
+              />
+            </LabelInputContainer>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                htmlFor="description"
+              >
+                Category
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : House"
+                type="text"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              />
+            </LabelInputContainer>
+            <LabelInputContainer>
+              <Label
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                htmlFor="description"
+              >
+                Area (m²)
+              </Label>
+              <Input
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-bottom"
+                data-aos-duration="500"
+                placeholder="Ex : 1500m²"
+                type="number"
+                min={1}
+                value={area}
+                onChange={(e) => setArea(e.target.value)}
+              />
+            </LabelInputContainer>
+          </div>
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="description"
+            >
+              Description
+            </Label>
+            <TextArea
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              rows={5}
+              cols={30}
+              placeholder="Ex : This charming 3-bedroom, 2-bathroom home boasts a spacious open floor plan with a modern kitchen featuring stainless steel appliances and a large island. "
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </LabelInputContainer>
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="thumbnail"
+            >
+              Image
+            </Label>
+            <FileUpload
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              setImage={setImage}
+              fileType={"image"}
+            />
+          </LabelInputContainer>
 
-export default CreateAuction
\ No newline at end of file
+          <button
+            onClick={() => handleSubmit()}
+            data-aos="fade-up"
+            data-aos-anchor-placement="top-bottom"
+            data-aos-duration="500"
+            className="bg-gradient-to-br relative group/btn bg-darkBrown block w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset]"
+            type="submit"
+          >
+            Create
+            <BottomGradient />
+          </button>
+        </div>
+      </div>
+      <div
+        data-aos="fade-up"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duration="500"
+        className="bg-white w-full lg:w-1/2 p-8 rounded-md shadow-input flex flex-col space-y-4"
+      >
+        <div
+          data-aos="fade-up"
+          data-aos-anchor-placement="top-bottom"
+          data-aos-duration="500"
+          id="section-accordion-flush"
+          data-accordion="collapse"
+          data-active-classes="bg-white text-gray-900"
+          data-inactive-classes="text-gray-500"
+        >
+          <h2
+            data-aos="fade-up"
+            data-aos-anchor-placement="top-bottom"
+            data-aos-duration="500"
+            className="font-bold text-xl text-neutral-800"
+          >
+            Auction Details
+          </h2>
+          <p
+            data-aos="fade-up"
+            data-aos-anchor-placement="top-bottom"
+            data-aos-duration="500"
+            className="text-neutral-600 text-base w-full mt-2 mb-4"
+          >
+            Define the auction terms, including the start and end dates,
+            starting price, etc. These settings will guide the auction and
+            inform participants of the rules and payment methods.
+          </p>
+        </div>
+        <div className="w-full flex flex-col space-y-4">
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="price"
+            >
+              Certificate Number
+            </Label>
+            <Input
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              placeholder="Ex : 512839132023"
+              type="text"
+              value={certificateNumber}
+              onChange={(e) => setCertificateNumber(e.target.value)}
+            />
+          </LabelInputContainer>
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="price"
+            >
+              Start Auction
+            </Label>
+            <Input
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              placeholder="Ex: 21/10/2024 20:00"
+              type="datetime-local"
+              value={startAuction}
+              onChange={(e) => setStartAuction(e.target.value)}
+            />
+          </LabelInputContainer>
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="price"
+            >
+              End Auction
+            </Label>
+            <Input
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              placeholder="Ex: 21/10/2024 20:00"
+              type="datetime-local"
+              value={endAuction}
+              onChange={(e) => setEndAuction(e.target.value)}
+            />
+          </LabelInputContainer>
+          <LabelInputContainer>
+            <Label
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              htmlFor="price"
+            >
+              Start Price
+            </Label>
+            <Input
+              data-aos="fade-up"
+              data-aos-anchor-placement="top-bottom"
+              data-aos-duration="500"
+              min="1"
+              step="1"
+              placeholder="Ex : 2500 ICP"
+              type="number"
+              value={startPrice}
+              onChange={(e) => setStartPrice(e.target.value)}
+            />
+          </LabelInputContainer>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 58347b6..27d5a2d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,7 @@
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -14,5 +18,16 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [addVariablesForColors],
+}
+
+function addVariablesForColors({ addBase, theme }) {
+  let allColors = flattenColorPalette(theme("colors"));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+ 
+  addBase({
+    ":root": newVars,
+  });
 }
\ No newline at end of file