From 459c1afd588d69c15d26d45660d455d63827dee6 Mon Sep 17 00:00:00 2001
From: Dan Gleason <dannycgleason@gmail.com>
Date: Sat, 31 Dec 2022 16:31:54 -0500
Subject: [PATCH] update pages

---
 components/sidebar.js |    2 +-
 package-lock.json     |  370 +++++----------
 package.json          |    3 +
 pages/index.js        | 1032 ++++++++++++----------------------------
 pages/submit.js       | 1056 ++++++++++++++++++-----------------------
 tailwind.config.js    |   11 +
 6 files changed, 905 insertions(+), 1569 deletions(-)

diff --git a/components/sidebar.js b/components/sidebar.js
index 03601e4..709c33a 100755
--- a/components/sidebar.js
+++ b/components/sidebar.js
@@ -21,7 +21,7 @@ export default function Home() {
         } else if (query.indexOf("calender-month-view") !== -1) {
             return "calender-month-view";
         }
-        return "events";
+        return "dashboard";
     };
     return (
         <>
diff --git a/package-lock.json b/package-lock.json
index 3ed5421..bab563f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,11 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
+        "@headlessui/react": "^1.7.7",
+        "@heroicons/react": "^2.0.13",
         "@material-ui/core": "^4.12.4",
         "@mui/material": "^5.11.1",
+        "@tailwindcss/aspect-ratio": "^0.4.2",
         "antd": "^5.1.0",
         "axios": "^1.2.1",
         "caniuse-lite": "^1.0.30001439",
@@ -943,6 +946,29 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz",
+      "integrity": "sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
+      "integrity": "sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -1566,7 +1592,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1579,7 +1604,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1588,7 +1612,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1726,6 +1749,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/aspect-ratio": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
+      "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -1796,7 +1827,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1808,7 +1838,6 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
       "dependencies": {
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
@@ -1819,7 +1848,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -1914,7 +1942,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1926,8 +1953,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
@@ -2003,14 +2029,12 @@
     "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
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2019,7 +2043,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2029,7 +2052,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -2068,7 +2090,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
       "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -2085,7 +2106,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2122,7 +2142,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -2149,7 +2168,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2179,7 +2197,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
       "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1",
         "color-string": "^1.9.0"
@@ -2192,7 +2209,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2203,14 +2219,12 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/color-string": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
       "dependencies": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -2231,7 +2245,6 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
       "engines": {
         "node": ">= 12"
       }
@@ -2244,8 +2257,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
@@ -2304,7 +2316,6 @@
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -2343,8 +2354,7 @@
     "node_modules/css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
     },
     "node_modules/css-vendor": {
       "version": "2.0.8",
@@ -2419,7 +2429,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
       "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2444,7 +2453,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
       "dependencies": {
         "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
@@ -2460,14 +2468,12 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/dnd-core": {
       "version": "16.0.1",
@@ -2544,7 +2550,6 @@
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -2560,7 +2565,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2572,7 +2576,6 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
       "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -2581,7 +2584,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2642,7 +2644,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -2655,14 +2656,12 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2690,7 +2689,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -2710,7 +2708,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -2730,8 +2727,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "node_modules/has": {
       "version": "1.0.3",
@@ -2755,8 +2751,7 @@
     "node_modules/hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
@@ -2769,20 +2764,17 @@
     "node_modules/hsl-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
-      "dev": true
+      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A=="
     },
     "node_modules/hsla-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
-      "dev": true
+      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA=="
     },
     "node_modules/html-tags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
       "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -2814,7 +2806,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -2823,8 +2814,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/invariant": {
       "version": "2.2.4",
@@ -2843,7 +2833,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2855,7 +2844,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
       "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
-      "dev": true,
       "dependencies": {
         "css-color-names": "^0.0.4",
         "hex-color-regex": "^1.1.0",
@@ -2880,7 +2868,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2889,7 +2876,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2906,7 +2892,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2962,7 +2947,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -3056,7 +3040,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -3069,14 +3052,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==",
-      "dev": true
+      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg=="
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
@@ -3098,7 +3079,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3107,7 +3087,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -3139,7 +3118,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3151,7 +3129,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
       "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3160,7 +3137,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
       "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       },
@@ -3263,7 +3239,6 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
       "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
       "dependencies": {
         "lodash": "^4.17.21"
       }
@@ -3277,7 +3252,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3302,7 +3276,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
       "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3311,7 +3284,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -3358,7 +3330,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3385,7 +3356,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3730,7 +3700,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
       "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1",
         "postcss": "^8.1.6"
@@ -3766,7 +3735,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
       "dependencies": {
         "lilconfig": "^2.0.5",
         "yaml": "^1.10.2"
@@ -3817,7 +3785,6 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.6"
       },
@@ -4047,7 +4014,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -4099,7 +4065,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
       "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "dev": true,
       "dependencies": {
         "commander": "^8.0.0",
         "glob": "^7.1.7",
@@ -4122,7 +4087,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4142,7 +4106,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -4992,7 +4955,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -5004,7 +4966,6 @@
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
       "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
       "dependencies": {
         "css-unit-converter": "^1.1.1",
         "postcss-value-parser": "^3.3.0"
@@ -5013,8 +4974,7 @@
     "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
     },
     "node_modules/redux": {
       "version": "4.2.0",
@@ -5062,7 +5022,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -5071,20 +5030,17 @@
     "node_modules/rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
-      "dev": true
+      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w=="
     },
     "node_modules/rgba-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
-      "dev": true
+      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg=="
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -5099,7 +5055,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5152,7 +5107,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.3.1"
       }
@@ -5160,8 +5114,7 @@
     "node_modules/simple-swizzle/node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
     "node_modules/source-map": {
       "version": "0.5.7",
@@ -5237,7 +5190,6 @@
       "version": "2.2.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
       "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
-      "dev": true,
       "dependencies": {
         "arg": "^5.0.1",
         "bytes": "^3.0.0",
@@ -5288,7 +5240,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -5303,7 +5254,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -5319,7 +5269,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5328,7 +5277,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5358,7 +5306,6 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
       "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dev": true,
       "dependencies": {
         "rimraf": "^3.0.0"
       },
@@ -5378,7 +5325,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -5414,7 +5360,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -5468,14 +5413,12 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4"
       }
@@ -6097,6 +6040,20 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
+    "@headlessui/react": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz",
+      "integrity": "sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==",
+      "requires": {
+        "client-only": "^0.0.1"
+      }
+    },
+    "@heroicons/react": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
+      "integrity": "sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==",
+      "requires": {}
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -6412,7 +6369,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -6421,14 +6377,12 @@
     "@nodelib/fs.stat": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -6529,6 +6483,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "@tailwindcss/aspect-ratio": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
+      "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
+      "requires": {}
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -6598,14 +6558,12 @@
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
     },
     "acorn-node": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
       "requires": {
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
@@ -6615,8 +6573,7 @@
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -6699,7 +6656,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -6708,8 +6664,7 @@
     "arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "array-tree-filter": {
       "version": "2.1.0",
@@ -6762,20 +6717,17 @@
     "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
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -6785,7 +6737,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -6804,8 +6755,7 @@
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
     },
     "callsites": {
       "version": "3.1.0",
@@ -6815,8 +6765,7 @@
     "camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
     "caniuse-lite": {
       "version": "1.0.30001439",
@@ -6837,7 +6786,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -6853,7 +6801,6 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -6879,7 +6826,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
       "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
       "requires": {
         "color-convert": "^2.0.1",
         "color-string": "^1.9.0"
@@ -6889,7 +6835,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -6897,14 +6842,12 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "color-string": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -6921,8 +6864,7 @@
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
     },
     "compute-scroll-into-view": {
       "version": "2.0.3",
@@ -6932,8 +6874,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "convert-source-map": {
       "version": "1.9.0",
@@ -6979,8 +6920,7 @@
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
-      "dev": true
+      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -6999,8 +6939,7 @@
     "css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
     },
     "css-vendor": {
       "version": "2.0.8",
@@ -7053,8 +6992,7 @@
     "defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
     },
     "delayed-stream": {
       "version": "1.0.0",
@@ -7070,7 +7008,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
       "requires": {
         "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
@@ -7080,14 +7017,12 @@
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "dnd-core": {
       "version": "16.0.1",
@@ -7158,7 +7093,6 @@
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7171,7 +7105,6 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -7182,7 +7115,6 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
       "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -7191,7 +7123,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -7225,7 +7156,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -7235,14 +7165,12 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -7260,7 +7188,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -7274,7 +7201,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.3"
       }
@@ -7288,8 +7214,7 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "has": {
       "version": "1.0.3",
@@ -7307,8 +7232,7 @@
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
     "hoist-non-react-statics": {
       "version": "3.3.2",
@@ -7321,20 +7245,17 @@
     "hsl-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
-      "dev": true
+      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A=="
     },
     "hsla-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
-      "dev": true
+      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA=="
     },
     "html-tags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
-      "dev": true
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg=="
     },
     "hyphenate-style-name": {
       "version": "1.0.4",
@@ -7354,7 +7275,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -7363,8 +7283,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "invariant": {
       "version": "2.2.4",
@@ -7383,7 +7302,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -7392,7 +7310,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
       "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
-      "dev": true,
       "requires": {
         "css-color-names": "^0.0.4",
         "hex-color-regex": "^1.1.0",
@@ -7413,14 +7330,12 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -7433,8 +7348,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "jkroso-type": {
       "version": "1.1.1",
@@ -7475,7 +7389,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
@@ -7562,8 +7475,7 @@
     "lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
-      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
     },
     "lines-and-columns": {
       "version": "1.2.4",
@@ -7573,14 +7485,12 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==",
-      "dev": true
+      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg=="
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -7598,14 +7508,12 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
     "micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "requires": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -7628,7 +7536,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7636,14 +7543,12 @@
     "minimist": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
-      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "modern-normalize": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA=="
     },
     "ms": {
       "version": "2.1.2",
@@ -7697,7 +7602,6 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
       "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
       "requires": {
         "lodash": "^4.17.21"
       }
@@ -7710,8 +7614,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -7726,14 +7629,12 @@
     "object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
-      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
-      "dev": true
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
     },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -7770,8 +7671,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
     },
     "path-parse": {
       "version": "1.0.7",
@@ -7791,8 +7691,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "popper.js": {
       "version": "1.16.1-lts",
@@ -7964,7 +7863,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
       "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
-      "dev": true,
       "requires": {
         "camelcase-css": "^2.0.1",
         "postcss": "^8.1.6"
@@ -7983,7 +7881,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
       "requires": {
         "lilconfig": "^2.0.5",
         "yaml": "^1.10.2"
@@ -8005,7 +7902,6 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
       "requires": {
         "postcss-selector-parser": "^6.0.6"
       }
@@ -8142,8 +8038,7 @@
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
-      "dev": true
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A=="
     },
     "prop-types": {
       "version": "15.8.1",
@@ -8185,7 +8080,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
       "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "dev": true,
       "requires": {
         "commander": "^8.0.0",
         "glob": "^7.1.7",
@@ -8202,14 +8096,12 @@
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
     "quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
     "raf-schd": {
       "version": "4.0.3",
@@ -8780,7 +8672,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -8789,7 +8680,6 @@
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
       "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
       "requires": {
         "css-unit-converter": "^1.1.1",
         "postcss-value-parser": "^3.3.0"
@@ -8798,8 +8688,7 @@
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
         }
       }
     },
@@ -8839,26 +8728,22 @@
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
-      "dev": true
+      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w=="
     },
     "rgba-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
-      "dev": true
+      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg=="
     },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "requires": {
         "glob": "^7.1.3"
       }
@@ -8867,7 +8752,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -8903,7 +8787,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -8911,8 +8794,7 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         }
       }
     },
@@ -8961,7 +8843,6 @@
       "version": "2.2.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
       "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
-      "dev": true,
       "requires": {
         "arg": "^5.0.1",
         "bytes": "^3.0.0",
@@ -9001,7 +8882,6 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -9010,7 +8890,6 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -9019,14 +8898,12 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -9052,7 +8929,6 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
       "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dev": true,
       "requires": {
         "rimraf": "^3.0.0"
       }
@@ -9066,7 +8942,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -9095,8 +8970,7 @@
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
     },
     "update-browserslist-db": {
       "version": "1.0.10",
@@ -9129,14 +9003,12 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/package.json b/package.json
index 1d42736..558e0f9 100755
--- a/package.json
+++ b/package.json
@@ -14,8 +14,11 @@
     "@dnd-kit/sortable": "^7.0.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@headlessui/react": "^1.7.7",
+    "@heroicons/react": "^2.0.13",
     "@material-ui/core": "^4.12.4",
     "@mui/material": "^5.11.1",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "antd": "^5.1.0",
     "axios": "^1.2.1",
     "caniuse-lite": "^1.0.30001439",
diff --git a/pages/index.js b/pages/index.js
index 4a8aa2d..1da8590 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,723 +1,313 @@
-import React from "react";
-export default function IndexPage() {
-    return (
-        <>
-            <div className="mt-6 md:mt-14">
-                <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-1.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party - INDEX</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-2.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-3.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-4.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-8.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-9.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-10.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="/events-inner">
-                        <div className="bg-white pb-6 shadow-xl max-w-md">
-                            <img className="w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-11.png" alt="costume-party" />
-                            <div className="mt-4 pl-4">
-                                <p className="w-2/4 text-base font-bold leading-normal text-gray-800">New Years Costume Party</p>
-                            </div>
-                            <div className="mt-4 flex items-center pl-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <rect x="3.33337" y="4.16699" width="13.3333" height="13.3333" rx={2} stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M13.3333 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M6.66667 2.5V5.83333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M3.33337 9.16667H16.6667" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M9.16663 12.4997H9.99996" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 12.5V15" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">14th September 2020</p>
-                            </div>
-                            <div className="mt-4 pl-4 flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" fill="none">
-                                    <circle cx={10} cy={10} r="7.5" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    <path d="M10 5.83301V9.99967L12.5 12.4997" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <p className="text-sm leading-none text-gray-700 ml-2">Tuesday, 9:00 pm - 11:00 pm</p>
-                            </div>
-                            <div className="mt-4 pl-4">
-                                <p className="text-xs leading-3 text-gray-700">Attended by</p>
-                            </div>
-                            <div className="mt-3 pl-4 flex w-full items-center justify-between">
-                                <div className="flex items-center relative">
-                                    <div className="w-6 h-6 rounded-full flex justify-center items-center">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-5.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-6.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center items-center -ml-2">
-                                        <img className="object-cover object-center h-full w-full" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/events-7.png" alt="profile" />
-                                    </div>
-                                    <div className="w-6 h-6  rounded-full flex justify-center border-2 border-white bg-red-400 items-center -ml-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={8} height={8} viewBox="0 0 8 8" fill="none">
-                                            <path d="M4.557 0.838V3.827H7.406V4.772H4.557V7.782H3.535V4.772H0.7V3.827H3.535V0.838H4.557Z" fill="white" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div className="py-2 px-5 flex justify-center items-center bg-gray-800">
-                                    <p className="text-sm font-bold leading-none text-white">$ 45</p>
-                                </div>
-                            </div>
-                            <div className="mt-5 pl-4">
-                                <div className="flex items-center">
-                                    <p className="text-xs leading-3 text-green-500 mr-2">Available</p>
-                                    <div className="pl-2 border-l-2 border-gray-100">
-                                        <p className="text-xs leading-3 text-green-500">86/90 seats booked</p>
-                                    </div>
-                                </div>
-                                <div className="mt-4 flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <path d="M6.66663 9.33342C7.1055 9.78135 7.7062 10.0338 8.33329 10.0338C8.96039 10.0338 9.56109 9.78135 9.99996 9.33342L12.6666 6.66676C13.5871 5.74628 13.5871 4.2539 12.6666 3.33342C11.7462 2.41295 10.2538 2.41295 9.33329 3.33342L8.99996 3.66676" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M9.3333 6.66665C8.89443 6.21872 8.29373 5.96631 7.66663 5.96631C7.03954 5.96631 6.43884 6.21872 5.99997 6.66665L3.3333 9.33332C2.41283 10.2538 2.41283 11.7462 3.3333 12.6666C4.25377 13.5871 5.74616 13.5871 6.66663 12.6666L6.99997 12.3333" stroke="#718096" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                    <p className="ml-2 text-xs leading-3 text-gray-600">Veevents.com/cosutmeparty</p>
-                                    <svg className="ml-3.5 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                        <rect x="5.33331" y="5.33301" width={8} height={8} rx="1.33333" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                        <path d="M10.6667 5.33366V4.00033C10.6667 3.26395 10.0697 2.66699 9.33335 2.66699H4.00002C3.26364 2.66699 2.66669 3.26395 2.66669 4.00033V9.33366C2.66669 10.07 3.26364 10.667 4.00002 10.667H5.33335" stroke="#718096" strokeLinecap="round" strokeLinejoin="round" />
-                                    </svg>
-                                </div>
-                                <div className="flex items-center mt-4">
-                                    <button className="py-2 px-3 bg-gradient-to-br  from-red-400 to-red-500 hover:from-red-500 hover:to-red-400 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx="4.5" cy="3.5" r={2} stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M1.5 10.5V9.5C1.5 8.39543 2.39543 7.5 3.5 7.5H5.5C6.60457 7.5 7.5 8.39543 7.5 9.5V10.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M8 5.125C7.79289 5.125 7.625 5.29289 7.625 5.5C7.625 5.70711 7.79289 5.875 8 5.875V5.125ZM11 5.875C11.2071 5.875 11.375 5.70711 11.375 5.5C11.375 5.29289 11.2071 5.125 11 5.125V5.875ZM9.875 4C9.875 3.79289 9.70711 3.625 9.5 3.625C9.29289 3.625 9.125 3.79289 9.125 4H9.875ZM9.125 7C9.125 7.20711 9.29289 7.375 9.5 7.375C9.70711 7.375 9.875 7.20711 9.875 7H9.125ZM8 5.875H11V5.125H8V5.875ZM9.125 4V7H9.875V4H9.125Z" fill="white" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Book a Seat</p>
-                                    </button>
-                                    <button className="py-2 ml-3 px-3 bg-gray-700 hover:bg-gray-600 ease-in duration-150 rounded-sm flex items-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                            <circle cx={3} cy={6} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={3} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <circle cx={9} cy={9} r="1.5" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 5.3499L7.64998 3.6499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            <path d="M4.34998 6.6499L7.64998 8.3499" stroke="white" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                        </svg>
-                                        <p className="text-xs leading-3 text-white ml-1">Share Event</p>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </a>
+import { useState } from 'react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { RadioGroup } from '@headlessui/react'
+
+const product = {
+  name: 'Basic Tee 6-Pack',
+  price: '$192',
+  href: '#',
+  breadcrumbs: [
+    { id: 1, name: 'Men', href: '#' },
+    { id: 2, name: 'Clothing', href: '#' },
+  ],
+  images: [
+    {
+      src: 'https://tailwindui.com/img/ecommerce-images/product-page-02-secondary-product-shot.jpg',
+      alt: 'Two each of gray, white, and black shirts laying flat.',
+    },
+    {
+      src: 'https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg',
+      alt: 'Model wearing plain black basic tee.',
+    },
+    {
+      src: 'https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg',
+      alt: 'Model wearing plain gray basic tee.',
+    },
+    {
+      src: 'https://tailwindui.com/img/ecommerce-images/product-page-02-featured-product-shot.jpg',
+      alt: 'Model wearing plain white basic tee.',
+    },
+  ],
+  colors: [
+    { name: 'White', class: 'bg-white', selectedClass: 'ring-gray-400' },
+    { name: 'Gray', class: 'bg-gray-200', selectedClass: 'ring-gray-400' },
+    { name: 'Black', class: 'bg-gray-900', selectedClass: 'ring-gray-900' },
+  ],
+  sizes: [
+    { name: 'XXS', inStock: false },
+    { name: 'XS', inStock: true },
+    { name: 'S', inStock: true },
+    { name: 'M', inStock: true },
+    { name: 'L', inStock: true },
+    { name: 'XL', inStock: true },
+    { name: '2XL', inStock: true },
+    { name: '3XL', inStock: true },
+  ],
+  description:
+    'The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.',
+  highlights: [
+    'Hand cut and sewn locally',
+    'Dyed with our proprietary colors',
+    'Pre-washed & pre-shrunk',
+    'Ultra-soft 100% cotton',
+  ],
+  details:
+    'The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.',
+}
+const reviews = { href: '#', average: 4, totalCount: 117 }
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+  const [selectedSize, setSelectedSize] = useState(product.sizes[2])
+
+  return (
+    <div className="bg-white">
+      <div className="pt-6">
+        <nav aria-label="Breadcrumb">
+          <ol role="list" className="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+            {product.breadcrumbs.map((breadcrumb) => (
+              <li key={breadcrumb.id}>
+                <div className="flex items-center">
+                  <a href={breadcrumb.href} className="mr-2 text-sm font-medium text-gray-900">
+                    {breadcrumb.name}
+                  </a>
+                  <svg
+                    width={16}
+                    height={20}
+                    viewBox="0 0 16 20"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                    className="h-5 w-4 text-gray-300"
+                  >
+                    <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
+                  </svg>
                 </div>
+              </li>
+            ))}
+            <li className="text-sm">
+              <a href={product.href} aria-current="page" className="font-medium text-gray-500 hover:text-gray-600">
+                {product.name}
+              </a>
+            </li>
+          </ol>
+        </nav>
+
+        {/* Image gallery */}
+        <div className="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8">
+          <div className="aspect-w-3 aspect-h-4 hidden overflow-hidden rounded-lg lg:block">
+            <img
+              src={product.images[0].src}
+              alt={product.images[0].alt}
+              className="h-full w-full object-cover object-center"
+            />
+          </div>
+          <div className="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
+            <div className="aspect-w-3 aspect-h-2 overflow-hidden rounded-lg">
+              <img
+                src={product.images[1].src}
+                alt={product.images[1].alt}
+                className="h-full w-full object-cover object-center"
+              />
             </div>
-        </>
-    );
-}
+            <div className="aspect-w-3 aspect-h-2 overflow-hidden rounded-lg">
+              <img
+                src={product.images[2].src}
+                alt={product.images[2].alt}
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
+          </div>
+          <div className="aspect-w-4 aspect-h-5 sm:overflow-hidden sm:rounded-lg lg:aspect-w-3 lg:aspect-h-4">
+            <img
+              src={product.images[3].src}
+              alt={product.images[3].alt}
+              className="h-full w-full object-cover object-center"
+            />
+          </div>
+        </div>
+
+        {/* Product info */}
+        <div className="mx-auto max-w-2xl px-4 pt-10 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
+          <div className="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
+            <h1 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">{product.name}</h1>
+          </div>
+
+          {/* Options */}
+          <div className="mt-4 lg:row-span-3 lg:mt-0">
+            <h2 className="sr-only">Product information</h2>
+            <p className="text-3xl tracking-tight text-gray-900">{product.price}</p>
+
+            {/* Reviews */}
+            <div className="mt-6">
+              <h3 className="sr-only">Reviews</h3>
+              <div className="flex items-center">
+                <div className="flex items-center">
+                  {[0, 1, 2, 3, 4].map((rating) => (
+                    <StarIcon
+                      key={rating}
+                      className={classNames(
+                        reviews.average > rating ? 'text-gray-900' : 'text-gray-200',
+                        'h-5 w-5 flex-shrink-0'
+                      )}
+                      aria-hidden="true"
+                    />
+                  ))}
+                </div>
+                <p className="sr-only">{reviews.average} out of 5 stars</p>
+                <a href={reviews.href} className="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500">
+                  {reviews.totalCount} reviews
+                </a>
+              </div>
+            </div>
+
+            <form className="mt-10">
+              {/* Colors */}
+              <div>
+                <h3 className="text-sm font-medium text-gray-900">Color</h3>
+
+                <RadioGroup value={selectedColor} onChange={setSelectedColor} className="mt-4">
+                  <RadioGroup.Label className="sr-only"> Choose a color </RadioGroup.Label>
+                  <div className="flex items-center space-x-3">
+                    {product.colors.map((color) => (
+                      <RadioGroup.Option
+                        key={color.name}
+                        value={color}
+                        className={({ active, checked }) =>
+                          classNames(
+                            color.selectedClass,
+                            active && checked ? 'ring ring-offset-1' : '',
+                            !active && checked ? 'ring-2' : '',
+                            '-m-0.5 relative p-0.5 rounded-full flex items-center justify-center cursor-pointer focus:outline-none'
+                          )
+                        }
+                      >
+                        <RadioGroup.Label as="span" className="sr-only">
+                          {' '}
+                          {color.name}{' '}
+                        </RadioGroup.Label>
+                        <span
+                          aria-hidden="true"
+                          className={classNames(
+                            color.class,
+                            'h-8 w-8 border border-black border-opacity-10 rounded-full'
+                          )}
+                        />
+                      </RadioGroup.Option>
+                    ))}
+                  </div>
+                </RadioGroup>
+              </div>
+
+              {/* Sizes */}
+              <div className="mt-10">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-medium text-gray-900">Size</h3>
+                  <a href="#" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
+                    Size guide
+                  </a>
+                </div>
+
+                <RadioGroup value={selectedSize} onChange={setSelectedSize} className="mt-4">
+                  <RadioGroup.Label className="sr-only"> Choose a size </RadioGroup.Label>
+                  <div className="grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-4">
+                    {product.sizes.map((size) => (
+                      <RadioGroup.Option
+                        key={size.name}
+                        value={size}
+                        disabled={!size.inStock}
+                        className={({ active }) =>
+                          classNames(
+                            size.inStock
+                              ? 'bg-white shadow-sm text-gray-900 cursor-pointer'
+                              : 'bg-gray-50 text-gray-200 cursor-not-allowed',
+                            active ? 'ring-2 ring-indigo-500' : '',
+                            'group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6'
+                          )
+                        }
+                      >
+                        {({ active, checked }) => (
+                          <>
+                            <RadioGroup.Label as="span">{size.name}</RadioGroup.Label>
+                            {size.inStock ? (
+                              <span
+                                className={classNames(
+                                  active ? 'border' : 'border-2',
+                                  checked ? 'border-indigo-500' : 'border-transparent',
+                                  'pointer-events-none absolute -inset-px rounded-md'
+                                )}
+                                aria-hidden="true"
+                              />
+                            ) : (
+                              <span
+                                aria-hidden="true"
+                                className="pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200"
+                              >
+                                <svg
+                                  className="absolute inset-0 h-full w-full stroke-2 text-gray-200"
+                                  viewBox="0 0 100 100"
+                                  preserveAspectRatio="none"
+                                  stroke="currentColor"
+                                >
+                                  <line x1={0} y1={100} x2={100} y2={0} vectorEffect="non-scaling-stroke" />
+                                </svg>
+                              </span>
+                            )}
+                          </>
+                        )}
+                      </RadioGroup.Option>
+                    ))}
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <button
+                type="submit"
+                className="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-3 px-8 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                Add to bag
+              </button>
+            </form>
+          </div>
+
+          <div className="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pb-16 lg:pr-8">
+            {/* Description and details */}
+            <div>
+              <h3 className="sr-only">Description</h3>
+
+              <div className="space-y-6">
+                <p className="text-base text-gray-900">{product.description}</p>
+              </div>
+            </div>
+
+            <div className="mt-10">
+              <h3 className="text-sm font-medium text-gray-900">Highlights</h3>
+
+              <div className="mt-4">
+                <ul role="list" className="list-disc space-y-2 pl-4 text-sm">
+                  {product.highlights.map((highlight) => (
+                    <li key={highlight} className="text-gray-400">
+                      <span className="text-gray-600">{highlight}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-10">
+              <h2 className="text-sm font-medium text-gray-900">Details</h2>
+
+              <div className="mt-4 space-y-6">
+                <p className="text-sm text-gray-600">{product.details}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/pages/submit.js b/pages/submit.js
index 432a209..ee34c28 100755
--- a/pages/submit.js
+++ b/pages/submit.js
@@ -1,604 +1,464 @@
-import React, { useEffect, useState } from "react";
-import Head from "next/head";
-export default function AnalyticsPage() {
-    const [show, Setshow] = useState(true);
-    useEffect(() => {
-        const myBarChart2 = new Chart(document.getElementById("chartjs2"), {
-            type: "pie",
-            data: { labels: ["Accepted", "Rejected", "Pending", "Approved"], datasets: [{ data: [60, 12, 12, 25], fill: false, backgroundColor: ["#4880FF", "#FF5660", "#FFC400", "#24CCB8"] }] },
-            options: {
-                legend: {
-                    position: false,
-                },
-            },
-        });
-        const chart = new Chart(document.getElementById("myChart"), {
-            type: "line",
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July", "Aug", "Sep", "Nov", "Dec"],
-                datasets: [
-                    {
-                        label: "16 Mar 2018",
-                        borderColor: "#4A5568",
-                        data: [600, 400, 620, 300, 200, 600, 230, 300, 200, 200, 100, 1200],
-                        fill: false,
-                        pointBackgroundColor: "#4A5568",
-                        borderWidth: "3",
-                        pointBorderWidth: "4",
-                        pointHoverRadius: "6",
-                        pointHoverBorderWidth: "8",
-                        pointHoverBorderColor: "rgb(74,85,104,0.2)",
-                    },
-                ],
-            },
-            options: {
-                legend: {
-                    position: false,
-                },
-                scales: {
-                    yAxes: [
-                        {
-                            gridLines: {
-                                display: false,
-                            },
-                            display: false,
-                        },
-                    ],
-                },
-            },
-        });
-        const myBarChart = new Chart(document.getElementById("chartjs1"), {
-            type: "bar",
-            data: { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [{ data: [25, 55, 100, 75, 60, 60, 120, 150, 40, 0], fill: false, backgroundColor: "rgba(246,173,85,1)" }] },
-            options: {
-                /*  scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, */
-                scales: {
-                    yAxes: [
-                        {
-                            gridLines: {
-                                display: false,
-                            },
-                        },
-                    ],
-                    xAxes: [
-                        {
-                            gridLines: {
-                                display: false,
-                            },
-                        },
-                    ],
-                },
-
-                legend: {
-                    position: false,
-                },
-            },
-        });
-    });
-    return (
-        <>
-            <Head>
-                <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
-            </Head>
-            <div className="mt-6 md:mt-14 w-full">
-                <div className="w-full">
-                    <div className="xl:flex justify-between w-full items-stretch">
-                        <div className="xl:w-1/3 w-full pb-16 md:pb-0 px-5 py-5 pb-10 shadow-md bg-gradient-to-br from-red-400 to-red-500 rounded-sm flex flex-col justify-between">
-                            <div className="py-3 pl-2 xl:py-6 xl:pl-4 w-full bg-red-400">
-                                <h2 className="text-white text-xl xl:text-4xl">132</h2>
-                                <h3 className="text-white text-base xl:text-xl mt-2 xl:mt-3">Total Events</h3>
-                            </div>
-                            <div className="w-full bg-transparent pt-6">
-                                <h2 className="text-white text-xl xl:text-4xl">$431k</h2>
-                                <h3 className="text-white text-base xl:text-xl mt-2 xl:mt-3">Total Revenue</h3>
-                            </div>
-                            <div className="w-full bg-transparent pt-6">
-                                <h2 className="text-white text-xl xl:text-4xl">2349</h2>
-                                <h3 className="text-white text-base xl:text-xl mt-2 xl:mt-3">Tickets Sold</h3>
-                            </div>
-                            <div className="w-full bg-transparent pt-6 pb-5">
-                                <h2 className="text-white text-xl xl:text-4xl">7,564</h2>
-                                <h3 className="text-white text-base xl:text-xl mt-2 xl:mt-3">Total Engagement</h3>
-                            </div>
-                        </div>
-                        <div className="xl:w-2/3 pl-0 xl:pl-8 mt-10 xl:mt-0 w-full">
-                            <div className="flex flex-col justify-between h-full">
-                                <div>
-                                    <div className="lg:flex w-full justify-between">
-                                        <h3 className="text-gray-600 leading-5 text-base md:text-xl font-bold">Selling Overview</h3>
-                                        <div className="flex items-center justify-between lg:justify-start mt-2 md:mt-4 lg:mt-0">
-                                            <div className="flex items-center">
-                                                <button className="py-2 px-4 bg-gray-100 focus:outline-none ease-in duration-150 text-xs text-gray-600 hover:bg-gray-200">Dollars</button>
-                                                <button className="py-2 px-4 bg-red-500 focus:outline-none text-white ease-in duration-150 text-xs hover:bg-red-600">Tickets</button>
-                                            </div>
-                                            <div className="lg:ml-14">
-                                                <div className="bg-gray-100 ease-in duration-150 hover:bg-gray-200 pb-2 pt-1 px-3 rounded-sm">
-                                                    <select className="text-xs text-gray-600 bg-transparent focus:outline-none">
-                                                        <option className="leading-1">Year</option>
-                                                        <option className="leading-1">2020</option>
-                                                        <option className="leading-1">2019</option>
-                                                    </select>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-end mt-6">
-                                        <h3 className="text-red-500 leading-5 text-lg md:text-2xl">$65,875</h3>
-                                        <div className="flex items-center md:ml-4 ml-1">
-                                            <p className="text-green-500 text-xs md:text-base">17%</p>
-                                            <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
-                                                <path d="M6 2.5V9.5" stroke="#48BB78" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                                <path d="M8 4.5L6 2.5" stroke="#48BB78" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                                <path d="M4 4.5L6 2.5" stroke="#48BB78" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="mt-6">
-                                    <canvas id="myChart" width={1025} height={386} />
-                                </div>
-                            </div>
-                        </div>
+import { useState } from 'react'
+import { RadioGroup } from '@headlessui/react'
+import { CheckCircleIcon, TrashIcon } from '@heroicons/react/20/solid'
+
+const products = [
+  {
+    id: 1,
+    title: 'Basic Tee',
+    href: '#',
+    price: '$32.00',
+    color: 'Black',
+    size: 'Large',
+    imageSrc: 'https://tailwindui.com/img/ecommerce-images/checkout-page-02-product-01.jpg',
+    imageAlt: "Front of men's Basic Tee in black.",
+  },
+  // More products...
+]
+const deliveryMethods = [
+  { id: 1, title: 'Standard', turnaround: '4–10 business days', price: '$5.00' },
+  { id: 2, title: 'Express', turnaround: '2–5 business days', price: '$16.00' },
+]
+const paymentMethods = [
+  { id: 'credit-card', title: 'Credit card' },
+  { id: 'paypal', title: 'PayPal' },
+  { id: 'etransfer', title: 'eTransfer' },
+]
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedDeliveryMethod, setSelectedDeliveryMethod] = useState(deliveryMethods[0])
+
+  return (
+    <div className="bg-gray-50">
+      <div className="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
+        <h2 className="sr-only">Checkout</h2>
+
+        <form className="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16">
+          <div>
+            <div>
+              <h2 className="text-lg font-medium text-gray-900">Contact information</h2>
+
+              <div className="mt-4">
+                <label htmlFor="email-address" className="block text-sm font-medium text-gray-700">
+                  Email address
+                </label>
+                <div className="mt-1">
+                  <input
+                    type="email"
+                    id="email-address"
+                    name="email-address"
+                    autoComplete="email"
+                    className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-10 border-t border-gray-200 pt-10">
+              <h2 className="text-lg font-medium text-gray-900">Shipping information</h2>
+
+              <div className="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
+                <div>
+                  <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
+                    First name
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      id="first-name"
+                      name="first-name"
+                      autoComplete="given-name"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
+                    Last name
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      id="last-name"
+                      name="last-name"
+                      autoComplete="family-name"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="sm:col-span-2">
+                  <label htmlFor="company" className="block text-sm font-medium text-gray-700">
+                    Company
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="company"
+                      id="company"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="sm:col-span-2">
+                  <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+                    Address
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="address"
+                      id="address"
+                      autoComplete="street-address"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="sm:col-span-2">
+                  <label htmlFor="apartment" className="block text-sm font-medium text-gray-700">
+                    Apartment, suite, etc.
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="apartment"
+                      id="apartment"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="city" className="block text-sm font-medium text-gray-700">
+                    City
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="city"
+                      id="city"
+                      autoComplete="address-level2"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="country" className="block text-sm font-medium text-gray-700">
+                    Country
+                  </label>
+                  <div className="mt-1">
+                    <select
+                      id="country"
+                      name="country"
+                      autoComplete="country-name"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    >
+                      <option>United States</option>
+                      <option>Canada</option>
+                      <option>Mexico</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="region" className="block text-sm font-medium text-gray-700">
+                    State / Province
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="region"
+                      id="region"
+                      autoComplete="address-level1"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="postal-code" className="block text-sm font-medium text-gray-700">
+                    Postal code
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="postal-code"
+                      id="postal-code"
+                      autoComplete="postal-code"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="sm:col-span-2">
+                  <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
+                    Phone
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="phone"
+                      id="phone"
+                      autoComplete="tel"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-10 border-t border-gray-200 pt-10">
+              <RadioGroup value={selectedDeliveryMethod} onChange={setSelectedDeliveryMethod}>
+                <RadioGroup.Label className="text-lg font-medium text-gray-900">Delivery method</RadioGroup.Label>
+
+                <div className="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
+                  {deliveryMethods.map((deliveryMethod) => (
+                    <RadioGroup.Option
+                      key={deliveryMethod.id}
+                      value={deliveryMethod}
+                      className={({ checked, active }) =>
+                        classNames(
+                          checked ? 'border-transparent' : 'border-gray-300',
+                          active ? 'ring-2 ring-indigo-500' : '',
+                          'relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none'
+                        )
+                      }
+                    >
+                      {({ checked, active }) => (
+                        <>
+                          <span className="flex flex-1">
+                            <span className="flex flex-col">
+                              <RadioGroup.Label as="span" className="block text-sm font-medium text-gray-900">
+                                {deliveryMethod.title}
+                              </RadioGroup.Label>
+                              <RadioGroup.Description
+                                as="span"
+                                className="mt-1 flex items-center text-sm text-gray-500"
+                              >
+                                {deliveryMethod.turnaround}
+                              </RadioGroup.Description>
+                              <RadioGroup.Description as="span" className="mt-6 text-sm font-medium text-gray-900">
+                                {deliveryMethod.price}
+                              </RadioGroup.Description>
+                            </span>
+                          </span>
+                          {checked ? <CheckCircleIcon className="h-5 w-5 text-indigo-600" aria-hidden="true" /> : null}
+                          <span
+                            className={classNames(
+                              active ? 'border' : 'border-2',
+                              checked ? 'border-indigo-500' : 'border-transparent',
+                              'pointer-events-none absolute -inset-px rounded-lg'
+                            )}
+                            aria-hidden="true"
+                          />
+                        </>
+                      )}
+                    </RadioGroup.Option>
+                  ))}
+                </div>
+              </RadioGroup>
+            </div>
+
+            {/* Payment
+            <div className="mt-10 border-t border-gray-200 pt-10">
+              <h2 className="text-lg font-medium text-gray-900">Payment</h2>
+
+              <fieldset className="mt-4">
+                <legend className="sr-only">Payment type</legend>
+                <div className="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+                  {paymentMethods.map((paymentMethod, paymentMethodIdx) => (
+                    <div key={paymentMethod.id} className="flex items-center">
+                      {paymentMethodIdx === 0 ? (
+                        <input
+                          id={paymentMethod.id}
+                          name="payment-type"
+                          type="radio"
+                          defaultChecked
+                          className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        />
+                      ) : (
+                        <input
+                          id={paymentMethod.id}
+                          name="payment-type"
+                          type="radio"
+                          className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        />
+                      )}
+
+                      <label htmlFor={paymentMethod.id} className="ml-3 block text-sm font-medium text-gray-700">
+                        {paymentMethod.title}
+                      </label>
                     </div>
+                  ))}
+                </div>
+              </fieldset>
+
+              <div className="mt-6 grid grid-cols-4 gap-y-6 gap-x-4">
+                <div className="col-span-4">
+                  <label htmlFor="card-number" className="block text-sm font-medium text-gray-700">
+                    Card number
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      id="card-number"
+                      name="card-number"
+                      autoComplete="cc-number"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="col-span-4">
+                  <label htmlFor="name-on-card" className="block text-sm font-medium text-gray-700">
+                    Name on card
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      id="name-on-card"
+                      name="name-on-card"
+                      autoComplete="cc-name"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="col-span-3">
+                  <label htmlFor="expiration-date" className="block text-sm font-medium text-gray-700">
+                    Expiration date (MM/YY)
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="expiration-date"
+                      id="expiration-date"
+                      autoComplete="cc-exp"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
                 </div>
-                <div className="mt-6 md:mt-14">
-                    <div className="w-full">
-                        <div className="xl:flex justify-between w-full">
-                            <div className="xl:w-1/3 2xl:flex w-full ">
-                                <div className="w-full flex flex-col justify-between">
-                                    <div className="flex w-full justify-between relative md:static">
-                                        <h4 className="text-gray-600 font-bold text-base md:text-xl">Registrations</h4>
-                                        <div className="static sm:relative">
-                                            <div onClick={() => Setshow(!show)} className="py-2 px-3 cursor-pointer flex items-center flex-no-wrap bg-gray-100 ease-in duration-150 hover:bg-gray-200 relative w-auto">
-                                                <p className="text-gray-600 mr-2 text-xs">12 Aug - 19 Aug</p>
-                                                <div>
-                                                    <button>
-                                                        <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none">
-                                                            <rect x="2.66666" y="3.33337" width="10.6667" height="10.6667" rx="1.33333" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                            <path d="M10.6667 2V4.66667" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                            <path d="M5.33333 2V4.66667" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                            <path d="M2.66666 7.33333H13.3333" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                            <path d="M7.33334 9.99996H8.00001" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                            <path d="M7.99999 10V12" stroke="#F56565" strokeLinecap="round" strokeLinejoin="round" />
-                                                        </svg>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                            <div className={show ? "hidden" : "w-full h-full"}>
-                                                <div onClick={() => Setshow(!show)} className="fixed w-full h-full inset-0 bg-transparent z-40" />
-                                                <div className="bg-white absolute -ml-44 sm:-ml-64 xl:ml-0 px-6  py-6 z-50 shadow-xl">
-                                                    <p className="text-base text-gray-700">June</p>
-                                                    <table className="mt-6">
-                                                        <thead>
-                                                            <tr>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Mon</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Tue</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Wed</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Thu</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Fri</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Sat</p>
-                                                                    </div>
-                                                                </th>
-                                                                <th>
-                                                                    <div className="w-full flex justify-center">
-                                                                        <p className="opacity-50 text-xs font-bold text-center text-gray-600">Sun</p>
-                                                                    </div>
-                                                                </th>
-                                                            </tr>
-                                                        </thead>
-                                                        <tbody>
-                                                            <tr>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center"></div>
-                                                                </td>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center"></div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center"></div>
-                                                                </td>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">1</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">2</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-red-600">3</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td className="pt-6">
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-red-600">4</p>
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-gray-700">5</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-gray-700">6</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-gray-700">7</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center bg-red-300">
-                                                                        <p className="text-sm text-gray-700">8</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="w-full h-full">
-                                                                        <div className="w-12 h-12 flex w-full rounded-full justify-center items-center cursor-pointer bg-red-500">
-                                                                            <p className="text-sm font-bold text-white">9</p>
-                                                                        </div>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">10</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">11</p>
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">12</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">13</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">14</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">15</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="px-4 py-2 flex w-full  justify-center">
-                                                                        <p className="text-sm text-gray-700">16</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">17</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">18</p>
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">19</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">20</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">21</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">22</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="px-4 py-2 flex w-full  justify-center">
-                                                                        <p className="text-sm text-gray-700">23</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">24</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-red-600">25</p>
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">26</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">27</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">28</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="sm:px-4 px-2 py-2 flex w-full justify-center">
-                                                                        <p className="text-sm text-gray-700">29</p>
-                                                                    </div>
-                                                                </td>
-                                                                <td>
-                                                                    <div className="px-4 py-2 flex w-full  justify-center">
-                                                                        <p className="text-sm text-gray-700">30</p>
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="mt-9">
-                                        <canvas id="chartjs1" height={180} />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="xl:w-2/3 w-full mt-10 xl:mt-0 xl:pl-8 2xl:pl-20">
-                                <div className="xl:flex justify-between">
-                                    <div class="w-full">
-                                        <p class="text-base md:text-xl font-bold leading-tight text-gray-600">Upcoming events</p>
-                                        <div class="flex items-center">
-                                            <div class="w-full -ml-1.5 overflow-x-scroll 2xl:overflow-x-hidden overflow-y-hidden md:mt-8 mt-4">
-                                                <table class="w-full relative alignTop">
-                                                    <tbody>
-                                                        <tr class="w-full">
-                                                            <td class="xl:w-auto">
-                                                                <svg class="relative" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                                                                    <circle cx="5" cy="5" r="5" fill="#718096"></circle>
-                                                                </svg>
-                                                                <div class="h-20 sm:h-16 z-0 absolute border-l border-gray-200 ml-1"></div>
-                                                            </td>
-                                                            <td class="xl:w-auto">
-                                                                <p class="text-xs text-gray-700 pl-3">17&nbsp;Jun</p>
-                                                            </td>
-                                                            <td class="pl-8 w-1/4 xl:w-auto">
-                                                                <div class="flex flex-col items-end">
-                                                                    <p class="text-xs font-bold text-gray-700">Lake Casandra</p>
-                                                                    <p class="text-xs leading-3 text-gray-400 mt-1">05:49AM</p>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-4 w-1/2 xl:w-auto">
-                                                                <div class="flex items-center pl-4 border-l border-gray-100">
-                                                                    <div>
-                                                                        <p class="text-xs font-bold text-gray-700">80/200 tickets sold</p>
-                                                                        <p class="text-xs leading-3 mt-1 text-gray-400">Starting at $53</p>
-                                                                    </div>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-8 w-1/4 xl:w-auto">
-                                                                <div class="flex items-center">
-                                                                    <img src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <svg class="relative" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                                                                    <circle cx="5" cy="5" r="5" fill="#718096"></circle>
-                                                                </svg>
-                                                                <div class="h-20 sm:h-16 z-0 absolute border-l border-gray-200 ml-1"></div>
-                                                            </td>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <p class="text-xs text-gray-700 pl-3">22 Jun</p>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex flex-col items-end">
-                                                                    <p class="text-xs font-bold text-gray-700">Lake Casandra</p>
-                                                                    <p class="text-xs leading-3 text-gray-400 mt-1">05:49AM</p>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-4 pt-8 w-1/2 xl:w-auto">
-                                                                <div class="flex items-center pl-4 border-l border-gray-100">
-                                                                    <div>
-                                                                        <p class="text-xs font-bold text-gray-700">80/200 tickets sold</p>
-                                                                        <p class="text-xs leading-3 mt-1 text-gray-400">Starting at $53</p>
-                                                                    </div>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex items-center">
-                                                                    <img src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <svg class="relative" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                                                                    <circle cx="5" cy="5" r="5" fill="#718096"></circle>
-                                                                </svg>
-                                                                <div class="h-20 sm:h-16 z-0 absolute border-l border-gray-200 ml-1"></div>
-                                                            </td>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <p class="text-xs text-gray-700 pl-3">22 Jun</p>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex flex-col items-end">
-                                                                    <p class="text-xs font-bold text-gray-700">Lake Casandra</p>
-                                                                    <p class="text-xs leading-3 text-gray-400 mt-1">05:49AM</p>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-4 pt-8 w-1/2 xl:w-auto">
-                                                                <div class="flex items-center pl-4 border-l border-gray-100">
-                                                                    <div>
-                                                                        <p class="text-xs font-bold text-gray-700">80/200 tickets sold</p>
-                                                                        <p class="text-xs leading-3 mt-1 text-gray-400">Starting at $53</p>
-                                                                    </div>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex items-center">
-                                                                    <img src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <svg class="relative" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                                                                    <circle cx="5" cy="5" r="5" fill="#718096"></circle>
-                                                                </svg>
-                                                                <div class="h-20 sm:h-16 z-0 absolute border-l border-gray-200 ml-1"></div>
-                                                            </td>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <p class="text-xs text-gray-700 pl-3">22 Jun</p>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex flex-col items-end">
-                                                                    <p class="text-xs font-bold text-gray-700">Lake Casandra</p>
-                                                                    <p class="text-xs leading-3 text-gray-400 mt-1">05:49AM</p>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-4 pt-8 w-1/2 xl:w-auto">
-                                                                <div class="flex items-center pl-4 border-l border-gray-100">
-                                                                    <div>
-                                                                        <p class="text-xs font-bold text-gray-700">80/200 tickets sold</p>
-                                                                        <p class="text-xs leading-3 mt-1 text-gray-400">Starting at $53</p>
-                                                                    </div>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex items-center">
-                                                                    <img src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <svg class="relative" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
-                                                                    <circle cx="5" cy="5" r="5" fill="#718096"></circle>
-                                                                </svg>
-                                                            </td>
-                                                            <td class="pt-8 xl:w-auto">
-                                                                <p class="text-xs text-gray-700 pl-3">22 Jun</p>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex flex-col items-end">
-                                                                    <p class="text-xs font-bold text-gray-700">Lake Casandra</p>
-                                                                    <p class="text-xs leading-3 text-gray-400 mt-1">05:49AM</p>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-4 pt-8 w-1/2 xl:w-auto">
-                                                                <div class="flex items-center pl-4 border-l border-gray-100">
-                                                                    <div>
-                                                                        <p class="text-xs font-bold text-gray-700">80/200 tickets sold</p>
-                                                                        <p class="text-xs leading-3 mt-1 text-gray-400">Starting at $53</p>
-                                                                    </div>
-                                                                </div>
-                                                            </td>
-                                                            <td class="pl-8 pt-8 w-1/4 xl:w-auto">
-                                                                <div class="flex items-center">
-                                                                    <img src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                    <img class="ml-1" src="https://cdn.tuk.dev/assets/templates/virtual-event-management/profile-1.png" alt="profile-1" />
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="xl:w-1/3 xl:ml-12 2xl:border-l border-gray-100 flex flex-col  2xl:items-center mt-10 xl:mt-0">
-                                        <p className="text-base md:text-xl font-bold leading-tight text-gray-600">Total RSVP Count </p>
-                                        <div className="mx-auto flex flex-col items-center">
-                                            <div className="mt-8">
-                                                <canvas id="chartjs2" />
-                                            </div>
-                                            <div className="mt-8">
-                                                <div className="flex items-center justify-between md:justify-start">
-                                                    <div className="mr-8">
-                                                        <p className="text-xs text-gray-400">Accepted</p>
-                                                        <p className="text-xl font-bold text-gray-700">73.6%</p>
-                                                    </div>
-                                                    <div className="pl-8 md:border-l border-gray-100">
-                                                        <p className="text-xs text-gray-400">Rejected</p>
-                                                        <p className="text-xl font-bold text-gray-700">16.4%</p>
-                                                    </div>
-                                                </div>
-                                                <div className="mt-3 flex items-center justify-between md:justify-start">
-                                                    <div className="mr-8">
-                                                        <p className="text-xs text-gray-400">Pending</p>
-                                                        <p className="text-xl font-bold text-gray-700">73.6%</p>
-                                                    </div>
-                                                    <div className="pl-8 md:border-l border-gray-100">
-                                                        <p className="text-xs text-gray-400">Rejected</p>
-                                                        <p className="text-xl font-bold text-gray-700">16.4%</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+
+                <div>
+                  <label htmlFor="cvc" className="block text-sm font-medium text-gray-700">
+                    CVC
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      type="text"
+                      name="cvc"
+                      id="cvc"
+                      autoComplete="csc"
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>*/}
+          </div> 
+
+          {/* Order summary */}
+          <div className="mt-10 lg:mt-0">
+            <h2 className="text-lg font-medium text-gray-900">Order summary</h2>
+
+            <div className="mt-4 rounded-lg border border-gray-200 bg-white shadow-sm">
+              <h3 className="sr-only">Items in your cart</h3>
+              <ul role="list" className="divide-y divide-gray-200">
+                {products.map((product) => (
+                  <li key={product.id} className="flex py-6 px-4 sm:px-6">
+                    <div className="flex-shrink-0">
+                      <img src={product.imageSrc} alt={product.imageAlt} className="w-20 rounded-md" />
+                    </div>
+
+                    <div className="ml-6 flex flex-1 flex-col">
+                      <div className="flex">
+                        <div className="min-w-0 flex-1">
+                          <h4 className="text-sm">
+                            <a href={product.href} className="font-medium text-gray-700 hover:text-gray-800">
+                              {product.title}
+                            </a>
+                          </h4>
+                          <p className="mt-1 text-sm text-gray-500">{product.color}</p>
+                          <p className="mt-1 text-sm text-gray-500">{product.size}</p>
+                        </div>
+
+                        <div className="ml-4 flow-root flex-shrink-0">
+                          <button
+                            type="button"
+                            className="-m-2.5 flex items-center justify-center bg-white p-2.5 text-gray-400 hover:text-gray-500"
+                          >
+                            <span className="sr-only">Remove</span>
+                            <TrashIcon className="h-5 w-5" aria-hidden="true" />
+                          </button>
                         </div>
+                      </div>
+
+                      <div className="flex flex-1 items-end justify-between pt-2">
+                        <p className="mt-1 text-sm font-medium text-gray-900">{product.price}</p>
+
+                        <div className="ml-4">
+                          <label htmlFor="quantity" className="sr-only">
+                            Quantity
+                          </label>
+                          <select
+                            id="quantity"
+                            name="quantity"
+                            className="rounded-md border border-gray-300 text-left text-base font-medium text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+                          >
+                            <option value={1}>1</option>
+                            <option value={2}>2</option>
+                            <option value={3}>3</option>
+                            <option value={4}>4</option>
+                            <option value={5}>5</option>
+                            <option value={6}>6</option>
+                            <option value={7}>7</option>
+                            <option value={8}>8</option>
+                          </select>
+                        </div>
+                      </div>
                     </div>
+                  </li>
+                ))}
+              </ul>
+              <dl className="space-y-6 border-t border-gray-200 py-6 px-4 sm:px-6">
+                <div className="flex items-center justify-between">
+                  <dt className="text-sm">Subtotal</dt>
+                  <dd className="text-sm font-medium text-gray-900">$64.00</dd>
+                </div>
+                <div className="flex items-center justify-between">
+                  <dt className="text-sm">Shipping</dt>
+                  <dd className="text-sm font-medium text-gray-900">$5.00</dd>
+                </div>
+                <div className="flex items-center justify-between">
+                  <dt className="text-sm">Taxes</dt>
+                  <dd className="text-sm font-medium text-gray-900">$5.52</dd>
                 </div>
+                <div className="flex items-center justify-between border-t border-gray-200 pt-6">
+                  <dt className="text-base font-medium">Total</dt>
+                  <dd className="text-base font-medium text-gray-900">$75.52</dd>
+                </div>
+              </dl>
+
+              <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
+                <button
+                  type="submit"
+                  className="w-full rounded-md border border-transparent bg-indigo-600 py-3 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50"
+                >
+                  Submit Bundle 
+                </button>
+              </div>
             </div>
-        </>
-    );
-}
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7139b54..a593c8f 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,14 @@
 module.exports = {
   purge: ["./components/**/*.js", "./pages/**/*.js"],
+  theme: {
+    extend: {
+      gridTemplateRows: {
+        '[auto,auto,1fr]': 'auto auto 1fr',
+      },
+    },
+  },
+  plugins: [
+    // ...
+    require('@tailwindcss/aspect-ratio'),
+  ],
 };