Add Tabler Illustrations (#1907)

* init illustrations

* tabler illustrations wizard

* illustratinos fixes

* fixes

* Merge branch 'dev-illustrations' of https://github.com/tabler/tabler into dev-illustrations

* Create sour-pets-raise.md

.build/import-illustrations.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const fs = require('fs'),
+	path = require('path'),
+	glob = require('glob');
+
+const illustrations = glob
+	.sync(path.join(__dirname, `../src/static/illustrations/light/*.png`))
+	.map((file) => {
+		return path.basename(file, '.png')
+	})
+
+
+fs.writeFileSync(
+	path.join(__dirname, `../src/pages/_data/illustrations.json`),
+	JSON.stringify(illustrations)
+)

.changeset/sour-pets-raise.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Tabler Illustrations

_config.yml

@@ -62,7 +62,7 @@ jekyll_tidy:
   ignore_env: development
 
 collections:
-  - illustrations
+  - free-illustrations
 
 defaults:
   - scope:
@@ -125,6 +125,40 @@ colors:
     hex: '#17a2b8'
     title: Cyan
 
+skin-colors: 
+  rose:
+    hex: '#FFCB9D'
+    title: Rose
+    class: rose
+  yellow:
+    hex: '#F0BA60'
+    title: Yellow
+    class: yellow
+  skin-1:
+    hex: '#e2c6a7'
+    title: Skin 1
+    class: skin-1
+  skin-2:
+    hex: '#c7a786'
+    title: Skin 2
+    class: skin-2
+  skin-3:
+    hex: '#a68063'
+    title: Skin 3
+    class: skin-3
+  skin-4:
+    hex: '#926241'
+    title: Skin 4
+    class: skin-4
+  skin-5:
+    hex: '#654c45'
+    title: Skin 5
+    class: skin-5
+  gray:
+    hex: '#d5d7dd'
+    title: Gray
+    class: gray
+
 colors-extra:
   white:
     hex: '#ffffff'
@@ -236,4 +270,9 @@ icons:
 emails:
   price: "$29"
   count: 54
-  buy_link: https://tabler.io/buy-emails
+  buy_link: https://r.tabler.io/buy-emails
+
+illustrations:
+  price: "$59"
+  count: 50
+  buy_link: https://r.tabler.io/buy-illustrations

package.json

@@ -21,7 +21,8 @@
     "download-images": "node .build/download-images.js",
     "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
-    "format:write": "prettier --write src/**/*.{js,scss} --cache"
+    "format:write": "prettier --write src/**/*.{js,scss} --cache",
+    "illustrations": "node .build/import-illustrations.js"
   },
   "repository": {
     "type": "git",
@@ -150,6 +151,7 @@
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.4.1",
+    "glob": "^10.4.1",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",

pnpm-lock.yaml

@@ -82,6 +82,9 @@ devDependencies:
   fslightbox:
     specifier: ^3.4.1
     version: 3.4.1
+  glob:
+    specifier: ^10.4.1
+    version: 10.4.1
   gulp:
     specifier: ^4.0.2
     version: 4.0.2
@@ -1717,6 +1720,18 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.0.1
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+    dev: true
+
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
@@ -1955,6 +1970,13 @@ packages:
     resolution: {integrity: sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==}
     dev: true
 
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@pnpm/config.env-replace@1.1.0:
     resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
     engines: {node: '>=12.22.0'}
@@ -4375,6 +4397,14 @@ packages:
       for-in: 1.0.2
     dev: true
 
+  /foreground-child@3.2.0:
+    resolution: {integrity: sha512-CrWQNaEl1/6WeZoarcM9LHupTo3RpZO2Pdk1vktwzPiQTsJnAKJmm3TACKeG5UZbWDfaH2AbvYxzP96y0MT7fA==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 4.1.0
+    dev: true
+
   /forever-agent@0.6.1:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
     dev: true
@@ -4622,8 +4652,21 @@ packages:
       - supports-color
     dev: true
 
+  /glob@10.4.1:
+    resolution: {integrity: sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==}
+    engines: {node: '>=16 || 14 >=14.18'}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.2.0
+      jackspeak: 3.4.0
+      minimatch: 9.0.4
+      minipass: 7.1.2
+      path-scurry: 1.11.1
+    dev: true
+
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -4636,6 +4679,7 @@ packages:
   /glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -5766,6 +5810,15 @@ packages:
       iterate-iterator: 1.0.2
     dev: true
 
+  /jackspeak@3.4.0:
+    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+    dev: true
+
   /js-cleanup@1.2.0:
     resolution: {integrity: sha512-JeDD0yiiSt80fXzAVa/crrS0JDPQljyBG/RpOtaSbyDq03VHa9szJWMaWOYU/bcTn412uMN2MxApXq8v79cUiQ==}
     engines: {node: ^10.14.2 || >=12.0.0}
@@ -6151,6 +6204,11 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /lru-cache@10.2.2:
+    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
+    engines: {node: 14 || >=16.14}
+    dev: true
+
   /lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
     dependencies:
@@ -6356,6 +6414,13 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimatch@9.0.4:
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist-options@4.1.0:
     resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
     engines: {node: '>= 6'}
@@ -6369,6 +6434,11 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
+  /minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dev: true
+
   /mitt@1.2.0:
     resolution: {integrity: sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==}
     dev: true
@@ -6954,6 +7024,14 @@ packages:
       path-root-regex: 0.1.2
     dev: true
 
+  /path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+    dependencies:
+      lru-cache: 10.2.2
+      minipass: 7.1.2
+    dev: true
+
   /path-type@1.1.0:
     resolution: {integrity: sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==}
     engines: {node: '>=0.10.0'}
@@ -7984,6 +8062,11 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+    dev: true
+
   /skip-regex@1.0.2:
     resolution: {integrity: sha512-pEjMUbwJ5Pl/6Vn6FsamXHXItJXSRftcibixDmNCWbWhic0hzHrwkMZo0IZ7fMRH9KxcWDFSkzhccB4285PutA==}
     engines: {node: '>=4.2'}

src/pages/_data/illustrations.json

@@ -0,0 +1 @@
+["weightlifting","wait","video","to-do","telescope","snowman","shield","search","project","not-found","neutral-info","music","mobile-computer","message","map-destination","loading","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","ice-skates","good-news","girl-refresh","girl-phone","gift","folders","flowers","fingerprint","exit","error","email","dart","dance","conversation","computer-fix","clock-and-cat","chart","chart-circle","calendar","building","boy","boy-with-key","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","ai"]

src/pages/_data/menu.yml

@@ -331,6 +331,11 @@ emails:
   icon: mail-opened
   url: emails.html
 
+emails:
+  title: "SVG illustrations"
+  icon: brand-figma
+  url: illustrations.html
+
 help:
   title: Help
   icon: lifebuoy

src/pages/_free-illustrations/autodark/boy-girl.svg

@@ -0,0 +1,46 @@
+---
+---
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
+    <style>
+        :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b { fill: #1A2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c { fill: #454C5E; }
+        @media (prefers-color-scheme: dark) { .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-girl-b { fill: #1A2030; } .tblr-illustrations-boy-girl-c { fill: #454C5E; } }
+    </style>
+    <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a"/>
+    <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b"/>
+    <path d="M479.179 238.829C475.497 244.691 456.146 274.402 421.211 280.161C408.559 282.198 395.593 280.84 383.637 276.225C376.963 273.704 370.647 270.322 364.85 266.164L373.304 245.592C374.244 246.41 375.7 247.659 377.607 249.049C384.182 253.84 395.868 260.321 407.863 256.273C414.608 254.009 419.323 249.697 428.36 240.849C436.25 233.084 443.39 224.592 449.683 215.486C455.319 205.153 466.977 202.626 474.943 209.512C482.598 215.974 484.609 229.097 479.179 238.829Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M383.666 276.159C376.992 273.638 370.676 270.256 364.879 266.098L373.333 245.526C374.272 246.344 375.728 247.593 377.635 248.983C377.119 253.445 376.818 260.697 379.035 266.568C380.328 269.88 381.876 273.087 383.666 276.159Z" fill="black" opacity="0.15"/>
+    <path d="M324.054 160.289C332.183 175.733 345.737 187.624 362.107 193.674L307.502 198.718C313.026 185.906 318.543 173.096 324.054 160.289Z" fill="#232B41" class="tblr-illustrations-boy-girl-c"/>
+    <path d="M302.083 425.902L299.434 457.398L295.601 503.211H291.872L282.206 455.679L278.073 435.333L302.083 425.902ZM355.701 425.902L353.221 455.548L349.229 503.211H345.5L336.153 457.314L331.682 435.333L355.701 425.902Z" fill="#DADBE0"/>
+    <path d="M278.063 435.333L302.083 425.939L299.434 457.436C293.46 457.051 287.692 456.496 282.206 455.717L278.063 435.333ZM355.701 425.902L353.212 455.548C347.782 456.318 342.071 456.91 336.153 457.314L331.682 435.333L355.701 425.902Z" fill="black" opacity="0.15"/>
+    <path d="M318.108 202.692C302.571 204.392 285.231 199.874 278.063 195.017C276.833 194.294 275.8 193.278 275.057 192.058C274.278 190.508 273.592 188.902 272.916 187.202C271.976 184.872 271.169 182.449 270.445 180.025C268.518 173.72 267.17 167.252 266.415 160.703C266.415 160.167 266.218 158.57 266.021 156.72C265.345 148.425 265.006 141.69 264.809 137.069C265.204 137.745 267.139 140.901 268.886 140.61C270.765 140.225 272.333 136.092 271.901 130.174H307.136L321.847 142.893C321.847 142.893 322.279 144.931 323.199 148.031C324.69 153.477 326.558 158.813 328.789 164C330.667 168.321 332.912 172.304 335.364 174.727C343.49 182.468 336.745 200.747 318.108 202.692Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M328.788 164C315.373 168.775 300.746 168.931 287.231 164.441C283.781 164.927 280.531 166.354 277.838 168.565C273.855 171.919 273.958 175.018 270.755 179.584L270.464 180.025C268.537 173.72 267.188 167.252 266.434 160.703C266.434 160.167 266.237 158.57 266.039 156.72C265.363 148.425 265.025 141.69 264.828 137.069C265.222 137.745 267.157 140.901 268.904 140.61C270.783 140.225 272.352 136.092 271.92 130.174H307.155L321.865 142.893C321.865 142.893 322.297 144.931 323.218 148.031C324.703 153.476 326.564 158.812 328.788 164Z" fill="black" opacity="0.1"/>
+    <path d="M353.502 268.466C356.893 286.755 359.298 300.197 360.951 309.666C361.045 310.192 361.13 310.718 361.224 311.244C363.196 322.244 365.225 333.253 367.198 344.272C330.2 344.935 293.193 345.649 256.176 346.413C256.232 343.868 256.27 341.238 256.335 338.673V338.542C255.228 310.418 255.658 282.255 257.622 254.178C257.763 252.102 257.913 250.045 258.083 247.978L252.54 260.923L230.334 247.772C231.132 244.258 233.922 233.681 242.132 226.448C242.132 226.448 249.581 219.967 257.895 218.792C258.667 218.721 259.432 218.596 260.187 218.417C260.319 218.382 260.454 218.357 260.591 218.342C265.334 217.665 269.928 217.055 274.249 216.726C284.754 215.813 295.312 215.656 305.839 216.256C315.93 216.869 325.952 218.314 335.805 220.577C338.285 221.169 340.868 221.845 343.32 222.653L345.405 223.358C345.668 223.442 345.922 223.517 346.166 223.611L347.537 224.109C349.097 224.71 364.606 229.229 368.006 230.271C371.821 231.512 375.321 233.566 378.264 236.293L364.089 275.464L353.502 268.466Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M271.554 222.127C271.554 233.832 285.644 243.3 303.069 243.3C320.494 243.3 334.519 233.832 334.519 222.127C334.52 221.496 334.457 220.867 334.331 220.249C324.476 217.949 314.441 216.504 304.337 215.927C293.815 215.329 283.263 215.495 272.765 216.425C271.953 218.216 271.539 220.161 271.554 222.127Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M337.524 142.451C335.044 147.89 329.361 151.845 328.591 152.361C312.133 163.511 287.334 150.849 280.684 147.063C279.03 151.572 274.756 154.973 274.221 157.744C274.08 158.57 273.939 159.397 273.836 160.167C273.671 161.504 273.593 162.85 273.601 164.197C273.65 166.483 273.908 168.759 274.371 170.998C275.188 174.887 278.664 185.22 284.347 198.681C276.388 199.207 268.422 199.742 260.45 200.287L241.108 201.583C238.404 192.37 237.788 182.669 239.305 173.187C239.446 172.341 239.671 171.101 240.009 169.551C240.72 166.396 241.662 163.297 242.827 160.28C243.034 159.754 243.26 159.209 243.485 158.664C245.146 154.767 247.194 151.047 249.6 147.561C255.842 138.551 264.069 131.095 273.648 125.768C276.945 124.04 298.071 113.19 319.563 120.808C324.908 122.687 337.618 127.262 338.689 136.148C338.907 138.317 338.503 140.503 337.524 142.451ZM291.204 514.539C285.803 516.324 285.718 525.182 285.718 525.182L284.253 534.219L294.68 536.68L297.658 529.578L316.905 536.68C312.885 527.38 296.615 512.764 291.204 514.539ZM368.72 536.68C364.69 527.38 348.42 512.764 343.019 514.539C337.618 516.315 337.524 525.182 337.524 525.182L336.068 534.219L346.476 536.68L349.454 529.578L368.72 536.68Z" fill="#232B41" class="tblr-illustrations-boy-girl-c"/>
+    <path d="M337.524 142.451C335.044 147.89 329.371 151.845 328.591 152.352C312.133 163.521 287.335 150.849 280.684 147.063C278.366 144.912 276.281 142.523 274.465 139.934C283.982 145.468 294.71 148.587 305.711 149.018C316.712 149.448 327.651 147.178 337.571 142.404L337.524 142.451Z" fill="black" opacity="0.3"/>
+    <path d="M373.051 435.333H258.947L256.956 371.738L256.176 346.423L367.199 344.262L371.942 418.002L373.051 435.333Z" fill="#A6A9B3"/>
+    <path d="M373.05 435.333H258.947L257.632 345.615L313.392 345.249C292.67 386.214 286.602 401.469 288.274 402.85C290.566 404.729 306.121 379.122 314.003 383.527C316.868 385.134 317.168 389.849 317.985 393.005C320.531 402.756 332.226 413.455 371.942 418.002L373.05 435.333Z" fill="black" opacity="0.1"/>
+    <path d="M346.241 223.63H346.194L345.433 223.386C342.371 236.997 324.552 247.48 303.087 247.48C279.425 247.48 260.177 234.799 260.177 219.225V218.436C259.454 218.548 258.693 218.67 257.904 218.821C257.895 218.955 257.895 219.09 257.904 219.225C257.904 236.283 278.166 250.223 303.087 250.223C325.51 250.223 344.156 238.951 347.603 224.194L346.241 223.63Z" fill="#E1E1E1"/>
+    <path d="M307.502 263.853C309.411 263.853 310.959 262.011 310.959 259.739C310.959 257.467 309.411 255.625 307.502 255.625C305.593 255.625 304.045 257.467 304.045 259.739C304.045 262.011 305.593 263.853 307.502 263.853Z" fill="#E1E1E1"/>
+    <path d="M260.404 200.315L241.063 201.612C238.358 192.398 237.742 182.697 239.259 173.215C239.4 172.37 239.625 171.13 239.964 169.58L242.782 160.308C242.988 159.782 243.214 159.237 243.439 158.693C245.1 154.796 247.148 151.076 249.554 147.589C248.615 159.989 248.474 177.273 253.744 188.263C255.706 192.418 257.931 196.443 260.404 200.315Z" fill="black" opacity="0.3"/>
+    <path d="M367.199 344.272C330.201 344.935 293.193 345.649 256.176 346.413C256.233 343.868 256.27 341.238 256.336 338.673V338.542C315.929 341.501 350.957 319.557 361.224 311.244C363.197 322.244 365.264 333.253 367.199 344.272Z" fill="black" opacity="0.1"/>
+    <path d="M280.017 380.052C274.531 389.041 263.503 391.437 255.35 384.965C250.399 380.597 225.45 357.564 220.594 316.006C218.13 294.148 221.708 272.032 230.936 252.064C231.509 250.843 232.007 249.829 232.429 249.002L249.723 259.119C249.103 260.124 248.173 261.674 247.13 263.637C243.063 271.34 237.267 285.609 240.743 300.272C242.621 308.276 246.266 313.912 253.706 324.695C259.993 333.807 267.133 342.299 275.029 350.058C283.671 356.662 285.804 370.564 280.017 380.052Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M249.723 259.119C249.103 260.124 248.173 261.674 247.13 263.637C242.33 260.274 234.862 255.005 230.926 252.064C231.499 250.843 231.997 249.829 232.42 249.002L249.723 259.119Z" fill="black" opacity="0.15"/>
+    <path d="M304.337 215.899C293.815 215.301 283.264 215.467 272.766 216.397C271.949 218.196 271.536 220.152 271.554 222.127C271.554 233.832 285.644 243.3 303.069 243.3C320.494 243.3 334.519 233.832 334.519 222.127C334.52 221.496 334.457 220.867 334.331 220.248C324.477 217.94 314.442 216.485 304.337 215.899Z" fill="black" opacity="0.07"/>
+    <path d="M445.325 188.01C446.283 199.188 447.25 210.351 448.227 221.498L453.863 286.182C455.329 302.909 456.785 319.645 458.231 336.39H543.713C545.372 319.639 547.038 302.902 548.71 286.182C549.668 276.701 550.608 267.223 551.528 257.748C553.852 234.489 556.162 211.243 558.461 188.01H445.325Z" fill="#DADBE0"/>
+    <path d="M555.464 217.844C547.072 224.328 539.267 231.538 532.14 239.393C515.429 257.766 513.109 267.62 505.171 271.03C495.956 274.994 479.809 269.997 449.542 228.045L453.995 288.474H454.042C455.445 304.443 456.835 320.412 458.213 336.381H543.694C545.354 319.642 547.019 302.909 548.692 286.182H549.058L555.464 217.844Z" fill="black" opacity="0.1"/>
+    <path d="M420.385 276.76C422.47 282.504 425.273 287.961 428.727 293.002C429.744 294.46 430.829 295.871 431.977 297.229C436.998 303.248 443.375 307.99 450.585 311.065C454.275 312.632 458.128 313.779 462.074 314.485C467.561 315.468 473.147 315.784 478.71 315.424C479.17 315.424 479.649 315.377 480.072 315.34C480.247 315.35 480.423 315.35 480.598 315.34L481.631 315.255L482.12 315.208H482.458C486.709 314.762 490.926 314.037 495.083 313.038H495.148C498.827 312.155 502.453 311.064 506.007 309.769C507.604 309.215 509.145 308.604 510.62 307.956C512.674 307.067 514.615 306.128 516.444 305.138C519.749 303.381 522.934 301.407 525.978 299.23C527.35 298.243 528.608 297.294 529.736 296.411C522.502 293.161 515.26 289.892 508.018 286.661C503.784 284.782 499.557 282.882 495.336 280.959C493.604 282.328 491.712 283.479 489.7 284.388C488.168 285.069 486.55 285.537 484.891 285.778C483.818 285.965 482.727 286.028 481.64 285.966C478.4 285.778 475.347 284.181 472.51 281.617C472.363 281.502 472.225 281.376 472.097 281.241C470.798 280.007 469.592 278.679 468.489 277.267C456.841 262.407 449.702 233.681 449.702 233.681C452.924 222.879 453.119 211.399 450.266 200.494C449.097 196.178 447.436 192.011 445.316 188.076C440.947 188.898 436.792 190.601 433.104 193.082C431.175 194.4 429.398 195.928 427.806 197.638C412.607 213.861 410.268 249.528 420.385 276.76Z" fill="#DADBE0"/>
+    <path d="M445.325 188.01C438.625 189.246 432.498 192.598 427.844 197.572C412.607 213.861 410.268 249.528 420.385 276.76C422.47 282.504 425.273 287.961 428.727 293.002C429.744 294.46 430.828 295.871 431.977 297.229C436.998 303.248 443.375 307.99 450.585 311.065C452.425 311.844 454.306 312.518 456.221 313.085L458.26 336.39H543.741C545.401 319.639 547.067 302.902 548.739 286.182C549.697 276.694 550.636 267.216 551.557 257.748C553.861 234.489 556.163 211.243 558.461 188.01H445.325Z" fill="black" opacity="0.05"/>
+    <path d="M540.181 104.661C540.002 109.282 539.636 116.055 538.95 124.387C538.762 126.266 538.621 127.816 538.584 128.37C537.518 137.473 535.309 146.404 532.008 154.954C531.322 156.654 530.637 158.251 529.857 159.81C526.973 165.578 505.434 172.529 486.703 170.472C467.972 168.415 461.256 150.201 469.353 142.413C471.824 139.99 474.116 136.007 475.994 131.667C478.228 126.463 480.092 121.108 481.574 115.642C482.513 112.533 482.946 110.475 482.946 110.475L497.712 97.7471H533.041C532.628 103.703 534.187 107.817 536.057 108.183C537.926 108.55 539.767 105.346 540.181 104.661Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M540.181 104.661C540.002 109.282 539.636 116.055 538.95 124.387C538.762 126.266 538.621 127.816 538.584 128.37C537.519 137.473 535.309 146.404 532.008 154.954C529.719 154.235 527.589 153.083 525.734 151.563C523.719 149.859 522.057 147.779 520.839 145.438C519.612 142.93 518.785 140.246 518.388 137.482C518.04 135.703 517.795 133.906 517.655 132.099C504.109 136.607 489.444 136.455 475.995 131.667C478.228 126.463 480.092 121.108 481.574 115.642C482.514 112.533 482.946 110.475 482.946 110.475L497.713 97.7471H533.042C532.628 103.703 534.188 107.817 536.057 108.183C537.926 108.55 539.768 105.346 540.181 104.661Z" fill="black" opacity="0.1"/>
+    <path d="M544.53 112.213C544.324 119.897 540.998 127.365 536.32 131.846C535.242 132.734 534.228 133.698 533.286 134.73C530.89 137.732 529.277 141.283 528.589 145.062C526.945 143.089 525.93 140.668 525.677 138.111C525.433 134.213 527.105 127.027 527.19 126.022C527.19 126.022 527.19 125.749 527.274 125.43C527.274 124.876 527.359 124.65 527.434 123.786C527.564 121.91 527.564 120.026 527.434 118.15C527.455 118.06 527.455 117.967 527.434 117.877C518.491 123.326 493.007 136.599 475.854 123.514C473.188 121.482 470.828 119.078 468.846 116.375C468.641 116.159 468.473 115.912 468.349 115.642C467.865 114.969 467.426 114.267 467.033 113.538C466.996 113.476 466.955 113.416 466.911 113.359V113.312C465.865 111.449 465.141 109.423 464.77 107.319L464.638 106.492C464.561 105.555 464.561 104.612 464.638 103.674C465.122 100.035 466.851 96.6762 469.532 94.1681C474.501 89.2271 481.838 86.2963 485.698 84.7746C500.728 78.7345 523.489 77.2597 536.424 90.8616C539.662 94.4155 542.023 98.678 543.319 103.308C544.136 106.205 544.544 109.203 544.53 112.213Z" fill="#232B41" class="tblr-illustrations-boy-girl-c"/>
+    <path d="M527.378 117.887C518.435 123.335 492.95 136.608 475.798 123.523C473.131 121.492 470.771 119.087 468.79 116.384C468.585 116.169 468.417 115.921 468.292 115.651C467.809 114.979 467.37 114.276 466.977 113.547C466.94 113.485 466.899 113.426 466.855 113.369V113.322C465.828 111.452 465.123 109.423 464.77 107.319C468.771 111.224 473.388 114.442 478.437 116.844C503.452 128.586 529.679 113.951 533.859 111.621L534.179 111.433C532.074 113.75 529.801 115.907 527.378 117.887Z" fill="black" opacity="0.3"/>
+    <path d="M543.657 336.39L536.311 514.22H521.873L501.893 376.83L488.178 514.22H477.479L458.213 336.39H543.657Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M505.697 538.906L537.926 535.318C537.926 535.318 539.091 526.967 534.037 524.046C528.984 521.124 510.967 531.081 505.697 538.906ZM458.26 538.906L490.479 535.318C490.479 535.318 491.644 526.967 486.6 524.046C481.556 521.124 463.473 531.081 458.26 538.906ZM420.385 276.76C422.47 282.504 425.272 287.961 428.726 293.002C434.133 300.991 441.72 307.26 450.585 311.065C451.487 303.348 449.862 295.547 445.954 288.831C439.472 277.634 428.754 272.852 420.385 276.76Z" fill="#232B41" class="tblr-illustrations-boy-girl-c"/>
+    <path d="M513.447 185.699C505.434 193.674 497.788 196.624 491.964 197.694L491.024 197.864L478.165 187.756L513.447 185.699Z" fill="#E1E1E1"/>
+    <path d="M450.867 241.44C454.744 254.128 458.629 266.812 462.525 279.494C469.157 287.839 476.911 295.226 485.567 301.446C499.357 311.235 521.995 322.187 542.238 321.474C552.74 321.126 562.594 317.632 570.231 309.262C576.534 302.32 579.559 294.054 582.555 282.518C583.298 279.653 584.049 276.6 584.838 273.303C586.999 264.379 593.424 236.546 584.575 211.588C581.353 202.523 577.69 198.211 575.651 196.154C573.275 193.74 570.476 191.782 567.394 190.377C564.57 189.104 561.548 188.323 558.461 188.066C558.301 188.93 558.085 190.18 557.841 191.683C557.08 196.379 556.592 200.362 556.282 203.105C556.188 203.979 556.037 205.35 555.887 207.013C555.53 210.77 555.27 214.393 555.107 217.881C555.029 225.279 553.997 232.635 552.036 239.768C550.243 246.356 547.577 252.675 544.108 258.555C535.992 262.148 527.347 264.4 518.51 265.225C486.168 268.165 461.285 250.148 450.867 241.44Z" fill="#DADBE0"/>
+    <path d="M542.238 321.492C552.74 321.145 562.594 317.65 570.231 309.281C576.534 302.339 579.558 294.073 582.555 282.537C575.547 283.683 567.469 287.741 559.898 294.458C550.861 302.433 544.586 312.475 542.238 321.492Z" fill="#232B41" class="tblr-illustrations-boy-girl-c"/>
+    <path d="M488.178 514.22L501.893 376.83L495.778 336.39H458.213L477.479 514.22H488.178Z" fill="black" opacity="0.22"/>
+    <path d="M494.801 195.468L473.956 180.495L469.194 185.539L483.359 206.694L494.801 195.468ZM495.778 195.318L527.368 175.629L534.582 182.261L513.118 210.075L495.778 195.318Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M494.801 195.468L473.956 180.495L469.194 185.539L483.359 206.694L494.801 195.468Z" fill="black" opacity="0.22"/>
+</svg>

src/pages/_free-illustrations/autodark/boy-with-key.svg

@@ -0,0 +1,35 @@
+---
+---
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
+    <style>
+        :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-with-key-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-with-key-b { fill: #454C5E; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-with-key-c { fill: #232B41; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-with-key-d { fill: #1A2030; }
+        @media (prefers-color-scheme: dark) { .tblr-illustrations-boy-with-key-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-with-key-b { fill: #454C5E; } .tblr-illustrations-boy-with-key-c { fill: #232B41; } .tblr-illustrations-boy-with-key-d { fill: #1A2030; } }
+    </style>
+    <path d="M186.938 250.28C186.938 282.917 221.448 306.586 236.694 332.944C252.426 360.117 256.201 401.692 283.389 417.41C309.747 432.656 347.26 415.608 379.897 415.608C412.534 415.608 450.047 432.656 476.405 417.41C503.578 401.678 507.368 360.132 523.1 332.944C538.346 306.586 572.856 282.888 572.856 250.28C572.856 217.672 538.346 193.974 523.1 167.616C507.368 140.443 503.593 98.8821 476.405 83.1502C450.047 67.9046 412.534 84.9665 379.897 84.9665C347.26 84.9665 309.747 67.9046 283.389 83.1502C256.216 98.8821 252.426 140.443 236.694 167.616C221.448 193.974 186.938 217.672 186.938 250.28Z" fill="#F7F8FC" class="tblr-illustrations-boy-with-key-a"/>
+    <path d="M416.324 311.42L435.288 373.475L436.532 458.67L449.289 461.016C456.468 429.199 463.643 397.378 470.813 365.552C466.484 343.241 462.146 320.935 457.799 298.634L395.586 296.875L368.642 351.222C371.941 376.011 375.249 400.768 378.567 425.49L389.908 423.531C392.34 402.822 394.761 382.109 397.174 361.39C435.311 320.859 452.903 298.615 449.947 294.658C448.002 291.979 436.794 297.566 416.324 311.42Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M454.666 485.958L433.757 475.818C433.757 475.818 434.73 469.354 438.749 468.353C442.767 467.352 452.779 478.936 454.666 485.958ZM380.784 456.497L394.199 436.117C394.199 436.117 390.394 431.068 386.476 432.441C382.557 433.814 379.196 449.374 380.784 456.497Z" fill="#232B41" class="tblr-illustrations-boy-with-key-b"/>
+    <path d="M389.908 423.502L397.174 361.362L422.917 333.173C420.524 325.135 418.14 317.088 415.766 309.032L390.995 305.957C383.53 321.031 376.069 336.109 368.613 351.193L378.538 425.462L389.908 423.502Z" fill="black" opacity="0.15"/>
+    <path d="M381.184 70.8794C380.393 67.7942 378.6 65.059 376.087 63.1023C373.574 61.1456 370.482 60.0782 367.297 60.0673H241.299C237.479 60.0673 233.816 61.5846 231.115 64.2855C228.415 66.9863 226.897 70.6495 226.897 74.4691V157.319C226.9 160.659 228.063 163.894 230.187 166.472L294.745 244.702C296.1 246.346 297.804 247.668 299.733 248.573C301.662 249.478 303.768 249.943 305.899 249.935C308.029 249.926 310.132 249.445 312.054 248.525C313.976 247.606 315.669 246.271 317.012 244.617L354.311 198.765L354.526 197.807L378.124 166.586C379.341 164.502 380.265 162.259 380.87 159.922C381.461 157.634 381.735 155.276 381.685 152.914V70.7793L381.184 70.8794Z" fill="white" class="tblr-illustrations-boy-with-key-c"/>
+    <path d="M305.8 253.798C303.096 253.803 300.425 253.207 297.979 252.055C295.533 250.902 293.373 249.222 291.656 247.134L227.14 168.918C224.43 165.632 222.944 161.507 222.936 157.247V74.4977C222.943 69.6335 224.879 64.9707 228.318 61.5312C231.758 58.0918 236.421 56.1561 241.285 56.1486H367.297C372.155 56.1637 376.809 58.1031 380.24 61.5422C383.671 64.9813 385.6 69.6398 385.604 74.4977H377.723C377.72 71.731 376.621 69.0784 374.667 67.1194C372.714 65.1605 370.064 64.0544 367.297 64.0431H241.299C238.528 64.0469 235.871 65.1496 233.911 67.1094C231.951 69.0692 230.848 71.7261 230.845 74.4977V157.319C230.846 159.745 231.69 162.096 233.233 163.969L297.791 242.185C298.764 243.37 299.986 244.325 301.37 244.983C302.755 245.64 304.267 245.984 305.8 245.99C307.349 245.987 308.878 245.639 310.276 244.971C311.674 244.303 312.905 243.332 313.88 242.128L351.165 196.277L357.286 201.254L320.102 247.034C318.393 249.143 316.236 250.845 313.787 252.015C311.337 253.186 308.658 253.795 305.943 253.798H305.8Z" fill="#232B41" class="tblr-illustrations-boy-with-key-b"/>
+    <path d="M328.468 115.329C328.472 110.829 327.222 106.417 324.858 102.588C322.493 98.7589 319.109 95.6645 315.084 93.6519C311.059 91.6394 306.553 90.7883 302.071 91.1942C297.59 91.6001 293.31 93.2469 289.712 95.9499C286.114 98.6528 283.341 102.305 281.703 106.496C280.065 110.688 279.628 115.253 280.44 119.679C281.253 124.105 283.282 128.217 286.302 131.554C289.321 134.891 293.21 137.32 297.533 138.569L284.018 170.805H324.392L310.934 138.584C315.984 137.134 320.425 134.082 323.588 129.887C326.751 125.692 328.464 120.583 328.468 115.329Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M419.427 98.8106V207.375C419.427 209.271 418.674 211.09 417.333 212.431C415.992 213.772 414.173 214.526 412.276 214.526H403.18C401.435 213.711 400.134 213.096 399.305 212.781C396.258 204.658 395.572 184.678 395.572 160.666C395.572 153.701 395.572 146.364 395.7 138.956C395.801 128.63 395.944 118.004 395.987 107.62V98.7677C395.987 96.8712 396.74 95.0523 398.081 93.7113C399.422 92.3702 401.241 91.6168 403.137 91.6168H412.233C413.18 91.6111 414.118 91.7933 414.993 92.1528C415.868 92.5123 416.664 93.042 417.333 93.7111C418.002 94.3803 418.532 95.1756 418.891 96.0509C419.251 96.9263 419.433 97.8643 419.427 98.8106Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M419.427 107.663V130.675C416.293 132.052 413.037 133.134 409.702 133.907C405.104 134.974 400.39 135.454 395.672 135.337C395.729 130.751 395.782 126.151 395.829 121.536C395.829 116.902 395.929 112.268 395.958 107.692L419.427 107.663Z" fill="black" opacity="0.1"/>
+    <path d="M370.415 130.207L333.881 130.954L333.607 117.499L370.14 116.752L370.415 130.207ZM410.717 129.388L384.138 129.931L383.862 116.476L410.444 115.933L410.717 129.388ZM588.23 98.2957C585.489 87.5699 578.926 78.2136 569.776 71.9829C560.625 65.7522 549.515 63.0755 538.53 64.4554C527.546 65.8352 517.443 71.1766 510.117 79.4771C502.792 87.7775 498.748 98.4662 498.744 109.537V110.466C498.801 112.923 499.05 115.371 499.488 117.789C500.609 123.772 502.92 129.47 506.285 134.543C509.65 139.616 513.999 143.961 519.075 147.321C524.152 150.681 529.851 152.987 535.836 154.102C541.82 155.217 547.967 155.119 553.913 153.813C559.859 152.507 565.482 150.02 570.448 146.499C575.414 142.979 579.622 138.496 582.823 133.318C586.024 128.14 588.152 122.372 589.081 116.356C590.009 110.339 589.72 104.198 588.23 98.2957ZM567.779 132.191C563.736 136.402 558.641 139.454 553.021 141.031C547.401 142.608 541.461 142.653 535.818 141.16C530.175 139.667 525.035 136.691 520.93 132.542C516.825 128.392 513.905 123.219 512.474 117.56C511.873 115.169 511.546 112.717 511.501 110.252C511.405 105.955 512.158 101.682 513.717 97.6765C515.276 93.6715 517.611 90.0139 520.588 86.9136C523.564 83.8134 527.124 81.3317 531.062 79.6108C535.001 77.89 539.24 76.964 543.537 76.886C550.008 76.7447 556.376 78.5265 561.834 82.0059C567.291 85.4852 571.594 90.5056 574.197 96.4316C576.801 102.358 577.587 108.923 576.457 115.296C575.327 121.669 572.332 127.564 567.85 132.234L567.779 132.191Z" fill="#A7AAB3"/>
+    <path d="M544.109 105.833C544.1 105.358 543.997 104.889 543.807 104.453C543.616 104.018 543.342 103.624 542.999 103.295C542.657 102.966 542.252 102.707 541.81 102.534C541.367 102.361 540.895 102.276 540.419 102.286L512.159 102.858L499.202 103.13L460.73 103.916L448.56 104.174L412.433 104.903L394.07 105.275L307.573 107.048C305.685 107.132 303.902 107.94 302.596 109.306C301.289 110.671 300.56 112.488 300.56 114.378C300.56 116.268 301.289 118.085 302.596 119.45C303.902 120.816 305.685 121.624 307.573 121.708H307.874L328.039 121.307L370.158 120.42L383.901 120.134L397.259 119.863L409.873 119.62H410.488L448.231 118.862L461.102 118.604L499.459 117.818L512.431 117.546L540.677 116.974C541.639 116.951 542.554 116.549 543.221 115.855C543.888 115.161 544.253 114.232 544.238 113.27L544.109 105.833Z" fill="#DADBE0"/>
+    <path d="M399.276 212.824C399.367 213.091 399.472 213.354 399.591 213.61C399.065 213.263 398.564 212.88 398.089 212.466C398.132 212.395 398.518 212.509 399.276 212.824Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M265.755 537.015C265.755 539.704 317.627 541.864 381.599 541.864C445.571 541.864 497.443 539.704 497.443 537.015C497.443 534.326 445.571 532.181 381.599 532.181C317.627 532.181 265.755 534.341 265.755 537.015Z" fill="#A6A9B3" class="tblr-illustrations-boy-with-key-d"/>
+    <path d="M466.465 240.741C464.349 252.854 462.389 264.138 463.905 278.64C464.989 288.834 467.577 298.81 471.585 308.245C460.015 312.189 448.009 314.715 435.831 315.768C417.596 317.326 399.228 315.607 381.599 310.691C387.915 299.066 392.355 286.516 394.756 273.506C397.903 256.487 396.373 242.5 395.143 230.258C394.957 228.513 394.771 226.84 394.571 225.209C393.527 216.843 392.139 209.892 390.995 204.786C392.799 201.774 395.24 199.192 398.146 197.221C402.662 194.274 408.009 192.864 413.392 193.202C413.206 194.632 413.048 195.948 412.862 197.321C413.884 196.851 414.929 196.436 415.994 196.077C417.034 195.7 418.094 195.385 419.169 195.133C420.902 194.68 422.666 194.355 424.447 194.16C422.588 201.769 425.877 209.02 431.598 211.479C431.886 211.608 432.182 211.718 432.484 211.808C435.887 212.779 439.532 212.422 442.682 210.807C441.251 214.883 442.267 216.07 442.567 216.356C444.155 217.872 448.774 216.356 454.18 212.28C454.511 211.954 454.812 211.6 455.081 211.222C456.514 209.164 457.292 206.722 457.312 204.214C457.655 204 457.999 203.799 458.342 203.628C463.448 197.55 471.099 197.564 473.959 200.768C476.062 203.17 475.947 207.775 473.602 211.851C470.53 221.297 468.145 230.952 466.465 240.741Z" fill="#DADBE0"/>
+    <path d="M414.736 111.139C414.718 112.718 414.326 114.272 413.593 115.671C412.86 117.07 411.806 118.277 410.517 119.191C410.325 119.345 410.125 119.488 409.916 119.62L397.302 119.863C395.783 118.99 394.501 117.757 393.57 116.273C392.519 114.606 392.004 112.657 392.093 110.688C392.183 108.72 392.873 106.826 394.07 105.261L412.434 104.889C413.913 106.636 414.728 108.849 414.736 111.139Z" fill="black" opacity="0.1"/>
+    <path d="M407.628 116.159C414.058 116.159 419.27 110.671 419.27 103.902C419.27 97.1328 414.058 91.6454 407.628 91.6454C401.199 91.6454 395.987 97.1328 395.987 103.902C395.987 110.671 401.199 116.159 407.628 116.159Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M456.969 112.125C456.98 114.289 456.784 116.449 456.383 118.576L443.511 118.833C443.074 116.624 442.859 114.377 442.868 112.125C442.855 109.442 443.167 106.768 443.797 104.159L455.968 103.902C456.647 106.59 456.983 109.353 456.969 112.125Z" fill="black" opacity="0.1"/>
+    <path d="M460.902 91.6454H456.082C450.94 91.6454 446.772 95.8138 446.772 100.956V205.273C446.772 210.415 450.94 214.583 456.082 214.583H460.902C466.044 214.583 470.212 210.415 470.212 205.273V100.956C470.212 95.8138 466.044 91.6454 460.902 91.6454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M439.092 136.324C438.368 135.873 437.526 135.649 436.673 135.679C435.821 135.709 434.997 135.993 434.306 136.494C433.616 136.995 433.09 137.69 432.797 138.491C432.503 139.292 432.455 140.162 432.659 140.991C432.862 141.819 433.308 142.568 433.939 143.142C434.571 143.716 435.358 144.088 436.202 144.212C437.046 144.336 437.908 144.205 438.678 143.837C439.447 143.469 440.089 142.88 440.522 142.145C441.091 141.18 441.259 140.031 440.992 138.943C440.725 137.856 440.043 136.916 439.092 136.324ZM452.822 104.689C448.483 113.27 444.155 121.808 439.836 130.303L444.412 133.163L459.615 109.98L452.822 104.689ZM455.081 149.095C455.701 148.788 456.368 148.589 457.055 148.509C457.648 148.43 458.249 148.43 458.843 148.509C459.395 148.581 459.941 148.701 460.473 148.867L461.903 149.31C462.34 149.44 462.792 149.517 463.248 149.539C463.67 149.564 464.092 149.486 464.478 149.31C464.765 149.173 465.019 148.974 465.219 148.726C465.42 148.479 465.562 148.19 465.636 147.88C465.786 147.217 465.694 146.522 465.379 145.92C465.052 145.219 464.518 144.635 463.848 144.247C463.136 143.849 462.334 143.637 461.517 143.632L462.118 138.426C463.837 138.462 465.516 138.956 466.98 139.857C468.59 140.898 469.858 142.39 470.627 144.147C471.251 145.385 471.612 146.739 471.686 148.123C471.759 149.332 471.475 150.535 470.87 151.584C470.193 152.682 469.195 153.546 468.01 154.058C467.28 154.417 466.498 154.658 465.693 154.773C465.025 154.881 464.344 154.881 463.677 154.773C463.047 154.645 462.461 154.487 461.889 154.316L460.259 153.786C459.773 153.623 459.268 153.522 458.757 153.486C458.261 153.471 457.77 153.579 457.327 153.801L455.081 149.095ZM447.845 155.474C447.644 155.062 447.539 154.61 447.539 154.151C447.539 153.693 447.644 153.24 447.845 152.828C448.221 151.948 448.915 151.243 449.79 150.855C450.633 150.419 451.612 150.327 452.521 150.597C452.962 150.722 453.369 150.943 453.712 151.245C454.056 151.547 454.329 151.921 454.509 152.342C454.721 152.75 454.84 153.2 454.86 153.659C454.88 154.119 454.799 154.577 454.624 155.002C454.253 155.877 453.562 156.578 452.693 156.961C451.841 157.382 450.865 157.478 449.947 157.233C449.485 157.121 449.055 156.905 448.69 156.6C448.325 156.294 448.036 155.909 447.845 155.474Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M432.527 211.823L393.913 277.954C395.601 269.386 396.52 260.685 396.659 251.953C396.81 243 396.13 234.051 394.628 225.223C393.584 216.857 392.196 209.906 391.052 204.801C392.857 201.788 395.297 199.206 398.203 197.235C402.719 194.288 408.067 192.878 413.449 193.216C413.263 194.646 413.106 195.962 412.92 197.335C413.941 196.865 414.986 196.45 416.052 196.091C417.091 195.715 418.151 195.399 419.227 195.147C420.96 194.694 422.723 194.369 424.504 194.174C427.183 200.057 429.858 205.94 432.527 211.823Z" fill="black" opacity="0.1"/>
+    <path d="M471.857 202.884C471.028 206.474 466.423 207.275 460.802 208.533C456.746 209.287 452.83 210.656 449.189 212.595C447.25 213.706 445.494 215.11 443.983 216.757C440.25 220.847 440.05 224.38 435.216 226.611C431.812 228.083 428.005 228.341 424.433 227.34C415.036 224.666 409.087 213.038 410.002 202.87C410.115 201.554 410.35 200.252 410.703 198.98L419.542 193.559C419.928 201.454 424.204 208.262 430.568 211.05C434.819 212.85 439.568 213.098 443.983 211.751C446.447 211.017 448.612 209.513 450.161 207.461C451.605 205.402 452.388 202.953 452.407 200.439L464.964 199.852L471.514 199.552C471.977 200.599 472.097 201.765 471.857 202.884Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M430.554 211.065C429.758 210.72 428.992 210.309 428.266 209.835H410.388C411.947 217.801 417.139 225.281 424.418 227.354C427.99 228.355 431.797 228.097 435.202 226.625C439.178 224.794 440.022 222.063 442.353 218.874V212.223C438.394 213.046 434.277 212.642 430.554 211.065Z" fill="black" opacity="0.1"/>
+    <path d="M433.714 158.52C435.145 161.381 437.347 165.442 439.821 170.591C440.35 171.735 440.822 172.722 440.994 173.065C443.526 178.804 445.323 184.839 446.343 191.028C446.529 192.258 446.672 193.445 446.758 194.632C447.058 199.037 436.746 210.621 424.99 215.884C413.234 221.147 402.951 212.752 404.968 205.344C405.55 202.519 405.613 199.611 405.154 196.763C404.679 192.9 403.924 189.076 402.894 185.322C402.365 183.162 401.922 181.789 401.922 181.789L406.212 169.175L427.064 156.918C428.88 160.58 431.226 162.468 432.456 162.038C433.686 161.609 433.714 159.078 433.714 158.52Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M433.715 158.52C435.145 161.381 437.347 165.442 439.821 170.591C440.351 171.735 440.822 172.722 440.994 173.065C443.526 178.804 445.324 184.839 446.343 191.028C444.743 191.396 443.088 191.454 441.466 191.2C439.688 190.893 437.988 190.242 436.46 189.283C434.865 188.23 433.446 186.932 432.256 185.436C431.429 184.532 430.66 183.577 429.953 182.576C423.521 189.934 414.811 194.928 405.211 196.763C404.736 192.9 403.981 189.076 402.952 185.322C402.422 183.162 401.979 181.789 401.979 181.789L406.27 169.175L427.121 156.918C428.938 160.58 431.283 162.468 432.513 162.038C433.743 161.609 433.715 159.078 433.715 158.52Z" fill="black" opacity="0.1"/>
+    <path d="M388.121 186.852C389.605 187.888 391.191 188.769 392.854 189.483C394.974 190.437 397.218 191.087 399.519 191.414C409.888 192.844 421.057 186.723 427.722 175.682C428.831 173.803 429.788 171.837 430.582 169.804C430.582 169.804 430.582 169.804 430.668 169.804C431.398 170.903 432.044 172.055 432.599 173.251C432.828 173.809 432.928 173.966 433.071 174.309L433.214 174.696C434.05 177.413 435.127 180.05 436.432 182.576C437.44 184.066 438.891 185.202 440.579 185.822C439.705 183.282 439.479 180.563 439.921 177.913C440.142 176.943 440.423 175.988 440.765 175.053C442.021 170.097 441.42 164.852 439.078 160.308C438.094 158.457 436.83 156.768 435.331 155.302C434.358 154.33 430.826 150.812 426.864 150.068C418.712 148.523 407.228 158.649 402.122 164.498C401.045 166.021 399.557 167.207 397.831 167.917C397.464 168.017 397.08 168.046 396.702 168.002C394.256 167.773 392.411 164.942 391.839 162.825C390.666 158.72 393.055 153.801 397.789 150.211C385.303 154.087 378.281 165.485 380.183 175.325C381.202 180.065 384.056 184.209 388.121 186.852Z" fill="#232B41" class="tblr-illustrations-boy-with-key-b"/>
+    <path d="M388.121 186.852C389.605 187.888 391.191 188.77 392.854 189.484C394.974 190.437 397.218 191.087 399.519 191.414C409.888 192.844 421.057 186.723 427.722 175.682C429.152 172.722 430.425 170.19 430.582 169.804L432.156 164.956C428.369 170.672 423.576 175.653 418.011 179.658C413.077 183.191 406.241 188.125 396.716 188.239C393.798 188.199 390.903 187.732 388.121 186.852Z" fill="black" opacity="0.5"/>
+    <path d="M474.875 207.375C476.027 202.631 476.821 197.807 477.249 192.944C474.102 193.07 470.955 192.699 467.924 191.843C462.99 190.413 460.959 188.439 456.411 186.537C452.341 184.874 448.006 183.949 443.611 183.806C443.311 187.839 442.739 193.645 441.609 200.61C440.479 207.575 439.907 211.022 438.32 214.697C435.765 220.409 431.774 225.361 426.735 229.071L469.483 223.45C471.737 218.256 473.541 212.878 474.875 207.375Z" fill="#DADBE0"/>
+</svg>

src/pages/_free-illustrations/autodark/computer-fix.svg

@@ -0,0 +1,39 @@
+---
+---
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
+    <style>
+        :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-computer-fix-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-computer-fix-b { fill: #1A2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-computer-fix-c { fill: #232B41; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-computer-fix-d { fill: #454C5E; }
+        @media (prefers-color-scheme: dark) { .tblr-illustrations-computer-fix-a { fill: black; opacity: 0.07; } .tblr-illustrations-computer-fix-b { fill: #1A2030; } .tblr-illustrations-computer-fix-c { fill: #232B41; } .tblr-illustrations-computer-fix-d { fill: #454C5E; } }
+    </style>
+    <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.562 539.075 370.673 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.381 93.1471 412.534 93.1471C370.687 93.1471 322.562 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="#F7F8FC" class="tblr-illustrations-computer-fix-a"/>
+    <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="#A6A9B3" class="tblr-illustrations-computer-fix-b"/>
+    <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADBE0"/>
+    <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.928 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.286 225.409 549.372 225.181 549.472 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.648 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.209 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M600.816 220.246C592.321 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.95 224.094 579.678 224.036L572.069 212.595C578.204 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="white" class="tblr-illustrations-computer-fix-c"/>
+    <path d="M585.585 197.736C585.395 190.871 582.538 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.687C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.263C178.006 432.201 184.702 434.979 191.687 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.781 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.781 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.999 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.112 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.112 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.999 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.571V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.571C575.57 412.898 573.849 417.047 570.79 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.383 408.571V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.571Z" fill="#232B41" class="tblr-illustrations-computer-fix-d"/>
+    <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADBE0"/>
+    <path d="M211.809 279.856H368.97C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.97 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3"/>
+    <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1"/>
+    <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1"/>
+    <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.816 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADBE0"/>
+    <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.3"/>
+    <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1"/>
+    <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#232B41" class="tblr-illustrations-computer-fix-d"/>
+    <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.709 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.219 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.5"/>
+    <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.3"/>
+    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1"/>
+    <path d="M585.599 343.37V364.122L575.587 372.703V346.831L585.384 342.212L585.599 343.37Z" fill="black" opacity="0.15"/>
+    <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3"/>
+    <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1"/>
+    <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1"/>
+    <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.391 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.876 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.861 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1"/>
+</svg>

src/pages/_free-illustrations/autodark/not-found.svg

@@ -0,0 +1,62 @@
+---
+---
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
+    <style>
+        :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-not-found-a { fill: #1A2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-not-found-b { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-not-found-c { fill: #454C5E; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-not-found-d { fill: #232B41; }
+        @media (prefers-color-scheme: dark) { .tblr-illustrations-not-found-a { fill: #1A2030; } .tblr-illustrations-not-found-b { fill: black; opacity: 0.07; } .tblr-illustrations-not-found-c { fill: #454C5E; } .tblr-illustrations-not-found-d { fill: #232B41; } }
+    </style>
+    <path d="M649.951 544.225C649.951 547.416 541.744 550 408.158 550C274.571 550 166.365 547.416 166.365 544.225C166.365 541.034 274.571 538.45 408.158 538.45C541.744 538.45 649.951 541.034 649.951 544.225Z" fill="#A6A9B3" class="tblr-illustrations-not-found-a"/>
+    <path d="M146 285.714C146 327.964 190.681 358.511 210.286 392.553C230.65 427.66 235.514 481.459 270.62 501.672C304.663 521.429 353.143 499.392 395.392 499.392C437.641 499.392 486.122 521.429 520.164 501.672C555.271 481.307 560.134 427.66 580.499 392.553C600.255 358.511 644.784 327.812 644.784 285.714C644.784 243.617 600.103 212.918 580.499 178.875C560.286 143.769 555.271 89.9697 520.164 69.7569C486.122 50.0001 437.641 72.0366 395.392 72.0366C353.143 72.0366 304.663 50.0001 270.62 69.7569C235.514 90.1217 230.65 143.769 210.286 178.875C190.529 212.918 146 243.617 146 285.714Z" fill="#F7F8FC" class="tblr-illustrations-not-found-b"/>
+    <path d="M528.979 234.499L523.508 262.614H459.982L465.301 235.562L459.982 234.499L399.496 541.945L404.815 543.009L410.438 514.286H473.964L468.493 541.945L473.812 543.009L534.298 235.41L528.979 234.499ZM522.444 267.933L511.35 324.164H447.824L458.918 267.933H522.444ZM435.666 385.714L446.76 329.483H510.286L499.192 385.714H435.666ZM498.28 391.185L487.186 447.416H423.66L434.754 391.185H498.28ZM411.502 508.967L422.596 452.736H486.122L475.027 508.967H411.502Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M578.523 458.663L569.404 411.854L534.45 234.346L528.979 235.41L534.298 262.31H470.924L465.453 234.346L459.982 235.41L520.468 543.009L525.939 541.945L520.468 514.438H583.842L589.465 543.009L594.936 541.945L578.523 458.663ZM471.988 268.085H535.362L546.304 324.164H482.93L471.988 268.085ZM484.146 329.635H547.52L558.462 385.714H495.088L484.146 329.635ZM496.304 391.337H559.678L565.453 420.517L570.772 447.264H507.246L496.304 391.337ZM519.404 508.966L508.462 452.887H571.836L572.14 454.407L572.748 457.599L582.778 508.966H519.404Z" fill="#A7AAB3"/>
+    <path d="M578.523 458.663L572.596 457.599L571.988 454.407L571.684 452.888H546.608C547.976 450.456 550.103 448.48 552.687 447.264H570.468L565.149 420.517L569.1 412.006L578.523 458.663Z" fill="black" opacity="0.22"/>
+    <path d="M266.669 53.7994H550.103C559.222 53.7994 566.517 61.0943 566.517 70.2128V232.371C566.517 241.489 559.222 248.784 550.103 248.784H266.669C257.55 248.784 250.255 241.489 250.255 232.371V70.3648C250.255 61.2462 257.55 53.7994 266.669 53.7994Z" fill="white" class="tblr-illustrations-not-found-d"/>
+    <path d="M550.103 50H266.668C255.422 50 246.304 59.1185 246.304 70.3647V232.523C246.304 243.769 255.422 252.888 266.668 252.888H550.103C561.349 252.888 570.468 243.769 570.468 232.523V70.3647C570.468 59.1185 561.349 50 550.103 50ZM562.717 232.371C562.717 237.234 559.83 241.793 555.422 243.769C553.751 244.529 551.927 244.985 550.103 244.985H266.668C259.678 244.985 254.054 239.362 254.054 232.371V70.3647C254.054 63.3739 259.678 57.7508 266.668 57.7508H550.103C557.094 57.7508 562.717 63.3739 562.717 70.3647V232.371Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M525.939 252.888H474.268C471.228 250.608 468.493 248.024 465.909 245.137C465.605 244.833 465.301 244.377 464.997 244.073C459.678 238.146 456.182 230.851 454.815 223.1C454.663 222.492 454.663 221.733 454.511 221.277C455.423 217.781 458.614 215.198 462.11 215.046C464.389 215.198 466.517 216.261 467.885 218.085C470.164 222.644 473.052 226.748 476.547 230.243C481.41 235.106 486.426 237.994 493.265 241.034C503.751 245.897 514.693 249.848 525.939 252.888Z" fill="black" opacity="0.19"/>
+    <path d="M313.021 117.477L292.504 92.7052H281.714V139.21H294.632V114.438L315.149 139.21H325.939V92.7052H313.021V117.477ZM377.155 98.6322C374.723 96.5046 371.988 94.6809 368.948 93.617C362.261 91.1854 355.118 91.1854 348.431 93.617C342.352 95.7447 337.337 100.456 334.754 106.383C333.386 109.423 332.778 112.614 332.778 115.957C332.778 119.301 333.386 122.492 334.754 125.532C335.969 128.419 337.793 131.003 340.225 133.283C342.656 135.562 345.392 137.234 348.431 138.298C355.118 140.73 362.261 140.73 368.948 138.298C371.988 137.234 374.723 135.41 377.155 133.283C379.434 131.155 381.258 128.571 382.626 125.684C383.994 122.644 384.602 119.301 384.602 115.957C384.602 112.614 383.994 109.423 382.626 106.383C381.258 103.343 379.434 100.76 377.155 98.6322ZM370.316 121.429C369.708 122.948 368.796 124.468 367.58 125.684C366.517 126.9 365.149 127.812 363.629 128.419C360.437 129.635 356.942 129.635 353.751 128.419C352.231 127.812 350.863 126.9 349.799 125.684C348.583 124.468 347.672 123.1 347.064 121.429C345.848 117.933 345.848 113.982 347.064 110.486C347.672 108.967 348.583 107.447 349.799 106.231C350.863 105.015 352.383 104.103 353.751 103.495C356.942 102.28 360.437 102.28 363.629 103.495C365.149 104.103 366.517 105.015 367.58 106.231C368.796 107.447 369.556 108.815 370.316 110.486C371.532 113.982 371.532 117.933 370.316 121.429ZM386.425 92.7052V103.192H400.711V139.21H413.781V103.192H428.067V92.7052H386.425Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M281.714 201.976H294.936V186.018H315.301V175.836H294.936V165.806H318.188V155.471H281.714V201.976ZM365.909 161.398C363.477 159.119 360.741 157.447 357.702 156.383C351.015 153.951 343.72 153.951 337.033 156.383C330.954 158.663 326.091 163.222 323.507 169.149C322.14 172.188 321.532 175.38 321.532 178.723C321.532 182.067 322.14 185.41 323.507 188.45C326.091 194.377 331.106 199.088 337.185 201.216C343.872 203.647 351.167 203.647 357.702 201.216C360.741 200.152 363.477 198.328 365.909 196.201C368.188 194.073 370.012 191.489 371.38 188.45C372.748 185.41 373.355 182.067 373.355 178.723C373.355 172.188 370.62 165.957 365.909 161.398ZM358.918 184.195C358.31 185.714 357.398 187.234 356.182 188.45C355.118 189.666 353.751 190.578 352.231 191.185C349.039 192.401 345.544 192.401 342.352 191.185C340.833 190.578 339.465 189.666 338.401 188.45C337.185 187.234 336.273 185.866 335.817 184.195C334.602 180.699 334.602 176.748 335.817 173.252C336.425 171.733 337.337 170.213 338.401 168.997C339.617 167.781 340.985 166.869 342.352 166.261C345.544 165.046 349.039 165.046 352.231 166.261C353.751 166.869 355.118 167.781 356.182 168.997C357.398 170.213 358.31 171.581 358.918 173.252C360.286 176.748 360.286 180.699 358.918 184.195ZM410.437 181.003C410.437 184.954 409.678 187.842 408.158 189.514C406.486 191.337 404.206 192.249 401.775 192.097C399.343 192.249 397.064 191.337 395.392 189.514C393.872 187.842 393.112 184.954 393.112 181.003V155.623H380.042V181.459C380.042 188.298 382.018 193.617 385.817 197.416C389.617 201.216 394.936 203.04 401.927 203.04C408.766 203.04 414.085 201.216 417.884 197.416C421.684 193.617 423.659 188.298 423.659 181.459V155.623H410.589L410.437 181.003ZM463.629 180.243L443.264 155.471H432.322V201.976H445.24V177.204L456.334 190.578L465.757 201.976H476.547V155.471H463.629V180.243ZM530.498 166.413C528.219 162.918 525.179 160.182 521.38 158.359C517.124 156.383 512.565 155.471 507.854 155.471H485.817V201.976H507.854C512.565 202.128 517.124 201.064 521.38 199.088C525.179 197.264 528.219 194.529 530.498 191.033C532.778 187.386 533.994 182.979 533.842 178.723C533.994 174.316 532.778 170.061 530.498 166.413ZM518.796 185.562C517.732 187.386 516.213 189.058 514.237 189.97C512.109 191.033 509.678 191.489 507.246 191.489H499.039V165.957H507.246C509.678 165.957 512.109 166.413 514.237 167.477C516.213 168.389 517.732 169.909 518.796 171.885C521.076 176.14 521.076 181.307 518.796 185.562Z" fill="#A7AAB3"/>
+    <path d="M476.547 190.577V202.127H465.757L456.334 190.729C458.766 188.298 461.958 186.93 465.301 186.626H467.733C471.076 186.778 474.116 188.146 476.547 190.577Z" fill="black" opacity="0.1"/>
+    <path d="M177.307 319.757C174.116 322.645 166.669 320.365 165.909 317.021C165.757 316.413 165.605 315.198 167.277 313.07C166.365 313.222 161.198 314.286 157.702 311.398C157.398 311.246 157.246 310.942 157.094 310.79C156.486 310.182 155.727 309.423 155.879 308.663C156.486 305.471 170.468 301.672 176.243 308.207C176.851 308.967 177.307 309.727 177.763 310.638C179.283 313.526 179.587 317.629 177.307 319.757Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M177.307 319.757C174.116 322.644 166.669 320.365 165.909 317.021C165.757 316.413 165.605 315.197 167.277 313.07C166.365 313.222 161.198 314.286 157.702 311.398C161.502 310.182 165.453 309.726 169.556 309.726C172.292 309.726 175.027 310.03 177.763 310.486C179.283 313.526 179.587 317.629 177.307 319.757Z" fill="black" opacity="0.1"/>
+    <path d="M292.353 319.757C295.544 322.645 302.991 320.365 303.751 317.021C303.903 316.413 304.055 315.198 302.383 313.07C303.295 313.222 308.462 314.286 311.957 311.398C312.261 311.246 312.413 310.942 312.565 310.79C313.173 310.182 313.933 309.423 313.781 308.663C313.173 305.471 299.191 301.672 293.416 308.207C292.808 308.967 292.353 309.727 291.897 310.638C290.377 313.526 290.073 317.629 292.353 319.757Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M292.353 319.757C295.544 322.644 302.991 320.365 303.751 317.021C303.903 316.413 304.055 315.197 302.383 313.07C303.295 313.222 308.462 314.286 311.957 311.398C308.158 310.182 304.207 309.726 300.103 309.726C297.368 309.726 294.632 310.03 291.897 310.486C290.377 313.526 290.073 317.629 292.353 319.757Z" fill="black" opacity="0.1"/>
+    <path d="M270.772 329.027L268.948 349.544C268.036 359.271 267.277 368.997 266.365 378.724L265.453 389.21L264.845 396.961L262.869 420.061H210.438L208.158 396.809C207.854 394.377 207.702 391.793 207.398 389.21C207.094 385.258 206.638 381.459 206.182 377.508L205.574 371.733C204.207 357.447 202.687 343.161 201.319 328.875L270.772 329.027Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M210.286 420.061L214.845 529.331H223.659L235.97 444.985L244.48 529.331H251.015L262.869 420.061H210.286Z" fill="#DADBE0"/>
+    <path d="M244.48 529.331L235.969 444.985L239.769 420.061H262.869L251.015 529.331H244.48Z" fill="black" opacity="0.15"/>
+    <path d="M217.58 328.268C217.58 328.268 224.723 328.571 227.611 324.316L245.392 323.1C245.392 323.1 250.711 332.067 255.878 332.371C261.045 332.675 241.593 335.106 241.593 335.106L217.428 332.371L217.58 328.268Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M209.83 289.666C211.046 292.097 212.869 295.745 215.149 300L216.365 302.128C219.1 306.839 222.444 311.094 226.243 315.046C227.003 315.805 227.763 316.565 228.523 317.173C231.41 319.605 244.784 318.237 254.511 312.766C264.237 307.295 263.477 295.745 257.246 293.465C254.967 292.401 252.991 291.033 251.167 289.21C248.736 286.93 246.456 284.498 244.328 281.763C243.113 280.243 242.353 279.331 242.353 279.331L231.41 275.988L212.261 284.346C213.933 287.538 213.933 290.122 213.021 290.729C212.109 291.337 210.134 289.818 209.83 289.666Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M209.83 289.666C211.046 292.097 212.869 295.745 215.149 300L216.365 302.128C219.1 306.839 222.444 311.094 226.243 315.046C227.307 314.134 228.219 312.918 228.827 311.702C229.587 310.334 229.891 308.815 230.043 307.295C230.043 305.623 229.891 303.951 229.435 302.432C229.131 301.368 228.979 300.456 228.523 299.392C236.882 298.632 244.784 295.137 251.015 289.362C248.584 287.082 246.304 284.65 244.176 282.067C242.961 280.547 242.201 279.635 242.201 279.635L231.258 276.292L212.109 284.65C213.781 287.842 213.781 290.425 212.869 291.033C211.957 291.641 210.134 289.818 209.83 289.666Z" fill="black" opacity="0.1"/>
+    <path d="M251.319 273.252C252.991 271.58 254.055 269.301 254.055 266.565C254.055 261.398 249.951 257.295 244.784 257.295C240.681 257.295 237.185 260.03 235.97 263.678C234.754 259.878 231.258 257.295 227.155 257.295C222.444 257.295 218.492 260.942 218.036 265.501C216.669 264.59 214.997 264.134 213.173 264.134C208.006 264.134 203.903 268.237 203.903 273.404C203.903 275.38 204.511 277.203 205.574 278.723C202.839 279.787 200.711 282.371 200.711 285.562C200.711 289.666 204.055 292.857 208.006 292.857H208.158C208.31 293.465 208.462 293.921 208.766 294.529C210.59 298.48 213.781 301.52 217.884 303.191C218.644 303.343 219.404 303.647 220.164 303.951C222.14 305.015 223.963 306.535 225.179 308.51C225.635 306.991 225.635 305.471 225.179 304.103C224.115 301.976 222.9 299.848 221.532 297.872L221.38 297.568C221.228 297.264 221.076 297.112 220.924 296.656C220.468 295.745 220.012 294.681 219.556 293.617V293.465C225.635 294.225 242.656 295.441 248.887 284.346C249.799 282.675 250.559 280.699 251.015 278.875C251.015 278.723 251.167 278.571 251.167 278.419C251.319 277.963 251.319 277.355 251.319 276.9V276.748C251.775 275.836 251.775 274.468 251.319 273.252Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M218.645 383.739C217.885 389.818 213.781 394.833 208.006 396.809C207.702 394.377 207.55 391.793 207.246 389.21C206.942 385.258 206.486 381.459 206.031 377.508L218.493 340.426C218.644 340.578 220.772 368.845 218.645 383.739ZM266.365 378.723L265.453 389.21L264.845 396.961C258.766 395.137 254.359 389.97 253.599 383.587C251.471 368.693 253.599 340.426 253.599 340.426L266.365 378.723Z" fill="black" opacity="0.1"/>
+    <path d="M223.204 328.875C217.733 352.735 211.198 381.307 211.198 381.307C210.742 382.371 210.134 383.587 209.374 384.498C208.006 386.17 206.486 387.69 204.815 389.058C203.599 390.273 202.079 391.033 200.407 391.641C196 392.705 190.073 386.626 184.754 378.571C182.018 374.316 179.587 369.909 177.611 365.349C173.508 356.079 173.964 352.887 167.733 333.283C165.301 325.684 163.173 319.605 161.654 315.349L189.313 314.286C189.617 316.413 190.073 319.301 190.529 322.644C192.201 334.802 193.416 346.201 194.024 353.495V348.936C194.176 345.593 194.48 342.401 195.088 339.21C196.152 333.891 199.04 319.757 206.79 318.085C212.413 317.173 218.796 321.884 223.204 328.875ZM311.046 315.501C309.526 319.605 307.398 325.836 304.967 333.435C298.736 353.039 299.192 356.231 295.088 365.501C292.809 370.669 290.073 375.532 287.033 380.091C282.018 387.538 276.395 392.857 272.292 391.793C270.468 391.185 268.796 390.122 267.277 388.754C265.909 387.538 264.541 386.17 263.325 384.65C262.717 383.587 262.109 382.523 261.654 381.459L249.647 329.027C250.711 326.748 254.815 318.389 260.894 317.933C268.948 317.477 275.635 331.003 277.459 339.362C278.067 342.553 278.371 345.897 278.523 349.088V353.647C279.131 346.353 280.347 334.954 282.018 322.796C282.474 319.301 282.93 316.413 283.234 314.438L311.046 315.501Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M570.468 175.836V242.249C569.404 243.161 568.036 243.921 566.669 244.377L566.365 244.529C562.717 245.745 558.918 245.897 555.271 244.681L555.422 243.769C559.83 241.641 562.717 237.234 562.717 232.371V171.428C563.021 171.428 563.325 171.58 563.629 171.58C566.365 172.34 568.644 173.86 570.468 175.836Z" fill="black" opacity="0.15"/>
+    <path d="M627.915 358.207L627.003 353.191L624.115 338.298L620.468 339.058L604.055 342.249L601.015 342.857L603.903 357.751L604.815 362.766L605.118 364.742L628.219 360.182L627.915 358.207ZM619.556 342.249L621.684 341.793L623.963 353.799L624.723 357.751L607.398 361.094L606.638 357.143L604.359 345.137H604.511L619.556 342.249Z" fill="#DADBE0"/>
+    <path d="M627.915 358.207L627.003 353.191L624.115 338.298L620.468 339.058L604.055 342.249L601.015 342.857L603.903 357.751L604.815 362.766L605.118 364.742L628.219 360.182L627.915 358.207ZM619.556 342.249L621.684 341.793L623.963 353.799L624.723 357.751L607.398 361.094L606.638 357.143L604.359 345.137H604.511L619.556 342.249Z" fill="black" opacity="0.35"/>
+    <path d="M654.207 385.258L648.128 354.255L647.216 349.24L637.337 351.064L638.249 355.927L640.985 369.909C641.289 371.277 640.377 372.493 639.161 372.796L635.21 373.556C633.842 373.86 632.626 372.948 632.322 371.733L629.587 357.751L628.675 352.888L625.027 353.496L604.815 357.447L601.471 358.055L602.383 362.918L605.118 376.9C605.422 378.268 604.511 379.483 603.295 379.787L599.343 380.547C597.976 380.851 596.76 379.939 596.456 378.724L593.72 364.742L592.808 359.879L580.954 362.158L587.945 398.176L593.568 397.113L654.207 385.258Z" fill="#DADBE0"/>
+    <path d="M654.207 385.258L648.128 354.255L647.216 349.24L637.337 351.064L638.249 355.927L640.985 369.909C641.289 371.277 640.377 372.493 639.161 372.796L635.21 373.556C633.842 373.86 632.626 372.948 632.322 371.733L629.587 357.751L628.675 352.888L625.027 353.496L604.815 357.447L601.471 358.055L602.383 362.918L605.118 376.9C605.422 378.268 604.511 379.483 603.295 379.787L599.343 380.547C597.976 380.851 596.76 379.939 596.456 378.724L593.72 364.742L592.808 359.879L580.954 362.158L587.945 398.176L593.568 397.113L654.207 385.258Z" fill="black" opacity="0.1"/>
+    <path d="M654.207 385.258L593.568 397.113L587.489 366.109L593.72 364.894L596.456 378.875C596.76 380.243 597.976 381.003 599.343 380.851L603.295 380.091C604.663 379.787 605.422 378.571 605.118 377.204L602.383 363.374L606.03 362.614L626.243 358.663L629.739 358.055L632.474 372.037C632.778 373.404 633.994 374.164 635.362 373.86L639.313 373.1C640.681 372.796 641.441 371.581 641.289 370.365L638.553 356.383L648.28 354.559L652.231 374.468L654.207 385.258Z" fill="#DADBE0"/>
+    <path d="M605.118 377.051L602.383 363.222L601.471 358.358C601.167 357.143 599.951 356.231 598.735 356.535L594.784 357.295C593.568 357.599 592.656 358.814 592.96 360.03L593.872 364.893L596.608 378.875C596.912 380.243 598.127 381.003 599.495 380.851L603.447 380.091C604.51 379.635 605.27 378.419 605.118 377.051ZM640.985 370.061L638.249 356.079L637.337 351.216C637.033 350 635.817 349.088 634.602 349.392L630.65 350.152C629.434 350.456 628.523 351.672 628.827 353.039L629.738 357.903L632.474 371.884C632.778 373.252 633.994 374.012 635.361 373.708L639.313 372.948C640.529 372.644 641.289 371.428 640.985 370.061Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M574.267 186.778C574.875 189.514 575.635 193.465 576.395 198.48C576.547 199.544 576.699 200.608 576.699 200.912C577.459 206.383 577.459 212.006 576.699 217.477C576.547 218.541 576.395 219.605 576.091 220.669C575.483 223.556 568.796 228.115 560.893 231.003C558.158 231.915 555.27 232.675 552.383 233.131C543.416 234.346 537.337 228.267 537.185 222.948C537.185 221.58 537.489 220.365 538.249 219.301C539.465 217.021 540.225 214.59 540.529 212.006C541.137 208.663 541.441 205.167 541.441 201.824C541.593 199.848 541.441 198.632 541.441 198.632L548.28 189.058L568.948 184.042C569.556 187.538 571.076 189.818 572.14 189.666C573.204 189.514 574.115 187.234 574.267 186.778Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M574.267 186.778C574.875 189.513 575.635 193.465 576.395 198.48C576.547 199.544 576.699 200.608 576.699 200.912C577.459 206.383 577.459 212.006 576.699 217.477C575.331 217.325 573.811 217.021 572.596 216.413C571.228 215.653 569.86 214.741 568.796 213.526C567.732 212.31 566.821 210.79 566.213 209.27C565.757 208.358 565.301 207.295 564.997 206.231C561.349 208.51 557.398 210.182 553.143 211.094C549.039 212.006 544.784 212.31 540.529 211.854C541.137 208.51 541.441 205.015 541.441 201.672C541.593 199.696 541.441 198.48 541.441 198.48L548.28 188.906L568.948 183.89C569.556 187.386 571.076 189.665 572.14 189.513C573.204 189.362 574.115 187.234 574.267 186.778Z" fill="black" opacity="0.1"/>
+    <path d="M577.915 190.577C578.827 194.833 578.219 199.392 575.939 203.191C575.483 203.799 575.027 204.559 574.571 205.319C573.66 207.447 573.204 209.726 573.204 212.006C571.988 211.094 571.076 209.878 570.468 208.359C570.012 205.927 569.708 203.495 569.708 201.064V200.76C569.708 200.608 569.708 200.304 569.556 199.848C569.404 198.784 569.1 197.568 568.796 196.504V196.353C564.389 200.76 551.319 212.158 539.465 206.991C537.641 206.231 535.818 205.167 534.298 203.799C534.146 203.647 533.994 203.647 533.842 203.495C533.538 203.191 533.082 202.887 532.778 202.432L532.626 202.28C531.714 201.368 531.106 200.152 530.498 199.088L530.346 198.632C529.435 196.049 529.891 193.009 531.562 190.729C533.69 187.69 536.425 184.954 539.769 182.979C547.672 177.356 560.894 173.252 570.316 179.331C572.748 181.003 574.723 183.131 576.091 185.562C577.003 187.234 577.611 188.906 577.915 190.577Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M603.903 337.386C603.599 338.45 603.447 339.514 603.599 340.577C603.599 344.529 605.726 347.568 608.918 348.176C613.021 348.936 617.276 345.289 618.644 339.969C618.796 339.362 618.948 338.754 618.948 338.298C619.404 333.738 617.277 329.939 613.781 329.331C609.526 328.571 605.27 332.219 603.903 337.386Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M603.903 337.386C603.599 338.45 603.447 339.514 603.599 340.577L604.815 340.729C610.134 340.881 612.413 339.058 618.188 338.298H618.948C619.404 333.738 617.277 329.939 613.781 329.331C609.526 328.571 605.27 332.219 603.903 337.386Z" fill="black" opacity="0.1"/>
+    <path d="M466.973 191.641C466.517 190.577 465.909 189.666 465.301 188.906C462.869 185.866 459.374 184.65 456.486 186.17C452.839 188.146 451.775 193.617 453.903 198.632C454.207 199.088 454.511 199.696 454.815 200.152C457.246 203.951 461.349 205.775 464.541 203.951C468.036 202.128 469.1 196.504 466.973 191.641Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M466.973 191.641C466.517 190.577 465.909 189.666 465.301 188.906C464.997 189.21 464.693 189.362 464.389 189.666C460.134 192.857 459.526 195.745 455.422 199.848C455.27 200 455.118 200.152 454.814 200.304C457.246 204.103 461.349 205.927 464.541 204.103C468.036 202.128 469.1 196.505 466.973 191.641Z" fill="black" opacity="0.1"/>
+    <path d="M584.45 326.292L582.93 335.107L565.605 433.587C563.629 434.347 561.806 435.107 559.83 435.866C557.55 426.748 555.575 417.325 553.751 407.143C550.255 386.778 548.128 366.262 547.52 345.745C542.809 344.529 537.945 343.313 533.082 342.097L519.86 338.906C519.708 344.377 519.556 350.304 519.86 356.535C520.012 362.31 520.468 367.781 521.076 372.948L513.021 373.86C506.334 353.04 499.496 332.219 492.809 311.246L509.678 312.614C516.821 313.222 523.812 313.83 530.803 314.59L584.45 326.292Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M629.587 320.516C629.283 327.507 628.067 333.586 626.851 338.754L618.948 336.93L605.423 333.738L604.359 333.434L603.143 333.13L601.015 332.675L598.584 332.067C597.216 331.763 595.696 331.307 594.024 331.003C598.484 323.628 601.332 315.393 602.383 306.839C602.383 306.839 604.207 292.401 599.647 280.091L599.344 279.179C597.672 275.228 595.24 271.428 592.353 268.237L591.593 267.477C591.289 272.796 590.833 277.507 590.529 281.763C589.617 292.097 588.249 300.912 587.489 306.687C585.97 317.933 584.298 327.659 582.93 334.954L530.65 314.437C530.499 312.918 529.283 299.696 529.283 298.176C529.131 295.592 528.523 288.602 527.763 281.155C527.003 273.708 526.395 265.805 526.091 261.094C524.571 260.942 523.204 260.942 521.532 260.638C516.061 260.03 510.742 259.118 505.423 257.903L501.775 256.991C497.672 255.775 493.568 254.255 489.617 252.431C483.842 249.848 478.371 246.504 473.508 242.705C470.012 239.969 466.821 236.93 463.933 233.586C460.731 230.078 457.688 226.427 454.815 222.644C452.231 219.149 449.951 215.653 447.824 212.006C451.927 208.51 455.271 205.623 457.398 203.799C462.109 199.544 464.237 197.568 468.188 195.289C470.316 194.073 472.444 193.009 474.723 192.249C475.939 196.96 477.611 201.672 479.739 206.079C484.298 215.653 492.505 227.659 506.79 234.346C508.006 234.954 509.222 235.41 510.438 235.866C513.021 236.778 515.605 237.538 518.34 238.146C520.924 238.602 523.508 239.058 526.091 239.21C533.69 239.665 540.529 239.817 546.456 239.817C567.885 239.817 578.979 237.538 578.979 237.538C578.979 237.538 588.097 235.562 592.657 239.21L593.112 239.513C597.672 243.161 601.927 247.112 606.03 251.368C607.094 252.583 608.158 253.799 609.222 255.167C612.869 259.726 616.061 264.589 618.796 269.757C621.38 274.772 623.508 279.939 625.179 285.106C625.483 286.018 625.787 286.93 626.091 287.994C627.915 294.225 628.675 299.088 628.827 300.456C629.131 302.583 629.435 305.319 629.587 308.662C629.739 312.158 629.739 316.261 629.587 320.516Z" fill="#DADBE0"/>
+    <path d="M565.149 237.842C562.261 240.882 558.614 242.857 554.511 243.617C554.359 243.617 554.055 243.617 553.903 243.769L543.872 239.21L565.149 237.842Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
+    <path d="M591.593 267.629C591.289 272.948 590.833 277.66 590.529 281.915C589.617 292.249 588.249 301.064 587.489 306.839C585.97 318.237 584.298 327.812 582.93 335.258L530.65 314.742C580.498 312.918 591.593 267.629 591.593 267.629ZM629.587 320.517C629.283 327.508 628.067 333.587 626.851 338.754L618.948 336.93L605.422 333.739L604.359 333.435L603.143 333.131L601.015 332.675L598.584 332.067C602.231 328.267 606.03 324.012 609.678 318.845C617.732 307.751 622.748 296.96 626.091 287.842C627.915 294.073 628.675 298.936 628.827 300.304C629.131 302.432 629.435 305.167 629.587 308.511C629.739 312.158 629.739 316.261 629.587 320.517Z" fill="black" opacity="0.1"/>
+    <path d="M628.827 300.608C624.875 297.568 621.684 293.617 619.708 288.906C615.909 280.699 615.605 272.492 618.796 269.757C620.924 273.708 623.356 278.571 625.331 284.65C627.307 290.729 628.371 296.201 628.827 300.608Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M582.93 335.258L565.605 433.739C563.629 434.498 561.805 435.258 559.83 436.018C557.55 426.9 555.574 417.477 553.751 407.295C550.255 386.93 548.128 366.413 547.672 345.745L548.432 321.581L582.93 335.258Z" fill="black" opacity="0.1"/>
+    <path d="M204.967 389.21C203.751 390.425 202.231 391.185 200.559 391.793C196.152 392.857 190.225 386.778 184.906 378.723C192.201 375.532 200.711 378.723 204.055 386.018C204.359 387.082 204.815 388.146 204.967 389.21ZM286.881 380.091C281.866 387.538 276.243 392.857 272.14 391.793C270.316 391.185 268.644 390.122 267.125 388.754C269.556 381.155 277.763 377.052 285.362 379.483C285.818 379.787 286.426 379.939 286.881 380.091Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M591.441 166.261C588.401 165.045 585.058 166.565 583.994 169.605C582.778 172.644 584.298 175.988 587.337 177.052C590.377 178.267 593.72 176.748 594.784 173.708C596 170.669 594.48 167.325 591.441 166.261ZM602.231 120.213L590.985 157.903L597.824 160.486L612.565 125.684L602.231 120.213Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M654.207 385.258L593.568 397.113C594.936 396.657 634.602 384.195 652.079 374.164L654.207 385.258ZM565.149 237.842C562.261 240.882 558.614 242.857 554.511 243.617C554.359 243.617 554.055 243.617 553.903 243.769L543.872 239.21L565.149 237.842Z" fill="black" opacity="0.1"/>
+    <path d="M554.511 243.617L573.508 231.763L577.915 235.714L564.997 252.584L554.511 243.617ZM553.903 243.769L541.441 234.65L538.553 237.69L547.064 250.456L553.903 243.769Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));"/>
+    <path d="M553.903 243.769L541.441 234.65L538.553 237.69L547.064 250.456L553.903 243.769Z" fill="black" opacity="0.1"/>
+    <path d="M536.73 390.426V391.186H511.35V390.426C511.35 388.754 511.957 386.93 513.021 385.562H535.058C536.274 387.082 536.73 388.754 536.73 390.426Z" fill="black" opacity="0.22"/>
+    <path d="M571.988 454.407L571.684 452.887C571.836 453.343 571.836 453.799 571.988 454.407ZM548.887 450.76L568.34 448.632C568.34 448.632 569.1 443.617 566.061 441.793C563.021 439.969 551.927 446.048 548.887 450.76ZM506.334 394.529L524.115 386.474C524.115 386.474 523.204 381.459 519.708 380.699C516.213 379.939 507.854 389.058 506.334 394.529ZM233.69 544.377L213.933 542.097C213.933 542.097 213.173 536.93 216.365 535.106C219.556 533.283 230.498 539.665 233.69 544.377ZM262.869 544.377L243.112 542.097C243.112 542.097 242.353 536.93 245.544 535.106C248.736 533.283 259.678 539.665 262.869 544.377Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+    <path d="M568.644 196.353C564.237 200.76 551.167 212.158 539.313 206.991C537.489 206.231 535.666 205.167 534.146 203.799C533.994 203.647 533.842 203.647 533.69 203.495C533.234 203.192 532.93 202.888 532.626 202.432L532.474 202.28C531.562 201.368 530.954 200.152 530.346 199.088C533.234 200.76 536.425 201.976 539.769 202.736C556.03 206.079 569.404 193.769 571.532 191.793L571.684 191.641C570.772 193.313 569.86 194.833 568.644 196.353Z" fill="black" opacity="0.5"/>
+    <path d="M219.86 293.769C225.939 294.681 242.961 295.745 249.192 284.65C250.103 282.979 250.863 281.003 251.319 279.179C251.319 279.027 251.471 278.875 251.471 278.723C251.623 278.267 251.623 277.66 251.623 277.204V277.052C251.775 275.836 251.623 274.468 251.319 273.252C250.103 276.292 248.28 279.179 246.152 281.611C235.362 293.921 217.733 292.097 214.845 291.945H214.693C216.213 292.553 218.037 293.313 219.86 293.769Z" fill="black" opacity="0.5"/>
+    <path d="M501.775 256.991C497.672 256.079 492.049 254.407 486.122 251.368C480.802 248.632 476.851 245.593 473.812 243.009C476.243 242.705 483.234 242.249 490.529 246.049C497.216 249.544 500.559 254.711 501.775 256.991Z" fill="#232B41" class="tblr-illustrations-not-found-c"/>
+</svg>

src/pages/_includes/cards/icons-banner.html

@@ -1,6 +1,6 @@
 {% assign icons-count = site.data.icons | size %}
 
-<div class="card card-md{% if include.class %} {{ include.class }}{% endif %}">
+<div class="card card-md sticky-top{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-stamp card-stamp-lg">
 		<div class="card-stamp-icon bg-primary">
 			{% include ui/icon.html icon="ghost" %}

src/pages/_includes/ui/illustration.html

@@ -4,8 +4,8 @@
 {% assign src-light = "/illustrations/light/" | append: image %}
 {% assign src-dark = "/illustrations/dark/" | append: image %}
 
-{% assign illustration-light = site.illustrations | where: "id", src-light | first %}
+{% assign illustration-light = site.free-illustrations | where: "id", src-light | first %}
-{% assign illustration-dark = site.illustrations | where: "id", src-dark | first %}
+{% assign illustration-dark = site.free-illustrations | where: "id", src-dark | first %}
 
 {% assign replace-to-light = '<svg class="img-light' %}
 {% if include.class %}{% assign replace-to-light = replace-to-light | append: ' ' | append: include.class %}{% endif %}

src/pages/illustrations.html

@@ -0,0 +1,161 @@
+---
+title: SVG Illustrations
+page-header: SVG Illustrations
+---
+
+{% assign illustrations = "" | split: "," %} {% assign first_illustration = '' %} {% for illustration in site.free-illustrations reversed %} {% if illustration.id contains 'autodark' %} {% assign first_illustration = illustration %} {% assign
+illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {% assign illustrations = illustrations | reverse %} {% assign skin_color = site.skin-colors | first %} {% assign color = site.colors | first %}
+
+<div class="mb-7" style="--tblr-illustrations-primary: {{ color[1].hex }}; --tblr-illustrations-skin: {{ skin_color[1].hex }};" id="current-illustration-style">
+	<div class="row row-cards">
+		<div class="col-12">
+			<div class="row row-cards row-deck g-4">
+				<div class="col-md-7">
+					<div class="card">
+						<div class="card-body d-flex align-items-center">
+							<div id="current-illustration">{{ first_illustration }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-md-5">
+					<div class="row">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-body">
+									<div>
+										<div class="form-label">Primary color</div>
+										<div class="row g-2">
+											{% for color in site.colors %}
+											<div class="col-auto">
+												<label class="form-colorinput">
+													<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} />
+													<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
+												</label>
+											</div>
+											{% endfor %}
+										</div>
+
+										<div class="form-label mt-4">Skin color</div>
+										<div class="row g-2">
+											{% for color in site.skin-colors %}
+											<div class="col-auto">
+												<label class="form-colorinput">
+													<input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
+													<span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span>
+												</label>
+											</div>
+											{% endfor %}
+										</div>
+
+										<div class="form-label mt-4">Select SVG illustration</div>
+										<div class="row">
+											{% for illustration in illustrations %}
+											<div class="col-3">
+												<label class="form-imagecheck mb-2">
+													<input name="form-imagecheck" type="radio" value="{{ illustration.slug }}" class="form-imagecheck-input js-select-illustration" {% if forloop.first %} checked{% endif %}>
+													<span class="form-imagecheck-figure">
+														{{ illustration }}
+													</span>
+												</label>
+											</div>
+											{% endfor %}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<h2 class="page-title my-5">
+	{{ site.illustrations.count | minus: 4 }} more SVG Illustrations
+</h2>
+
+<div class="row row-cards">
+	<div class="col-lg-4">
+		<div class="card card-md sticky-top">
+			<div class="card-stamp card-stamp-lg">
+				<div class="card-stamp-icon bg-primary">
+					{% include ui/icon.html icon="brand-figma" %}
+				</div>
+			</div>
+			<div class="card-body">
+				<div class="row align-items-center">
+					<div class="col-10">
+						<h3 class="h1">Tabler Illustrations</h3>
+						<div class="markdown text-secondary">
+							Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
+						</div>
+						<div class="mt-3">
+							<a href="{{ site.illustrations.buy_link }}" class="btn btn-primary" target="_blank" rel="noopener">Get lifetime access</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-8">
+		<div class="row row-cards">
+			{% for illustration in site.data.illustrations %}
+			<div class="col-6 col-md-3">
+				<div class="card">
+					<div class="card-body">
+						<a href="{{ site.illustrations.buy_link }}" target="_blank">
+							<img src="{{ site.base }}/static/illustrations/light/{{ illustration }}.png" alt="{{ illustration }}" class="img-light" />
+							<img src="{{ site.base }}/static/illustrations/dark/{{ illustration }}.png" alt="{{ illustration }}" class="img-dark" />
+						</a>
+					</div>
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+	</div>
+</div>
+
+
+{% capture_global scripts %}
+<script>
+	let skinColor = "{{ skin_color[1].hex }}",
+	   primaryColor = "{{ color[1].hex }}";
+
+	const illustrations = {
+	{% for illustration in illustrations %}
+		"{{ illustration.slug }}": {
+	      svg: '{{ illustration.content | quote | replace_regex: "\n", "\n" }}',
+		},
+	{% endfor %}
+	}
+
+	const selectIllustrations = document.querySelectorAll(".js-select-illustration"),
+		currentIllustration = document.getElementById("current-illustration"),
+		currentIllustrationCode = document.getElementById("current-illustration-code");
+
+	document.querySelectorAll(".js-select-illustration").forEach((elem) => {
+		elem.addEventListener("change", (e) => {
+			const selectedId = e.target.value,
+				selectedIllustration = illustrations[selectedId]
+
+			currentIllustration.innerHTML = selectedIllustration.svg
+
+		})
+	})
+
+	document.querySelectorAll(".js-select-color").forEach((elem) => {
+		elem.addEventListener("change", (e) => {
+			primaryColor = e.target.value
+			document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-primary", primaryColor)
+		})
+	})
+
+	document.querySelectorAll(".js-select-skin-color").forEach((elem) => {
+		elem.addEventListener("change", (e) => {
+			skinColor = e.target.value
+			document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-skin", skinColor)
+		})
+	})
+</script>
+{% endcapture_global %}

src/scss/ui/_type.scss

@@ -135,8 +135,10 @@ kbd,
   border-radius: $kbd-border-radius;
 }
 
-img {
+img,
+svg {
   max-width: 100%;
+  height: auto;
 }
 
 .list-unstyled {