diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..f8ff2b5 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.mp4 filter=lfs diff=lfs merge=lfs -text diff --git a/docusaurus.config.js b/docusaurus.config.js index a164aaf..7916c86 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -113,6 +113,7 @@ const config = { sidebarPath: require.resolve('./sidebars-legacy.js'), }, ], + 'docusaurus-plugin-sass', [ '@docusaurus/plugin-client-redirects', { diff --git a/package-lock.json b/package-lock.json index 01e5b98..82736a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,13 +12,16 @@ "@docusaurus/plugin-client-redirects": "^3.9.2", "@docusaurus/preset-classic": "^3.4.0", "@docusaurus/theme-mermaid": "^3.9.2", + "docusaurus-plugin-sass": "^0.2.6", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "sass": "^1.102.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.4.0", "@docusaurus/tsconfig": "^3.4.0", - "@docusaurus/types": "^3.4.0" + "@docusaurus/types": "^3.4.0", + "typescript": "^5.9.3" }, "engines": { "node": ">=18.0" @@ -4812,6 +4815,294 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz", + "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.6.0", + "@parcel/watcher-darwin-arm64": "2.6.0", + "@parcel/watcher-darwin-x64": "2.6.0", + "@parcel/watcher-freebsd-x64": "2.6.0", + "@parcel/watcher-linux-arm-glibc": "2.6.0", + "@parcel/watcher-linux-arm-musl": "2.6.0", + "@parcel/watcher-linux-arm64-glibc": "2.6.0", + "@parcel/watcher-linux-arm64-musl": "2.6.0", + "@parcel/watcher-linux-x64-glibc": "2.6.0", + "@parcel/watcher-linux-x64-musl": "2.6.0", + "@parcel/watcher-win32-arm64": "2.6.0", + "@parcel/watcher-win32-x64": "2.6.0" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz", + "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz", + "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz", + "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz", + "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz", + "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz", + "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz", + "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz", + "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz", + "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz", + "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz", + "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz", + "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@peculiar/asn1-cms": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.6.1.tgz", @@ -8821,6 +9112,16 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", @@ -8881,6 +9182,19 @@ "node": ">=6" } }, + "node_modules/docusaurus-plugin-sass": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.6.tgz", + "integrity": "sha512-2hKQQDkrufMong9upKoG/kSHJhuwd+FA3iAe/qzS/BmWpbIpe7XKmq5wlz4J5CJaOPu4x+iDJbgAxZqcoQf0kg==", + "license": "MIT", + "dependencies": { + "sass-loader": "^16.0.2" + }, + "peerDependencies": { + "@docusaurus/core": "^2.0.0-beta || ^3.0.0-alpha", + "sass": "^1.30.0" + } + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -10786,6 +11100,12 @@ "node": ">=16.x" } }, + "node_modules/immutable": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", + "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==", + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -14164,6 +14484,13 @@ "tslib": "^2.0.3" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "license": "MIT", + "optional": true + }, "node_modules/node-emoji": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.2.0.tgz", @@ -17355,6 +17682,94 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, + "node_modules/sass": { + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz", + "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==", + "license": "MIT", + "dependencies": { + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass-loader": { + "version": "16.0.8", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.8.tgz", + "integrity": "sha512-hcov4ZwZJIGbEuyNr9EmiTmZueyrxSToE6GOzoZnq5JM7ecRO7ttyvilPn+VmRsqiP16+VYZzVnGZj/hzZgKBA==", + "license": "MIT", + "dependencies": { + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz", @@ -18539,6 +18954,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "devOptional": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/ufo": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz", diff --git a/package.json b/package.json index 6b6a549..7078ea2 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,16 @@ "@docusaurus/plugin-client-redirects": "^3.9.2", "@docusaurus/preset-classic": "^3.4.0", "@docusaurus/theme-mermaid": "^3.9.2", + "docusaurus-plugin-sass": "^0.2.6", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "sass": "^1.102.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.4.0", "@docusaurus/tsconfig": "^3.4.0", - "@docusaurus/types": "^3.4.0" + "@docusaurus/types": "^3.4.0", + "typescript": "^5.9.3" }, "browserslist": { "production": [ diff --git a/src/css/custom.css b/src/css/custom.css index 33dadf8..6de6c61 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -723,7 +723,6 @@ a[target="_blank"]::after { position: relative; overflow: hidden; margin-top: calc(-1 * var(--header-height, 76px)); - min-height: 85vh; padding: 0; text-align: center; display: flex; @@ -732,6 +731,10 @@ a[target="_blank"]::after { background-color: #0a0a0a; } +.tall-hero { + min-height: 85vh; +} + .hero-canvas { position: absolute; left: 0; @@ -1508,18 +1511,17 @@ footer.footer .footer-legal-link:hover { text-decoration: underline; } -/* Downloads Page: compact hero so buttons are visible without scrolling */ -.downloads-hero { +.compact-hero { margin-top: 0; min-height: 0; padding: var(--spacing-2xl) 0 var(--spacing-md); } -.downloads-hero + .section { +.compact-hero + .section { padding-top: var(--spacing-lg); } -.downloads-hero .hero-title { +.compact-hero .hero-title { font-size: clamp(2rem, 6vw, 3.5rem); } @@ -1851,11 +1853,14 @@ body.nav-open .nav-drawer { } .hero { - min-height: 80vh; padding: 0; } + + .tall-hero { + min-height: 80vh; + } - .downloads-hero { + .compact-hero { margin-top: 0; min-height: 0; padding: var(--spacing-xl) 0 var(--spacing-2xl); @@ -2013,7 +2018,7 @@ body.nav-open .nav-drawer { font-family: var(--ifm-heading-font-family); } -.docs-doc-page .markdown a, .blog-post-page .markdown a { +.docs-doc-page .markdown a, .blog-post-page .markdown a, a.primary-link { color: var(--ifm-color-primary-light); } diff --git a/src/pages/downloads.jsx b/src/pages/downloads.jsx index 7b2e298..c1c07b2 100644 --- a/src/pages/downloads.jsx +++ b/src/pages/downloads.jsx @@ -4,7 +4,7 @@ import Layout from '@theme/Layout'; export default function Downloads() { return ( -
+

Downloads

diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 9b5f0f1..f6c54e8 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -15,7 +15,7 @@ export default function Home() { -

+

diff --git a/src/pages/showcase.module.scss b/src/pages/showcase.module.scss new file mode 100644 index 0000000..480d4c2 --- /dev/null +++ b/src/pages/showcase.module.scss @@ -0,0 +1,87 @@ +.showcaseEntries { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; + padding: 1rem; +} + +.showcaseSection { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "description" "media"; + gap: 1rem; +} + +.showcaseDescription { + grid-area: description; + background-color: #222222; + border-radius: 16px; + border: 1px solid #2a2a2a; + padding: 32px; + justify-self: var(--description-align, stretch); + align-self: center; +} + +.qrCodePopover { + margin: 0; + inset: 4px; + position-area: center bottom; + width: 15rem; + border: none; + background: #333; + padding: 1rem; + border-radius: 0.5rem; + color: #888; + font-size: 12px; + + img { + display: block; + margin: 0.5rem 0; + width: 100%; + aspect-ratio: 1 / 1; + } +} + +.showcaseTitle { + font-size: 24px; +} + +.cta { + margin-top: 1rem; +} + +.showcaseMediaElement { + grid-area: media; + justify-self: var(--media-align, center); + max-width: 100%; + max-height: 80vh; + align-self: center; + object-fit: contain; +} + +@media (min-width: 63rem) { + .showcaseEntries { + max-width: 93rem; + margin: 0 auto; + } + + .showcaseSection { + overflow: hidden; + grid-template-columns: 1fr 1.25fr; + grid-template-areas: "description media"; + --description-align: flex-end; + --media-align: flex-start; + } + + .showcaseDescription { + max-width: 40rem; + max-height: 80vh; + } + + .flippedSection { + grid-template-columns: 1.25fr 1fr; + grid-template-areas: "media description"; + --description-align: flex-start; + --media-align: flex-end; + } +} diff --git a/src/pages/showcase.tsx b/src/pages/showcase.tsx new file mode 100644 index 0000000..f24d53e --- /dev/null +++ b/src/pages/showcase.tsx @@ -0,0 +1,243 @@ +import React from "react"; +import Layout from "@theme/Layout"; + +import imaginar from "../../static/video/imaginar.mp4"; +import ian from "../../static/video/ian.mp4"; + +console.log(imaginar); + +import styles from "./showcase.module.scss"; + +const SHOWCASE_ENTRIES = [ + { + id: "imaginar", + title: "ImaginAR", + media: { + aspect: "480 / 968", + video: { src: imaginar }, + }, + description: ( + <> + + imaginAR + {" "} + is a location-based WebAR platform where people create and discover + digital artifacts anchored to real-world places. By leaving 3D objects, + images, drawings, text and sounds throughout the city, imaginAR turns + physical space into a canvas for collective memory, storytelling and + digital graffiti. + + ), + cta: { + text: "Try it out", + url: "https://imaginar.dev/", + mobileRecommended: true, + }, + }, + { + id: "ian", + title: "Experiments by Ian Curtis", + description: ( + <> + These experiments explore bringing generated 3D worlds into WebAR, from{" "} + + portals + {" "} + into{" "} + + new environments + {" "} + and image-targeted{" "} + + interior design + {" "} + to using generated worlds as spatial references for{" "} + + real-time AR camera movements + + . + + ), + media: { + aspect: "600 / 400", + video: { src: ian }, + }, + cta: { text: "Follow", url: "https://x.com/XRarchitect" }, + }, +]; + +interface CtaProps { + id: string; + cta: { text: string; url: string; mobileRecommended?: boolean }; +} + +const Cta: React.FC = ({ id, cta }) => { + if (cta.mobileRecommended) { + return ( + <> + +
+ Mobile device recommended + QR code + + Open in new tab + +
+ + ); + } else { + return ( + + {cta.text} + + ); + } +}; + +interface MediaProps { + media: { + aspect: string; + video?: { src: string }; + image?: { src: string }; + }; +} + +const Media: React.FC = ({ media }) => { + if (media.video) { + return ( +