Merge branch 'main' into doc-1364-next.js-ssr-auth-demo-add-await-to-code

2025-12-10 04:22:18 +00:00 · 2024-11-13 11:15:14 +01:00
parent 6ea1a15e05 aed2323c4a
commit e2bf6d09c1
75 changed files with 1468 additions and 496 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,30 +0,0 @@
-module.exports = {
-    root: true,
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:svelte/recommended',
-        'prettier'
-    ],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
-    parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 2020,
-        extraFileExtensions: ['.svelte']
-    },
-    env: {
-        browser: true,
-        es2017: true,
-        node: true
-    },
-    overrides: [
-        {
-            files: ['*.svelte'],
-            parser: 'svelte-eslint-parser',
-            parserOptions: {
-                parser: '@typescript-eslint/parser'
-            }
-        }
-    ]
-};
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,9 +0,0 @@
-{
-    "useTabs": false,
-    "tabWidth": 4,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "printWidth": 100,
-    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+    js.configs.recommended,
+    ...ts.configs.recommended,
+    ...svelte.configs['flat/recommended'],
+    prettier,
+    ...svelte.configs['flat/prettier'],
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node
+            }
+        }
+    },
+    {
+        files: ['**/*.svelte'],
+
+        languageOptions: {
+            parserOptions: {
+                parser: ts.parser
+            }
+        }
+    },
+    {
+        ignores: ['build/', '.svelte-kit/', 'dist/']
+    }
+);
--- a/package.json
+++ b/package.json
@@ -45,8 +45,6 @@
        "@types/glob": "^8.1.0",
        "@types/markdown-it": "^13.0.8",
        "@types/morgan": "^1.9.9",
-        "@typescript-eslint/eslint-plugin": "^7.13.1",
-        "@typescript-eslint/parser": "^7.13.1",
        "analytics": "^0.8.14",
        "clsx": "^2.1.1",
        "cva": "npm:class-variance-authority@^0.7.0",
@@ -55,10 +53,11 @@
        "embla-carousel": "^8.1.5",
        "embla-carousel-svelte": "^8.1.5",
        "embla-carousel-wheel-gestures": "^8.0.1",
-        "eslint": "^8.57.0",
-        "eslint-config-prettier": "^8.10.0",
+        "eslint": "^9.7.0",
+        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.40.0",
        "fuse.js": "^7.0.0",
+        "globals": "^15.12.0",
        "highlight.js": "^11.9.0",
        "markdown-it": "^14.1.0",
        "meilisearch": "^0.37.0",
@@ -82,6 +81,7 @@
        "tailwindcss": "4.0.0-alpha.17",
        "tslib": "^2.6.3",
        "typescript": "^5.5.2",
+        "typescript-eslint": "^8.13.0",
        "vite": "^5.3.1",
        "vite-plugin-dynamic-import": "^1.5.0",
        "vite-plugin-image-optimizer": "^1.1.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,12 +69,6 @@ importers:
      '@types/morgan':
        specifier: ^1.9.9
        version: 1.9.9
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^7.13.1
-        version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/parser':
-        specifier: ^7.13.1
-        version: 7.18.0(eslint@8.57.1)(typescript@5.6.3)
      analytics:
        specifier: ^0.8.14
        version: 0.8.14(@types/dlv@1.1.4)
@@ -100,17 +94,20 @@ importers:
        specifier: ^8.0.1
        version: 8.0.1(embla-carousel@8.3.0)
      eslint:
-        specifier: ^8.57.0
-        version: 8.57.1
+        specifier: ^9.7.0
+        version: 9.14.0(jiti@1.21.6)
      eslint-config-prettier:
-        specifier: ^8.10.0
-        version: 8.10.0(eslint@8.57.1)
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@9.14.0(jiti@1.21.6))
      eslint-plugin-svelte:
        specifier: ^2.40.0
-        version: 2.44.1(eslint@8.57.1)(svelte@4.2.19)
+        version: 2.44.1(eslint@9.14.0(jiti@1.21.6))(svelte@4.2.19)
      fuse.js:
        specifier: ^7.0.0
        version: 7.0.0
+      globals:
+        specifier: ^15.12.0
+        version: 15.12.0
      highlight.js:
        specifier: ^11.9.0
        version: 11.10.0
@@ -180,6 +177,9 @@ importers:
      typescript:
        specifier: ^5.5.2
        version: 5.6.3
+      typescript-eslint:
+        specifier: ^8.13.0
+        version: 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
      vite:
        specifier: ^5.3.1
        version: 5.4.9(@types/node@22.7.5)(lightningcss@1.27.0)(sass@1.79.5)
@@ -459,13 +459,33 @@ packages:
    resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}

-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}

-  '@eslint/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-array@0.18.0':
+    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.7.0':
+    resolution: {integrity: sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.1.0':
+    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.14.0':
+    resolution: {integrity: sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.4':
+    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.2':
+    resolution: {integrity: sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@floating-ui/core@1.6.8':
    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
@@ -479,18 +499,25 @@ packages:
  '@gar/promisify@1.1.3':
    resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}

-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}

  '@humanwhocodes/module-importer@1.0.1':
    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
    engines: {node: '>=12.22'}

-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}

  '@img/sharp-darwin-arm64@0.33.5':
    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
@@ -1708,6 +1735,9 @@ packages:
  '@types/http-errors@2.0.4':
    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}

+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
  '@types/linkify-it@3.0.5':
    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}

@@ -1774,66 +1804,62 @@ packages:
  '@types/shimmer@1.2.0':
    resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}

-  '@typescript-eslint/eslint-plugin@7.18.0':
-    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/eslint-plugin@8.13.0':
+    resolution: {integrity: sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
      typescript: '*'
    peerDependenciesMeta:
      typescript:
        optional: true

-  '@typescript-eslint/parser@7.18.0':
-    resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/parser@8.13.0':
+    resolution: {integrity: sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      eslint: ^8.56.0
+      eslint: ^8.57.0 || ^9.0.0
      typescript: '*'
    peerDependenciesMeta:
      typescript:
        optional: true

-  '@typescript-eslint/scope-manager@7.18.0':
-    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/scope-manager@8.13.0':
+    resolution: {integrity: sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/type-utils@7.18.0':
-    resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/types@7.18.0':
-    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/typescript-estree@7.18.0':
-    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/type-utils@8.13.0':
+    resolution: {integrity: sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '*'
    peerDependenciesMeta:
      typescript:
        optional: true

-  '@typescript-eslint/utils@7.18.0':
-    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/types@8.13.0':
+    resolution: {integrity: sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.13.0':
+    resolution: {integrity: sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true

-  '@typescript-eslint/visitor-keys@7.18.0':
-    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
+  '@typescript-eslint/utils@8.13.0':
+    resolution: {integrity: sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0

-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+  '@typescript-eslint/visitor-keys@8.13.0':
+    resolution: {integrity: sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@vitest/expect@1.6.0':
    resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
@@ -1876,6 +1902,11 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
  agent-base@6.0.2:
    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
    engines: {node: '>= 6.0.0'}
@@ -2280,10 +2311,6 @@ packages:
  dlv@1.1.3:
    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}

-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
  dom-serializer@2.0.0:
    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}

@@ -2392,8 +2419,8 @@ packages:
    peerDependencies:
      eslint: '>=6.0.0'

-  eslint-config-prettier@8.10.0:
-    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
+  eslint-config-prettier@9.1.0:
+    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
    hasBin: true
    peerDependencies:
      eslint: '>=7.0.0'
@@ -2412,19 +2439,35 @@ packages:
    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  eslint-visitor-keys@3.4.3:
    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

-  eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.14.0:
+    resolution: {integrity: sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true

  esm-env@1.0.0:
    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}

+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  espree@9.6.1:
    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2482,9 +2525,9 @@ packages:
  fastq@1.17.1:
    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}

-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}

  file-type@16.5.4:
    resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
@@ -2504,9 +2547,9 @@ packages:
    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
    engines: {node: '>=10'}

-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}

  flatted@3.3.1:
    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
@@ -2610,9 +2653,13 @@ packages:
    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
    engines: {node: '>=4'}

-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.12.0:
+    resolution: {integrity: sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==}
+    engines: {node: '>=18'}

  globalyzer@0.1.0:
    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
@@ -4070,14 +4117,19 @@ packages:
    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
    engines: {node: '>=4'}

-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
  type-fest@4.26.1:
    resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
    engines: {node: '>=16'}

+  typescript-eslint@8.13.0:
+    resolution: {integrity: sha512-vIMpDRJrQd70au2G8w34mPps0ezFSPMEX4pXkTzUkrNbRX+36ais2ksGWN0esZL+ZMaFJEneOBHzCgSqle7DHw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  typescript@5.6.3:
    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
    engines: {node: '>=14.17'}
@@ -4579,19 +4631,31 @@ snapshots:
  '@esbuild/win32-x64@0.21.5':
    optional: true

-  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.14.0(jiti@1.21.6))':
    dependencies:
-      eslint: 8.57.1
+      eslint: 9.14.0(jiti@1.21.6)
      eslint-visitor-keys: 3.4.3

  '@eslint-community/regexpp@4.11.1': {}

-  '@eslint/eslintrc@2.1.4':
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.18.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.4
+      debug: 4.3.7
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/core@0.7.0': {}
+
+  '@eslint/eslintrc@3.1.0':
    dependencies:
      ajv: 6.12.6
      debug: 4.3.7
-      espree: 9.6.1
-      globals: 13.24.0
+      espree: 10.3.0
+      globals: 14.0.0
      ignore: 5.3.2
      import-fresh: 3.3.0
      js-yaml: 4.1.0
@@ -4600,7 +4664,13 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@eslint/js@8.57.1': {}
+  '@eslint/js@9.14.0': {}
+
+  '@eslint/object-schema@2.1.4': {}
+
+  '@eslint/plugin-kit@0.2.2':
+    dependencies:
+      levn: 0.4.1

  '@floating-ui/core@1.6.8':
    dependencies:
@@ -4615,17 +4685,18 @@ snapshots:

  '@gar/promisify@1.1.3': {}

-  '@humanwhocodes/config-array@0.13.0':
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
    dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.7
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1

  '@humanwhocodes/module-importer@1.0.1': {}

-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.1': {}

  '@img/sharp-darwin-arm64@0.33.5':
    optionalDependencies:
@@ -5973,6 +6044,8 @@ snapshots:

  '@types/http-errors@2.0.4': {}

+  '@types/json-schema@7.0.15': {}
+
  '@types/linkify-it@3.0.5': {}

  '@types/linkify-it@5.0.0':
@@ -6045,15 +6118,15 @@ snapshots:

  '@types/shimmer@1.2.0': {}

-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
    dependencies:
      '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.13.0
+      '@typescript-eslint/type-utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.13.0
+      eslint: 9.14.0(jiti@1.21.6)
      graphemer: 1.4.0
      ignore: 5.3.2
      natural-compare: 1.4.0
@@ -6063,44 +6136,44 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
+      '@typescript-eslint/scope-manager': 8.13.0
+      '@typescript-eslint/types': 8.13.0
+      '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.13.0
      debug: 4.3.7
-      eslint: 8.57.1
+      eslint: 9.14.0(jiti@1.21.6)
    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/scope-manager@7.18.0':
+  '@typescript-eslint/scope-manager@8.13.0':
    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
+      '@typescript-eslint/types': 8.13.0
+      '@typescript-eslint/visitor-keys': 8.13.0

-  '@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
      debug: 4.3.7
-      eslint: 8.57.1
      ts-api-utils: 1.3.0(typescript@5.6.3)
    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
+      - eslint
      - supports-color

-  '@typescript-eslint/types@7.18.0': {}
+  '@typescript-eslint/types@8.13.0': {}

-  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.13.0(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
+      '@typescript-eslint/types': 8.13.0
+      '@typescript-eslint/visitor-keys': 8.13.0
      debug: 4.3.7
-      globby: 11.1.0
+      fast-glob: 3.3.2
      is-glob: 4.0.3
      minimatch: 9.0.5
      semver: 7.6.3
@@ -6110,24 +6183,22 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      eslint: 8.57.1
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.14.0(jiti@1.21.6))
+      '@typescript-eslint/scope-manager': 8.13.0
+      '@typescript-eslint/types': 8.13.0
+      '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
+      eslint: 9.14.0(jiti@1.21.6)
    transitivePeerDependencies:
      - supports-color
      - typescript

-  '@typescript-eslint/visitor-keys@7.18.0':
+  '@typescript-eslint/visitor-keys@8.13.0':
    dependencies:
-      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/types': 8.13.0
      eslint-visitor-keys: 3.4.3

-  '@ungap/structured-clone@1.2.0': {}
-
  '@vitest/expect@1.6.0':
    dependencies:
      '@vitest/spy': 1.6.0
@@ -6169,12 +6240,18 @@ snapshots:
    dependencies:
      acorn: 8.12.1

+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
  acorn-walk@8.3.4:
    dependencies:
      acorn: 8.12.1

  acorn@8.12.1: {}

+  acorn@8.14.0: {}
+
  agent-base@6.0.2:
    dependencies:
      debug: 4.3.7
@@ -6597,10 +6674,6 @@ snapshots:

  dlv@1.1.3: {}

-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
-
  dom-serializer@2.0.0:
    dependencies:
      domelementtype: 2.3.0
@@ -6710,21 +6783,21 @@ snapshots:

  escape-string-regexp@4.0.0: {}

-  eslint-compat-utils@0.5.1(eslint@8.57.1):
+  eslint-compat-utils@0.5.1(eslint@9.14.0(jiti@1.21.6)):
    dependencies:
-      eslint: 8.57.1
+      eslint: 9.14.0(jiti@1.21.6)
      semver: 7.6.3

-  eslint-config-prettier@8.10.0(eslint@8.57.1):
+  eslint-config-prettier@9.1.0(eslint@9.14.0(jiti@1.21.6)):
    dependencies:
-      eslint: 8.57.1
+      eslint: 9.14.0(jiti@1.21.6)

-  eslint-plugin-svelte@2.44.1(eslint@8.57.1)(svelte@4.2.19):
+  eslint-plugin-svelte@2.44.1(eslint@9.14.0(jiti@1.21.6))(svelte@4.2.19):
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.14.0(jiti@1.21.6))
      '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 8.57.1
-      eslint-compat-utils: 0.5.1(eslint@8.57.1)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-compat-utils: 0.5.1(eslint@9.14.0(jiti@1.21.6))
      esutils: 2.0.3
      known-css-properties: 0.34.0
      postcss: 8.4.47
@@ -6743,53 +6816,65 @@ snapshots:
      esrecurse: 4.3.0
      estraverse: 5.3.0

+  eslint-scope@8.2.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
  eslint-visitor-keys@3.4.3: {}

-  eslint@8.57.1:
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.14.0(jiti@1.21.6):
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.11.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.14.0(jiti@1.21.6))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.18.0
+      '@eslint/core': 0.7.0
+      '@eslint/eslintrc': 3.1.0
+      '@eslint/js': 9.14.0
+      '@eslint/plugin-kit': 0.2.2
+      '@humanfs/node': 0.16.6
      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
+      '@humanwhocodes/retry': 0.4.1
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
      ajv: 6.12.6
      chalk: 4.1.2
      cross-spawn: 7.0.3
      debug: 4.3.7
-      doctrine: 3.0.0
      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
      esquery: 1.6.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
      find-up: 5.0.0
      glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
      ignore: 5.3.2
      imurmurhash: 0.1.4
      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
      lodash.merge: 4.6.2
      minimatch: 3.1.2
      natural-compare: 1.4.0
      optionator: 0.9.4
-      strip-ansi: 6.0.1
      text-table: 0.2.0
+    optionalDependencies:
+      jiti: 1.21.6
    transitivePeerDependencies:
      - supports-color

  esm-env@1.0.0: {}

+  espree@10.3.0:
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
+
  espree@9.6.1:
    dependencies:
      acorn: 8.12.1
@@ -6850,9 +6935,9 @@ snapshots:
    dependencies:
      reusify: 1.0.4

-  file-entry-cache@6.0.1:
+  file-entry-cache@8.0.0:
    dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1

  file-type@16.5.4:
    dependencies:
@@ -6875,11 +6960,10 @@ snapshots:
      locate-path: 6.0.0
      path-exists: 4.0.0

-  flat-cache@3.2.0:
+  flat-cache@4.0.1:
    dependencies:
      flatted: 3.3.1
      keyv: 4.5.4
-      rimraf: 3.0.2

  flatted@3.3.1: {}

@@ -6988,9 +7072,9 @@ snapshots:

  globals@11.12.0: {}

-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@14.0.0: {}
+
+  globals@15.12.0: {}

  globalyzer@0.1.0: {}

@@ -8422,10 +8506,19 @@ snapshots:

  type-detect@4.1.0: {}

-  type-fest@0.20.2: {}
-
  type-fest@4.26.1: {}

+  typescript-eslint@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+
  typescript@5.6.3: {}

  uc.micro@2.1.0: {}
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -0,0 +1,15 @@
+/** @type {import("prettier").Config} */
+export default {
+    useTabs: false,
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'none',
+    printWidth: 100,
+    plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
+    overrides: [
+        {
+            files: '*.svelte',
+            options: { parser: 'svelte' }
+        }
+    ]
+};
--- a/src/app.css
+++ b/src/app.css
@@ -53,6 +53,7 @@
    --color-white: hsl(0 0% 100%);
    --color-black: hsl(0 0% 0%);
    --color-transparent: rgba(0, 0, 0, 0);
+    --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
    --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
    --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
    --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
@@ -68,8 +69,16 @@
    --color-greyscale-850: hsl(var(--color-greyscale-hue) 3% 14%);
    --color-greyscale-900: hsl(var(--color-greyscale-hue) 5.7% 10.4%);

+    /* utility colors */
+    --color-badge-bg-light: #f2c8d6;
+    --color-badge-border-light: #f69db7;
+    --color-badge-bg-dark: #2c2c2f;
+    --color-badge-border-dark: #39393c;
+
    /* Animations */
    --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+        up 0.75s ease-in-out both;

    /* Pink polyfills */
    --transition: 0.2s;
@@ -84,6 +93,33 @@
        }
    }

