WIP add docusaurus webpage.

webpage/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webpage/CNAME

@@ -0,0 +1 @@
+neko.m1k1o.net

webpage/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ npm run install
+```
+
+### Local Development
+
+```
+$ npm run start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true npm run deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> npm run deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

webpage/docs/intro.md

@@ -0,0 +1,59 @@
+---
+sidebar_position: 1
+---
+
+# Quick Start
+
+Neko is easy to use and requires no technical expertise to get started. All you need to do is download the Docker image and you're ready to go:
+
+1. Deploy a server or VPS.
+
+    **Recommended Specs:**
+    
+    | Resolution  | Cores | Ram   | Recommendation   |
+    |-------------|-------|-------|------------------|
+    | 1024×576@30 | 2     | 2gb   | Not Recommended  |
+    | 1280x720@30 | 4     | 3gb   | Good Performance |
+    | 1280x720@30 | 6     | 4gb   | Recommended      |
+    | 1280x720@30 | 8     | 4gb+  | Best Performance |
+  
+
+    :::danger[Why are the specs so high?]
+    If you think about it, you have to run a full desktop, a browser (a resource hog on its own) *and* encode/transmit the desktop, there's a lot going on and so it demands some power.
+    :::
+
+    :::note
+    Admin can change the resolution in the GUI.
+    :::
+
+2. [Login via SSH](https://www.digitalocean.com/docs/droplets/how-to/connect-with-ssh/).
+
+3. Install [Docker](https://docs.docker.com/get-docker/):
+    ```shell
+    curl -sSL https://get.docker.com/ | CHANNEL=stable bash
+    ```
+
+4. Install [Docker Compose Plugin](https://docs.docker.com/compose/install/linux/):
+    ```shell
+    sudo apt-get update
+    sudo apt-get install docker-compose-plugin
+    ```
+
+5. Download docker compose file and start it:
+    ```shell
+    wget https://raw.githubusercontent.com/m1k1o/neko/master/docker-compose.yaml
+    sudo docker compose up -d
+    ```
+
+6. Visit the IP address server in your browser and login, the default password is `neko`.
+
+:::tip
+Run `nano docker-compose.yaml` to edit the settings, then press `ctrl+x` to exit and save the file.
+:::
+
+## Well known cloud providers
+* [Hetzner Cloud](https://www.hetzner.com/cloud)
+* [Digital Ocean](https://www.digitalocean.com/)
+* [Contabo](https://contabo.com/)
+* [Linode](https://www.linode.com/)
+* [Vultr](https://www.vultr.com/)

webpage/docusaurus.config.ts

@@ -0,0 +1,128 @@
+import {themes as prismThemes} from 'prism-react-renderer';
+import type {Config} from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config: Config = {
+  title: 'n.eko',
+  tagline: 'A self hosted virtual browser that runs in docker',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://neko.m1k1o.net',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  organizationName: 'm1k1o',
+  projectName: 'neko',
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          sidebarPath: './sidebars.ts',
+          editUrl: 'https://github.com/m1k1o/neko/tree/main/docs/',
+        },
+        //blog: {
+        //  showReadingTime: true,
+        //  feedOptions: {
+        //    type: ['rss', 'atom'],
+        //    xslt: true,
+        //  },
+        //  editUrl: 'https://github.com/m1k1o/neko/tree/main/docs/',
+        //  // Useful options to enforce blogging best practices
+        //  onInlineTags: 'warn',
+        //  onInlineAuthors: 'warn',
+        //  onUntruncatedBlogPosts: 'warn',
+        //},
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themeConfig: {
+    image: 'img/neko-social-card.jpg',
+    navbar: {
+      //title: 'n.eko',
+      logo: {
+        alt: 'n.eko',
+        src: 'img/logo.png',
+      },
+      items: [
+        {
+          type: 'docSidebar',
+          sidebarId: 'tutorialSidebar',
+          position: 'left',
+          label: 'Tutorial',
+        },
+        {
+          href: 'https://github.com/m1k1o/neko',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Tutorial',
+              to: '/docs/intro',
+            },
+          ],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Discord',
+              href: 'https://discord.gg/3U6hWpC',
+            },
+            {
+              label: 'Issues',
+              href: 'https://github.com/m1k1o/neko/issues',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'GitHub',
+              href: 'https://github.com/m1k1o/neko',
+            },
+            {
+              label: 'Sponsors',
+              href: 'https://github.com/sponsors/m1k1o',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} <a href="https://github.com/m1k1o">m1k1o</a>. Built with Docusaurus.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+      additionalLanguages: ['bash'],
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;

webpage/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/tsconfig": "3.7.0",
+    "@docusaurus/types": "3.7.0",
+    "typescript": "~5.6.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  }
+}

webpage/sidebars.ts

@@ -0,0 +1,33 @@
+import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+const sidebars: SidebarsConfig = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+export default sidebars;

webpage/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,101 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Watch Party',
+    Svg: require('@site/static/img/undraw_video_streaming.svg').default,
+    description: (
+      <>
+        Watch video content together with multiple people and react to it in real-time.
+        Perfect for staying connected with friends and family.
+      </>
+    ),
+  },
+  {
+    title: 'Interactive Presentation',
+    Svg: require('@site/static/img/undraw_usability_testing.svg').default,
+    description: (
+      <>
+        Share your screen and allow others to control it.
+        Ideal for collaborative work and interactive teaching sessions.
+      </>
+    ),
+  },
+  {
+    title: 'Collaborative Tool',
+    Svg: require('@site/static/img/undraw_online_collaboration.svg').default,
+    description: (
+      <>
+        Brainstorm ideas, cobrowse, and debug code together.
+        Enhance team collaboration with real-time synchronization.
+      </>
+    ),
+  },
+  {
+    title: 'Support/Teaching',
+    Svg: require('@site/static/img/undraw_instant_support.svg').default,
+    description: (
+      <>
+        Guide people interactively in a controlled environment.
+        Perfect for providing support or teaching remotely.
+      </>
+    ),
+  },
+  {
+    title: 'Embed Anything',
+    Svg: require('@site/static/img/undraw_website_builder.svg').default,
+    description: (
+      <>
+        Embed a virtual browser in your web app. Open any third-party
+        website or application and synchronize audio and video flawlessly.
+      </>
+    ),
+  },
+  {
+    title: 'Automated Browser',
+    Svg: require('@site/static/img/undraw_data_processing.svg').default,
+    description: (
+      <>
+        Install playwright or puppeteer and automate tasks while being
+        able to actively intercept them. Enhance productivity with automation.
+      </>
+    ),
+  },
+];
+
+function Feature({title, Svg, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): ReactNode {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

webpage/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

webpage/src/components/HomepageShowcase/index.tsx

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react';
+import styles from './styles.module.css';
+
+export default function HomepageShowcase(): ReactNode {
+  return (
+    <section className={styles.showcase}>
+      <div className={`container ${styles.center}`}>
+        <div className="row">
+          <img
+            alt="n.eko"
+            className={styles.showcaseImage}
+            src="img/intro.gif"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

webpage/src/components/HomepageShowcase/styles.module.css

@@ -0,0 +1,18 @@
+.showcase {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  background-color: #eee;
+}
+
+.showcaseContent {
+  flex: 1;
+  padding: 0 2rem;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

webpage/src/css/custom.css

@@ -0,0 +1,30 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}

webpage/src/pages/index.module.css

@@ -0,0 +1,37 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.indexCtasGitHubButtonWrapper {
+  display: flex;
+  margin-left: 30px;
+}
+
+.indexCtasGitHubButton {
+  overflow: hidden;
+}
+
+.description {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

webpage/src/pages/index.tsx

@@ -0,0 +1,72 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageShowcase from '@site/src/components/HomepageShowcase';
+import Heading from '@theme/Heading';
+
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          <img
+            alt="n.eko"
+            className={styles.heroLogo}
+            src="img/logo.png"
+            width="450"
+          />
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro">
+            Get started
+          </Link>
+          <span className={styles.indexCtasGitHubButtonWrapper}>
+            <iframe
+              className={styles.indexCtasGitHubButton}
+              src="https://ghbtns.com/github-btn.html?user=m1k1o&amp;repo=neko&amp;type=star&amp;count=true&amp;size=large"
+              width={160}
+              height={30}
+              title="GitHub Stars"
+            />
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): ReactNode {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      description={siteConfig.tagline}>
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+        <HomepageShowcase />
+        <section className={styles.description}>
+          <div className="container">
+            <p>
+              Welcome to Neko, a self-hosted virtual browser that runs in Docker and uses WebRTC technology. Neko is a powerful tool that allows you to <strong>run a fully-functional browser in a virtual environment</strong>, giving you the ability to <strong>access the internet securely and privately from anywhere</strong>. With Neko, you can browse the web, <strong>run applications</strong>, and perform other tasks just as you would on a regular browser, all within a <strong>secure and isolated environment</strong>. Whether you are a developer looking to test web applications, a <strong>privacy-conscious user seeking a secure browsing experience</strong>, or simply someone who wants to take advantage of the <strong>convenience and flexibility of a virtual browser</strong>, Neko is the perfect solution.
+            </p>
+            <p>
+              In addition to its security and privacy features, Neko offers the <strong>ability for multiple users to access it simultaneously</strong>. This makes it an ideal solution for teams or organizations that need to share access to a browser, as well as for individuals who want to use <strong>multiple devices to access the same virtual environment</strong>. With Neko, you can <strong>easily and securely share access to a browser with others</strong>, without having to worry about maintaining separate configurations or settings. Whether you need to <strong>collaborate on a project</strong>, access shared resources, or simply want to <strong>share access to a browser with friends or family</strong>, Neko makes it easy to do so.
+            </p>
+            <p>
+              Neko is also a great tool for <strong>hosting watch parties</strong> and interactive presentations. With its virtual browser capabilities, Neko allows you to host watch parties and presentations that are <strong>accessible from anywhere</strong>, without the need for in-person gatherings. This makes it easy to <strong>stay connected with friends and colleagues</strong>, even when you are unable to meet in person. With Neko, you can easily host a watch party or give an <strong>interactive presentation</strong>, whether it's for leisure or work. Simply invite your guests to join the virtual environment, and you can share the screen and <strong>interact with them in real-time</strong>.
+            </p>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}

webpage/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

webpage/static/img/undraw_online_collaboration.svg

@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="880" height="568.763" viewBox="0 0 880 568.763" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">
+  <g id="Group_149" data-name="Group 149" transform="translate(-507 -257)">
+    <path id="Path_2395-1162" data-name="Path 2395" d="M926.162,628.686H265.813a17.022,17.022,0,0,1-17-17V204.5a12.47,12.47,0,0,1,12.456-12.456H930.493a12.686,12.686,0,0,1,12.672,12.672V611.684a17.022,17.022,0,0,1-17,17Z" transform="translate(336.308 76.092)" fill="#f2f2f2"/>
+    <path id="Path_2396-1163" data-name="Path 2396" d="M901.438,606.683H286.011c-9.022,0-16.361-6.873-16.361-15.321V236.781c0-6.265,5.439-11.363,12.124-11.363h623.7c6.8,0,12.325,5.181,12.325,11.55V591.362C917.8,599.81,910.46,606.683,901.438,606.683Z" transform="translate(336.943 77.108)" fill="#fff"/>
+    <path id="Path_2397-1164" data-name="Path 2397" d="M942.935,206.947H248.579v-8.656a17.078,17.078,0,0,1,17.064-17.054H925.87a17.078,17.078,0,0,1,17.064,17.054Z" transform="translate(336.301 75.763)" fill="#6c63ff"/>
+    <circle id="Ellipse_431" data-name="Ellipse 431" cx="4.414" cy="4.414" r="4.414" transform="translate(611.477 265.467)" fill="#fff"/>
+    <circle id="Ellipse_432" data-name="Ellipse 432" cx="4.414" cy="4.414" r="4.414" transform="translate(628.232 265.467)" fill="#fff"/>
+    <circle id="Ellipse_433" data-name="Ellipse 433" cx="4.414" cy="4.414" r="4.414" transform="translate(644.985 265.467)" fill="#fff"/>
+    <path id="Path_2398-1165" data-name="Path 2398" d="M573.343,559.6H359.177a18.053,18.053,0,0,1-18.033-18.033v-258.8a13.5,13.5,0,0,1,13.486-13.487H577.674a13.718,13.718,0,0,1,13.7,13.7V541.565A18.053,18.053,0,0,1,573.343,559.6ZM354.63,271.338A11.439,11.439,0,0,0,343.2,282.764v258.8a15.99,15.99,0,0,0,15.972,15.972H573.343a15.99,15.99,0,0,0,15.972-15.972V282.98a11.654,11.654,0,0,0-11.641-11.641Z" transform="translate(339.119 78.443)" fill="#ccc"/>
+    <path id="Path_2399-1166" data-name="Path 2399" d="M375.131,541.026H556.323a16.487,16.487,0,0,0,16.487-16.487V303.459a16.487,16.487,0,0,0-16.487-16.487H375.131a16.487,16.487,0,0,0-16.487,16.487v221.08A16.487,16.487,0,0,0,375.131,541.026Z" transform="translate(339.652 78.982)" fill="#e6e6e6"/>
+    <path id="Path_2400-1167" data-name="Path 2400" d="M514.214,331.142H414.261a6.7,6.7,0,1,1,0-13.4h99.953a6.7,6.7,0,0,1,0,13.4Z" transform="translate(341.141 79.919)" fill="#6c63ff"/>
+    <path id="Path_2401-1168" data-name="Path 2401" d="M514.214,472.142H414.261a6.7,6.7,0,1,1,0-13.4h99.953a6.7,6.7,0,0,1,0,13.4Z" transform="translate(341.141 84.211)" fill="#fff"/>
+    <path id="Path_2402-1169" data-name="Path 2402" d="M514.214,503.142H414.261a6.7,6.7,0,1,1,0-13.4h99.953a6.7,6.7,0,0,1,0,13.4Z" transform="translate(341.141 85.155)" fill="#fff"/>
+    <circle id="Ellipse_434" data-name="Ellipse 434" cx="40.187" cy="40.187" r="40.187" transform="translate(765.706 429.093)" fill="#fff"/>
+    <path id="Path_2403-1170" data-name="Path 2403" d="M716.8,351.509l-17.555,3.7a1.031,1.031,0,0,0-.706,1.475l1.636,3.223-79.39,40.3a1.03,1.03,0,1,0,.933,1.838l79.39-40.3,1.636,3.223a1.03,1.03,0,0,0,1.607.3L717.7,353.284a1.03,1.03,0,0,0-.9-1.775Z" transform="translate(347.616 80.946)" fill="#e6e6e6"/>
+    <path id="Path_2404-1171" data-name="Path 2404" d="M716.8,450.212l-17.555-3.7a1.031,1.031,0,0,1-.706-1.475l1.636-3.223-79.39-40.3a1.03,1.03,0,1,1,.933-1.838l79.39,40.3,1.636-3.223a1.03,1.03,0,0,1,1.607-.3L717.7,448.436a1.031,1.031,0,0,1-.9,1.775Z" transform="translate(347.616 82.41)" fill="#e6e6e6"/>
+    <path id="Path_2405-1172" data-name="Path 2405" d="M770.772,375.1a22.67,22.67,0,1,1,22.67-22.67A22.67,22.67,0,0,1,770.772,375.1Zm0-43.279a20.609,20.609,0,1,0,20.609,20.609,20.609,20.609,0,0,0-20.609-20.609Z" transform="translate(351.509 80.285)" fill="#e6e6e6"/>
+    <path id="Path_2406-1173" data-name="Path 2406" d="M770.772,472.1a22.67,22.67,0,1,1,22.67-22.67A22.67,22.67,0,0,1,770.772,472.1Zm0-43.279a20.609,20.609,0,1,0,20.609,20.609,20.609,20.609,0,0,0-20.609-20.609Z" transform="translate(351.509 83.238)" fill="#e6e6e6"/>
+    <path id="Path_395-1174" data-name="Path 395" d="M768.651,363.258a3.02,3.02,0,0,1-1.817-.6l-.032-.024-6.842-5.234a3.041,3.041,0,1,1,3.7-4.826l4.432,3.4,10.473-13.663a3.039,3.039,0,0,1,4.261-.563h0l-.065.09.067-.09a3.043,3.043,0,0,1,.562,4.262l-12.318,16.063a3.041,3.041,0,0,1-2.418,1.186Z" transform="translate(351.834 80.63)" fill="#6c63ff"/>
+    <path id="Path_2407-1175" data-name="Path 2407" d="M760.57,458.9a1.546,1.546,0,0,1,0-2.186l17.487-17.487a1.546,1.546,0,0,1,2.186,2.186L762.756,458.9a1.546,1.546,0,0,1-2.186,0Z" transform="translate(351.875 83.603)" fill="#e6e6e6"/>
+    <path id="Path_2408-1176" data-name="Path 2408" d="M779.243,458.9a1.546,1.546,0,0,0,0-2.186L761.756,439.23a1.546,1.546,0,0,0-2.186,2.186L777.057,458.9a1.546,1.546,0,0,0,2.186,0Z" transform="translate(351.844 83.603)" fill="#e6e6e6"/>
+    <path id="Path_2409-1177" data-name="Path 2409" d="M808.849,402.008a1.41,1.41,0,0,1-.2-.015,1.361,1.361,0,0,1-.9-.537l-8.424-11.3a.34.34,0,0,0-.584.069l-4.319,10.105a1.37,1.37,0,0,1-2.586-.2l-8.619-33.361a1.37,1.37,0,0,1,2.034-1.516l29.512,17.78a1.37,1.37,0,0,1-.55,2.534L803.3,386.832a.34.34,0,0,0-.233.54l8.423,11.3a1.372,1.372,0,0,1-.279,1.918l-1.543,1.15A1.361,1.361,0,0,1,808.849,402.008Z" transform="translate(352.577 81.359)" fill="#6c63ff"/>
+    <path id="Path_2410-1178" data-name="Path 2410" d="M856,425.372h-37.1a10.3,10.3,0,0,1,0-20.609H856a10.3,10.3,0,0,1,0,20.609Z" transform="translate(353.351 82.568)" fill="#6c63ff"/>
+    <path id="Path_2411-1179" data-name="Path 2411" d="M418.493,356.735l-1.543-1.15a1.372,1.372,0,0,1-.279-1.917l8.423-11.3a.34.34,0,0,0-.233-.54l-10.914-1.255a1.37,1.37,0,0,1-.55-2.534l29.512-17.78a1.37,1.37,0,0,1,2.033,1.516l-8.619,33.361a1.37,1.37,0,0,1-2.586.2l-4.319-10.105a.34.34,0,0,0-.584-.069l-8.424,11.3a1.361,1.361,0,0,1-.9.537,1.41,1.41,0,0,1-.2.015,1.36,1.36,0,0,1-.816-.272Z" transform="translate(341.299 79.989)" fill="#3f3d56"/>
+    <path id="Path_2412-1180" data-name="Path 2412" d="M362.6,370.067a10.316,10.316,0,0,1,10.3-10.3H410a10.3,10.3,0,1,1,0,20.609h-37.1A10.316,10.316,0,0,1,362.6,370.067Z" transform="translate(339.772 81.198)" fill="#3f3d56"/>
+    <path id="Path_2435-1181" data-name="Path 2435" d="M429.581,718.824H174.03a1.03,1.03,0,1,1,0-2.061h255.55a1.03,1.03,0,1,1,0,2.061Z" transform="translate(334 92.067)" fill="#ccc"/>
+    <path id="Path_2436-1182" data-name="Path 2436" d="M1031.389,718.824H850.03a1.03,1.03,0,1,1,0-2.061h181.358a1.03,1.03,0,0,1,0,2.061Z" transform="translate(354.581 92.067)" fill="#ccc"/>
+    <g id="Group_147" data-name="Group 147" transform="translate(1226.434 421.744)">
+      <path id="Path_2437-1183" data-name="Path 2437" d="M744,576.821l4.1,16.407-18.046,4.922-1.641-17.226Z" transform="translate(-622.61 -222.744)" fill="#ffb9b9"/>
+      <path id="Path_2438-1184" data-name="Path 2438" d="M660.316,601.688v15.585l-18.047,3.282-3.281-8.2,6.563-13.945Z" transform="translate(-604.551 -227.103)" fill="#ffb9b9"/>
+      <path id="Path_2439-1185" data-name="Path 2439" d="M912.7,519.477l-2.461,22.148,1.641,42.655s0,4.1,2.461,5.742c1.32.9,30.351,82.03,30.351,82.03s-6.562,8.2-18.867,5.742l-2.461-8.2s-3.281-10.664-4.922-13.125-26.25-52.5-26.25-52.5L880.712,583.46l-3.281,27.89s6.562,35.273,4.922,51.679-4.922,33.632-4.922,33.632l-24.213-3.77c-.089-2.647.425-21.659.425-21.659v-2.461l-4.922-63.163-9.023-82.85Z" transform="translate(-820.845 -314.693)" fill="#090814"/>
+      <circle id="Ellipse_440" data-name="Ellipse 440" cx="22.148" cy="22.148" r="22.148" transform="translate(13.929 11.194)" fill="#ffb9b9"/>
+      <path id="Path_2440-1186" data-name="Path 2440" d="M658.765,175.443l9.023,22.148L646.46,213.177l-13.125-22.969Z" transform="translate(-603.411 -141.691)" fill="#ffb9b9"/>
+      <path id="Path_2441-1187" data-name="Path 2441" d="M876.956,325.2l8.2-4.1,4.922,11.484s31.992,9.844,29.531,54.96-8.2,62.342-8.2,62.342,13.945,29.531,5.742,32.812-77.928,15.586-79.569,4.1,5.742-78.748,5.742-78.748-2.461-48.4,18.046-58.241l-4.1-9.023Z" transform="translate(-820.372 -274.634)" fill="#e6e6e6"/>
+      <path id="Path_2442-1188" data-name="Path 2442" d="M827.545,525.644s-18.867,19.687-8.2,24.609,17.226-22.148,17.226-22.148Z" transform="translate(-816.076 -315.939)" fill="#ffb9b9"/>
+      <path id="Path_2443-1189" data-name="Path 2443" d="M865.755,742.495l8.55-3.192s9.328,21.544,1.555,21.544H855.65s-11.66-3.99-17.878-3.99-17.878-11.969-9.328-17.554,19.433-3.99,19.433-3.99l3.109-7.181,3.887,11.171S859.536,747.282,865.755,742.495Z" transform="translate(-817.963 -356.828)" fill="#090814"/>
+      <path id="Path_2444-1190" data-name="Path 2444" d="M956.5,722.775s5.137-3.241,7.9-2.031,4.4,14.335,4.4,14.335,8.2,9.844-9.844,11.484-22.148-1.641-23.789-6.562,1.641-9.844,1.641-9.844l4.922-1.641s5.742-4.1,4.1-5.742,0-4.922,0-4.922S951.578,729.338,956.5,722.775Z" transform="translate(-840.033 -354.752)" fill="#090814"/>
+      <path id="Path_2445-1191" data-name="Path 2445" d="M862.943,295.863a10.865,10.865,0,0,0-.482-2.108c-1.19-2.5-5.835-1.768-6.663-4.408-.162-.517-.128-1.079-.287-1.6a3.239,3.239,0,0,0-3.336-1.911,18.024,18.024,0,0,0-4,1.03c-3.245.921-6.7.569-10.051.21a10.113,10.113,0,0,1-4.292-1.117,3.458,3.458,0,0,1-1.723-3.772c.443-1.359,1.931-2.106,2.6-3.37,1.062-2.007-.236-4.6.625-6.7,1.382-3.37,6.613-2.693,9.27-5.184.645-.6,1.11-1.377,1.728-2.009,1.834-1.875,4.731-2.238,7.341-1.979s5.175,1.025,7.8.979c2.487-.044,5.094-.8,7.386.166a10.533,10.533,0,0,1,3.469,2.85l5.878,6.446a7.244,7.244,0,0,1,1.817,2.736c.354,1.235.028,2.561.179,3.837.344,2.91,3.068,5.108,3.436,8.015a10.423,10.423,0,0,1-.13,2.7l-.823,6.071a4.517,4.517,0,0,1-.464,1.7c-.239.409-.6.732-.871,1.122-.761,1.1-.692,2.556-1.07,3.84s-1.734,2.554-2.921,1.935c-.774-.4-1.286-3.742-2.226-4.608-1.31-1.207-1.994-1.058-3.61-1.038C868.283,299.742,863.978,300.019,862.943,295.863Z" transform="translate(-819.289 -262.876)" fill="#2f2e41"/>
+      <path id="Path_2446-1192" data-name="Path 2446" d="M865.5,364.263s24.609,9.844,17.226,31.992-27.07,90.233-27.07,90.233l-11.484,5.742-3.281,9.023-15.586-5.742,2.461-12.3,5.742-12.3,14.765-91.873S848.276,363.442,865.5,364.263Z" transform="translate(-817.941 -283.344)" fill="#e6e6e6"/>
+      <path id="Path_2447-1193" data-name="Path 2447" d="M669.428,280.284,644,367.235,633.335,377.9l6.152-11.075Z" transform="translate(-603.411 -162.862)" opacity="0.1" style="isolation: isolate"/>
+    </g>
+    <g id="Group_148" data-name="Group 148" transform="translate(545.126 446.425)">
+      <path id="Path_2448-1194" data-name="Path 2448" d="M267.893,427.631l5.07,36.052,21.406,38.305c6.2,5.633.563,19.153.563,19.153L289.3,517.2l-1.127-6.76s-24.786-28.166-30.982-34.925-8.45-43.938-8.45-43.938Z" transform="translate(-224.69 -339.181)" fill="#fbbebe"/>
+      <path id="Path_2449-1195" data-name="Path 2449" d="M246.2,716.108s1.127,12.956.563,16.336-17.463-.563-17.463-.563c2.817-5.633,4.507-22.532,4.507-22.532Z" transform="translate(-221.653 -383.172)" fill="#fbbebe"/>
+      <path id="Path_2450-1196" data-name="Path 2450" d="M345.771,721.052s1.69,18.026,1.127,21.406-17.463-.563-17.463-.563c2.817-5.633,4.507-22.533,4.507-22.533Z" transform="translate(-237.289 -384.735)" fill="#fbbebe"/>
+      <circle id="Ellipse_441" data-name="Ellipse 441" cx="20.489" cy="20.489" r="20.489" transform="translate(53.472 6.359)" fill="#fbbebe"/>
+      <path id="Path_2451-1197" data-name="Path 2451" d="M303.307,374.761c-3.38,4.507-1.69,12.393-1.69,12.393s-34.362,40-40.559,40-5.07-28.166-5.07-28.166,9.013-10.7,14.083-12.956,14.083-26.476,14.083-26.476S306.687,370.254,303.307,374.761Z" transform="translate(-225.808 -328.55)" fill="#fbbebe"/>
+      <path id="Path_2452-1198" data-name="Path 2452" d="M322.406,468.362l22.05,37.04c4.024,6.621-3.461,40.134-3.461,40.134l-3.38,71.541-5.633,72.086v7.886l-18.589-.563-6.2-77.156-9.013-58.021-14.646,44.5-24.222,54.641a149.745,149.745,0,0,1-7.606,19.707l-4.507,7.886-16.895-1.975,25.627-86.456L261,543.283c.563-31.545,10.7-49.008,10.7-49.008v-6.76Z" transform="translate(-221.811 -345.541)" fill="#090814"/>
+      <path id="Path_2453-1199" data-name="Path 2453" d="M243.659,732.789s2.817-4.507,2.817-2.817,7.323,6.2,7.323,6.2,7.323-1.127,8.45,7.323-10.14,10.14-12.956,9.576-10.14.563-10.14.563a50.274,50.274,0,0,1-14.646,0c-9.013-1.127-1.127-16.336,0-19.153s6.76-.563,6.76-.563C241.406,736.732,243.659,732.789,243.659,732.789Z" transform="translate(-220.238 -386.333)" fill="#090814"/>
+      <path id="Path_2454-1200" data-name="Path 2454" d="M343.792,742.8s2.817-4.506,2.817-2.817,7.323,6.2,7.323,6.2,7.323-1.127,8.45,7.323-10.14,10.14-12.956,9.576-10.14.563-10.14.563a50.274,50.274,0,0,1-14.646,0c-9.013-1.127-1.127-16.336,0-19.153s6.76-.563,6.76-.563C341.539,746.745,343.792,742.8,343.792,742.8Z" transform="translate(-235.875 -387.897)" fill="#090814"/>
+      <path id="Path_2455-1201" data-name="Path 2455" d="M293.413,390.954c14.083-14.646,29.292,21.969,29.292,21.969s5.07,13.52,1.127,20.843,3.943,23.659,3.943,23.659c-19.291,16.422-38.515,31.6-56.331,20.843,2.253-13.52-5.07-20.279-10.14-33.235s-14.646-10.14-14.646-10.14.563-14.646,2.253-26.476,16.9-16.271,16.9-16.271C268.568,397.1,279.33,405.6,293.413,390.954Z" transform="translate(-224.365 -332.914)" fill="#6c63ff"/>
+      <path id="Path_2456-1202" data-name="Path 2456" d="M327.893,419.631l5.07,36.052,21.406,38.305c6.2,5.633.563,19.153.563,19.153L349.3,509.2l-1.127-6.76s-24.786-28.166-30.982-34.925-8.45-43.938-8.45-43.938Z" transform="translate(-234.057 -337.932)" fill="#fbbebe"/>
+      <path id="Path_2457-1203" data-name="Path 2457" d="M330.991,419.909l-23.659,2.817s-1.69-27.6,1.883-34.5,16.707.7,16.707.7C329.3,389.49,330.991,419.909,330.991,419.909Z" transform="translate(-233.776 -332.577)" fill="#6c63ff"/>
+      <path id="Path_2458-1204" data-name="Path 2458" d="M324.372,337.8c-15.152,7.573-6.41,28.25-8.2,36.926-2.929,14.21-46.123,6.989-46.123,6.989-5.255-.945-8.458-59.413,20.322-58.9C304.88,323.078,314.917,327.684,324.372,337.8Z" transform="translate(-227.474 -322.813)" fill="#090814"/>
+      <ellipse id="Ellipse_442" data-name="Ellipse 442" cx="2.11" cy="3.375" rx="2.11" ry="3.375" transform="translate(85.553 26.211)" fill="#fbbebe"/>
+    </g>
+  </g>
+</svg>

webpage/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "exclude": [".docusaurus", "build"]
+}