diff --git a/.gitignore b/.gitignore index a547bf3..0282ad1 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +repopack-output.txt \ No newline at end of file diff --git a/index.html b/index.html index e4b78ea..9e8a9ed 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Overaly Protocol
diff --git a/package-lock.json b/package-lock.json index c8f0a7c..76d610a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,18 @@ "name": "overlay-landing-v2", "version": "0.0.0", "dependencies": { + "@radix-ui/react-aspect-ratio": "^1.1.0", + "@radix-ui/themes": "^3.1.4", + "@stitches/react": "^1.2.8", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", + "@types/react-slick": "^0.23.13", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", @@ -844,6 +850,40 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -868,118 +908,1346 @@ "concat-map": "0.0.1" } }, - "node_modules/@humanwhocodes/config-array/node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, + "node_modules/@humanwhocodes/config-array/node_modules/minimatch": { + "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" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", + "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", + "dev": true + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@nodelib/fs.scandir": { + "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" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@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, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@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, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@radix-ui/colors": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz", + "integrity": "sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==" + }, + "node_modules/@radix-ui/number": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz", + "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==" + }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "node_modules/@radix-ui/react-accessible-icon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.0.tgz", + "integrity": "sha512-i9Zg4NOSXlfUva0agzI2DjWrvFJm9uO4L6CMW7nmMa5CIOOX/Yin894W7WwjodFQWPwe5kmAJ4JF33R8slKI2g==", + "dependencies": { + "@radix-ui/react-visually-hidden": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-alert-dialog": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.1.tgz", + "integrity": "sha512-wmCoJwj7byuVuiLKqDLlX7ClSUU0vd9sdCeM+2Ls+uf13+cpSJoMgwysHq1SGVVkJj5Xn0XWi1NoRCdkMpr6Mw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dialog": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz", + "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-aspect-ratio": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz", + "integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-avatar": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz", + "integrity": "sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==", + "dependencies": { + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.0.tgz", + "integrity": "sha512-3+kSzVfMONtP3B6CvaOrXLVTyGYws7tGmG5kOY0AfyH9sexkLytIwciNwjZhY0RoGOEbxI7bMS21XYB8H5itWQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context-menu": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.1.tgz", + "integrity": "sha512-wvMKKIeb3eOrkJ96s722vcidZ+2ZNfcYZWBPRHIB1VWrF+fiF851Io6LX0kmK5wTDQFKdulCCKJk2c3SBaQHvA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-menu": "2.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz", + "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz", + "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-escape-keydown": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz", + "integrity": "sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz", + "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz", + "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-form": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.0.tgz", + "integrity": "sha512-1/oVYPDjbFILOLIarcGcMKo+y6SbTVT/iUKVEw59CF4offwZgBgC3ZOeSBewjqU0vdA6FWTPWTN63obj55S/tQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-label": "2.1.0", + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-hover-card": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.1.tgz", + "integrity": "sha512-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-label": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", + "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menu": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz", + "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-navigation-menu": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.0.tgz", + "integrity": "sha512-OQ8tcwAOR0DhPlSY3e4VMXeHiol7la4PPdJWhhwJiJA+NLX0SaCaonOkRnI3gCDHoZ7Fo7bb/G6q25fRM2Y+3Q==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popover": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz", + "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", + "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-rect": "1.1.0", + "@radix-ui/react-use-size": "1.1.0", + "@radix-ui/rect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz", + "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", + "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-progress": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.0.tgz", + "integrity": "sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==", + "dependencies": { + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-radio-group": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz", + "integrity": "sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-scroll-area": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz", + "integrity": "sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-select": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz", + "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slider": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.0.tgz", + "integrity": "sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA==", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-switch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz", + "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz", + "integrity": "sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz", + "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle-group": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.0.tgz", + "integrity": "sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-toggle": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.1.tgz", + "integrity": "sha512-LLE8nzNE4MzPMw3O2zlVlkLFid3y9hMUs7uCbSHyKSo+tCN4yMCf+ZCCcfrYgsOC0TiHBPQ1mtpJ2liY3ZT3SQ==", "dependencies": { - "brace-expansion": "^1.1.7" + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0" }, - "engines": { - "node": "*" + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, - "node_modules/@humanwhocodes/module-importer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", - "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", - "dev": true, - "engines": { - "node": ">=12.22" + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/nzakas" + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@humanwhocodes/object-schema": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", - "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", - "dev": true - }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "dev": true, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", "dependencies": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.24" + "@radix-ui/react-use-callback-ref": "1.1.0" }, - "engines": { - "node": ">=6.0.0" + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, - "engines": { - "node": ">=6.0.0" + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", + "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "dev": true, - "engines": { - "node": ">=6.0.0" + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", - "dev": true + "node_modules/@radix-ui/react-use-previous": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", + "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.25", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", - "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "dev": true, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz", + "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==", "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" + "@radix-ui/rect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@nodelib/fs.scandir": { - "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, + "node_modules/@radix-ui/react-use-size": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", + "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" + "@radix-ui/react-use-layout-effect": "1.1.0" }, - "engines": { - "node": ">= 8" + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@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, - "engines": { - "node": ">= 8" + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz", + "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, - "node_modules/@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, + "node_modules/@radix-ui/rect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz", + "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==" + }, + "node_modules/@radix-ui/themes": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/themes/-/themes-3.1.4.tgz", + "integrity": "sha512-HmyU8UpoYPmdfXSQIwbEnJS2Wv/5wbzxe/Niw/sMLMJTrlZiUKM/dEOM7N+bc7w2OMpUaQ8OH9czCGpcjHx98w==", "dependencies": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" + "@radix-ui/colors": "3.0.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-accessible-icon": "1.1.0", + "@radix-ui/react-alert-dialog": "1.1.1", + "@radix-ui/react-aspect-ratio": "1.1.0", + "@radix-ui/react-avatar": "1.1.0", + "@radix-ui/react-checkbox": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-context-menu": "2.2.1", + "@radix-ui/react-dialog": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dropdown-menu": "2.1.1", + "@radix-ui/react-form": "0.1.0", + "@radix-ui/react-hover-card": "1.1.1", + "@radix-ui/react-navigation-menu": "1.2.0", + "@radix-ui/react-popover": "1.1.1", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-progress": "1.1.0", + "@radix-ui/react-radio-group": "1.2.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-scroll-area": "1.1.0", + "@radix-ui/react-select": "2.1.1", + "@radix-ui/react-slider": "1.2.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-switch": "1.1.0", + "@radix-ui/react-tabs": "1.1.0", + "@radix-ui/react-toggle-group": "1.1.0", + "@radix-ui/react-tooltip": "1.1.1", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0", + "classnames": "2.3.2", + "react-remove-scroll-bar": "2.3.4" }, - "engines": { - "node": ">= 8" + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, "node_modules/@rollup/rollup-android-arm-eabi": { @@ -1190,6 +2458,14 @@ "win32" ] }, + "node_modules/@stitches/react": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz", + "integrity": "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==", + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1247,13 +2523,13 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1263,6 +2539,15 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", + "devOptional": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", "dev": true, "dependencies": { "@types/react": "*" @@ -1553,6 +2838,17 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/aria-hidden": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz", + "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -1664,6 +2960,11 @@ "node": ">=4" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1709,7 +3010,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/debug": { "version": "4.3.4", @@ -1734,6 +3035,11 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1764,6 +3070,11 @@ "integrity": "sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw==", "dev": true }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/esbuild": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", @@ -2246,6 +3557,14 @@ "node": ">=6.9.0" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -2394,6 +3713,14 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2439,6 +3766,12 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2486,6 +3819,14 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -2535,6 +3876,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -2854,6 +4200,94 @@ "node": ">=0.10.0" } }, + "node_modules/react-remove-scroll": { + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", + "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.4", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2996,6 +4430,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -3005,6 +4447,11 @@ "node": ">=0.10.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -3080,6 +4527,11 @@ "typescript": ">=4.2.0" } }, + "node_modules/tslib": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -3156,6 +4608,47 @@ "punycode": "^2.1.0" } }, + "node_modules/use-callback-ref": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz", + "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/vite": { "version": "5.2.11", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", diff --git a/package.json b/package.json index c51b8a3..5ef3d4a 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,18 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-aspect-ratio": "^1.1.0", + "@radix-ui/themes": "^3.1.4", + "@stitches/react": "^1.2.8", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", + "@types/react-slick": "^0.23.13", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", diff --git a/public/btcd-market.png b/public/btcd-market.png new file mode 100644 index 0000000..80b02c5 Binary files /dev/null and b/public/btcd-market.png differ diff --git a/public/cs-skins-market.png b/public/cs-skins-market.png new file mode 100644 index 0000000..f63b302 Binary files /dev/null and b/public/cs-skins-market.png differ diff --git a/public/ev-market.png b/public/ev-market.png new file mode 100644 index 0000000..2c146b4 Binary files /dev/null and b/public/ev-market.png differ diff --git a/public/overlay-logo.svg b/public/overlay-logo.svg new file mode 100644 index 0000000..4a114b4 --- /dev/null +++ b/public/overlay-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css index b9d355d..c06cc5c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,30 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + margin: 0; + padding: 0; + min-width: 320px; + min-height: 100vh; +} + #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; } .logo { diff --git a/src/App.tsx b/src/App.tsx index afe48ac..e31b735 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,34 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' +import React from 'react' import './App.css' +import Hero from './sections/Hero' +import OverlayLogoSection from './sections/OverlayLogoSection' +import Header from './sections/Header' +import TrendingSection from './sections/TrendingSection' +import HowItWorksSection from './sections/HowItWorksSection' +import GovernanceSection from './sections/GovernanceSection' +import TradeEverythingSection from './sections/TradeEverythingSection' +import AuditsSection from './sections/AuditSection' +import WhitePaperSection from './sections/WhitePaperSection' +import Footer from './sections/Footer' +import DynamicIndexesSection from './sections/DynamicIndexesSection' +import VcSection from './sections/VcSection' -function App() { - const [count, setCount] = useState(0) - +const App: React.FC = () => { return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- +
+
+ + + + + + + + + + +
) } diff --git a/src/assets/OverlayLogo.tsx b/src/assets/OverlayLogo.tsx new file mode 100644 index 0000000..9590d9e --- /dev/null +++ b/src/assets/OverlayLogo.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const OverlayLogo: React.FC> = (props) => ( + + + + + + + + + + + + + + + + + +); + +export default OverlayLogo; \ No newline at end of file diff --git a/src/assets/background.tsx b/src/assets/background.tsx new file mode 100644 index 0000000..7a83e1a --- /dev/null +++ b/src/assets/background.tsx @@ -0,0 +1,186 @@ +import React, { useState, useEffect, useRef } from 'react'; + +interface Props { + className?: string; +} + +interface GradientPosition { + x: number; + y: number; + rotation: number; +} + +interface Square { + x: number; + y: number; + opacity: number; + targetOpacity: number; +} + +const DynamicBackgroundSVG: React.FC = ({ className }) => { + const [gradientPositions, setGradientPositions] = useState<{ + [key: string]: GradientPosition; + }>({ + purple: { x: 50, y: 50, rotation: 180 }, + orange: { x: 50, y: 50, rotation: 180 }, + yellow: { x: 50, y: 50, rotation: 180 }, + }); + + const [squares, setSquares] = useState([ + { x: 320, y: 109, opacity: 0, targetOpacity: 0 }, + { x: 160, y: 349, opacity: 0, targetOpacity: 0 }, + { x: 1200, y: 269, opacity: 0, targetOpacity: 0 }, + { x: 1360, y: 429, opacity: 0, targetOpacity: 0 }, + { x: 480, y: 189, opacity: 0, targetOpacity: 0 }, + { x: 720, y: 509, opacity: 0, targetOpacity: 0 }, + { x: 960, y: 669, opacity: 0, targetOpacity: 0 }, + { x: 640, y: 29, opacity: 0, targetOpacity: 0 }, + ]); + + const animationRef = useRef(); + const timeRef = useRef(0); + + const updateAnimation = (time: number) => { + if (timeRef.current === 0) { + timeRef.current = time; + } + + timeRef.current = time; + + setGradientPositions({ + purple: { + x: 50 * Math.sin(time * 0.0002) + 50, + y: 50 * Math.cos(time * 0.0003) + 50, + rotation: 180 * Math.sin(time * 0.0001) + 180, + }, + orange: { + x: 50 * Math.sin(time * 0.0003) + 50, + y: 50 * Math.cos(time * 0.0002) + 50, + rotation: 180 * Math.cos(time * 0.00015) + 180, + }, + yellow: { + x: 50 * Math.cos(time * 0.0004) + 50, + y: 50 * Math.sin(time * 0.0005) + 50, + rotation: 180 * Math.sin(time * 0.0002) + 180, + }, + }); + + setSquares(prev => prev.map(square => { + const newOpacity = square.opacity + (square.targetOpacity - square.opacity) * 0.05; + return { ...square, opacity: newOpacity }; + })); + + animationRef.current = requestAnimationFrame(updateAnimation); + }; + + useEffect(() => { + animationRef.current = requestAnimationFrame(updateAnimation); + return () => { + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }); + + useEffect(() => { + const intervalId = setInterval(() => { + setSquares(prev => prev.map(square => ({ + ...square, + targetOpacity: Math.random() > 0.7 ? 0.3 : 0, + }))); + }, 2000); + + return () => clearInterval(intervalId); + }, []); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Keep existing paths and groups */} + + + + + + + + + + + {[...Array(11)].map((_, i) => ( + + ))} + + + {[...Array(18)].map((_, i) => ( + + ))} + + + {squares.map((square, index) => ( + + ))} + + + ); +}; + +export default DynamicBackgroundSVG; \ No newline at end of file diff --git a/src/assets/external-link-icon.svg b/src/assets/external-link-icon.svg new file mode 100644 index 0000000..854383b --- /dev/null +++ b/src/assets/external-link-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/governance-desktop.png b/src/assets/governance-desktop.png new file mode 100644 index 0000000..e679d5c Binary files /dev/null and b/src/assets/governance-desktop.png differ diff --git a/src/assets/governance-mobile.png b/src/assets/governance-mobile.png new file mode 100644 index 0000000..0adad4d Binary files /dev/null and b/src/assets/governance-mobile.png differ diff --git a/src/assets/governance-tablet.png b/src/assets/governance-tablet.png new file mode 100644 index 0000000..0c369a8 Binary files /dev/null and b/src/assets/governance-tablet.png differ diff --git a/src/assets/hero-image.png b/src/assets/hero-image.png new file mode 100644 index 0000000..4cc6933 Binary files /dev/null and b/src/assets/hero-image.png differ diff --git a/src/assets/indexes.png b/src/assets/indexes.png new file mode 100644 index 0000000..8dc1d9e Binary files /dev/null and b/src/assets/indexes.png differ diff --git a/src/assets/la-audit.png b/src/assets/la-audit.png new file mode 100644 index 0000000..102068d Binary files /dev/null and b/src/assets/la-audit.png differ diff --git a/src/assets/menu-icon.svg b/src/assets/menu-icon.svg new file mode 100644 index 0000000..5022e7d --- /dev/null +++ b/src/assets/menu-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/onekx-logo.png b/src/assets/onekx-logo.png new file mode 100644 index 0000000..e514d8c Binary files /dev/null and b/src/assets/onekx-logo.png differ diff --git a/src/assets/overlay-logo.svg b/src/assets/overlay-logo.svg new file mode 100644 index 0000000..4a114b4 --- /dev/null +++ b/src/assets/overlay-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/parafi-logo.png b/src/assets/parafi-logo.png new file mode 100644 index 0000000..ff2dd51 Binary files /dev/null and b/src/assets/parafi-logo.png differ diff --git a/src/assets/polychain-logo.png b/src/assets/polychain-logo.png new file mode 100644 index 0000000..f9e2bd4 Binary files /dev/null and b/src/assets/polychain-logo.png differ diff --git a/src/assets/spearbit-audit.png b/src/assets/spearbit-audit.png new file mode 100644 index 0000000..7534ca0 Binary files /dev/null and b/src/assets/spearbit-audit.png differ diff --git a/src/assets/tob-audit.png b/src/assets/tob-audit.png new file mode 100644 index 0000000..618cc16 Binary files /dev/null and b/src/assets/tob-audit.png differ diff --git a/src/assets/trending-mobile.png b/src/assets/trending-mobile.png new file mode 100644 index 0000000..e9e7c30 Binary files /dev/null and b/src/assets/trending-mobile.png differ diff --git a/src/assets/trending.png b/src/assets/trending.png new file mode 100644 index 0000000..e9f67bd Binary files /dev/null and b/src/assets/trending.png differ diff --git a/src/assets/white-paper.png b/src/assets/white-paper.png new file mode 100644 index 0000000..865cd4b Binary files /dev/null and b/src/assets/white-paper.png differ diff --git a/src/config/marketConfig.ts b/src/config/marketConfig.ts new file mode 100644 index 0000000..f2bc253 --- /dev/null +++ b/src/config/marketConfig.ts @@ -0,0 +1,74 @@ +export interface Market { + name: string; + price: string; + icon: string; + up: boolean; + row?: number[]; +} + +export const marketConfig: Market[] = [ + { + name: 'EV Commodity Index', + price: '$94.21', + icon: '/ev-market.png', + up: false, + row: [1], + }, + { + name: 'BTC Dominance', + price: '54.53%', + icon: '/btcd-market.png', + up: true, + row: [1, 2], + }, + { + name: 'CS 2 Skins Index', + price: '$9.48M', + icon: '/cs-skins-market.png', + up: true, + row: [2, 3], + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + { + name: 'Bitcoin Frogs', + price: '₿ 0.035', + icon: '/cs-skins-market.png', + up: false, + // No row specified, will appear in all rows + }, + // Add more markets as needed +]; \ No newline at end of file diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..f00fcb8 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,25 @@ +export const BREAKPOINTS = { + mobile: 768, + tablet: 1024, +} as const; + +export const mediaQueries = { + mobile: `@media (max-width: ${BREAKPOINTS.mobile}px)`, + tablet: `@media (max-width: ${BREAKPOINTS.tablet}px)`, +}; + +export const LINKS = { + documentation: "https://example.com/documentation", + governance: "https://example.com/governance", + whitepaper: "https://example.com/whitepaper", + trade: "https://app.overlay.market", + markets: "https://example.com/markets", + spearbitAudit: "https://example.com/spearbit-audit", + leastAuthorityAudit: "https://example.com/least-authority-audit", + trailOfBitsAudit: "https://example.com/trail-of-bits-audit", + github: "https://github.com/overlay-market", + discord: "https://discord.gg/overlay", + twitter: "https://twitter.com/overlay_protocol", + mirror: "https://mirror.xyz/0x8c9F87668E544D9A5cf4F29C54E2E5AC6CEcE72D", + termsOfService: "https://example.com/terms-of-service", +}; \ No newline at end of file diff --git a/src/sections/AuditSection.tsx b/src/sections/AuditSection.tsx new file mode 100644 index 0000000..2de1303 --- /dev/null +++ b/src/sections/AuditSection.tsx @@ -0,0 +1,135 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { LINKS, mediaQueries } from '../constants'; +import ExternalLinkIcon from '../assets/external-link-icon.svg'; +import SpearbitAuditImage from '../assets/spearbit-audit.png'; +import LeastAuthorityAuditImage from '../assets/la-audit.png'; +import TrailOfBitsAuditImage from '../assets/tob-audit.png'; + +const SectionWrapper = styled('div', { + display: 'flex', + padding: '160px 0px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '80px', + alignSelf: 'stretch', + + [mediaQueries.tablet]: { + padding: '120px 40px', + }, + + [mediaQueries.mobile]: { + padding: '80px 20px', + }, +}); + +const Title = styled('h2', { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '16px', + color: '#FFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + margin: 0, + + [mediaQueries.mobile]: { + fontSize: '24px', + }, +}); + +const AuditSectionsContainer = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-end', + width: '100%', + maxWidth: '850px', + + [mediaQueries.tablet]: { + gap: '60px', + }, + + [mediaQueries.mobile]: { + flexDirection: 'column', + alignItems: 'center', + gap: '40px', + }, +}); + +const AuditSection = styled('div', { + display: 'flex', + width: '200px', + height: '138px', + flexDirection: 'column', + justifyContent: 'flex-end', + alignItems: 'center', + gap: '26px', +}); + +const AuditImage = styled('img', { + gap: '10px', + flex: '1 0 0', + height: '90px', +}); + +const AuditLink = styled('a', { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '4px', + width: '200px', + height: '22px', + flexShrink: 0, + color: '#12B4FF', + textAlign: 'center', + fontFamily: '"IBM Plex Mono", monospace', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 'normal', + textDecorationLine: 'underline', + cursor: 'pointer', +}); + +const LinkIcon = styled('img', { + width: '20px', + height: '20px', +}); + +const AuditsSection: React.FC = () => { + return ( + + Backed up by the most formidable + + + + + Spearbit Dao Audit + + + + + + + Least Authority Audit + + + + + + + Trail of Bits Audit + + + + + + ); +}; + +export default AuditsSection; \ No newline at end of file diff --git a/src/sections/DesktopButtonBar.tsx b/src/sections/DesktopButtonBar.tsx new file mode 100644 index 0000000..5e4b8fd --- /dev/null +++ b/src/sections/DesktopButtonBar.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { mediaQueries, LINKS } from '../constants'; + +const ButtonBarContainer = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '12px 20px', + gap: '32px', + borderRadius: '100px', + background: 'rgba(255, 255, 255, 0.10)', + backdropFilter: 'blur(20px)', + marginBottom: '40px', + + [mediaQueries.tablet]: { + display: 'none', + }, +}); + +const ButtonLink = styled('a', { + color: '#FFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', + textDecoration: 'none', + padding: '8px 16px', + borderRadius: '100px', + transition: 'background-color 0.3s', + opacity: '0.6', + + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.1)', + opacity: '0.9', + color: '#FFF', + }, +}); + +const DesktopButtonBar: React.FC = () => { + return ( + + + Documentation + + + Governance + + + White Paper + + + ); +}; + +export default DesktopButtonBar; \ No newline at end of file diff --git a/src/sections/DynamicIndexesSection.tsx b/src/sections/DynamicIndexesSection.tsx new file mode 100644 index 0000000..235f9e4 --- /dev/null +++ b/src/sections/DynamicIndexesSection.tsx @@ -0,0 +1,201 @@ +import React, { useState, useEffect } from 'react'; +import { styled } from '@stitches/react'; +import Slider from 'react-slick'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import { marketConfig, Market } from '../config/marketConfig'; +import { LINKS, mediaQueries } from '../constants'; +import ExternalLinkIcon from '../assets/external-link-icon.svg'; + +const SectionWrapper = styled('div', { + '--market-card-gap': '32px', + display: 'flex', + padding: '120px 0', + flexDirection: 'column', + alignItems: 'center', + gap: '48px', + alignSelf: 'stretch', + borderTop: '1px solid #FFF', + overflow: 'hidden', + + [mediaQueries.tablet]: { + padding: '80px 0', + }, + + [mediaQueries.mobile]: { + padding: '80px 0', + }, +}); + +const Title = styled('h2', { + color: '#FFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + alignSelf: 'stretch', + padding: '0 20px', + margin: 0, +}); + +const MarketsContainer = styled('div', { + display: 'flex', + width: '100%', + flexDirection: 'column', + gap: 'var(--market-card-gap)', +}); + +const SliderContainer = styled('div', { + width: '100%', + overflow: 'hidden', + '& .slick-track': { + display: 'flex', + alignItems: 'center', + }, + '& .slick-slide': { + height: 'auto', + }, +}); + +const MarketCardWrapper = styled('div', { + padding: '0 16px', +}); + +const MarketCard = styled('div', { + display: 'flex', + padding: '10px 32px 10px 10px', + alignItems: 'center', + gap: '16px', + borderRadius: '200px', + border: '1px solid rgba(255, 255, 255, 0.05)', + background: '#393939', + flexShrink: 0, +}); + +const MarketIcon = styled('img', { + width: '48px', + height: '48px', + borderRadius: '50%', +}); + +const MarketInfo = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'center', +}); + +const MarketPrice = styled('span', { + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 'normal', + variants: { + up: { + true: { color: '#1FFF9C' }, + false: { color: '#FF5A5A' }, + }, + }, +}); + +const MarketName = styled('span', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '20px', +}); + +const LinkButton = styled('a', { + display: 'flex', + alignItems: 'center', + gap: '4px', + textDecoration: 'none', +}); + +const LinkText = styled('span', { + color: '#12B4FF', + textAlign: 'center', + fontFamily: '"IBM Plex Mono", monospace', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 'normal', +}); + +const LinkIcon = styled('img', { + width: '20px', + height: '20px', +}); + +const DynamicIndexesSection: React.FC = () => { + const [markets, setMarkets] = useState([]); + + useEffect(() => { + const shuffledMarkets = [...marketConfig].sort(() => Math.random() - 0.5); + setMarkets(shuffledMarkets); + }, []); + + const renderMarketCard = (market: Market) => ( + + + + + {market.price} + {market.name} + + + + ); + + const sliderSettings = (speed: number) => ({ + dots: false, + infinite: true, + autoplay: true, + speed: speed, + autoplaySpeed: 0, + pauseOnHover: false, + variableWidth: true, + arrows: false, + cssEase: "linear" + }); + + const renderRow = (rowNumber: number, speed: number) => { + const rowMarkets = markets.filter(market => + !market.row || market.row.length === 0 || market.row.includes(rowNumber) + ); + + return ( + + + {rowMarkets.map((market, index) => ( + + {renderMarketCard(market)} + + ))} + + + ); + }; + + return ( + + Wide world of new markets + + {renderRow(1, 6500)} + {renderRow(2, 3000)} + {renderRow(3, 7500)} + + + List of markets section + + + + ); +}; + +export default DynamicIndexesSection; \ No newline at end of file diff --git a/src/sections/Footer.tsx b/src/sections/Footer.tsx new file mode 100644 index 0000000..efec7d5 --- /dev/null +++ b/src/sections/Footer.tsx @@ -0,0 +1,174 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import OverlayLogo from '../assets/OverlayLogo'; +import { LINKS, mediaQueries } from '../constants'; + +const footerConfig = [ + { + title: 'Protocol', + links: [ + { label: 'Github', url: LINKS.github }, + { label: 'Documentation', url: LINKS.documentation }, + { label: 'Governance', url: LINKS.governance }, + { label: 'White Paper V1', url: LINKS.whitepaper }, + ], + }, + { + title: 'Connect', + links: [ + { label: 'Discord', url: LINKS.discord }, + { label: 'Twitter', url: LINKS.twitter }, + { label: 'Mirror', url: LINKS.mirror }, + ], + }, + { + title: 'Legal', + links: [ + { label: 'Terms of Service', url: LINKS.termsOfService }, + ], + }, +]; + +const FooterWrapper = styled('footer', { + display: 'flex', + padding: '55px 170px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'stretch', + borderTop: '1px solid #FFF', + background: '#232323', + + [mediaQueries.tablet]: { + padding: '55px 40px', + }, + + [mediaQueries.mobile]: { + padding: '55px 20px', + }, +}); + +const FooterContainer = styled('div', { + width: '100%', + maxWidth: '1100px', + display: 'flex', + flexDirection: 'column', +}); + +const TopRow = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: '40px', + + [mediaQueries.tablet]: { + flexDirection: 'column', + alignItems: 'center', + gap: '40px', + }, +}); + +const LogoContainer = styled('div', { + display: 'flex', + alignItems: 'center', +}); + +const LinksContainer = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-start', + flex: 1, + maxWidth: '600px', + width: '100%', + + [mediaQueries.mobile]: { + flexDirection: 'column', + gap: '40px', + }, +}); + +const LinkColumn = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', +}); + +const ColumnTitle = styled('h3', { + paddingBottom: '6px', + color: '#FFF', + fontFamily: '"Be Vietnam Pro", sans-serif', + fontSize: '20px', + fontWeight: 600, + marginBottom: '10px', +}); + +const LinkList = styled('ul', { + listStyle: 'none', + padding: 0, + margin: 0, +}); + +const LinkItem = styled('li', { + padding: '10px 0', +}); + +const StyledLink = styled('a', { + color: '#636363', + fontFamily: 'Inter, sans-serif', + fontSize: '15px', + fontWeight: 400, + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, +}); + +const Divider = styled('div', { + width: '100%', + height: '1px', + background: '#636363', + margin: '20px 0', +}); + +const Copyright = styled('p', { + color: '#636363', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontWeight: 400, + lineHeight: '20px', +}); + +const Footer: React.FC = () => { + return ( + + + + + + + + {footerConfig.map((column) => ( + + {column.title} + + {column.links.map((link) => ( + + + {link.label} + + + ))} + + + ))} + + + + Copyright 2024 © Overlay Foundation, All Rights Reserved + + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/sections/GovernanceSection.tsx b/src/sections/GovernanceSection.tsx new file mode 100644 index 0000000..c4d1334 --- /dev/null +++ b/src/sections/GovernanceSection.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { mediaQueries, LINKS, BREAKPOINTS } from '../constants'; +import governanceImage from '../assets/governance-desktop.png'; +import governanceTabletImage from '../assets/governance-tablet.png'; +import governanceMobileImage from '../assets/governance-mobile.png'; + +const SectionWrapper = styled('div', { + '--OV-gradiant-1': 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + display: 'flex', + padding: '120px 40px', + flexDirection: 'column', + alignItems: 'center', + gap: '48px', + alignSelf: 'stretch', + borderTop: '1px solid #FFF', + + [mediaQueries.tablet]: { + padding: '80px 40px', + }, + + [mediaQueries.mobile]: { + padding: '80px 20px', + }, +}); + +const Title = styled('h2', { + color: '#FFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + alignSelf: 'stretch', +}); + +const ImageContainer = styled('div', { + display: 'flex', + width: 'auto', + maxWidth: '1120px', + justifyContent: 'center', + alignItems: 'flex-start', + alignContent: 'flex-start', + gap: '32px', + flexWrap: 'wrap', + cursor: 'pointer', + + [mediaQueries.tablet]: { + maxWidth: '728px', + }, + + [mediaQueries.mobile]: { + maxWidth: '265px', + }, +}); + +const StyledImage = styled('img', { + maxWidth: '100%', + height: 'auto', +}); + +const GovernanceSection: React.FC = () => { + const handleGov = () => { + window.open( + LINKS.trade, + '_blank' + ) + }; + + return ( + + Governance + + + + + + + + + ); +}; + +export default GovernanceSection; \ No newline at end of file diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx new file mode 100644 index 0000000..cf996af --- /dev/null +++ b/src/sections/Header.tsx @@ -0,0 +1,146 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { styled } from '@stitches/react'; +import { mediaQueries, LINKS } from '../constants'; +import OverlayLogo from '../assets/overlay-logo.svg'; +import MenuIcon from '../assets/menu-icon.svg'; + +const HeaderWrapper = styled('div', { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + zIndex: 10, +}); + +const HeaderContainer = styled('header', { + position: 'relative', + maxWidth: '1120px', + margin: '0 auto', + padding: '20px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +const LogoContainer = styled('div', { + display: 'flex', + height: '40px', + alignItems: 'center', + flexShrink: 0, +}); + +const StyledLogo = styled('img', { + width: '40px', + height: '40px', + flexShrink: 0, +}); + +const LogoText = styled('span', { + color: '#FFFFFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: '16px', + marginLeft: '16px', + + [mediaQueries.mobile]: { + display: 'none', + }, +}); + +const MenuIconContainer = styled('div', { + display: 'none', + cursor: 'pointer', + + [mediaQueries.tablet]: { + display: 'block', + }, +}); + +const MenuItems = styled('div', { + display: 'none', + flexDirection: 'column', + position: 'absolute', + top: '100%', + right: '20px', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderRadius: '8px', + padding: '16px', + + [mediaQueries.tablet]: { + display: 'flex', + }, +}); + +const MenuItem = styled('a', { + color: '#FFF', + textDecoration: 'none', + padding: '8px 16px', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontWeight: 500, + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.1)', + color: '#FFF', + }, +}); + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const menuRef = useRef(null); + const menuIconRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + isMenuOpen && + menuRef.current && + !menuRef.current.contains(event.target as Node) && + menuIconRef.current && + !menuIconRef.current.contains(event.target as Node) + ) { + setIsMenuOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isMenuOpen]); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + + + + + The Trade Everything Engine + + + Menu + + {isMenuOpen && ( + + + Documentation + + + Governance + + + White Paper + + + )} + + + ); +}; + +export default Header; \ No newline at end of file diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx new file mode 100644 index 0000000..6a2d55d --- /dev/null +++ b/src/sections/Hero.tsx @@ -0,0 +1,171 @@ +import React from 'react'; +import { styled } from '@stitches/react'; + +import DynamicBackgroundSVG from '../assets/background' +import CardsImage from '../assets/hero-image.png'; +import { mediaQueries, LINKS } from '../constants'; + +const HeroContainer = styled('div', { + '--OV-gradiant-1': 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + position: 'relative', + width: '100vw', + minHeight: '100vh', + marginLeft: 'calc(-50vw + 50%)', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + color: 'white', + overflow: 'hidden', + paddingTop: '80px', +}); + +const BackgroundWrapper = styled('div', { + position: 'absolute', + top: 0, + left: '50%', + transform: 'translateX(-50%)', + width: '100vw', + height: '100%', + zIndex: 0, +}); + +const StyledBackgroundSVG = styled(DynamicBackgroundSVG, { + width: '100%', + height: '100%', + display: 'block', +}); + +const ContentWrapper = styled('div', { + position: 'relative', + display: 'flex', + width: '90%', + minHeight: '100vh', + justifyContent: 'space-between', + alignItems: 'center', + gap: '40px', + maxWidth: '1120px', + zIndex: 1, + + [mediaQueries.mobile]: { + flexDirection: 'column', + justifyContent: 'center', + }, +}); + +const Content = styled('div', { + display: 'flex', + width: '100%', + maxWidth: '438px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '32px', + + [mediaQueries.mobile]: { + maxWidth: '100%', + alignItems: 'center', + textAlign: 'center', + }, +}); + +const TitleSubtitleContainer = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '10px', + alignSelf: 'stretch', + + [mediaQueries.mobile]: { + alignItems: 'center', + }, +}); + +const Title = styled('h1', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '64px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: '80px', + margin: 0, + + [mediaQueries.mobile]: { + fontSize: '48px', + lineHeight: '60px', + }, +}); + +const Subtitle = styled('h2', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + margin: 0, + + [mediaQueries.mobile]: { + fontSize: '24px', + }, +}); + +export const TradeButton = styled('button', { + display: 'flex', + width: '100%', + maxWidth: '360px', + height: '60px', + padding: '10.5px 24px', + justifyContent: 'center', + alignItems: 'center', + gap: '15px', + borderRadius: '12px', + border: '1.5px solid #FFC955', + fontFamily: 'Inter, sans-serif', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', + background: 'var(--OV-gradiant-1) border-box, transparent padding-box', + backgroundClip: 'text', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', + cursor: 'pointer', +}); + +const CardsContainer = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + [mediaQueries.mobile]: { + width: '100%', + maxWidth: '100%', + }, +}); + +const Hero: React.FC = () => { + const handleTradeNow = () => { + window.location.href = LINKS.trade; + }; + + return ( + + + + + + + + The Trade Everything Engine + The Exotic Perps Dex + + Trade Now + + + Trading cards + + + + ); +}; + +export default Hero; \ No newline at end of file diff --git a/src/sections/HowItWorksSection.tsx b/src/sections/HowItWorksSection.tsx new file mode 100644 index 0000000..9f77bed --- /dev/null +++ b/src/sections/HowItWorksSection.tsx @@ -0,0 +1,173 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { mediaQueries } from '../constants'; + +const SectionWrapper = styled('div', { + display: 'grid', + gridTemplateColumns: '350px 1px 1fr', + alignItems: 'stretch', + borderTop: '1px solid #FFF', + + [mediaQueries.tablet]: { + gridTemplateColumns: '1fr', + gridTemplateRows: 'auto 1px auto', + }, +}); + +const LeftColumn = styled('div', { + display: 'flex', + padding: '20px', + justifyContent: 'flex-end', + alignItems: 'flex-start', + borderBottom: '1px solid #FFF', + height: 'fit-content', + + [mediaQueries.tablet]: { + justifyContent: 'flex-start', + borderBottom: '1px solid #FFF', + }, +}); + +const LeftColumnText = styled('div', { + color: '#FFF', + textAlign: 'right', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '20px', + + [mediaQueries.tablet]: { + textAlign: 'left', + }, +}); + +const Divider = styled('div', { + width: '1px', + height: '100%', + background: 'linear-gradient(180deg, #FFF 0%, #22221F 100%)', + + [mediaQueries.tablet]: { + width: '100%', + height: '1px', + background: '#FFF', + }, +}); + +const RightColumn = styled('div', { + display: 'flex', + padding: '95px 160px 95px 95px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '48px', + + [mediaQueries.tablet]: { + padding: '40px 20px', + }, + + [mediaQueries.mobile]: { + padding: '30px 15px 80px 15px', + }, +}); + +const Frame = styled('div', { + display: 'flex', + alignItems: 'flex-start', + alignSelf: 'stretch', + gap: '20px', + + [mediaQueries.mobile]: { + gap: '16px', + }, +}); + +const IndexNumber = styled('div', { + width: '95px', + flexShrink: 0, + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '48px', + fontStyle: 'normal', + fontWeight: 200, + lineHeight: '48px', + opacity: 0.4, + + [mediaQueries.mobile]: { + fontSize: '32px', + lineHeight: '32px', + width: '55px', + }, +}); + +const TextContent = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '16px', + flex: '1 0 0', +}); + +const Title = styled('h3', { + alignSelf: 'stretch', + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 'normal', + margin: '0', +}); + +const Description = styled('p', { + alignSelf: 'stretch', + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '25px', + opacity: 0.4, + margin: '0', +}); + +const HowItWorksSection: React.FC = () => { + return ( + + + How it works + + + + + 01. + + Connect and Choose a Market + + To start trading on Overlay Market, connect your cryptocurrency wallet. Once connected, choose a market to trade on, such as cryptocurrencies, stocks, or commodities. Overlay gives you access to a variety of assets, allowing for greater flexibility. + + + + + 02. + + Make a Prediction with OVL Tokens + + After selecting your market, you can use Overlay tokens (OVL) to predict if the price of the asset will go up (long) or down (short). OVL tokens act as your stake, and the system operates on an "up-only" perpetual system. You don't need collateral, making it easier to open positions. + + + + + 03. + + Manage and Close Your Trade + + Once your position is open, you can actively monitor its performance. Overlay allows you to adjust or close your position whenever you like, without relying on liquidations or margin calls. Your outcome is directly tied to the market's performance, and when you're satisfied, you can close the trade, receiving either profits or losses depending on the market's movement. + + + + + + ); +}; + +export default HowItWorksSection; \ No newline at end of file diff --git a/src/sections/OverlayLogoSection.tsx b/src/sections/OverlayLogoSection.tsx new file mode 100644 index 0000000..e74b46b --- /dev/null +++ b/src/sections/OverlayLogoSection.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import OverlayLogo from '../assets/OverlayLogo'; +import { mediaQueries } from '../constants'; +import DesktopButtonBar from './DesktopButtonBar'; + +const SectionWrapper = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '100%', +}); + +const LogoSectionContainer = styled('div', { + display: 'flex', + padding: '120px 0px', + flexDirection: 'column', + alignItems: 'center', + gap: '24px', + alignSelf: 'stretch', + + [mediaQueries.tablet]: { + padding: '80px 0px', + }, + + [mediaQueries.mobile]: { + padding: '40px 0px', + }, +}); + +const StyledLogo = styled(OverlayLogo, { + display: 'flex', + width: '208px', + height: '30px', + padding: '0.677px 0.923px 0.677px 0.106px', + justifyContent: 'center', + alignItems: 'center', +}); + +const LogoText = styled('p', { + color: '#FFFFFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '25px', + opacity: 0.4, + alignSelf: 'stretch', +}); + +const OverlayLogoSection: React.FC = () => { + return ( + + + + + + Overlay is the first of its kind exotic perpetual dex - trade anything + + + + ); +}; + +export default OverlayLogoSection; \ No newline at end of file diff --git a/src/sections/TradeEverythingSection.tsx b/src/sections/TradeEverythingSection.tsx new file mode 100644 index 0000000..71dc75c --- /dev/null +++ b/src/sections/TradeEverythingSection.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { TradeButton } from './Hero'; +import { LINKS, mediaQueries } from '../constants'; + +const SectionWrapper = styled('div', { + '--OV-gradiant-1': 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + display: 'flex', + padding: '64px 160px', + alignItems: 'center', + gap: '32px', + alignSelf: 'stretch', + background: 'linear-gradient(90deg, rgba(255, 201, 85, 0.20) 0%, rgba(255, 124, 213, 0.20) 100%)', + position: 'relative', + overflow: 'hidden', + + [mediaQueries.tablet]: { + padding: '64px 40px', + }, + + [mediaQueries.mobile]: { + padding: '64px 20px', + flexDirection: 'column', + }, +}); + +const BackgroundSVG = styled('svg', { + width: '752px', + height: '352px', + position: 'absolute', + left: '111px', + bottom: '-112px', + opacity: 0.7, + filter: 'blur(150px)', +}); + +const TextContent = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '10px', + flex: '1 0 0', +}); + +const Title = styled('h2', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '24px', + fontStyle: 'normal', + fontWeight: 600, + lineHeight: 'normal', + margin: 0, +}); + +const Subtitle = styled('p', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '25px', + opacity: 0.4, + margin: 0, +}); + +const TradeEverythingSection: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + + Trade everything + Overlay is the first of its kind exotic perpetual dex - trade anything + + window.location.href = LINKS.trade}>Trade Now + + ); +}; + +export default TradeEverythingSection; \ No newline at end of file diff --git a/src/sections/TrendingSection.tsx b/src/sections/TrendingSection.tsx new file mode 100644 index 0000000..1c05161 --- /dev/null +++ b/src/sections/TrendingSection.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { mediaQueries, LINKS, BREAKPOINTS } from '../constants'; +import trendingImage from '../assets/trending.png'; +import trendingMobileImage from '../assets/trending-mobile.png'; +import { TradeButton } from './Hero'; + +const SectionWrapper = styled('div', { + '--OV-gradiant-1': 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + display: 'flex', + padding: '120px 40px', + flexDirection: 'column', + alignItems: 'center', + gap: '48px', + alignSelf: 'stretch', + borderTop: '1px solid #FFF', + + [mediaQueries.tablet]: { + padding: '80px 40px', + }, + + [mediaQueries.mobile]: { + padding: '80px 20px', + }, +}); + +const Title = styled('h2', { + color: '#FFF', + textAlign: 'center', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + alignSelf: 'stretch', +}); + +const ImageContainer = styled('div', { + display: 'flex', + width: '1690px', + justifyContent: 'center', + alignItems: 'flex-start', + alignContent: 'flex-start', + gap: '32px', + flexWrap: 'wrap', + + [mediaQueries.mobile]: { + width: '100%', + }, +}); + +const StyledImage = styled('img', { + maxWidth: '100%', + height: 'auto', +}); + +const TrendingSection: React.FC = () => { + const handleTradeNow = () => { + window.location.href = LINKS.trade; + }; + + return ( + + Trending Markets + + + + + + + Trade Now + + ); +}; + +export default TrendingSection; \ No newline at end of file diff --git a/src/sections/VcSection.tsx b/src/sections/VcSection.tsx new file mode 100644 index 0000000..f15d6c5 --- /dev/null +++ b/src/sections/VcSection.tsx @@ -0,0 +1,393 @@ +import React from "react"; +import { styled } from "@stitches/react"; +import { LINKS, mediaQueries } from "../constants"; +import OverlayLogo from '../assets/OverlayLogo'; +import { TradeButton } from './Hero'; +import PolychainLogo from '../assets/polychain-logo.png'; +import onekxLogo from '../assets/onekx-logo.png'; +import parafiLogo from '../assets/parafi-logo.png'; +// import ExternalLinkIcon from "../assets/external-link-icon.svg"; + +const vcLogoData = [ + { + logo: PolychainLogo, + url: 'https://jobs.polychain.capital/companies/overlay-2-10921965-ae1e-43be-b3b9-eb92ec801b56', + width: '176px', + }, + { + logo: onekxLogo, + url: 'https://careers.1kx.capital/companies/overlay-2-10921965-ae1e-43be-b3b9-eb92ec801b56', + width: '88px', + }, + { + logo: parafiLogo, + url: 'https://parafi.com/portfolio', + width: '138px', + }, + // Add more logos as needed +]; + +const vcTextData: { text: string, fontSize: string, url?: string}[] = [ + { + text: 'The LAO', + // url: 'https://example1.com', + fontSize: '24px', + }, + { + text: 'CitizenX', + fontSize: '22px', + }, + { + text: 'MetaCartel', + fontSize: '22px', + }, + { + text: 'FoundersHead', + fontSize: '22px', + }, + { + text: 'and others', + fontSize: '22px', + }, + // Add more text cards as needed +]; + +const SectionWrapper = styled("div", { + '--OV-gradiant-1': 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + display: "grid", + gridTemplateColumns: "2fr 1px 1fr", + alignItems: "stretch", + borderTop: "1px solid #FFF", + position: "relative", + + [mediaQueries.tablet]: { + gridTemplateColumns: "1fr", + gridTemplateRows: "auto 1px auto", + }, +}); + +const RightColumn = styled("div", { + display: "flex", + padding: "20px 80px", + justifyContent: "flex-start", + alignItems: "flex-start", + borderBottom: "1px solid #FFF", + height: "fit-content", + + [mediaQueries.mobile]: { + justifyContent: "flex-start", + padding: "20px 40px", + borderBottom: "1px solid #FFF", + }, +}); + +const RightColumnText = styled("div", { + color: "#FFF", + textAlign: "left", + fontFamily: "Inter, sans-serif", + fontSize: "16px", + fontStyle: "normal", + fontWeight: 400, + lineHeight: "20px", + maxWidth: "100%", + + [mediaQueries.mobile]: { + textAlign: "left", + }, +}); + +const Divider = styled("div", { + width: "1px", + height: "100%", + background: "linear-gradient(180deg, #FFF 0%, #22221F 100%)", + + [mediaQueries.tablet]: { + width: "100%", + height: "1px", + background: "#FFF", + }, +}); + +const LeftColumn = styled("div", { + display: "flex", + padding: "160px 115px 160px 160px", + flexDirection: "column", + alignItems: "center", + gap: "35px", + flexWrap: 'wrap', + alignContent: 'center', + position: "relative", + + [mediaQueries.tablet]: { + padding: "80px", + }, + + [mediaQueries.mobile]: { + maxWidth: "100%", + padding: "40px 15px 80px 15px", + }, +}); + +const CardBox = styled('div', { + display: 'flex', + maxWidth: '645px', + flexDirection: 'column', + alignItems: 'flex-start', + alignSelf: 'stretch', +}); + +const TopCard = styled('div', { + display: 'flex', + padding: '48px 32px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'flex-start', + gap: '16px', + alignSelf: 'stretch', + borderRadius: '24px 24px 0px 0px', + border: '1px solid rgba(255, 255, 255, 0.10)', + background: 'linear-gradient(116deg, rgba(37, 37, 74, 0.30) 8.22%, rgba(89, 89, 200, 0.19) 54.99%, rgba(90, 90, 255, 0.09) 100.83%)', +}); + +const StyledLogo = styled(OverlayLogo, { + display: 'flex', + width: '208px', + height: '30px', + padding: '0.677px 0.923px 0.677px 0.106px', + justifyContent: 'center', + alignItems: 'center', + + [mediaQueries.mobile]: { + width: '156px', + height: '22.5px', + }, +}); + +const TopCardText = styled('div', { + fontFamily: 'Inter', + fontSize: '42px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', + background: 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + backgroundClip: 'text', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', +}); + +const BottomSection = styled('div', { + display: 'flex', + alignSelf: 'stretch', +}); + +const BottomLeftCard = styled('div', { + display: 'flex', + padding: '24px 32px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '20px', + flex: '1 0 0', + borderRadius: '0px 0px 0px 24px', + border: '1px solid rgba(255, 255, 255, 0.10)', + background: 'linear-gradient(116deg, rgba(37, 37, 74, 0.80) 8.22%, rgba(89, 89, 200, 0.52) 54.99%, rgba(90, 90, 255, 0.24) 100.83%)', +}); + +const BottomRightCard = styled('div', { + display: 'flex', + padding: '24px 32px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '20px', + flex: '1 0 0', + alignSelf: 'stretch', + borderRadius: '0px 0px 72px 0px', + border: '1px solid rgba(255, 255, 255, 0.10)', + background: 'linear-gradient(116deg, rgba(37, 37, 74, 0.30) 8.22%, rgba(89, 89, 200, 0.19) 54.99%, rgba(90, 90, 255, 0.09) 100.83%)', +}); + +const BottomCardText = styled('div', { + alignSelf: 'stretch', + maxWidth: '176px', + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '25.6px', +}); + +const HighlightedText = styled('span', { + background: 'linear-gradient(90deg, #FFC955 0%, #FF7CD5 100%)', + backgroundClip: 'text', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', +}); + +const BoldLinkText = styled('a', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 'normal', + textDecoration: 'none', +}); + +const BackgroundSVG = styled('svg', { + width: '980px', + height: '469px', + position: 'absolute', + left: '-50px', + top: '0px', + zIndex: -1, + + [mediaQueries.tablet]: { + left: '-50px', + top: '0px', + }, + + [mediaQueries.mobile]: { + left: '0px', + top: '0px', + flexShrink: 0, + }, +}); + +const SectionContainer = styled('div', { + display: 'flex', + padding: '48px 160px 48px 80px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '21px', + alignSelf: 'stretch', + + [mediaQueries.tablet]: { + padding: '48px 80px', + alignItems: 'center', + } + +}); + +const LogoContainer = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '21px', + alignSelf: 'stretch', + + [mediaQueries.tablet]: { + flexDirection: 'row', + flexShrink: 0, + flexWrap: 'wrap', + justifyContent: 'center', + }, +}); + +const LogoLink = styled('a', { + display: 'flex', + width: '200px', + height: '70px', + padding: '20px 40px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', + borderRadius: '12px', + border: '1px solid rgba(255, 255, 255, 0.10)', + background: 'linear-gradient(116deg, rgba(57, 57, 57, 0.30) 8.22%, rgba(48, 48, 103, 0.19) 54.99%, rgba(57, 57, 57, 0.09) 100.83%)', +}); + +const TextLink = styled('a', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontStyle: 'normal', + fontWeight: 200, + lineHeight: 'normal', +}); + +const TextNoLink = styled('div', { + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontStyle: 'normal', + fontWeight: 200, + lineHeight: 'normal', +}); + +const VcSection: React.FC = () => { + const handleTradeNow = () => { + window.location.href = LINKS.trade; + }; + + return ( + + + + + + The Trade Everything Engine + + + + + The perpetuals DEX for exotic{" "} + assets. + + + Never before seen markets you can’t get anywhere else. + + + + + Only possible through Overlay’s novel token dynamics and risk + framework. + + + White Paper-> + + + + + Launch App + + + + + + + + + + + + + + +
+ + Backed by the best + + + + {vcLogoData.map((logoItem, index) => ( + + Logo + + ))} + + {vcTextData.map((textCard, index) => { + return textCard.url ? + + {textCard.text} + + : + + {textCard.text} + + })} + +
+ + ); +}; + +export default VcSection; diff --git a/src/sections/WhitePaperSection.tsx b/src/sections/WhitePaperSection.tsx new file mode 100644 index 0000000..55ef0ca --- /dev/null +++ b/src/sections/WhitePaperSection.tsx @@ -0,0 +1,232 @@ +import React from 'react'; +import { styled } from '@stitches/react'; +import { LINKS, mediaQueries } from '../constants'; +import WhitePaperImage from '../assets/white-paper.png'; +import ExternalLinkIcon from '../assets/external-link-icon.svg'; + +const SectionWrapper = styled('div', { + display: 'grid', + gridTemplateColumns: '1fr 1px 3fr', + alignItems: 'stretch', + borderTop: '1px solid #FFF', + position: 'relative', + + [mediaQueries.mobile]: { + gridTemplateColumns: '1fr', + gridTemplateRows: 'auto 1px auto', + }, +}); + +const LeftColumn = styled('div', { + display: 'flex', + padding: '20px', + justifyContent: 'flex-end', + alignItems: 'flex-start', + borderBottom: '1px solid #FFF', + height: 'fit-content', + + [mediaQueries.mobile]: { + justifyContent: 'flex-start', + borderBottom: '1px solid #FFF', + }, +}); + +const LeftColumnText = styled('div', { + color: '#FFF', + textAlign: 'right', + fontFamily: 'Inter, sans-serif', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '20px', + maxWidth: '100%', + + [mediaQueries.mobile]: { + textAlign: 'left', + }, +}); + +const Divider = styled('div', { + width: '1px', + height: '100%', + background: 'linear-gradient(180deg, #FFF 0%, #22221F 100%)', + + [mediaQueries.mobile]: { + width: '100%', + height: '1px', + background: '#FFF', + }, +}); + +const RightColumn = styled('div', { + display: 'flex', + padding: '95px 160px 95px 95px', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '48px', + position: 'relative', + + [mediaQueries.tablet]: { + padding: '40px 20px', + }, + + [mediaQueries.mobile]: { + maxWidth: '100%', + padding: '30px 15px 80px 15px', + }, +}); + +const Frame = styled('div', { + display: 'flex', + alignItems: 'flex-start', + alignSelf: 'stretch', + gap: '48px', + + [mediaQueries.mobile]: { + gap: '16px', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, +}); + +const CardsContainer = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '378px', + maxWidth: '40%', + height: 'auto', + + [mediaQueries.tablet]: { + maxWidth: '290px', + }, + + [mediaQueries.mobile]: { + width: '378px', + }, +}); + +const TextContent = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: '19px', + flex: '1 0 0', + height: '100%', + justifyContent: 'space-between', +}); + +const Title = styled('h3', { + height: '50px', + alignSelf: 'stretch', + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '32px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 'normal', + margin: '0', +}); + +const Description = styled('p', { + alignSelf: 'stretch', + color: '#FFF', + fontFamily: 'Inter, sans-serif', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '25px', + opacity: 0.4, + margin: '0', +}); + +const AuditLink = styled('a', { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '4px', + height: '22px', + flexShrink: 0, + color: '#12B4FF', + textAlign: 'center', + fontFamily: '"IBM Plex Mono", monospace', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: 'normal', + textDecorationLine: 'underline', + cursor: 'pointer', +}); + +const LinkIcon = styled('img', { + width: '20px', + height: '20px', +}); + +const BackgroundSVG = styled('svg', { + width: '600px', + height: '400px', + position: 'absolute', + left: '110px', + bottom: '61px', + zIndex: -1, + + [mediaQueries.tablet]: { + position: 'absolute', + right: '1px', + top: '0px', + left: 'auto', + bottom: 'auto', + }, + + [mediaQueries.mobile]: { + flexShrink: 0, + }, +}); + +const WhitePaperSection: React.FC = () => { + return ( + + + White Paper + + + + + + white paper image + + + White Paper + + Overlay Market, the white paper would provide an in-depth explanation of how the platform operates, detailing its decentralized prediction market model, the role of OVL tokens, and the unique "up-only" perpetual trading mechanism. It typically includes technical details, economic models, and strategic goals to help users, investors, and developers understand the core features and long-term vision of the platform. + + + Read White Paper + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default WhitePaperSection; \ No newline at end of file