+    @keyframes blur {
+        0% {
+            filter: blur(5px);
+        }
+        100% {
+            filter: blur(0);
+        }
+    }
+
+    @keyframes up {
+        0% {
+            transform: translateY(8px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
    /* Fonts */
    --font-family-sans: 'Inter', arial, sans-serif;
    --font-family-mono: 'Fira Code', monospace;
@@ -152,12 +188,16 @@
    --color-primary: var(--color-greyscale-900);
    --color-secondary: var(--color-greyscale-700);
    --color-accent: var(--color-pink-600);
+    --color-badge-bg: var(--color-badge-bg-light);
+    --color-badge-border: var(--color-badge-border-light);
 }

 /* dark theme */
 .dark {
    --color-primary: var(--color-greyscale-100);
    --color-secondary: var(--color-greyscale-300);
+    --color-badge-bg: var(--color-badge-bg-dark);
+    --color-badge-border: var(--color-badge-border-dark);
 }

 /* Container */
--- a/src/lib/animations/Products/Products.svelte
+++ b/src/lib/animations/Products/Products.svelte
@@ -158,7 +158,6 @@
    import { postController } from './post';
    import Post from './post/post.svelte';
    import { anyify } from '$lib/utils/anyify';
-    import Badge from '$lib/components/ui/Badge.svelte';

    /* Basic Animation setup */
    let scrollInfo = {
@@ -508,10 +507,6 @@
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
-
-                    .web-label {
-                        margin-block-start: 0.25rem;
-                    }
                }

                h4 {
--- a/src/lib/animations/Products/ProductsMobile.svelte
+++ b/src/lib/animations/Products/ProductsMobile.svelte
@@ -108,10 +108,6 @@
                display: flex;
                align-items: center;
                gap: 0.75rem;
-
-                .web-label {
-                    margin-block-start: 0.25rem;
-                }
            }

            h4 {
--- a/src/lib/animations/Products/functions/phone.svelte
+++ b/src/lib/animations/Products/functions/phone.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
    import { flip } from '$lib/utils/flip';
-    import { crossfade, scale, slide } from 'svelte/transition';
+    import { scale, slide } from 'svelte/transition';
    import { functionsController } from '.';

    const { state } = functionsController;
--- a/src/lib/animations/Products/post/index.ts
+++ b/src/lib/animations/Products/post/index.ts
@@ -1,4 +1,4 @@
-import { safeAnimate, sleep } from '$lib/animations';
+import { safeAnimate } from '$lib/animations';
 import { createResettable } from '$lib/utils/resettable';
 import { animate } from 'motion';
 import { getElSelector } from '../Products.svelte';
--- a/src/lib/components/FooterNav.svelte
+++ b/src/lib/components/FooterNav.svelte
@@ -68,7 +68,8 @@
            ],
            Programs: [
                { label: 'Heroes', href: '/heroes' },
-                { label: 'Startups', href: '/startups' }
+                { label: 'Startups', href: '/startups' },
+                { label: 'Education', href: '/education' }
            ],
            About: [
                { label: 'Company', href: '/company' },
--- a/src/lib/components/IsLoggedIn.svelte
+++ b/src/lib/components/IsLoggedIn.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import Button from './ui/Button.svelte';
    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
    import { classNames } from '$lib/utils/classnames';
    import { trackEvent } from '$lib/actions/analytics';
--- a/src/lib/components/LogoList.svelte
+++ b/src/lib/components/LogoList.svelte
@@ -87,7 +87,7 @@
        <ul
            class="web-u-padding-block-start-80 grid grid-cols-3 text-center md:grid-cols-6 md:gap-10"
        >
-            {#each logos as { src, alt, width, height }, i}
+            {#each logos as { src, alt, width, height }}
                <li class="grid place-content-center">
                    <img {src} {alt} {width} {height} />
                </li>
--- a/src/lib/components/animated/Text.svelte
+++ b/src/lib/components/animated/Text.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let text: string;
+
+    const words = text.split(' ');
+</script>
+
+<span class="sr-only">{text}</span>
+<span class="relative">
+    {#each words as word, i}
+        <span
+            class="animate-text mr-2 inline-block"
+            style:animation-delay="{i * 75}ms
+            ">{word}</span
+        >
+    {/each}
+</span>
--- a/src/lib/components/carousel/CarouselSlide.svelte
+++ b/src/lib/components/carousel/CarouselSlide.svelte
@@ -5,21 +5,19 @@
 </li>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;

    .slide {
        cursor: grab;
-
-        &:active {
-            cursor: grabbing;
-        }
+        flex: 0 0 50%;
+        min-width: 0;
+        margin-right: f.pxToRem(16);

        @media (max-width: 768px) {
            flex: 0 0 100%;
        }
-
-        flex: 0 0 50%;
-        min-width: 0;
-        margin-right: pxToRem(16);
+        &:active {
+            cursor: grabbing;
+        }
    }
 </style>
--- a/src/lib/components/ui/InlineTag.svelte
+++ b/src/lib/components/ui/InlineTag.svelte
@@ -1,5 +1,5 @@
 <div
-    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
+    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 dark:bg-white/[0.12]"
 >
    <slot />
 </div>
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -99,7 +99,7 @@
                            </li>
                        {/each}
                    </ol>
-                    <div class="border-greyscale-900/[0.04] border-t pt-5">
+                    <div class="border-greyscale-900/4 border-t pt-5">
                        <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                            <span class="web-icon-arrow-up" aria-hidden="true" />
                            <span class="text-caption">Back to top</span>
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -185,7 +185,7 @@
                        </li>
                    {/each}
                </ol>
-                <div class="border-greyscale-900/[0.04] border-t pt-5">
+                <div class="border-greyscale-900/4 border-t pt-5">
                    <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                        <span class="web-icon-arrow-up" aria-hidden="true" />
                        <span class="text-caption">Back to top</span>
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -25,7 +25,6 @@
    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
    import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
    import InitBanner from '$lib/components/InitBanner.svelte';
-    import Button from '$lib/components/ui/Button.svelte';
    import { trackEvent } from '$lib/actions/analytics';

    export let omitMainId = false;
@@ -277,7 +276,7 @@
    <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />

    <main
-        class="web-main-section"
+        class="space-y-6"
        class:web-u-hide-mobile={$isMobileNavOpen}
        id={omitMainId ? undefined : 'main'}
    >
--- a/src/lib/layouts/SidebarNavButton.svelte
+++ b/src/lib/layouts/SidebarNavButton.svelte
@@ -31,6 +31,13 @@
 </a>

 <style lang="scss">
+    :global(.light) {
+        --color-secondary-icon: var(--greyscale-400, #97979b);
+    }
+    :global(.dark) {
+        --color-secondary-icon: var(--greyscale-700, #56565c);
+    }
+
    [class*='icon'] {
        font-size: 1rem;
    }
@@ -42,7 +49,7 @@
    }

    .icon-secondary {
-        color: var(--color-fgcolor-neutral-secondary, #56565c);
+        color: var(--color-secondary-icon);
        margin-left: -0.375rem;
    }
 </style>
--- a/src/markdoc/layouts/Integration.svelte
+++ b/src/markdoc/layouts/Integration.svelte
@@ -2,7 +2,6 @@
    import { Root, Slide } from '$lib/components/carousel';
    import FooterNav from '$lib/components/FooterNav.svelte';
    import MainFooter from '$lib/components/MainFooter.svelte';
-    import ProductsGrid from '$lib/components/ProductsGrid.svelte';
    import { Main } from '$lib/layouts';
    import { DEFAULT_HOST } from '$lib/utils/metadata';
    import type { Integration } from '$routes/integrations/+page';
@@ -181,13 +180,8 @@
 </Main>

 <style lang="scss">
-    @use '$scss/abstract' as *;
-
-    .cta {
-        min-height: pxToRem(560);
-        display: flex;
-        align-items: center;
-    }
+    @use '$scss/abstract/functions' as f;
+    @use '$scss/abstract/variables/devices';

    .web-pre-footer-bg {
        position: absolute;
@@ -199,24 +193,15 @@
        max-inline-size: unset;
        max-block-size: unset;
    }
-    /* more tha 9 items */
-
-    .l-side-column {
-        display: flex;
-        gap: pxToRem(16);
-        @media #{$break1} {
-            flex-direction: column;
-        }
-    }

    .l-grid-2-1 {
-        @media #{$break1} {
+        @media #{devices.$break1} {
            display: flex;
            flex-direction: column;
        }
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
            display: grid;
-            gap: pxToRem(64);
+            gap: f.pxToRem(64);
            grid-template-columns: repeat(12, 1fr);
        }

--- a/src/markdoc/nodes/Code.svelte
+++ b/src/markdoc/nodes/Code.svelte
@@ -3,3 +3,14 @@
 </script>

 <span class="web-inline-code web-code">{content}</span>
+
+<style>
+    .web-inline-code {
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+
+        @media (min-width: 1024px) {
+            margin-left: 0.5rem;
+        }
+    }
+</style>
--- a/src/markdoc/nodes/Link.svelte
+++ b/src/markdoc/nodes/Link.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { isInDocs } from '$lib/layouts/Docs.svelte';
    import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';

    export let href: string;
@@ -9,11 +8,9 @@
    const target = isExternal ? '_blank' : undefined;
    const rel = isExternal ? 'noopener nofollow' : undefined;

-    const inDocs = isInDocs();
    const inChangelog = isInChangelog();

    $: classes = (() => {
-        if (inDocs) return 'text-paragraph-md';
        if (inChangelog) return 'text-paragraph-lg in-changelog';
        return '';
    })();
--- a/src/markdoc/nodes/Td.svelte
+++ b/src/markdoc/nodes/Td.svelte
@@ -6,6 +6,6 @@
    export let rowspan: HTMLTdAttributes['rowspan'] = undefined;
 </script>

-<td class="web-table-col" {align} {colspan} {rowspan}>
+<td class="py-[0.5625rem] px-3 text-sm leading-[1.375rem]" {align} {colspan} {rowspan}>
    <slot />
 </td>
--- a/src/markdoc/nodes/Th.svelte
+++ b/src/markdoc/nodes/Th.svelte
@@ -9,10 +9,10 @@
    style:width={width ? `${width}px` : undefined}
    style:min-inline-size={width ? 'unset' : undefined}
    role="columnheader"
-    class="web-table-head-col"
+    class="min-w-44 py-[0.5625rem] px-3"
    {align}
 >
-    <span class="text-micro uppercase">
+    <span class="text-sm leading-[1.375rem] text-[hsl(var(--web-color-primary))]">
        <slot />
    </span>
 </td>
--- a/src/markdoc/tags/Tabs.svelte
+++ b/src/markdoc/tags/Tabs.svelte
@@ -32,7 +32,7 @@
    >
        <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
            {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/[0.04]">
+                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/4">
                    <button
                        class="tabs-button cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none"
                        class:is-selected={$value === id}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -129,9 +129,8 @@
                        <span class="web-icon-star shrink-0" aria-hidden="true" />
                        <span class="text-caption shrink-0 font-medium">New</span>
                        <div class="web-hero-banner-button-sep" />
-                        <span class="text-caption web-u-trim-1"
-                            >Introducing Database Backups</span
-                        >
+                        <span class="text-caption web-u-trim-1">Introducing Database Backups</span>
+
                        <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                    </a>
                    <Hero>
@@ -305,10 +304,10 @@
                    </section>
                    <div class="mt-20 overflow-hidden">
                        <ul
-                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/[0.04] font-medium"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/4 font-medium"
                        >
                            {#each infoBoxes as box}
-                                <li class="relative border-black/[0.04] p-8 last-of-type:border-r">
+                                <li class="relative border-black/4 p-8 last-of-type:border-r">
                                    <img src={box.icon} width="40" height="40" alt="" />
                                    <h3
                                        class="text-primary mt-4 flex flex-wrap items-baseline gap-3"
--- a/src/routes/blog/post/announcing-appwrite-education-program/+page.markdoc
+++ b/src/routes/blog/post/announcing-appwrite-education-program/+page.markdoc
@@ -0,0 +1,38 @@
+---
+layout: post
+title: Announcing the Appwrite Education program in collaboration with GitHub 
+description: Appwrite partners up with GitHub for the Appwrite Education program. Together we enable future developers. 
+date: 2024-11-12
+cover: /images/blog/education-program.png
+timeToRead: 4
+author: aditya-oberai
+category: product
+---
+
+We’re excited to announce our newest initiative: the [Appwrite Education](https://appwrite.io/education) program. We’re partnering with GitHub for this new program to contribute to the future education of millions of developers connected to the [GitHub Student Developer Pack](https://education.github.com/pack).
+
+# A new program to support future builders
+
+The Appwrite Education program is the third program we are launching for a specific group of developers. With it, we want to provide an environment where students can learn to build with  Appwrite without limitations.
+
+# Partnering with GitHub
+
+We’re partnering with GitHub Education as Appwrite will be included in the GitHub Student Developer Pack. What does this mean? The GitHub Student Developer Pack is a collection of free tools, software, and credits for students to help them learn and build projects. It’s designed to give students access to premium resources typically only available to professionals, and it’s part of GitHub’s commitment to supporting students in tech.
+
+# Appwrite Pro for students
+
+Appwrite will offer free access to Appwrite Pro to students who qualify for the Education program for the remainder of their time as students. This will allow you to use Appwrite Pro and build with all the features of a professional account.
+
+# Benefits for students
+
+- **Access to Appwrite tools**: Verified GitHub Education users will have free access to Appwrite’s robust backend-as-a-service platform, enabling them to build, manage, and deploy applications with ease.
+- **Learning resources**: Students will benefit from comprehensive tutorials, guides, and resources provided by Appwrite, helping them to enhance their coding skills and practical knowledge.
+- **Community engagement**: Join a vibrant community of developers and educators through GitHub Education’s Global Campus. Connect with peers, participate in events, and collaborate on projects using Appwrite’s platform.
+
+# How to Get Started
+
+To apply, you need to verify your academic status, typically using a .edu email address or a school-provided document. Once verified, you receive free access to all the resources in the pack, which can provide significant savings and make a wide array of industry-grade tools accessible.
+
+Students can take advantage of these benefits by signing up for the GitHub Student Developer Pack and accessing Appwrite’s tools and resources. To learn more about how to join and make the most of this opportunity, visit the [GitHub Education](https://github.com/education) website and explore the Global Campus platform.
+
+Learn more about the Appwrite Education program by visiting our [website](https://appwrite.io/education).
--- a/src/routes/changelog/(entries)/2024-11-12.markdoc
+++ b/src/routes/changelog/(entries)/2024-11-12.markdoc
@@ -0,0 +1,12 @@
+---
+layout: changelog
+title: Announcing the Appwrite Education program in collaboration with GitHub
+date: 2024-11-12
+cover: /images/changelog/2024-11-12.png
+---
+
+We’re excited to announce our newest initiative: the [Appwrite Education](https://appwrite.io/education) program. We’re partnering with GitHub for this new program to contribute to the future education of millions of developers connected to the [GitHub Student Developer Pack](https://education.github.com/pack).
+
+{% arrow_link href="/blog/post/announcing-appwrite-education-program" %}
+Read the announcement to learn more
+{% /arrow_link %}
--- a/src/routes/contact-us/enterprise/+page.svelte
+++ b/src/routes/contact-us/enterprise/+page.svelte
@@ -77,15 +77,11 @@
 <Main>
    <div class="web-big-padding-section">
        <div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
-            <div
-                class="web-big-padding-section-level-2 is-margin-replace-padding relative"
-            >
+            <div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
                <div class="relative">
                    <div class="web-container relative">
                        <!-- before submit -->
-                        <div
-                            class="relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
-                        >
+                        <div class="u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0 relative">
                            <div>
                                <div
                                    class="web-u-max-inline-size-none-mobile"
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -385,10 +385,6 @@
        }
    }

-    .bg-blur {
-        inset-block-start: -100px;
-    }
-
    .tech-hero {
        @include gradients.border-block-gradient;

--- a/src/routes/docs/advanced/platform/+page.markdoc
+++ b/src/routes/docs/advanced/platform/+page.markdoc
@@ -7,7 +7,7 @@ description: Appwrite is a development platform designed to adapt you unique use
 Appwrite is a development platform designed to adapt your unique use cases.
 Appwrite provides features that help you maintain, scale, and integrate Appwrite with other platforms.

-# Integration
+# Integration {% #integration %}

 Appwrite is designed to integrate with both frontend and backend apps.
 Learn about advanced integrations and API response codes.
@@ -28,7 +28,7 @@ Learn about response codes and errors returned by Appwrite APIs.
 {% /cards_item %}
 {% /cards %}

-# Access control
+# Access control {% #access-control %}

 Appwrite is secure by default and provides tools for you to manage
 access control and prevent abuse.
@@ -51,7 +51,7 @@ Create and manage API keys use by Server SDKs.
 {% /cards_item %}
 {% /cards %}

-# Plans
+# Plans {% #plans %}

 Learn which plan best suits your organization and how to manage billing.

@@ -81,7 +81,7 @@ Appwrite provides special plans for open source projects.
 {% /cards_item %}
 {% /cards %}

-# Configuration
+# Configuration {% #configuration %}

 Configure custom domains and customize communication templates.

--- a/src/routes/docs/products/auth/server-side-rendering/+page.markdoc
+++ b/src/routes/docs/products/auth/server-side-rendering/+page.markdoc
@@ -138,7 +138,7 @@ app.post('/login', async (req, res) => {
            httpOnly: true,
            secure: true,
            sameSite: 'strict',
-            maxAge: sesion.expire
+            expires: new Date(session.expire),
            path: '/',
        });

--- a/src/routes/docs/products/storage/quick-start/+page.markdoc
+++ b/src/routes/docs/products/storage/quick-start/+page.markdoc
@@ -16,7 +16,7 @@ This allows anyone to create and read files in this bucket.

 # Create file {% #create-file %}

-To upload a file, add this to you web, Flutter, Apple, or Android app.
+To upload a file, add this to your web, Flutter, Apple, or Android app.

 {% multicode %}
  ```client-web
--- a/src/routes/docs/quick-starts/sveltekit/+page.markdoc
+++ b/src/routes/docs/quick-starts/sveltekit/+page.markdoc
@@ -35,7 +35,7 @@ You can skip optional steps.
 Create a SvelteKit project.

 ```sh
-npm create svelte@latest my-app && cd my-app && npm install
+npx sv create
 ```
 {% /section %}
 {% section #step-3 step=3 title="Install Appwrite" %}
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -267,7 +267,7 @@
                            </li>
                        {/each}
                    </ul>
-                    <div class="border-greyscale-900/[0.04] web-u-padding-block-20 border-t">
+                    <div class="border-greyscale-900/4 web-u-padding-block-20 border-t">
                        <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                            <span class="web-icon-arrow-up" aria-hidden="true" />
                            <span class="text-caption">Back to top</span>
--- a/src/routes/docs/tutorials/react/step-7/+page.markdoc
+++ b/src/routes/docs/tutorials/react/step-7/+page.markdoc
@@ -98,7 +98,7 @@ function App() {
          <Navbar /> {/* Add the navbar before page content */}
          <main>{isLoginPage ? <Login /> : <Home />}</main>
        </IdeasProvider>
-      <UserProvider>
+      </UserProvider>
    </div>
  );
 }
--- a/src/routes/education/(assets)/beaker.svg
+++ b/src/routes/education/(assets)/beaker.svg
@@ -0,0 +1,18 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_50_1358)">
+<path d="M39.1305 43.2H9.39437C7.02778 43.2 5.59302 40.5879 6.86258 38.5906L18.9642 19.5526V10.2108H18.6826C17.578 10.2108 16.6826 9.31536 16.6826 8.21079V8C16.6826 6.89543 17.578 6 18.6826 6H29.3451C30.4497 6 31.3451 6.89543 31.3451 8V8.21079C31.3451 9.31536 30.4497 10.2108 29.3451 10.2108H28.9853V19.5526L41.6275 38.5372C42.9552 40.5309 41.5259 43.2 39.1305 43.2Z" stroke="#FD366E" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M41.4643 38.4897L33.0755 26.4H14.1326L6.69933 38.6431C5.48549 40.6423 6.92478 43.2 9.26368 43.2H38.9995C41.421 43.2 42.8447 40.4792 41.4643 38.4897Z" fill="url(#paint0_linear_50_1358)"/>
+<path d="M14.7324 26.4H22.5324M33.3324 26.4H28.6824" stroke="#FD366E" stroke-width="1.2" stroke-linecap="round"/>
+<circle cx="18.9326" cy="34.2" r="2.4" fill="#EDEDF0" stroke="#FD366E" stroke-width="1.2"/>
+<path d="M28.5326 26.4C28.5326 28.0568 27.1895 29.4 25.5326 29.4C23.8758 29.4 22.5326 28.0568 22.5326 26.4C22.5326 24.7431 23.8758 23.4 25.5326 23.4C27.1895 23.4 28.5326 24.7431 28.5326 26.4Z" fill="#EDEDF0" stroke="#FD366E" stroke-width="1.2"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_50_1358" x1="24.3326" y1="25.9503" x2="24.3326" y2="40.7358" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0.4"/>
+</linearGradient>
+<clipPath id="clip0_50_1358">
+<rect width="48" height="48" fill="white" transform="translate(0.333008)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/routes/education/(assets)/chat-icon.svg
+++ b/src/routes/education/(assets)/chat-icon.svg
@@ -0,0 +1,16 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.66582 27.6V23.4H7.26582C5.60897 23.4 4.26582 22.0568 4.26582 20.4V7.79999C4.26582 6.14313 5.60897 4.79999 7.26582 4.79999H26.4658C28.1227 4.79999 29.4658 6.14313 29.4658 7.79999V20.4H23.0969C21.8702 20.4 20.7671 21.1468 20.3115 22.2858L19.8658 23.4H15.0658L9.66582 27.6Z" fill="url(#paint0_linear_62_2)"/>
+<path d="M9.66582 23.4V22.8H10.2658V23.4H9.66582ZM9.66582 27.6L10.0342 28.0736C9.8533 28.2143 9.60807 28.2397 9.40221 28.139C9.19635 28.0383 9.06582 27.8291 9.06582 27.6H9.66582ZM15.0658 23.4L14.6975 22.9264L14.86 22.8H15.0658V23.4ZM19.8658 23.4L20.4229 23.6228L20.272 24H19.8658V23.4ZM29.4658 20.4H30.0658V21H29.4658V20.4ZM20.3115 22.2858L20.8686 22.5086L20.8686 22.5086L20.3115 22.2858ZM10.2658 23.4V27.6H9.06582V23.4H10.2658ZM9.29746 27.1264L14.6975 22.9264L15.4342 23.8736L10.0342 28.0736L9.29746 27.1264ZM26.4658 5.39999H7.26582V4.19999H26.4658V5.39999ZM4.86582 7.79999V20.4H3.66582V7.79999H4.86582ZM7.26582 22.8H9.66582V24H7.26582V22.8ZM15.0658 22.8H19.8658V24H15.0658V22.8ZM28.8658 20.4V7.79999H30.0658V20.4H28.8658ZM29.4658 21H23.0969V19.8H29.4658V21ZM20.8686 22.5086L20.4229 23.6228L19.3087 23.1772L19.7544 22.063L20.8686 22.5086ZM4.86582 20.4C4.86582 21.7255 5.94034 22.8 7.26582 22.8V24C5.2776 24 3.66582 22.3882 3.66582 20.4H4.86582ZM7.26582 5.39999C5.94034 5.39999 4.86582 6.4745 4.86582 7.79999H3.66582C3.66582 5.81176 5.2776 4.19999 7.26582 4.19999V5.39999ZM23.0969 21C22.1155 21 21.233 21.5975 20.8686 22.5086L19.7544 22.063C20.3011 20.6962 21.6249 19.8 23.0969 19.8V21ZM26.4658 4.19999C28.454 4.19999 30.0658 5.81176 30.0658 7.79999H28.8658C28.8658 6.4745 27.7913 5.39999 26.4658 5.39999V4.19999Z" fill="white"/>
+<path d="M39.6662 43.2V39H42.0662C43.7231 39 45.0662 37.6568 45.0662 36V23.4C45.0662 21.7431 43.7231 20.4 42.0662 20.4H22.8662C21.2094 20.4 19.8662 21.7431 19.8662 23.4V36C19.8662 37.6568 21.2094 39 22.8662 39H34.2662L39.6662 43.2Z" fill="url(#paint1_linear_62_2)"/>
+<path d="M39.6662 39V38.4H39.0662V39H39.6662ZM39.6662 43.2L39.2978 43.6736C39.4787 43.8143 39.724 43.8397 39.9298 43.739C40.1357 43.6383 40.2662 43.4292 40.2662 43.2H39.6662ZM34.2662 39L34.6346 38.5264L34.4721 38.4H34.2662V39ZM39.0662 39V43.2H40.2662V39H39.0662ZM40.0346 42.7264L34.6346 38.5264L33.8978 39.4736L39.2978 43.6736L40.0346 42.7264ZM34.2662 38.4H22.8662V39.6H34.2662V38.4ZM20.4662 36V23.4H19.2662V36H20.4662ZM22.8662 21H42.0662V19.8H22.8662V21ZM44.4662 23.4V36H45.6662V23.4H44.4662ZM42.0662 38.4H39.6662V39.6H42.0662V38.4ZM44.4662 36C44.4662 37.3255 43.3917 38.4 42.0662 38.4V39.6C44.0544 39.6 45.6662 37.9882 45.6662 36H44.4662ZM42.0662 21C43.3917 21 44.4662 22.0745 44.4662 23.4H45.6662C45.6662 21.4118 44.0544 19.8 42.0662 19.8V21ZM20.4662 23.4C20.4662 22.0745 21.5407 21 22.8662 21V19.8C20.878 19.8 19.2662 21.4118 19.2662 23.4H20.4662ZM22.8662 38.4C21.5407 38.4 20.4662 37.3255 20.4662 36H19.2662C19.2662 37.9882 20.878 39.6 22.8662 39.6V38.4Z" fill="#FD366E"/>
+<defs>
+<linearGradient id="paint0_linear_62_2" x1="16.8658" y1="4.79999" x2="16.8658" y2="27.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_62_2" x1="32.4662" y1="20.4" x2="32.4662" y2="43.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/routes/education/(assets)/chat.svg
+++ b/src/routes/education/(assets)/chat.svg
--- a/src/routes/education/(assets)/checkmark.svg
+++ b/src/routes/education/(assets)/checkmark.svg
@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5116 6.8545C22.0082 5.03596 24.7926 5.03596 26.2892 6.8545L27.2536 8.02632C28.2992 9.29692 29.9088 9.96362 31.5466 9.80456L33.0571 9.65786C35.4013 9.4302 37.3702 11.3991 37.1425 13.7433L36.9958 15.2538C36.8368 16.8916 37.5035 18.5012 38.7741 19.5468L39.9459 20.5112C41.7644 22.0078 41.7644 24.7922 39.9459 26.2888L38.7741 27.2532C37.5035 28.2988 36.8368 29.9084 36.9958 31.5462L37.1425 33.0567C37.3702 35.4009 35.4013 37.3698 33.0571 37.1421L31.5466 36.9954C29.9088 36.8364 28.2992 37.5031 27.2536 38.7737L26.2892 39.9455C24.7926 41.764 22.0082 41.764 20.5116 39.9455L19.5472 38.7737C18.5016 37.5031 16.892 36.8364 15.2542 36.9954L13.7437 37.1421C11.3995 37.3698 9.4306 35.4009 9.65826 33.0567L9.80495 31.5462C9.96402 29.9084 9.29732 28.2988 8.02672 27.2532L6.8549 26.2888C5.03636 24.7922 5.03636 22.0078 6.8549 20.5112L8.02672 19.5468C9.29732 18.5012 9.96402 16.8916 9.80495 15.2538L9.65826 13.7433C9.4306 11.3991 11.3995 9.4302 13.7437 9.65786L15.2542 9.80456C16.892 9.96362 18.5016 9.29692 19.5472 8.02632L20.5116 6.8545Z" fill="url(#paint0_linear_50_2591)" stroke="#FD366E" stroke-width="1.2"/>
+<path d="M18 24L21.6 27.6L28.8 20.4" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_50_2591" x1="23.4004" y1="2.39999" x2="23.4004" y2="44.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E" stop-opacity="0"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/routes/education/(assets)/github-mark.svg
+++ b/src/routes/education/(assets)/github-mark.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="24" viewBox="0 0 100 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0712 0C6.22769 0 0.699219 5.49518 0.699219 12.2975C0.699219 17.7393 4.24173 22.3542 9.15295 23.9814C9.7702 24.0881 10.0117 23.7146 10.0117 23.3945C10.0117 23.1011 9.9849 22.1408 9.9849 21.1004C6.87178 21.6606 6.06667 20.3535 5.82513 19.66C5.69094 19.3132 5.07369 18.2195 4.56378 17.926C4.13438 17.686 3.51713 17.1258 4.53694 17.0991C5.50308 17.0724 6.20085 17.9794 6.44239 18.3528C7.56955 20.2201 9.34081 19.6866 10.0386 19.3665C10.1459 18.5662 10.468 18.0327 10.8169 17.7126C8.05262 17.3925 5.18104 16.3522 5.18104 11.6306C5.18104 10.2968 5.66411 9.17642 6.44239 8.3228C6.3082 8.00269 5.87881 6.74894 6.57657 5.06837C6.57657 5.06837 7.62323 4.74827 9.9849 6.32213C10.9779 6.05537 12.0245 5.89532 13.0712 5.89532C14.1178 5.89532 15.1645 6.0287 16.1575 6.32213C18.5191 4.72159 19.5658 5.06837 19.5658 5.06837C20.2367 6.74894 19.8073 8.02937 19.7 8.3228C20.4783 9.17642 20.9613 10.2701 20.9613 11.6306C20.9613 16.3522 18.0629 17.3925 15.2987 17.7126C15.7549 18.0861 16.1306 18.833 16.1306 19.9801C16.1306 21.634 16.1038 22.9411 16.1038 23.3679C16.1038 23.688 16.3453 24.0881 16.9626 23.9547C21.847 22.3275 25.3895 17.7126 25.3895 12.2708C25.47 5.49518 19.9147 0 13.0712 0Z" fill="white"/>
+<path d="M60.1701 17.8994H60.1433C60.1701 17.8994 60.1701 17.8994 60.1701 17.8994ZM60.1701 17.8994C60.0359 17.8994 59.6871 17.9794 59.3113 17.9794C58.1305 17.9794 57.7279 17.4459 57.7279 16.7523V12.0841H60.1165C60.2506 12.0841 60.358 11.9774 60.358 11.7906V9.25644C60.358 9.12307 60.2506 9.01636 60.1165 9.01636H57.7279V5.89531C57.7279 5.78861 57.6474 5.70858 57.5132 5.70858H54.2928C54.1586 5.70858 54.0781 5.78861 54.0781 5.89531V9.12307C54.0781 9.12307 52.441 9.5232 52.3337 9.54988C52.2263 9.57655 52.1458 9.68325 52.1458 9.78996V11.8173C52.1458 11.9774 52.2531 12.1107 52.3873 12.1107H54.0512V16.9924C54.0512 20.6203 56.6008 20.9937 58.3452 20.9937C59.1503 20.9937 60.0896 20.7536 60.2506 20.6736C60.3312 20.6469 60.3848 20.5402 60.3848 20.4335V18.1928C60.4117 18.0327 60.3043 17.926 60.1701 17.8994ZM95.649 14.6449C95.649 11.9507 94.5486 11.6039 93.3946 11.7106C92.509 11.764 91.7844 12.2174 91.7844 12.2174V17.4459C91.7844 17.4459 92.509 17.9527 93.6093 17.9794C95.1659 18.0327 95.649 17.4725 95.649 14.6449ZM99.2988 14.4048C99.2988 19.4999 97.6349 20.9671 94.7365 20.9671C92.2943 20.9671 90.9524 19.74 90.9524 19.74C90.9524 19.74 90.8988 20.4335 90.8182 20.5136C90.7646 20.5936 90.7109 20.6203 90.6036 20.6203H88.3761C88.215 20.6203 88.0809 20.5136 88.0809 20.3802L88.1077 3.84129C88.1077 3.70791 88.215 3.60121 88.3492 3.60121H91.5429C91.677 3.60121 91.7844 3.70791 91.7844 3.84129L91.7576 9.4165C91.7576 9.4165 92.9921 8.61623 94.7902 8.61623H94.817C96.6419 8.61623 99.2988 9.28312 99.2988 14.4048ZM86.2291 9.01636H83.0891C82.9281 9.01636 82.8476 9.12307 82.8476 9.30979V17.3925C82.8476 17.3925 82.0156 17.9794 80.8885 17.9794C79.7613 17.9794 79.4393 17.4725 79.4393 16.3522V9.28312C79.4393 9.14974 79.3319 9.04304 79.1977 9.04304H76.0041C75.8699 9.04304 75.7626 9.14974 75.7626 9.28312V16.8857C75.7626 20.1668 77.6143 20.9671 80.137 20.9671C82.2303 20.9671 83.9211 19.82 83.9211 19.82C83.9211 19.82 84.0016 20.4069 84.0284 20.4869C84.0553 20.5669 84.1626 20.6203 84.27 20.6203H86.2828C86.4438 20.6203 86.5243 20.5136 86.5243 20.3802L86.5511 9.25644C86.5243 9.14974 86.3901 9.01636 86.2291 9.01636ZM50.7503 9.01636H47.5566C47.4224 9.01636 47.3151 9.14974 47.3151 9.30979V20.2201C47.3151 20.5136 47.503 20.6203 47.7713 20.6203H50.6429C50.9381 20.6203 51.0186 20.4869 51.0186 20.2201V9.25644C51.0186 9.12307 50.8844 9.01636 50.7503 9.01636ZM49.1937 3.97467C48.0397 3.97467 47.1272 4.88164 47.1272 6.02869C47.1272 7.17574 48.0397 8.08271 49.1937 8.08271C50.3209 8.08271 51.2333 7.17574 51.2333 6.02869C51.2333 4.88164 50.3209 3.97467 49.1937 3.97467ZM73.884 3.60121H70.7172C70.583 3.60121 70.4756 3.70791 70.4756 3.84129V9.92333H65.5107V3.86796C65.5107 3.73458 65.4034 3.62788 65.2692 3.62788H62.0756C61.9414 3.62788 61.834 3.73458 61.834 3.86796V20.4069C61.834 20.5402 61.9682 20.6469 62.0756 20.6469H65.2692C65.4034 20.6469 65.5107 20.5402 65.5107 20.4069V13.3111H70.4756L70.4488 20.3802C70.4488 20.5136 70.5561 20.6203 70.6903 20.6203H73.884C74.0181 20.6203 74.1255 20.5136 74.1255 20.3802V3.84129C74.1255 3.73458 74.0181 3.60121 73.884 3.60121ZM45.6243 10.937V19.4732C45.6243 19.5266 45.5975 19.6333 45.5438 19.6599C45.5438 19.6599 43.6652 20.9937 40.5789 20.9937C36.8486 20.9937 32.4473 19.82 32.4473 12.1908C32.4473 4.53485 36.3118 2.96099 40.069 2.98767C43.3432 2.98767 44.6582 3.70791 44.8461 3.84129C44.8997 3.92131 44.9266 3.97466 44.9266 4.05469L44.3093 6.69558C44.3093 6.82896 44.1751 6.98901 44.0141 6.93566C43.4774 6.77561 42.6723 6.4555 40.7668 6.4555C38.5662 6.4555 36.2045 7.06904 36.2045 12.004C36.2045 16.939 38.4588 17.4992 40.069 17.4992C41.4377 17.4992 41.9476 17.3392 41.9476 17.3392V13.9247H39.747C39.586 13.9247 39.4518 13.818 39.4518 13.6846V10.937C39.4518 10.8036 39.5591 10.6969 39.747 10.6969H45.356C45.517 10.6703 45.6243 10.8036 45.6243 10.937Z" fill="white"/>
+</svg>
--- a/src/routes/education/(assets)/kickstart.svg
+++ b/src/routes/education/(assets)/kickstart.svg
--- a/src/routes/education/(components)/CallToAction.svelte
+++ b/src/routes/education/(components)/CallToAction.svelte
@@ -0,0 +1,27 @@
+<script>
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { classNames } from '$lib/utils/classnames';
+
+    const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`;
+</script>
+
+<div
+    class={classNames(
+        'border-greyscale-200/4 relative -mb-24 flex min-h-[600px] items-center justify-center border-y',
+        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
+        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(177,_53%,_69%,_0.2)_0px,_transparent_40%)]'
+    )}
+>
+    <div class="container">
+        <div class="flex max-w-3xl flex-col items-center justify-center gap-4 text-center">
+            <h2 class="text-primary font-aeonik-pro text-4xl md:text-6xl">
+                Start building like a team of hundreds with Appwrite
+            </h2>
+            <p class="text-xl">
+                Develop your developer skills with Appwrite Pro, join a vibrant community of
+                open-source contributors, and start building with a vast array of frameworks.
+            </p>
+            <a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a>
+        </div>
+    </div>
+</div>
--- a/src/routes/education/(components)/Community.svelte
+++ b/src/routes/education/(components)/Community.svelte
@@ -0,0 +1,24 @@
+<script>
+    import Chat from '../(assets)/chat.svg';
+</script>
+
+<div class="container grid items-center gap-8 md:grid-cols-2">
+    <div class="space-y-4 md:pr-48">
+        <h2 class="text-primary text-title font-aeonik-pro text-pretty">
+            Get help from the open source community
+        </h2>
+        <p class="text-secondary text-pretty">
+            Join a growing community of developers and students who use Appwrite to build their
+            products. Gain access to a wealth of knowledge, support, and shared experiences to help
+            navigate the challenges of startup growth.
+        </p>
+        <a
+            href="/discord"
+            class="web-button is-secondary text-accent mt-10 !w-full !whitespace-normal py-1 md:!w-fit"
+        >
+            <span class="web-icon-discord" />
+            Join our Discord</a
+        >
+    </div>
+    <img src={Chat} alt="Chat" class="mx-auto" />
+</div>
--- a/src/routes/education/(components)/FAQ.svelte
+++ b/src/routes/education/(components)/FAQ.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { createAccordion, melt } from '@melt-ui/svelte';
+    import { slide } from 'svelte/transition';
+
+    export let items: Array<{
+        question: string;
+        answer: string;
+    }> = [
+        {
+            question: 'What is the Appwrite Education Program?',
+            answer: "If you're a student with the GitHub Student Developer Pack, you can use Appwrite Pro for free while in school to help you build your next project."
+        },
+        {
+            question: 'Who is eligible to apply?',
+            answer: 'Any student enrolled in the GitHub Student Developer Pack can apply for free and receive Appwrite Pro until graduation.'
+        },
+        {
+            question: 'How do I apply?',
+            answer: "If you're already enrolled in the GitHub Student Developer Pack, click the 'Sign up' button on this page and fill in your details. If you're not enrolled with GitHub Education yet, first apply for the GitHub Student Developer Pack, then come back and sign up to Appwrite Cloud here."
+        },
+        {
+            question: 'What happens after I sign up?',
+            answer: 'Appwrite Cloud will automatically verify your GitHub Student Developer Pack membership and apply Appwrite Pro to your account. You can then start using Appwrite right away.'
+        },
+        {
+            question: "I'm already an Appwrite user. Can I still apply?",
+            answer: 'This program is only open to new users.'
+        },
+        {
+            question: 'How long do the Appwrite Education program benefits last?',
+            answer: 'Your access to Appwrite Pro is valid until you finish your studies and graduate from the GitHub Student Developer Pack.'
+        },
+        {
+            question: 'Do Cloud credits include any add-ons?',
+            answer: 'No, Cloud credits do not cover any add-ons.'
+        }
+    ];
+
+    const {
+        elements: { root, heading, content, item, trigger },
+        helpers: { isSelected }
+    } = createAccordion({
+        defaultValue: '0',
+        multiple: false,
+        forceVisible: true
+    });
+</script>
+
+<div class="container grid justify-between pt-20 md:grid-cols-2">
+    <h2 class="text-primary mt-10 text-5xl">FAQ</h2>
+    <ul class="collapsible w-full divide-y divide-white/5" use:melt={$root} id="faq">
+        {#each items as faqItem, index (index)}
+            <li class="collapsible-item">
+                <!-- Progressive Enhancement for kbd navigation & animations -->
+                {#if browser}
+                    <div
+                        class="collapsible-wrapper py-2"
+                        use:melt={$item(`${index}`)}
+                        {...{ open: $isSelected(`${index}`) ? true : undefined }}
+                    >
+                        <h3 use:melt={$heading({ level: 3 })}>
+                            <button
+                                class="flex w-full items-center justify-between gap-2.5 py-6 text-left"
+                                use:melt={$trigger(`${index}`)}
+                            >
+                                <span class="web-label web-u-color-text-primary">
+                                    {faqItem.question}
+                                </span>
+                                <div
+                                    class="icon web-u-color-text-primary self-start transition-transform"
+                                    class:rotate-180={$isSelected(`${index}`)}
+                                >
+                                    <span class="icon-cheveron-down" aria-hidden="true" />
+                                </div>
+                            </button>
+                        </h3>
+
+                        {#if $isSelected(`${index}`)}
+                            <div
+                                class="collapsible-content"
+                                use:melt={$content(`${index}`)}
+                                transition:slide
+                            >
+                                <p class="web-main-body-400">
+                                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                                    {@html faqItem.answer}
+                                </p>
+                            </div>
+                        {/if}
+                    </div>
+                {:else}
+                    <details class="collapsible-wrapper" open={index === 0}>
+                        <summary class="collapsible-button">
+                            <span class="web-label web-u-color-text-primary">
+                                {faqItem.question}
+                            </span>
+                            <div class="icon web-u-color-text-primary">
+                                <span class="icon-cheveron-down" aria-hidden="true" />
+                            </div>
+                        </summary>
+
+                        <div class="collapsible-content">
+                            <p class="web-main-body-400">
+                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                                {@html faqItem.answer}
+                            </p>
+                        </div>
+                    </details>
+                {/if}
+            </li>
+        {/each}
+    </ul>
+</div>
--- a/src/routes/education/(components)/GetStarted.svelte
+++ b/src/routes/education/(components)/GetStarted.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import Badge from '$lib/components/ui/Badge.svelte';
+    import { classNames } from '$lib/utils/classnames';
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+
+    const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`;
+
+    const items = [
+        {
+            label: 'Enroll to the GitHub Student Developer Pack',
+            description: 'Sign up for the Student Developer pack and explore the benefits.',
+            cta: {
+                url: 'https://github.com/education',
+                label: 'Enroll on GitHub Education',
+                icon: 'github'
+            }
+        },
+        {
+            label: 'Redeem your Cloud credits',
+            description:
+                'Create your Appwrite account through the Education program sign up page. Once verified, your credits will be applied.',
+            cta: { url: educationSignUp, label: 'Sign up' }
+        },
+        {
+            label: 'Start from our docs',
+            description:
+                'Once your Appwrite account is created, go to our Docs and get started with Appwrite Cloud.',
+            cta: { url: 'https://appwrite.io/docs', label: 'Go to Appwrite Docs' }
+        }
+    ];
+</script>
+
+<div
+    class={classNames(
+        'light border-smooth relative mt-10 min-h-80 border-t',
+        'before:absolute before:top-0 before:left-0 before:z-0 before:block before:h-80 before:w-full before:bg-[radial-gradient(at_25%_0%,_hsla(343,_98%,_60%,_0.4)_0px,_transparent_73%,_transparent_100%)] md:before:w-1/2',
+        'after:absolute after:top-0 after:right-0 after:z-0 after:block after:hidden after:h-80 after:w-1/2 after:bg-[radial-gradient(at_100%_0%,_hsla(177,_53%,_69%,_0.6)_0px,_transparent_73%,_transparent_100%)] md:after:block'
+    )}
+>
+    <div class="container relative z-10 flex flex-col justify-center py-24">
+        <h2 class="text-primary font-aeonik-pro text-4xl">Get started today</h2>
+
+        <div
+            class="divide-smooth mt-12 grid gap-8 divide-y rounded-2xl bg-white py-10 px-5 shadow-[-6px_8px_24px_rgba(0,_0,_0,_0.06),_0px_0px_0px_rgba(0,_0,_0,_0.06)] lg:grid-cols-3 lg:divide-x lg:divide-y-0"
+        >
+            {#each items as item, i}
+                <div
+                    class="group relative flex h-full flex-col gap-6 px-4 pb-8 last-of-type:pb-0 lg:pb-0"
+                >
+                    <Badge>Step {i + 1}</Badge>
+                    <div class={classNames('flex flex-1 flex-col gap-2 font-medium')}>
+                        <h3 class="text-primary text-pretty">{item.label}</h3>
+                        <p class="text-secondary text-pretty">{item.description}</p>
+                    </div>
+                    <a
+                        class="web-button is-secondary text-accent mt-auto mb-0 !w-full md:!w-fit"
+                        href={item.cta.url}
+                        target="_blank"
+                    >
+                        {#if item.cta.icon}
+                            <span class="web-icon-{item.cta.icon}" />
+                        {/if}
+                        {item.cta.label}</a
+                    >
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
--- a/src/routes/education/(components)/Hero.svelte
+++ b/src/routes/education/(components)/Hero.svelte
@@ -0,0 +1,182 @@
+<script>
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { classNames } from '$lib/utils/classnames';
+    import Logos from './Logos.svelte';
+    import ChatIcon from '../(assets)/chat-icon.svg';
+    import Beaker from '../(assets)/beaker.svg';
+    import Checkmark from '../(assets)/checkmark.svg';
+
+    const items = [
+        {
+            label: 'Develop your skills',
+            description:
+                'Get access to Appwrite’s Pro plan and build your entire backend with Appwrite.',
+            icon: Checkmark
+        },
+        {
+            label: 'Build with any framework',
+            description:
+                'Get free access to build with Appwrite Pro, valid throughout your student career.',
+            icon: Beaker
+        },
+        {
+            label: 'Join a vibrant community',
+            description:
+                'Get community support and dedicated email support from the Appwrite team.',
+            icon: ChatIcon
+        }
+    ];
+
+    const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`;
+</script>
+
+<section
+    class={classNames(
+        'gridLine horizontal relative mt-8 grid h-full min-h-[50vh] w-full place-items-center md:mt-32 md:grid-cols-[10%_1fr_10%] lg:grid-cols-[20%_1fr_20%] xl:grid-cols-3'
+    )}
+>
+    <div class="pattern relative hidden h-full w-full md:block" />
+    <div
+        class="gridLine vertical from-accent/5 relative flex h-full w-full flex-1 basis-[calc(100vw_/_3)] flex-col items-center justify-center gap-8 to-transparent py-10 px-8 text-center md:bg-gradient-to-t"
+    >
+        <Logos />
+        <h1 class="font-aeonik-pro text-5xl text-white">Build your next project with Appwrite</h1>
+        <p class="text-secondary font-medium">
+            Join the Appwrite Education program in collaboration with the GitHub Student Developer
+            Pack. Students receive Appwrite Cloud for free throughout their studies.
+        </p>
+
+        <div class="flex w-full flex-col items-center justify-center gap-4 md:flex-row">
+            <a class="web-button !w-full md:!w-fit" href={educationSignUp}>Sign up now</a>
+            <a
+                class="web-button is-secondary !w-full !whitespace-normal md:!w-fit"
+                href="https://github.com/education"
+            >
+                <span class="web-icon-github !text-white" />
+                GitHub Education</a
+            >
+        </div>
+    </div>
+    <div class="pattern relative hidden h-full w-full md:block" />
+</section>
+
+<div
+    class="container grid min-h-40 place-content-center items-start gap-16 py-24 text-center md:grid-cols-3"
+>
+    {#each items as { label, description, icon }}
+        <div class="flex flex-col justify-center">
+            <img src={icon} alt={label} class="mx-auto mb-3 size-12" />
+            <h3 class="text-primary font-aeonik-pro text-lg">{label}</h3>
+            <p class="text-secondary">
+                {description}
+            </p>
+        </div>
+    {/each}
+</div>
+
+<style lang="scss">
+    .gridLine {
+        --height: 1px;
+        --width: 30px;
+        --fade-stop: 90%;
+        --x-offset: 0px;
+        --y-offset: 50px;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            display: none;
+
+            @media screen and (width >= 48rem) {
+                display: block;
+            }
+        }
+
+        &.horizontal {
+            &::before,
+            &::after {
+                width: calc(100% + var(--x-offset));
+                height: var(--height);
+
+                background: linear-gradient(
+                    to right,
+                    var(--color-accent),
+                    var(--color-accent) 50%,
+                    transparent 0,
+                    transparent
+                );
+                background-size: var(--width) var(--height);
+            }
+
+            &::before {
+                top: 0;
+            }
+
+            &::after {
+                bottom: 0;
+            }
+        }
+
+        &.vertical {
+            &::before,
+            &::after {
+                height: calc(100% + var(--y-offset));
+                width: var(--height);
+                top: calc(var(--y-offset) / 2 * -1);
+
+                background: linear-gradient(
+                    to bottom,
+                    var(--color-accent),
+                    var(--color-accent) 50%,
+                    transparent 0,
+                    transparent
+                );
+                background-size: var(--height) var(--width);
+            }
+
+            &::before {
+                left: 0;
+            }
+
+            &::after {
+                right: 0;
+            }
+        }
+    }
+
+    .pattern {
+        background: repeating-linear-gradient(
+            45deg,
+            var(--color-primary) 0,
+            var(--color-primary) 1px,
+            transparent 1px,
+            transparent 24px
+        );
+
+        mask-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            var(--color-primary) 1px 10px,
+            transparent 8px 20px
+        );
+
+        &:first-of-type {
+            &::before {
+                content: '';
+                inset: 0;
+                position: absolute;
+                z-index: -1;
+            }
+        }
+
+        &:last-of-type {
+            &::after {
+                content: '';
+                inset: 0;
+                position: absolute;
+                z-index: -1;
+            }
+        }
+    }
+</style>
--- a/src/routes/education/(components)/Kickstart.svelte
+++ b/src/routes/education/(components)/Kickstart.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import Kickstart from '../(assets)/kickstart.svg';
+</script>
+
+<div
+    class="container grid min-h-80 place-content-center items-center gap-8 py-20 md:grid-cols-2 md:py-40"
+>
+    <div class="text-secondary space-y-8 md:max-w-[75%]">
+        <h2 class="text-primary font-aeonik-pro text-4xl">
+            Kickstart your developer journey with Appwrite
+        </h2>
+        <p class="font-medium">
+            Earn free credits through GitHub Education to build your next project on Appwrite Cloud.
+            Sign up for the GitHub Student Developer Pack to receive Appwrite Cloud for the duration
+            of your studies.
+        </p>
+
+        <p class="font-medium">
+            This credit is available only for new users who are verified through the GitHub program
+            as students. The credit is valid until you graduate from GitHub Education.
+        </p>
+    </div>
+    <img src={Kickstart} alt="Kickstart" class="mx-auto" />
+</div>
--- a/src/routes/education/(components)/Logos.svelte
+++ b/src/routes/education/(components)/Logos.svelte
@@ -0,0 +1,70 @@
+<div class="flex items-center justify-center gap-4 divide-x-2 divide-white/5">
+    <!-- Appwrite logo -->
+    <svg
+        width="150"
+        height="40"
+        viewBox="0 0 150 40"
+        fill="none"
+        class="h-8 w-auto pr-4"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M47.5564 27.4952C49.7153 27.4952 50.8067 26.382 51.2812 25.624H51.4947C51.5896 26.4294 52.159 27.1873 53.274 27.1873H55.3855V24.8187H54.8399C54.4603 24.8187 54.2705 24.6055 54.2705 24.2739V14.7759H51.471V16.2918H51.2574C50.7118 15.5338 49.573 14.468 47.4852 14.468C44.1638 14.468 41.6964 17.2155 41.6964 20.9816C41.6964 24.7477 44.2112 27.4952 47.5564 27.4952ZM48.0546 24.795C46.0855 24.795 44.5434 23.3502 44.5434 21.0053C44.5434 18.7078 46.038 17.1445 48.0309 17.1445C49.9289 17.1445 51.5184 18.542 51.5184 21.0053C51.5184 23.1133 50.1661 24.795 48.0546 24.795Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M57.0384 32H59.8379V25.624H60.0514C60.5733 26.382 61.6884 27.4952 63.8948 27.4952C67.2162 27.4952 69.6361 24.7003 69.6361 20.9816C69.6361 17.2392 67.0502 14.468 63.705 14.468C61.5698 14.468 60.5259 15.6286 60.0277 16.2681H59.8141V14.7759H57.0384V32ZM63.3017 24.8661C61.38 24.8661 59.7904 23.4449 59.7904 20.9816C59.7904 18.8736 61.1427 17.0971 63.2542 17.0971C65.2234 17.0971 66.7655 18.6367 66.7655 20.9816C66.7655 23.2791 65.2708 24.8661 63.3017 24.8661Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M71.0807 32H73.8802V25.624H74.0937C74.6157 26.382 75.7307 27.4952 77.9371 27.4952C81.2586 27.4952 83.4478 24.7003 83.4478 20.9816C83.4478 17.2392 81.0925 14.468 77.7473 14.468C75.6121 14.468 74.5682 15.6286 74.07 16.2681H73.8565V14.7759H71.0807V32ZM77.344 24.8661C75.4223 24.8661 73.8328 23.4449 73.8328 20.9816C73.8328 18.8736 75.1851 17.0971 77.2966 17.0971C79.2657 17.0971 80.8078 18.6367 80.8078 20.9816C80.8078 23.2791 79.3132 24.8661 77.344 24.8661Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M87.1485 27.4755H91.1105L93.3643 17.7406H93.5067L95.7605 27.4755H99.6988L102.852 15.0641H100.031L97.7771 24.8227H97.5636L95.3098 15.0641H91.585L89.3074 24.8227H89.0939L86.8638 15.0641H83.8745L87.1485 27.4755Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M104.271 27.4755H107.07V21.3409C107.07 18.996 108.162 17.5511 110.202 17.5511H111.436V14.7562H110.51C108.921 14.7562 107.711 15.8457 107.236 16.8879H107.047V15.0641H104.271V27.4755Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M125.328 27.4755H127.511V24.9885H125.352C124.498 24.9885 124.142 24.6095 124.142 23.7331V17.5274H127.653V15.0641H124.142V11.5823H121.485V15.0641H119.16V17.5274H121.319V23.7568C121.319 26.386 122.908 27.4755 125.328 27.4755Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M135.021 27.4952C137.607 27.4952 139.885 26.2162 140.692 23.6344L138.129 23.0186C137.679 24.3924 136.374 25.1029 134.998 25.1029C132.957 25.1029 131.605 23.7765 131.581 21.6922H141V20.9105C141 17.2155 138.699 14.468 134.903 14.468C131.558 14.468 128.687 17.0971 128.687 21.0053C128.687 24.795 131.225 27.4952 135.021 27.4952ZM131.605 19.6552C131.771 18.163 133.123 16.9076 134.903 16.9076C136.611 16.9076 138.011 17.9735 138.153 19.6552H131.605Z"
+            fill="#EDEDF0"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M117.915 27.4755H115.115V17.5274H112.933V15.0641H117.915V27.4755Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M116.307 13.3417C117.327 13.3417 118.086 12.5837 118.086 11.5889C118.086 10.6178 117.327 9.85986 116.307 9.85986C115.287 9.85986 114.528 10.6178 114.528 11.5889C114.528 12.5837 115.287 13.3417 116.307 13.3417Z"
+            fill="#EDEDF0"
+        />
+        <path
+            d="M33.4429 24.4322V29.9096H19.7519C15.7632 29.9096 12.2804 27.7067 10.4171 24.4322C10.1462 23.9561 9.90914 23.4567 9.71026 22.9383C9.31986 21.9225 9.07446 20.8325 9 19.6952V18.2143C9.01616 17.9609 9.04164 17.7094 9.07495 17.461C9.14303 16.9511 9.2459 16.4521 9.38109 15.9671C10.6601 11.3691 14.8188 8 19.7519 8C24.6851 8 28.8433 11.3691 30.1223 15.9671H24.2682C23.3072 14.4683 21.6437 13.4774 19.7519 13.4774C17.8602 13.4774 16.1967 14.4683 15.2356 15.9671C14.9427 16.4227 14.7154 16.9252 14.5665 17.461C14.4343 17.936 14.3637 18.4369 14.3637 18.9548C14.3637 20.5248 15.0132 21.94 16.0546 22.9383C17.0196 23.865 18.3206 24.4322 19.7519 24.4322H33.4429Z"
+            fill="#FD366E"
+        />
+        <path
+            d="M33.4429 17.4609V22.9383H23.4492C24.4906 21.94 25.1401 20.5248 25.1401 18.9548C25.1401 18.4369 25.0696 17.936 24.9373 17.4609H33.4429Z"
+            fill="#FD366E"
+        />
+    </svg>
+
+    <!-- Github logo -->
+    <svg width="75" height="20" viewBox="0 0 100 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M13.0712 0C6.22769 0 0.699219 5.49518 0.699219 12.2975C0.699219 17.7393 4.24173 22.3542 9.15295 23.9814C9.7702 24.0881 10.0117 23.7146 10.0117 23.3945C10.0117 23.1011 9.9849 22.1408 9.9849 21.1004C6.87178 21.6606 6.06667 20.3535 5.82513 19.66C5.69094 19.3132 5.07369 18.2195 4.56378 17.926C4.13438 17.686 3.51713 17.1258 4.53694 17.0991C5.50308 17.0724 6.20085 17.9794 6.44239 18.3528C7.56955 20.2201 9.34081 19.6866 10.0386 19.3665C10.1459 18.5662 10.468 18.0327 10.8169 17.7126C8.05262 17.3925 5.18104 16.3522 5.18104 11.6306C5.18104 10.2968 5.66411 9.17642 6.44239 8.3228C6.3082 8.00269 5.87881 6.74894 6.57657 5.06837C6.57657 5.06837 7.62323 4.74827 9.9849 6.32213C10.9779 6.05537 12.0245 5.89532 13.0712 5.89532C14.1178 5.89532 15.1645 6.0287 16.1575 6.32213C18.5191 4.72159 19.5658 5.06837 19.5658 5.06837C20.2367 6.74894 19.8073 8.02937 19.7 8.3228C20.4783 9.17642 20.9613 10.2701 20.9613 11.6306C20.9613 16.3522 18.0629 17.3925 15.2987 17.7126C15.7549 18.0861 16.1306 18.833 16.1306 19.9801C16.1306 21.634 16.1038 22.9411 16.1038 23.3679C16.1038 23.688 16.3453 24.0881 16.9626 23.9547C21.847 22.3275 25.3895 17.7126 25.3895 12.2708C25.47 5.49518 19.9147 0 13.0712 0Z"
+            fill="white"
+        />
+        <path
+            d="M60.1701 17.8994H60.1433C60.1701 17.8994 60.1701 17.8994 60.1701 17.8994ZM60.1701 17.8994C60.0359 17.8994 59.6871 17.9794 59.3113 17.9794C58.1305 17.9794 57.7279 17.4459 57.7279 16.7523V12.0841H60.1165C60.2506 12.0841 60.358 11.9774 60.358 11.7906V9.25644C60.358 9.12307 60.2506 9.01636 60.1165 9.01636H57.7279V5.89531C57.7279 5.78861 57.6474 5.70858 57.5132 5.70858H54.2928C54.1586 5.70858 54.0781 5.78861 54.0781 5.89531V9.12307C54.0781 9.12307 52.441 9.5232 52.3337 9.54988C52.2263 9.57655 52.1458 9.68325 52.1458 9.78996V11.8173C52.1458 11.9774 52.2531 12.1107 52.3873 12.1107H54.0512V16.9924C54.0512 20.6203 56.6008 20.9937 58.3452 20.9937C59.1503 20.9937 60.0896 20.7536 60.2506 20.6736C60.3312 20.6469 60.3848 20.5402 60.3848 20.4335V18.1928C60.4117 18.0327 60.3043 17.926 60.1701 17.8994ZM95.649 14.6449C95.649 11.9507 94.5486 11.6039 93.3946 11.7106C92.509 11.764 91.7844 12.2174 91.7844 12.2174V17.4459C91.7844 17.4459 92.509 17.9527 93.6093 17.9794C95.1659 18.0327 95.649 17.4725 95.649 14.6449ZM99.2988 14.4048C99.2988 19.4999 97.6349 20.9671 94.7365 20.9671C92.2943 20.9671 90.9524 19.74 90.9524 19.74C90.9524 19.74 90.8988 20.4335 90.8182 20.5136C90.7646 20.5936 90.7109 20.6203 90.6036 20.6203H88.3761C88.215 20.6203 88.0809 20.5136 88.0809 20.3802L88.1077 3.84129C88.1077 3.70791 88.215 3.60121 88.3492 3.60121H91.5429C91.677 3.60121 91.7844 3.70791 91.7844 3.84129L91.7576 9.4165C91.7576 9.4165 92.9921 8.61623 94.7902 8.61623H94.817C96.6419 8.61623 99.2988 9.28312 99.2988 14.4048ZM86.2291 9.01636H83.0891C82.9281 9.01636 82.8476 9.12307 82.8476 9.30979V17.3925C82.8476 17.3925 82.0156 17.9794 80.8885 17.9794C79.7613 17.9794 79.4393 17.4725 79.4393 16.3522V9.28312C79.4393 9.14974 79.3319 9.04304 79.1977 9.04304H76.0041C75.8699 9.04304 75.7626 9.14974 75.7626 9.28312V16.8857C75.7626 20.1668 77.6143 20.9671 80.137 20.9671C82.2303 20.9671 83.9211 19.82 83.9211 19.82C83.9211 19.82 84.0016 20.4069 84.0284 20.4869C84.0553 20.5669 84.1626 20.6203 84.27 20.6203H86.2828C86.4438 20.6203 86.5243 20.5136 86.5243 20.3802L86.5511 9.25644C86.5243 9.14974 86.3901 9.01636 86.2291 9.01636ZM50.7503 9.01636H47.5566C47.4224 9.01636 47.3151 9.14974 47.3151 9.30979V20.2201C47.3151 20.5136 47.503 20.6203 47.7713 20.6203H50.6429C50.9381 20.6203 51.0186 20.4869 51.0186 20.2201V9.25644C51.0186 9.12307 50.8844 9.01636 50.7503 9.01636ZM49.1937 3.97467C48.0397 3.97467 47.1272 4.88164 47.1272 6.02869C47.1272 7.17574 48.0397 8.08271 49.1937 8.08271C50.3209 8.08271 51.2333 7.17574 51.2333 6.02869C51.2333 4.88164 50.3209 3.97467 49.1937 3.97467ZM73.884 3.60121H70.7172C70.583 3.60121 70.4756 3.70791 70.4756 3.84129V9.92333H65.5107V3.86796C65.5107 3.73458 65.4034 3.62788 65.2692 3.62788H62.0756C61.9414 3.62788 61.834 3.73458 61.834 3.86796V20.4069C61.834 20.5402 61.9682 20.6469 62.0756 20.6469H65.2692C65.4034 20.6469 65.5107 20.5402 65.5107 20.4069V13.3111H70.4756L70.4488 20.3802C70.4488 20.5136 70.5561 20.6203 70.6903 20.6203H73.884C74.0181 20.6203 74.1255 20.5136 74.1255 20.3802V3.84129C74.1255 3.73458 74.0181 3.60121 73.884 3.60121ZM45.6243 10.937V19.4732C45.6243 19.5266 45.5975 19.6333 45.5438 19.6599C45.5438 19.6599 43.6652 20.9937 40.5789 20.9937C36.8486 20.9937 32.4473 19.82 32.4473 12.1908C32.4473 4.53485 36.3118 2.96099 40.069 2.98767C43.3432 2.98767 44.6582 3.70791 44.8461 3.84129C44.8997 3.92131 44.9266 3.97466 44.9266 4.05469L44.3093 6.69558C44.3093 6.82896 44.1751 6.98901 44.0141 6.93566C43.4774 6.77561 42.6723 6.4555 40.7668 6.4555C38.5662 6.4555 36.2045 7.06904 36.2045 12.004C36.2045 16.939 38.4588 17.4992 40.069 17.4992C41.4377 17.4992 41.9476 17.3392 41.9476 17.3392V13.9247H39.747C39.586 13.9247 39.4518 13.818 39.4518 13.6846V10.937C39.4518 10.8036 39.5591 10.6969 39.747 10.6969H45.356C45.517 10.6703 45.6243 10.8036 45.6243 10.937Z"
+            fill="white"
+        />
+    </svg>
+</div>
--- a/src/routes/education/+page.svelte
+++ b/src/routes/education/+page.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { FooterNav, MainFooter } from '$lib/components';
+    import { Main } from '$lib/layouts';
+    import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+    import CallToAction from './(components)/CallToAction.svelte';
+    import { TITLE_SUFFIX } from '$routes/titles';
+    import Community from './(components)/Community.svelte';
+    import GetStarted from './(components)/GetStarted.svelte';
+    import Hero from './(components)/Hero.svelte';
+    import Kickstart from './(components)/Kickstart.svelte';
+    import Faq from './(components)/FAQ.svelte';
+
+    const title = 'Education' + TITLE_SUFFIX;
+    const description = DEFAULT_DESCRIPTION;
+    const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
+</script>
+
+<svelte:head>
+    <!-- Titles -->
+    <title>{title}</title>
+    <meta property="og:title" content={title} />
+    <meta name="twitter:title" content={title} />
+    <!-- Description -->
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+    <!-- Image -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<Main>
+    <Hero />
+    <div class="light space-y-10 bg-[#EDEDF0] pb-32">
+        <Kickstart />
+        <GetStarted />
+        <Community />
+    </div>
+
+    <Faq />
+    <CallToAction />
+    <div class="container">
+        <FooterNav />
+        <MainFooter />
+    </div>
+</Main>
--- a/src/routes/heroes/+page.svelte
+++ b/src/routes/heroes/+page.svelte
@@ -355,6 +355,7 @@
 </Main>

 <style lang="scss">
+    @use '$scss/abstract/functions' as f;
    @use '$scss/abstract/mixins/border-gradient' as gradients;

    .hero {
@@ -456,7 +457,7 @@
            padding-inline: 4rem;

            display: flex;
-            gap: pxToRem(32);
+            gap: f.pxToRem(32);
            flex-shrink: 0;

            > * {
--- a/src/routes/init-0/(components)/CountdownCard.svelte
+++ b/src/routes/init-0/(components)/CountdownCard.svelte
@@ -34,12 +34,4 @@
        justify-content: center;
        align-items: center;
    }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>
--- a/src/routes/init-0/(components)/Ticket.svelte
+++ b/src/routes/init-0/(components)/Ticket.svelte
@@ -413,12 +413,6 @@
        z-index: -1;
    }

-    .text-title font-aeonik-pro {
-        font-size: adjusted(2.5);
-        line-height: #{math.div(44, 40)}em;
-        overflow-wrap: break-word;
-    }
-
    .text-label {
        font-size: adjusted(1.5);
        line-height: #{math.div(28, 24)}em;
--- a/src/routes/init/(components)/CountdownCard.svelte
+++ b/src/routes/init/(components)/CountdownCard.svelte
@@ -33,12 +33,4 @@
        align-items: center;
        background-color: hsl(var(--web-color-subtle));
    }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>
--- a/src/routes/init/(components)/TicketScroll.svelte
+++ b/src/routes/init/(components)/TicketScroll.svelte
@@ -58,12 +58,12 @@
 </div>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;

    .col {
        display: flex;
        flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);

        @keyframes scroll {
            0% {
--- a/src/routes/init/(components)/VideoDialog.svelte
+++ b/src/routes/init/(components)/VideoDialog.svelte
@@ -56,7 +56,7 @@
        pointer-events: none;
        transition: 200ms ease;

-        &[data-state='open'] {
+        :global(&[data-state='open']) {
            opacity: 1;
            pointer-events: all;
        }
@@ -82,7 +82,7 @@
        pointer-events: none;
        transition: 200ms ease;

-        &[data-state='open'] {
+        :global(&[data-state='open']) {
            opacity: 1;
            transform: scale(1);
            pointer-events: all;
--- a/src/routes/init/(components)/grid/Cell.svelte
+++ b/src/routes/init/(components)/grid/Cell.svelte
@@ -8,12 +8,12 @@
 </div>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;

    .cell {
        display: flex;
        flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
        height: 100%;

        @media screen and (min-width: 768px) {
--- a/src/routes/init/(components)/grid/Root.svelte
+++ b/src/routes/init/(components)/grid/Root.svelte
@@ -8,11 +8,11 @@
 </div>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;

    .grid {
        display: flex;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
        flex-direction: column;

        @media screen and (min-width: 768px) {
--- a/src/routes/init/(components)/ticket/Ticket.svelte
+++ b/src/routes/init/(components)/ticket/Ticket.svelte
@@ -178,7 +178,7 @@
 </div>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
    $base-width: 22;

    .wrapper {
@@ -231,7 +231,7 @@
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 4px;
        overflow: hidden;
-        border-radius: pxToRem(16);
+        border-radius: f.pxToRem(16);
        aspect-ratio: 2 / 1;
        animation: fade 1s ease-out;
        transition: transform 100ms;
@@ -245,7 +245,7 @@
            display: flex;
            flex-direction: column;
            justify-content: center;
-            border-radius: pxToRem(8);
+            border-radius: f.pxToRem(8);
            line-height: 1;
            position: relative;
            overflow: hidden;
@@ -270,7 +270,7 @@
                justify-content: space-between;
                width: fit-content;
                gap: 4px;
-                padding: pxToRem(24) 0;
+                padding: f.pxToRem(24) 0;
                left: 80%;

                span {
@@ -288,17 +288,17 @@
                --delay: 700ms;
                display: flex;
                flex-direction: column;
-                gap: pxToRem(4);
+                gap: f.pxToRem(4);
                width: 60%;
-                margin: pxToRem(16);
-                border-radius: pxToRem(16);
+                margin: f.pxToRem(16);
+                border-radius: f.pxToRem(16);

                &[data-remove-delay] {
                    --delay: 0ms;
                }

                .row {
-                    gap: pxToRem(4);
+                    gap: f.pxToRem(4);
                    display: flex;

                    div {
@@ -307,14 +307,14 @@
                        height: var(--size);
                        flex-shrink: 0;

-                        @media screen and (min-width: 768px) {
-                            --size: 8px;
-                        }
-
                        border-radius: calc(var(--size) / 4);
                        animation: fade-in 500ms ease calc(calc(75ms * var(--index)) + var(--delay))
                            forwards;

+                        @media screen and (min-width: 768px) {
+                            --size: 8px;
+                        }
+
                        &[data-level] {
                            --bg-color: var(--web-color-accent);
                        }
@@ -358,9 +358,9 @@
            grid-column: span 9 / span 9;
            height: 100%;
            background: #000;
-            padding: pxToRem(20);
+            padding: f.pxToRem(20);
            position: relative;
-            border-radius: pxToRem(16);
+            border-radius: f.pxToRem(16);
            overflow: hidden;

            .text-label {
@@ -385,8 +385,4 @@
            }
        }
    }
-    .text-title font-aeonik-pro {
-        font-size: clamp(20px, 1vw, 24px);
-        line-height: 1;
-    }
 </style>
--- a/src/routes/init/tickets/customize/+page.svelte
+++ b/src/routes/init/tickets/customize/+page.svelte
@@ -131,14 +131,4 @@
            margin-block-start: 0;
        }
    }
-
-    .text-display font-aeonik-pro {
-        margin-bottom: -48px;
-    }
-
-    @media screen and (min-width: 768px) {
-        .text-display font-aeonik-pro {
-            margin-bottom: 0;
-        }
-    }
 </style>
--- a/src/routes/integrations/+page.svelte
+++ b/src/routes/integrations/+page.svelte
@@ -447,16 +447,18 @@
 </Main>

 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
+    @use '$scss/abstract/variables/devices';
+
    :global([data-scroll-smooth]) {
        scroll-behavior: smooth;
    }
    .hero {
-        min-height: pxToRem(620);
+        min-height: f.pxToRem(620);
        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: 60% minmax(0, 1fr);
-            gap: pxToRem(32);
+            gap: f.pxToRem(32);
            justify-content: space-between;
            align-items: center;
            position: relative;
@@ -465,7 +467,7 @@
                transform-origin: left center;
                scale: 1.25;
                position: relative;
-                left: pxToRem(-30);
+                left: f.pxToRem(-30);
            }
        }

@@ -525,7 +527,7 @@
    /* more tha 9 items */
    .l-max-size-list-cards-section {
        scroll-snap-align: start;
-        scroll-margin-top: pxToRem(120);
+        scroll-margin-top: f.pxToRem(120);
    }
    .l-max-size-list-cards {
        &:where(:has(> ul > li:nth-child(10))) {
@@ -536,7 +538,7 @@
                bottom: 0;
                height: 100%;
                width: 100%;
-                max-height: pxToRem(350);
+                max-height: f.pxToRem(350);
                content: '';
                display: block;
                background: linear-gradient(
@@ -550,7 +552,7 @@
            .l-float-button {
                position: absolute;
                inset-inline: 0;
-                inset-block-end: pxToRem(20);
+                inset-block-end: f.pxToRem(20);
                margin-inline: auto;
                display: flex;
            }
@@ -576,16 +578,16 @@
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
-        @media #{$break1} {
+        @media #{devices.$break1} {
            gap: 1.25rem;
        }
    }
    .l-integrations-grid {
        position: relative;

-        @media #{$break1} {
+        @media #{devices.$break1} {
            gap: 0;
-            padding-block-start: pxToRem(80);
+            padding-block-start: f.pxToRem(80);
        }

        .disabled {
@@ -596,8 +598,8 @@
        }

        .sidebar {
-            margin-bottom: pxToRem(60);
-            @media #{$break2open} {
+            margin-bottom: f.pxToRem(60);
+            @media #{devices.$break2open} {
                position: sticky;
                top: 50px;
                height: 500px;
@@ -609,7 +611,7 @@
            }

            .tag {
-                min-width: pxToRem(42) !important;
+                min-width: f.pxToRem(42) !important;

                &.active-tag {
                    background-color: #fff;
@@ -618,17 +620,17 @@
            }
        }

-        @media #{$break2open} {
+        @media #{devices.$break2open} {
            display: grid;
-            gap: pxToRem(68);
-            grid-template-columns: pxToRem(240) 1fr;
-            padding-block-start: pxToRem(40);
+            gap: f.pxToRem(68);
+            grid-template-columns: f.pxToRem(240) 1fr;
+            padding-block-start: f.pxToRem(40);
        }
    }
    .l-integrations-hero {
-        @media #{$break1} {
+        @media #{devices.$break1} {
        }
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
        }
    }
    .l-bg-1 {
@@ -645,12 +647,12 @@
    }

    .web-feature-grid {
-        @media #{$break1} {
+        @media #{devices.$break1} {
            gap: 1rem;
        }
    }
    .web-feature-grid {
-        @media #{$break1} {
+        @media #{devices.$break1} {
            gap: 1rem;
        }
    }
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -359,10 +359,4 @@
        gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }
-
-    .web-pricing-cards-list .web-main-body-500 {
-        height: 78px;
-        --p-font-size: unset !important;
-        --p-line-height: var(--web-line-height-sm);
-    }
 </style>
--- a/src/routes/products/messaging/(components)/Target.svelte
+++ b/src/routes/products/messaging/(components)/Target.svelte
@@ -2,7 +2,6 @@
    import { clamp } from '$lib/utils/clamp';
    import { withPrevious } from '$lib/utils/withPrevious';
    import { withRaf } from '$lib/utils/withRaf';
-    import { get } from 'svelte/store';
    import Accordion from './Accordion/Accordion.svelte';
    import AccordionItem from './Accordion/AccordionItem.svelte';
    import Checkbox from './Checkbox.svelte';
--- a/src/routes/startups/+page.svelte
+++ b/src/routes/startups/+page.svelte
@@ -187,8 +187,8 @@
                            class="text-description web-u-max-width-640 e-u-padding-inline-32-desktop mx-auto"
                        >
                            The Appwrite Startups Program supports your startup with a complete
-                            backend for you to build your products. You will receive
-                            $20,000 Cloud credits for Appwrite Scale for 12 months.
+                            backend for you to build your products. You will receive $20,000 Cloud
+                            credits for Appwrite Scale for 12 months.
                        </p>
                        <button on:click={scrollToForm} class="web-button mt-3 mx-auto">
                            Apply now
--- a/src/routes/startups/faq.svelte
+++ b/src/routes/startups/faq.svelte
@@ -25,7 +25,7 @@
        },
        {
            question: 'Who is eligible to apply?',
-            answer: "We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join."
+            answer: 'We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join.'
        },
        {
            question: 'What are the limits of the Scale plan?',
--- a/src/routes/students/+page.server.ts
+++ b/src/routes/students/+page.server.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load() {
+    redirect(301, '/education');
+}
--- a/src/routes/threads/[id]/MessageCard.svelte
+++ b/src/routes/threads/[id]/MessageCard.svelte
@@ -53,10 +53,6 @@
        overflow: hidden;
    }

-    .text-sub-body font-medium {
-        font-size: 1rem !important;
-    }
-
    .header {
        display: flex;
        justify-content: space-between;
--- a/src/scss/7-components/_main-header.scss
+++ b/src/scss/7-components/_main-header.scss
@@ -1,75 +1,110 @@
@use '../abstract' as *;

 .#{$p}-main-header {
-  --p-main-header-padding-block: #{pxToRem(15)};
+    --p-main-header-padding-block: #{pxToRem(15)};

-  --p-main-header-link-color: var(--web-color-greyscale-900);
-  --p-main-header-border-color: rgb(0,0,0, 0.1);
-
-
-  position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
-  padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
-  min-block-size:pxToRem(73);
-
-  &.is-special-padding {
-    padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */
-  }
-  &.is-docs {
-    .#{$p}-main-header-wrapper { max-inline-size:86.875rem;  }
-  }
-  &.is-reference {
-    .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
-  }
-  
-  &-wrapper { 
-    display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto;
-    max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block);
-  }
-  &-start { display:flex; align-items:center; }
-  &-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) }
-
-  .#{$p}-input-text { padding-block:pxToRem(7); padding-inline-end:pxToRem(8); }
-
-  .web-logo { margin-inline-end:pxToRem(32); }
-  
-
-  &-nav {
-    align-self:center; font-size:pxToRem(16); user-select:none;
-    &-list { display:flex; gap:pxToRem(32); }
-    &-link {
-      color:hsl(var(--web-color-primary)); transition:var(--transition);
-      &.is-selected { color:hsl(var(--p-main-header-link-color)); }
-    }
-  }
-  &-more {
-    &-link { color:hsl(var(--color-neutral-0) / 0.64); }
-  }
-
-  &.is-transparent { 
-    [data-js-enabled] & {
-      background-color: transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10)); 
-    }
-  }
-
-  #{$theme-dark} &,
-  &#{$theme-dark} {
-    --p-main-header-link-color: var(--web-color-greyscale-100);
-    --p-main-header-border-color: rgb(255,255,255, 0.1);
-  }
-
-  #{$theme-light} &,
-  &#{$theme-light} {
    --p-main-header-link-color: var(--web-color-greyscale-900);
-    --p-main-header-border-color: rgb(0,0,0, 0.1);
-  }
+    --p-main-header-border-color: rgb(0, 0, 0, 0.1);

-  @media #{$break1}, #{$break2}{
-    display:none;
-  }
+    position: sticky;
+    z-index: 999;
+    inset-block-start: 0;
+    background-color: hsl(var(--p-body-bg-color));
+    padding-inline: pxToRem(32);
+    border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
+    min-block-size: pxToRem(73);
+    transition: transform 0.3s ease;

+    &.is-special-padding {
+        padding-inline: clamp(1.25rem, 4vw, 120rem); /* Thomas calculation */
+    }
+    &.is-docs {
+        .#{$p}-main-header-wrapper {
+            max-inline-size: 86.875rem;
+        }
+    }
+    &.is-reference {
+        .#{$p}-main-header-wrapper {
+            max-inline-size: var(--container-size-huge);
+        }
+    }

-  transition: transform 0.3s ease;
-  &.is-hidden {
-    transform: translateY(-100%);
-  }
+    &-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: pxToRem(16);
+        margin-inline: auto;
+        max-inline-size: pxToRem(1728);
+        padding-block: var(--p-main-header-padding-block);
+    }
+    &-start {
+        display: flex;
+        align-items: center;
+    }
+    &-end {
+        display: flex;
+        margin-inline-start: auto;
+        align-items: center;
+        gap: pxToRem(8);
+    }
+
+    .#{$p}-input-text {
+        padding-block: pxToRem(7);
+        padding-inline-end: pxToRem(8);
+    }
+
+    .web-logo {
+        margin-inline-end: pxToRem(32);
+    }
+
+    &-nav {
+        align-self: center;
+        font-size: pxToRem(16);
+        user-select: none;
+        &-list {
+            display: flex;
+            gap: pxToRem(32);
+        }
+        &-link {
+            color: hsl(var(--web-color-primary));
+            transition: var(--transition);
+            &.is-selected {
+                color: hsl(var(--p-main-header-link-color));
+            }
+        }
+    }
+    &-more {
+        &-link {
+            color: hsl(var(--color-neutral-0) / 0.64);
+        }
+    }
+
+    &.is-transparent {
+        [data-js-enabled] & {
+            background-color: transparent;
+            -webkit-backdrop-filter: blur(pxToRem(10));
+            backdrop-filter: blur(pxToRem(10));
+        }
+    }
+
+    #{$theme-dark} &,
+    &#{$theme-dark} {
+        --p-main-header-link-color: var(--web-color-greyscale-100);
+        --p-main-header-border-color: rgb(255, 255, 255, 0.1);
+    }
+
+    #{$theme-light} &,
+    &#{$theme-light} {
+        --p-main-header-link-color: var(--web-color-greyscale-900);
+        --p-main-header-border-color: rgb(0, 0, 0, 0.1);
+    }
+
+    @media #{$break1}, #{$break2} {
+        display: none;
+    }
+
+    &.is-hidden {
+        transform: translateY(-100%);
+    }
 }
--- a/src/scss/7-components/_mobile-header.scss
+++ b/src/scss/7-components/_mobile-header.scss
@@ -1,30 +1,49 @@
@use '../abstract' as *;

 .#{$p}-mobile-header {
-  --p-mobile-header-border-color: rgb(0,0,0, 0.1);
+    --p-mobile-header-border-color: rgb(0, 0, 0, 0.1);

+    position: sticky;
+    z-index: 120;
+    inset-block-start: 0;
+    background-color: hsl(var(--p-body-bg-color));
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: pxToRem(16);
+    border-block-end: solid 1px var(--p-mobile-header-border-color);
+    padding-inline: pxToRem(20);
+    padding-block: pxToRem(16);
+    transition: transform 0.3s ease;
+    &-start {
+        display: flex;
+        align-items: center;
+    }
+    &-end {
+        display: flex;
+        align-items: center;
+        gap: pxToRem(8);
+    }
+    &.is-transparent {
+        background-color: transparent;
+        -webkit-backdrop-filter: blur(pxToRem(8));
+        backdrop-filter: blur(pxToRem(8));
+    }
+    @media #{$break3open} {
+        display: none;
+    }

-  position:sticky; z-index:120; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
-  display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
-  border-block-end: solid 1px var(--p-mobile-header-border-color);
-  padding-inline:pxToRem(20); padding-block:pxToRem(16);
-  &-start { display:flex; align-items: center; }
-  &-end   { display:flex; align-items: center; gap: pxToRem(8) }
-  &.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); }
-  @media #{$break3open} { display:none; }
+    #{$theme-dark} &,
+    &#{$theme-dark} {
+        --p-mobile-header-border-color: rgb(255, 255, 255, 0.1);
+    }

-  #{$theme-dark} &,
-  &#{$theme-dark} {
-    --p-mobile-header-border-color: rgb(255,255,255, 0.1);
-  }
+    #{$theme-light} &,
+    &#{$theme-light} {
+        --p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
+    }

-  #{$theme-light} &,
-  &#{$theme-light} {
-    --p-mobile-header-border-color: rgb(0,0,0, 0.1);
-  }
-
-  transition: transform 0.3s ease;
-  &.is-hidden {
-    transform: translateY(-100%);
-  }
+    &.is-hidden {
+        transform: translateY(-100%);
+    }
 }
--- a/static/images/blog/education-program.png
+++ b/static/images/blog/education-program.png
--- a/static/images/changelog/2024-11-12.png
+++ b/static/images/changelog/2024-11-12.png
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,13 @@ export default defineConfig({
            includePublic: true
        })
    ],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern'
+            }
+        }
+    },
    build: {
        reportCompressedSize: false
    },