Replace Jekyll with Eleventy (#2071)

.build/import-illustrations.js

@@ -16,3 +16,29 @@ fs.writeFileSync(
 	path.join(__dirname, `../src/pages/_data/illustrations.json`),
 	JSON.stringify(illustrations)
 )
+
+
+// let i = {}
+// const dirs = ['light', 'dark', 'autodark']
+// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
+
+// for(const dir of dirs) {
+// 	i[dir] = {}
+
+// 	for(const ilustration of ilustrations) {
+// 		let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
+
+// 		svg = svg
+// 			.replace(/\n+/g, ' ')
+// 			.replace(/>\s+</g, '><')
+// 			.replace(/\s+/g, ' ')
+// 			.replace(/^[\n\s-]+/, '')
+
+// 		i[dir][ilustration] = svg
+// 	}
+// }
+
+// fs.writeFileSync(
+// 	path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
+// 	JSON.stringify(i)
+// )

.build/unused-files.js

@@ -0,0 +1,26 @@
+const glob = require('glob');
+const fs = require('fs')
+const path = require('path')
+
+const srcDir = path.join(__dirname, '../src')
+
+let foundFiles = []
+glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
+	let fileContent = fs.readFileSync(file)
+
+	fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
+		filename = `${srcDir}/pages/_includes/${filename}`
+
+		if (!foundFiles.includes(filename)) {
+			foundFiles.push(filename)
+		}
+	})
+})
+
+let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
+
+includeFiles.forEach((file) => {
+	if (!foundFiles.includes(file)) {
+		console.log('file', file)
+	}
+})

.changeset/cuddly-tables-help.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Replace Jekyll with Eleventy

Gemfile

@@ -1,12 +0,0 @@
-source "https://rubygems.org"
-
-gem "jekyll", "4.3.4"
-
-group :jekyll_plugins do
-	gem "jekyll-random"
-	gem "jekyll-tidy"
-	gem "jekyll-timeago"
-	gem 'jekyll-redirect-from'
-end
-
-gem 'wdm', '>= 0.1.1' if Gem.win_platform?

Gemfile.lock

@@ -1,99 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    bigdecimal (3.1.9)
-    colorator (1.1.0)
-    concurrent-ruby (1.3.4)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.17.1)
-    ffi (1.17.1-arm64-darwin)
-    forwardable-extended (2.6.0)
-    google-protobuf (4.29.2)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.2-arm64-darwin)
-      bigdecimal
-      rake (>= 13)
-    htmlbeautifier (1.4.3)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.8.0)
-    i18n (1.14.6)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.3.4)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-random (0.1)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.15.0)
-      mini_i18n (>= 0.8.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.5.1)
-      rexml (>= 3.3.9)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    mini_i18n (0.9.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (6.0.1)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
-      ffi (~> 1.0)
-    rexml (3.4.0)
-    rouge (4.5.1)
-    safe_yaml (1.0.5)
-    sass-embedded (1.83.0)
-      google-protobuf (~> 4.28)
-      rake (>= 13)
-    sass-embedded (1.83.0-arm64-darwin)
-      google-protobuf (~> 4.28)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.6.0)
-    webrick (1.9.1)
-
-PLATFORMS
-  arm64-darwin-24
-  ruby
-
-DEPENDENCIES
-  jekyll (= 4.3.4)
-  jekyll-random
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-
-BUNDLED WITH
-   2.6.2

_config.yml

@@ -1,280 +0,0 @@
-source: src/pages
-destination: tmp
-
-keep_files:
-  - css
-  - js
-  - img
-  - dist
-  - static
-  - playground.html
-
-use-iconfont: false
-rtl: false
-
-title: Tabler
-description: Premium and Open Source dashboard template with responsive and high quality UI.
-theme-color: "#066fd1"
-
-email: [email protected]
-homepage: https://tabler.io
-github-url: https://github.com/tabler/tabler
-github-sponsors-url: https://github.com/sponsors/codecalm
-changelog-url: https://github.com/tabler/tabler/releases
-sponsor-url: https://github.com/sponsors/codecalm
-preview-url: https://tabler.io/demo
-docs-url: https://tabler.io/docs
-
-mapbox-key: pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw
-google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
-google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
-npm-package: "@tabler/core"
-
-random-date-from: "2018-01-01"
-random-date-to: "2022-01-01"
-
-debug: false
-
-layout-dark: false
-
-plugins:
-  - jekyll-random
-  - jekyll-tidy
-  - jekyll-timeago
-  - jekyll-redirect-from
-
-tabler-css-plugins:
-  - tabler-flags
-  - tabler-socials
-  - tabler-payments
-  - tabler-vendors
-  - tabler-marketing
-
-exclude:
-  - .jekyll-cache
-  - redirects.json
-
-markdown: kramdown
-kramdown:
-  input: GFM
-  syntax_highlighter: rouge
-
-jekyll_tidy:
-  compress_html: false
-  ignore_env: development
-
-collections:
-  - free-illustrations
-
-defaults:
-  - scope:
-      type: "pages"
-      path: "*.md"
-    values:
-      layout: markdown
-  - scope:
-      type: "pages"
-    values:
-      layout: default
-
-colors:
-  blue:
-    class: blue
-    hex: '#066fd1'
-    title: Blue
-  azure:
-    class: azure
-    hex: '#45aaf2'
-    title: Azure
-  indigo:
-    class: indigo
-    hex: '#6574cd'
-    title: Indigo
-  purple:
-    class: purple
-    hex: '#a55eea'
-    title: Purple
-  pink:
-    class: pink
-    hex: '#f66d9b'
-    title: Pink
-  red:
-    class: red
-    hex: '#fa4654'
-    title: Red
-  orange:
-    class: orange
-    hex: '#fd9644'
-    title: Orange
-  yellow:
-    class: yellow
-    hex: '#f1c40f'
-    title: Yellow
-  lime:
-    class: lime
-    hex: '#7bd235'
-    title: Lime
-  green:
-    class: green
-    hex: '#5eba00'
-    title: Green
-  teal:
-    class: teal
-    hex: '#2bcbba'
-    title: Teal
-  cyan:
-    class: cyan
-    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'
-    title: White
-  dark:
-    hex: '#303645'
-    title: Dark
-  gray:
-    hex: '#868e96'
-    title: Gray
-
-variants:
-  - name: success
-    icon: check
-  - name: info
-    icon: info-circle
-  - name: warning
-    icon: alert-triangle
-  - name: danger
-    icon: alert-circle
-
-theme-colors:
-  primary:
-    class: primary
-    title: Primary
-  secondary:
-    class: secondary
-    title: Secondary
-  success:
-    class: success
-    title: Success
-  warning:
-    class: warning
-    title: Warning
-  danger:
-    class: danger
-    title: Danger
-  info:
-    class: info
-    title: Info
-  dark:
-    class: dark
-    title: Dark
-  light:
-    class: light
-    title: Light
-
-button-states:
-  - class:
-    title: Normal
-  - class: active
-    title: Active state
-  - class: disabled
-    title: Disabled
-
-socials:
-  x:
-    icon: brand-x
-    title: X
-  facebook:
-    icon: brand-facebook
-    title: Facebook
-  twitter:
-    icon: brand-twitter
-    title: Twitter
-  google:
-    icon: brand-google
-    title: Google
-  youtube:
-    icon: brand-youtube
-    title: Youtube
-  vimeo:
-    icon: brand-vimeo
-    title: Vimeo
-  dribbble:
-    icon: brand-dribbble
-    title: Dribbble
-  github:
-    icon: brand-github
-    title: Github
-  instagram:
-    icon: brand-instagram
-    title: Instagram
-  pinterest:
-    icon: brand-pinterest
-    title: Pinterest
-  vk:
-    icon: brand-vk
-    title: VK
-  rss:
-    icon: rss
-    title: RSS
-  flickr:
-    icon: brand-flickr
-    title: Flickr
-  bitbucket:
-    icon: brand-bitbucket
-    title: Bitbucket
-  tabler:
-    icon: brand-tabler
-    title: Tabler
-
-months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-
-icons:
-  link: https://tabler.io/icons
-
-emails:
-  price: "$29"
-  buy_link: https://r.tabler.io/buy-emails
-
-illustrations:
-  price: "$59"
-  count: 50
-  buy_link: https://r.tabler.io/buy-illustrations
-

_config_prod.yml

@@ -1,4 +0,0 @@
-exclude:
-  - redirects.json
-  - playground.html
-  - playground-*.html

docs/ui/components/vector-maps.mdx

@@ -81,90 +81,88 @@ You can add markers to the map to highlight specific locations. Below is a sampl
 </div>
 
 <script>
-      // @formatter:on
-      document.addEventListener("DOMContentLoaded", function() {
-      	const map = new jsVectorMap({
-      		selector: '#map-world-markers',
-      		map: 'world_merc',
-      		backgroundColor: 'transparent',
-      		regionStyle: {
-      			initial: {
-      				fill: tabler.getColor('body-bg'),
-      				stroke: tabler.getColor('border-color'),
-      				strokeWidth: 2,
-      			}
-      		},
-      		zoomOnScroll: false,
-      		zoomButtons: false,
-      		markers: [
-      			{
-      				coords: [61.524, 105.3188],
-      				name: "Russia",
-      			},
-      			{
-      				coords: [56.1304, -106.3468],
-      				name: "Canada",
-      			},
-      			{
-      				coords: [71.7069, -42.6043],
-      				name: "Greenland",
-      			},
-      			{
-      				coords: [26.8206, 30.8025],
-      				name: "Egypt",
-      			},
-      			{
-      				coords: [-14.235, -51.9253],
-      				name: "Brazil",
-      			},
-      			{
-      				coords: [35.8617, 104.1954],
-      				name: "China",
-      			},
-      			{
-      				coords: [37.0902, -95.7129],
-      				name: "United States",
-      			},
-      			{
-      				coords: [60.472024, 8.468946],
-      				name: "Norway",
-      			},
-      			{
-      				coords: [48.379433, 31.16558],
-      				name: "Ukraine",
-      			},
-      		],
-      		markerStyle: {
-      			initial: {
-      				r: 4,
-      				stroke: '#fff',
-      				opacity: 1,
-      				strokeWidth: 3,
-      				stokeOpacity: .5,
-      				fill: tabler.getColor('blue')
-      			},
-      			hover: {
-      				fill: tabler.getColor('blue'),
-      				stroke: tabler.getColor('blue')
-      			}
-      		},
-      		markerLabelStyle: {
-      			initial: {
-      				fontSize: 10
-      			},
-      		},
-      		labels: {
-      			markers: {
-      				render: function(marker) {
-      					return marker.name
-      				},
-      			},
-      		},
-      	});
-      	window.addEventListener("resize", () => {
-      		map.updateSize();
-      	});
-      });
-      // @formatter:off
-    </script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world-markers',
+		map: 'world_merc',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+		markers: [
+			{
+				coords: [61.524, 105.3188],
+				name: "Russia",
+			},
+			{
+				coords: [56.1304, -106.3468],
+				name: "Canada",
+			},
+			{
+				coords: [71.7069, -42.6043],
+				name: "Greenland",
+			},
+			{
+				coords: [26.8206, 30.8025],
+				name: "Egypt",
+			},
+			{
+				coords: [-14.235, -51.9253],
+				name: "Brazil",
+			},
+			{
+				coords: [35.8617, 104.1954],
+				name: "China",
+			},
+			{
+				coords: [37.0902, -95.7129],
+				name: "United States",
+			},
+			{
+				coords: [60.472024, 8.468946],
+				name: "Norway",
+			},
+			{
+				coords: [48.379433, 31.16558],
+				name: "Ukraine",
+			},
+		],
+		markerStyle: {
+			initial: {
+				r: 4,
+				stroke: '#fff',
+				opacity: 1,
+				strokeWidth: 3,
+				stokeOpacity: .5,
+				fill: tabler.getColor('blue')
+			},
+			hover: {
+				fill: tabler.getColor('blue'),
+				stroke: tabler.getColor('blue')
+			}
+		},
+		markerLabelStyle: {
+			initial: {
+				fontSize: 10
+			},
+		},
+		labels: {
+			markers: {
+				render: function(marker) {
+					return marker.name
+				},
+			},
+		},
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
 ```

eleventy.config.mjs

@@ -0,0 +1,545 @@
+import beautify from 'simply-beautiful';
+import { readFileSync } from 'fs';
+import { EleventyRenderPlugin } from "@11ty/eleventy";
+
+/** @type {import('@11ty/eleventy').LocalConfig} */
+export default function (eleventyConfig) {
+	const env = process.env.NODE_ENV || "development";
+	const isDevelopment = env === "development";
+
+	eleventyConfig.setInputDirectory("src/pages");
+	eleventyConfig.setOutputDirectory(process.env.DIST_DIR || "demo");
+
+	eleventyConfig.setLayoutsDirectory("_layouts");
+	eleventyConfig.setIncludesDirectory("_includes");
+
+	eleventyConfig.setWatchThrottleWaitTime(100);
+
+	eleventyConfig.addPlugin(EleventyRenderPlugin, {
+		accessGlobalData: true,
+	});
+
+	eleventyConfig.setLiquidOptions({
+		timezoneOffset: 0,
+		jekyllInclude: true,
+		dynamicPartials: true,
+		jekyllWhere: true,
+	});
+
+	if (isDevelopment) {
+		eleventyConfig.addWatchTarget("dist");
+	}
+
+	eleventyConfig.addPassthroughCopy("favicon.ico");
+
+	/**
+	 * Data
+	 */
+	eleventyConfig.addGlobalData("environment", env);
+
+	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync("package.json", "utf-8")));
+	eleventyConfig.addGlobalData("readme", readFileSync("README.md", "utf-8"));
+	eleventyConfig.addGlobalData("license", readFileSync("LICENSE", "utf-8"));
+	eleventyConfig.addGlobalData("changelog", readFileSync("CHANGELOG.md", "utf-8"));
+
+	eleventyConfig.addGlobalData("site", {
+		title: "Tabler",
+		description: "Premium and Open Source dashboard template with responsive and high quality UI.",
+		themeColor: "#066fd1",
+
+		email: "[email protected]",
+		homepage: "https://tabler.io",
+		githubUrl: "https://github.com/tabler/tabler",
+		githubSponsorsUrl: "https://github.com/sponsors/codecalm",
+		changelogUrl: "https://github.com/tabler/tabler/releases",
+		sponsorUrl: "https://github.com/sponsors/codecalm",
+		previewUrl: "https://tabler.io/demo",
+		docsUrl: "https://tabler.io/docs",
+
+		mapboxKey: "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
+		googleMapsKey: "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
+		googleMapsDevKey: "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
+		npmPackage: "@tabler/core",
+
+		tablerCssPlugins: [
+			"tabler-flags",
+			"tabler-socials",
+			"tabler-payments",
+			"tabler-vendors",
+			"tabler-marketing"
+		],
+
+		icons: {
+			link: "https://tabler.io/icons"
+		},
+		emails: {
+			price: "$29",
+			buy_link: "https://r.tabler.io/buy-emails"
+		},
+		illustrations: {
+			price: "$59",
+			count: 50,
+			buy_link: "https://r.tabler.io/buy-illustrations"
+		},
+
+		colors: {
+			"blue": {
+				"class": "blue",
+				"hex": "#066fd1",
+				"title": "Blue"
+			},
+			"azure": {
+				"class": "azure",
+				"hex": "#45aaf2",
+				"title": "Azure"
+			},
+			"indigo": {
+				"class": "indigo",
+				"hex": "#6574cd",
+				"title": "Indigo"
+			},
+			"purple": {
+				"class": "purple",
+				"hex": "#a55eea",
+				"title": "Purple"
+			},
+			"pink": {
+				"class": "pink",
+				"hex": "#f66d9b",
+				"title": "Pink"
+			},
+			"red": {
+				"class": "red",
+				"hex": "#fa4654",
+				"title": "Red"
+			},
+			"orange": {
+				"class": "orange",
+				"hex": "#fd9644",
+				"title": "Orange"
+			},
+			"yellow": {
+				"class": "yellow",
+				"hex": "#f1c40f",
+				"title": "Yellow"
+			},
+			"lime": {
+				"class": "lime",
+				"hex": "#7bd235",
+				"title": "Lime"
+			},
+			"green": {
+				"class": "green",
+				"hex": "#5eba00",
+				"title": "Green"
+			},
+			"teal": {
+				"class": "teal",
+				"hex": "#2bcbba",
+				"title": "Teal"
+			},
+			"cyan": {
+				"class": "cyan",
+				"hex": "#17a2b8",
+				"title": "Cyan"
+			}
+		},
+		skinColors: {
+			"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"
+			}
+		},
+		colorsExtra: {
+			"white": {
+				"hex": "#ffffff",
+				"title": "White"
+			},
+			"dark": {
+				"hex": "#303645",
+				"title": "Dark"
+			},
+			"gray": {
+				"hex": "#868e96",
+				"title": "Gray"
+			}
+		},
+		variants: [
+			{
+				"name": "success",
+				"icon": "check"
+			},
+			{
+				"name": "info",
+				"icon": "info-circle"
+			},
+			{
+				"name": "warning",
+				"icon": "alert-triangle"
+			},
+			{
+				"name": "danger",
+				"icon": "alert-circle"
+			}
+		],
+		"themeColors": {
+			"primary": {
+				"class": "primary",
+				"title": "Primary"
+			},
+			"secondary": {
+				"class": "secondary",
+				"title": "Secondary"
+			},
+			"success": {
+				"class": "success",
+				"title": "Success"
+			},
+			"warning": {
+				"class": "warning",
+				"title": "Warning"
+			},
+			"danger": {
+				"class": "danger",
+				"title": "Danger"
+			},
+			"info": {
+				"class": "info",
+				"title": "Info"
+			},
+			"dark": {
+				"class": "dark",
+				"title": "Dark"
+			},
+			"light": {
+				"class": "light",
+				"title": "Light"
+			}
+		},
+		"buttonStates": [
+			{
+				"class": null,
+				"title": "Normal"
+			},
+			{
+				"class": "active",
+				"title": "Active state"
+			},
+			{
+				"class": "disabled",
+				"title": "Disabled"
+			}
+		],
+		"socials": {
+			"x": {
+				"icon": "brand-x",
+				"title": "X"
+			},
+			"facebook": {
+				"icon": "brand-facebook",
+				"title": "Facebook"
+			},
+			"twitter": {
+				"icon": "brand-twitter",
+				"title": "Twitter"
+			},
+			"google": {
+				"icon": "brand-google",
+				"title": "Google"
+			},
+			"youtube": {
+				"icon": "brand-youtube",
+				"title": "Youtube"
+			},
+			"vimeo": {
+				"icon": "brand-vimeo",
+				"title": "Vimeo"
+			},
+			"dribbble": {
+				"icon": "brand-dribbble",
+				"title": "Dribbble"
+			},
+			"github": {
+				"icon": "brand-github",
+				"title": "Github"
+			},
+			"instagram": {
+				"icon": "brand-instagram",
+				"title": "Instagram"
+			},
+			"pinterest": {
+				"icon": "brand-pinterest",
+				"title": "Pinterest"
+			},
+			"vk": {
+				"icon": "brand-vk",
+				"title": "VK"
+			},
+			"rss": {
+				"icon": "rss",
+				"title": "RSS"
+			},
+			"flickr": {
+				"icon": "brand-flickr",
+				"title": "Flickr"
+			},
+			"bitbucket": {
+				"icon": "brand-bitbucket",
+				"title": "Bitbucket"
+			},
+			"tabler": {
+				"icon": "brand-tabler",
+				"title": "Tabler"
+			}
+		},
+		"months-short": [
+			"Jan",
+			"Feb",
+			"Mar",
+			"Apr",
+			"May",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Oct",
+			"Nov",
+			"Dec"
+		],
+		"months-long": [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		]
+	});
+
+	/**
+	 * Filters
+	 */
+	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) { 
+		// Raturn 3:45 time format
+		const minutes = Math.floor(value / 60000);
+		const seconds = ((value % 60000) / 1000).toFixed(0);
+		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+	 });
+
+	eleventyConfig.addFilter("relative", (page) => {
+		const segments = (page.url || '').replace(/^\//).split('/');
+		if (segments.length === 1) {
+			return '.';
+		} else {
+			return '../'.repeat(segments.length - 1).slice(0, -1);
+		}
+	});
+
+	eleventyConfig.addFilter("concat_objects", function (object, object2) {
+		if (
+			object &&
+			object2 &&
+			typeof object === 'object' &&
+			typeof object2 === 'object' &&
+			!Array.isArray(object) &&
+			!Array.isArray(object2)
+		) {
+			return { ...object, ...object2 };
+		}
+		return object;
+	});
+
+	eleventyConfig.addFilter("replace_regex", function (input, regStr, replStr) {
+		const regex = new RegExp(regStr, 'gm');
+		return input.replace(regex, replStr);
+	});
+
+	eleventyConfig.addFilter("timestamp_to_date", function (timestamp) {
+		const date = new Date(timestamp * 1000); // Convert timestamp to milliseconds
+		return date.toISOString().split('T')[0]; // Extract the date in 'YYYY-MM-DD' format
+	});
+
+	eleventyConfig.addFilter("split_to_n", function (arr, n) {
+		const chunkSize = Math.round(arr.length / n);
+		const result = [];
+		for (let i = 0; i < arr.length; i += chunkSize) {
+			result.push(arr.slice(i, i + chunkSize));
+		}
+		return result;
+	})
+
+	eleventyConfig.addFilter("format_number", function (value) {
+		return value.toString()
+			.split('')
+			.reverse()
+			.reduce((acc, char, index) => {
+				if (index > 0 && index % 3 === 0) {
+					acc.push(',');
+				}
+				acc.push(char);
+				return acc;
+			}, [])
+			.reverse()
+			.join('');
+	});
+
+	function randomNumber(x, min = 0, max = 100, round = 0) {
+		let value = ((x * x * Math.PI * Math.E * (max + 1) * (Math.sin(x) / Math.cos(x * x))) % (max + 1 - min)) + min;
+
+		value = value > max ? max : value;
+		value = value < min ? min : value;
+
+		if (round !== 0) {
+			value = parseFloat(value.toFixed(round));
+		} else {
+			value = Math.floor(value);
+		}
+
+		return value;
+	}
+
+	eleventyConfig.addFilter("random_date_ago", function (x, daysAgo = 100) {
+		const today = new Date();
+		const randomDaysAgo = randomNumber(x, 0, daysAgo);
+		today.setDate(today.getDate() - randomDaysAgo);
+		return today;
+	});
+
+	eleventyConfig.addFilter("random_date", function (x, startDate = null, endDate = null) {
+		const start = startDate ? new Date(startDate).getTime() : Date.now() - 100 * 24 * 60 * 60 * 1000;
+		const end = endDate ? new Date(endDate).getTime() : Date.now();
+
+		const randomTimestamp = randomNumber(x, start, end);
+		return new Date(randomTimestamp);
+	});
+
+	eleventyConfig.addFilter("random_item", function (x, items) {
+		const index = randomNumber(x, 0, items.length - 1);
+		return items[index];
+	});
+
+	eleventyConfig.addFilter("random_number", randomNumber);
+
+	eleventyConfig.addFilter("first_letters", function capitalizeFirstLetter(string) {
+		return string.split(' ').map(word => word.charAt(0)).join('');
+	})
+
+	eleventyConfig.addFilter("size", function (elem) {
+		if (elem instanceof Object) {
+			return Object.keys(elem).length;
+		}
+
+		return elem.length;
+	})
+
+	eleventyConfig.addFilter("first", function (elem) {
+		if (elem instanceof Object) {
+			return elem[Object.keys(elem)[0]];
+		}
+
+		return elem[0];
+	})
+
+	// time ago from today
+	eleventyConfig.addFilter("timeago", function (date) {
+		const seconds = Math.floor((new Date() - date) / 1000);
+
+		let interval = Math.floor(seconds / 31536000);
+
+		if (interval > 1) {
+			return interval + " years ago";
+		}
+		interval = Math.floor(seconds / 2592000);
+		if (interval > 1) {
+			return interval + " months ago";
+		}
+		interval = Math.floor(seconds / 86400);
+		if (interval > 1) {
+			return interval + " days ago";
+		}
+		interval = Math.floor(seconds / 3600);
+		if (interval > 1) {
+			return interval + " hours ago";
+		}
+		interval = Math.floor(seconds / 60);
+		if (interval > 1) {
+			return interval + " minutes ago";
+		}
+		if (seconds > 0) {
+			return Math.floor(seconds) + " seconds ago";
+		}
+
+		return "now";
+	})
+
+	/**
+	 * Shortcodes
+	 */
+	const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
+	tags.forEach(tag => {
+		eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
+			return {
+				parse: function (tagToken, remainingTokens) {
+					this.str = tagToken.args;
+				},
+				render: function (scope, hash) {
+					return "";
+				},
+			};
+		});
+	});
+
+	/**
+	 * Transforms
+	 */
+	function prettifyHTML(content, outputPath) {
+		return outputPath.endsWith('.html')
+			? content
+				.replace(/\/\/ @formatter:(on|off)\n+/gm, '')
+			: content
+	}
+
+	eleventyConfig.addTransform('htmlformat', prettifyHTML)
+};

gulpfile.js

@@ -18,9 +18,7 @@ const gulp = require('gulp'),
 	vinylSource = require('vinyl-source-stream'),
 	vinylBuffer = require('vinyl-buffer'),
 	browserSync = require('browser-sync'),
-	glob = require('glob'),
 	spawn = require('cross-spawn'),
-	fs = require('fs'),
 	path = require('path'),
 	yargs = require('yargs/yargs'),
 	cp = require('child_process'),
@@ -30,8 +28,8 @@ const gulp = require('gulp'),
 	argv = yargs(process.argv).argv
 
 let BUILD = false,
-	distDir = './.tmp',
-	demoDir = './.tmp',
+	distDir = './dist',
+	demoDir = './demo',
 	srcDir = './src'
 
 /**
@@ -39,9 +37,6 @@ let BUILD = false,
  */
 gulp.task('build-on', (cb) => {
 	BUILD = true
-	distDir = './dist'
-	demoDir = './demo'
-
 	cb()
 })
 
@@ -60,48 +55,6 @@ const getBanner = () => {
 `
 }
 
-/**
- * Array.flat polyfill
- */
-if (!Array.prototype.flat) {
-	Object.defineProperty(Array.prototype, 'flat', {
-		value: function (depth = 1) {
-			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten)
-			}, [])
-		}
-	})
-}
-
-/**
- * Check unused Jekyll partials
- */
-gulp.task('unused-files', (cb) => {
-	let foundFiles = []
-
-	glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
-		let fileContent = fs.readFileSync(file)
-
-		fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, (f, c, filename) => {
-			filename = `${srcDir}/pages/_includes/${filename}`
-
-			if (!foundFiles.includes(filename)) {
-				foundFiles.push(filename)
-			}
-		})
-	})
-
-	let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
-
-	includeFiles.forEach((file) => {
-		if (!foundFiles.includes(file)) {
-			console.log('file', file)
-		}
-	})
-
-	cb()
-})
-
 /**
  * Clean `dist` folder before build
  */
@@ -111,11 +64,6 @@ gulp.task('clean-dirs', () => {
 		.pipe(clean())
 })
 
-gulp.task('clean-jekyll', (cb) => {
-	return spawn('bundle', ['exec', 'jekyll', 'clean'], { stdio: 'inherit' })
-		.on('close', cb)
-})
-
 /**
  * Compile SASS to CSS and move it to dist directory
  */
@@ -294,27 +242,27 @@ gulp.task('mjs', () => {
 })
 
 /**
- * Watch Jekyll files and build it to demo directory
+ * Watch eleventy files and build it to demo directory
  */
-gulp.task('watch-jekyll', (cb) => {
-	browserSync.notify('Building Jekyll')
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' })
+gulp.task('watch-eleventy', (cb) => {
+	browserSync.notify('Building eleventy')
+	return spawn('pnpm', ['run', 'watch:html'], { stdio: 'inherit' })
 		.on('close', cb)
 })
 
 /**
- * Build Jekyll files do demo directory
+ * Build eleventy files do demo directory
  */
-gulp.task('build-jekyll', (cb) => {
+gulp.task('build-eleventy', (cb) => {
 	var env = Object.create(process.env)
 
 	if (argv.preview) {
-		env.JEKYLL_ENV = 'preview'
+		env.eleventy_ENV = 'preview'
 	} else {
-		env.JEKYLL_ENV = 'production'
+		env.eleventy_ENV = 'production'
 	}
 
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir, '--trace', '--config', '_config.yml,_config_prod.yml'], {
+	return spawn('pnpm', ['run', 'build:html'], {
 		env: env,
 		stdio: 'inherit'
 	})
@@ -359,10 +307,9 @@ gulp.task('browser-sync', () => {
 			baseDir: demoDir,
 			routes: {
 				'/node_modules': 'node_modules',
-				'/dist/css': `${distDir}/css`,
-				'/dist/js': `${distDir}/js`,
 				'/dist/img': `${srcDir}/img`,
 				'/static': `${srcDir}/static`,
+				'/dist': `${distDir}`,
 			},
 		},
 		port: 3000,
@@ -444,10 +391,10 @@ gulp.task('add-banner', () => {
 		.pipe(gulp.dest(`${distDir}`))
 })
 
-gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
+gulp.task('clean', gulp.series('clean-dirs'))
 
-gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
+gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-eleventy', gulp.parallel('watch-eleventy', 'watch', 'browser-sync')))
 
 gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
-gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'))
+gulp.task('build-demo', gulp.series('build-on', 'build-eleventy', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'))
 gulp.task('build', gulp.series('build-core', 'build-demo'))

package.json

@@ -22,7 +22,9 @@
     "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",
-    "illustrations": "node .build/import-illustrations.js"
+    "illustrations": "node .build/import-illustrations.js",
+    "build:html": "eleventy",
+    "watch:html": "eleventy --watch"
   },
   "repository": {
     "type": "git",
@@ -131,6 +133,7 @@
     ]
   },
   "devDependencies": {
+    "@11ty/eleventy": "^3.0.0",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@changesets/cli": "^2.27.11",
@@ -162,6 +165,7 @@
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
+    "html-minifier": "^4.0.0",
     "imageoptim-cli": "^3.1.9",
     "imask": "^7.6.1",
     "js-beautify": "^1.15.1",
@@ -177,7 +181,7 @@
     "rollup": "2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "1.78.0",
+    "sass": "1.71.0",
     "star-rating.js": "^4.3.1",
     "tinymce": "^7.6.0",
     "tom-select": "^2.4.1",
@@ -189,7 +193,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@tabler/icons": "^3.28.1",
-    "bootstrap": "5.3.3"
+    "bootstrap": "5.3.3",
+    "simply-beautiful": "^1.0.1"
   },
   "peerDependencies": {
     "@melloware/coloris": "^0.19.1",

src/pages/2-step-verification-code.html

@@ -1,11 +1,12 @@
 ---
-title: 2-Step Verification
-layout: single
+title: "2-Step Verification"
+layout: "single"
+permalink: 2-step-verification-code.html
 ---
 
 <form
 	class="card card-md"
-	action="{{ site.base }}/"
+	action="{{ page | relative }}/"
 	method="get"
 	autocomplete="off"
 	novalidate
@@ -41,15 +42,15 @@ layout: single
 
 		<div class="form-footer">
 			<div class="btn-list flex-nowrap">
-				{% include ui/button.html text="Cancel" block=true href="2-step-verification.html" %}
-				{% include ui/button.html text="Verify" block=true color="primary" %}
+				{% include "ui/button.html" text="Cancel" block=true href="2-step-verification.html" %}
+				{% include "ui/button.html" text="Verify" block=true color="primary" %}
 			</div>
 		</div>
 	</div>
 </form>
 
 <div class="text-center text-secondary mt-3">
-	It may take a minute to receive your code. Haven't received it? <a href="{{ site.base }}/">Resend a new code.</a>
+	It may take a minute to receive your code. Haven't received it? <a href="{{ page | relative }}/">Resend a new code.</a>
 </div>
 
 {% capture_global scripts %}

src/pages/2-step-verification.html

@@ -1,11 +1,12 @@
 ---
 title: 2-Step Verification
 layout: single
+permalink: 2-step-verification.html
 ---
 
 <form
 	class="card card-md"
-	action="{{ site.base }}/2-step-verification-code.html"
+	action="{{ page | relative }}/2-step-verification-code.html"
 	method="get"
 	autocomplete="off"
 	novalidate
@@ -16,7 +17,7 @@ layout: single
 		<div class="mb-3">
 			<label class="form-label">Country</label>
 			<select class="form-select">
-				{% for country in site.data.flags %}
+				{% for country in flags %}
 				<option value="{{ country.code }}"{% if country.code == 'US' %} selected{% endif %}>{{ country.name }}</option>
 				{% endfor %}
 			</select>	
@@ -36,7 +37,7 @@ layout: single
 		</div>
 
 		<div class="form-footer">
-			{% include ui/button.html element="button" type="submit" text="Send code" block=true color="primary" %}
+			{% include "ui/button.html" element="button" type="submit" text="Send code" block=true color="primary" %}
 		</div>
 	</div>
 </form>

src/pages/_data/menu.json

@@ -304,7 +304,7 @@
       },
       "marketing": {
         "title": "Marketing",
-        "url": "marketing.html",
+        "url": "marketing/index.html",
         "badge": "New"
       },
       "music": {

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

@@ -1,46 +0,0 @@
----
----
-<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/computer-fix.svg

@@ -1,39 +0,0 @@
----
----
-<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/dark/boy-girl.svg

@@ -1,42 +0,0 @@
----
----
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
-    <path d="M656.027 271.628C656.027 314.967 610.168 346.414 590.01 381.388C569.146 417.47 564.107 472.703 528.024 493.566C493.05 513.825 443.26 491.147 399.921 491.147C356.581 491.147 306.791 513.825 271.817 493.566C235.734 472.703 230.695 417.47 209.832 381.388C189.573 346.414 143.814 314.967 143.814 271.628C143.814 228.288 189.674 196.842 209.832 161.868C230.695 125.785 235.734 70.5527 271.817 49.6892C306.791 29.4305 356.581 52.1082 399.921 52.1082C443.26 52.1082 493.05 29.4305 528.024 49.6892C564.107 70.5527 569.146 125.785 590.01 161.868C610.168 196.842 656.027 228.288 656.027 271.628Z" fill="black" opacity="0.07"/>
-    <path d="M396.292 558.676C543.525 558.676 662.881 554.209 662.881 548.698C662.881 543.187 543.525 538.72 396.292 538.72C249.06 538.72 129.704 543.187 129.704 548.698C129.704 554.209 249.06 558.676 396.292 558.676Z" fill="black" opacity="0.26"/>
-    <path d="M484.281 224.761C480.351 231.01 459.588 262.96 422.094 269.108C408.488 271.325 394.579 269.814 381.779 264.875C374.622 262.154 367.87 258.525 361.621 254.09L370.692 232.017C371.7 232.925 373.211 234.235 375.328 235.747C382.383 240.887 394.881 247.841 407.782 243.507C415.039 241.089 420.079 236.452 429.754 226.978C438.221 218.612 445.881 209.541 452.634 199.765C458.681 188.678 471.179 185.957 479.746 193.314C487.91 200.269 490.026 214.279 484.281 224.761Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M381.779 264.774C374.622 262.053 367.87 258.424 361.621 253.99L370.692 231.917C371.7 232.824 373.211 234.134 375.328 235.646C374.824 240.484 374.421 248.245 376.84 254.494C378.15 258.122 379.864 261.549 381.779 264.774Z" fill="black" opacity="0.15"/>
-    <path d="M317.777 140.501C326.546 157.03 341.059 169.83 358.597 176.281L300.038 181.724C305.985 168.016 311.931 154.208 317.777 140.501Z" fill="#454C5E"/>
-    <path d="M294.193 425.533L291.37 459.298L287.238 508.483H283.307L272.926 457.484L268.491 435.612L294.193 425.533ZM351.743 425.533L349.123 457.282L344.789 508.483H340.858L330.779 459.197L325.941 435.612L351.743 425.533Z" fill="#DADBE0"/>
-    <path d="M268.491 435.612L294.293 425.533L291.471 459.298C285.021 458.895 278.873 458.29 273.027 457.484L268.491 435.612ZM351.743 425.533L349.123 457.383C343.277 458.189 337.129 458.895 330.779 459.298L325.941 435.713L351.743 425.533Z" fill="black" opacity="0.15"/>
-    <path d="M311.427 185.957C294.797 187.771 276.151 182.933 268.491 177.692C267.181 176.886 266.072 175.777 265.266 174.567C264.46 172.955 263.653 171.141 262.948 169.326C261.94 166.807 261.033 164.186 260.327 161.666C258.211 154.913 256.8 147.959 255.993 140.904C255.993 140.299 255.792 138.586 255.59 136.671C254.885 127.801 254.481 120.544 254.28 115.606C254.683 116.311 256.8 119.738 258.614 119.436C260.63 119.032 262.343 114.598 261.839 108.248H299.635L315.459 121.855C315.459 121.855 315.963 124.072 316.87 127.398C318.483 133.244 320.499 138.989 322.917 144.532C324.933 149.168 327.352 153.402 329.973 156.022C338.641 164.287 331.384 183.941 311.427 185.957Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M322.918 144.431C308.505 149.572 292.782 149.672 278.369 144.935C274.64 145.439 271.213 146.951 268.29 149.37C264.057 152.998 264.157 156.325 260.731 161.162L260.428 161.666C258.312 154.913 256.901 147.959 256.094 140.904C256.094 140.299 255.893 138.586 255.691 136.671C254.986 127.801 254.582 120.544 254.381 115.606C254.784 116.311 256.901 119.738 258.715 119.436C260.731 119.032 262.444 114.598 261.94 108.248H299.736L315.56 121.855C315.56 121.855 316.064 124.072 316.971 127.398C318.483 133.143 320.499 138.888 322.918 144.431Z" fill="black" opacity="0.1"/>
-    <path d="M349.425 256.61C353.054 276.264 355.674 290.677 357.388 300.857C357.489 301.461 357.589 301.965 357.69 302.57C359.807 314.363 362.024 326.155 364.141 338.048C324.43 338.754 284.719 339.56 245.007 340.366C245.108 337.645 245.108 334.823 245.209 332.101V332.001C244 301.865 244.503 271.628 246.62 241.492C246.721 239.274 246.922 237.057 247.124 234.84L241.177 248.749L217.391 234.638C218.298 230.909 221.221 219.52 230.091 211.759C230.091 211.759 238.053 204.804 247.023 203.595C247.83 203.494 248.636 203.393 249.442 203.192C249.543 203.192 249.745 203.091 249.845 203.091C254.885 202.385 259.824 201.68 264.46 201.377C275.748 200.37 287.037 200.269 298.325 200.874C309.11 201.579 319.894 203.091 330.477 205.51C333.097 206.115 335.92 206.921 338.54 207.727L340.757 208.534C341.06 208.634 341.261 208.735 341.564 208.836L343.076 209.34C344.789 209.945 361.419 214.782 365.048 215.992C369.18 217.302 372.909 219.52 376.034 222.442L360.815 264.069L349.425 256.61Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M261.436 206.82C261.436 219.419 276.554 229.498 295.201 229.498C313.847 229.498 328.965 219.318 328.965 206.82C328.965 206.115 328.864 205.51 328.763 204.804C318.181 202.385 307.396 200.773 296.612 200.168C285.323 199.563 274.035 199.664 262.746 200.672C261.94 202.688 261.436 204.704 261.436 206.82Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M332.291 121.351C329.67 127.196 323.522 131.43 322.716 131.933C305.078 143.927 278.469 130.321 271.313 126.289C269.499 131.127 264.963 134.756 264.359 137.779C264.258 138.686 264.056 139.593 263.955 140.4C263.754 141.811 263.653 143.323 263.754 144.734C263.855 147.153 264.056 149.672 264.56 151.991C265.467 156.123 269.196 167.21 275.244 181.724C266.677 182.328 258.11 182.832 249.643 183.437L228.881 184.848C225.958 174.971 225.353 164.589 226.966 154.41C227.066 153.502 227.369 152.192 227.772 150.479C228.566 147.092 229.576 143.759 230.796 140.501C230.997 139.896 231.3 139.392 231.501 138.787C233.315 134.655 235.432 130.623 238.052 126.894C244.705 117.218 253.574 109.256 263.855 103.511C267.382 101.697 290.06 90.0051 313.141 98.169C318.886 100.185 332.492 105.123 333.702 114.598C333.702 116.916 333.299 119.234 332.291 121.351ZM282.601 520.578C276.756 522.493 276.756 531.967 276.756 531.967L275.143 541.643L286.331 544.263L289.556 536.603L310.218 544.263C305.783 534.386 288.346 518.663 282.601 520.578ZM365.753 544.364C361.419 534.386 343.982 518.663 338.136 520.578C332.291 522.493 332.19 531.967 332.19 531.967L330.678 541.643L341.866 544.263L345.091 536.603L365.753 544.364Z" fill="#454C5E"/>
-    <path d="M332.291 121.351C329.67 127.196 323.522 131.43 322.716 131.933C305.078 143.927 278.469 130.321 271.313 126.289C268.794 123.971 266.576 121.451 264.661 118.629C285.323 130.724 310.722 131.732 332.291 121.351Z" fill="black" opacity="0.3"/>
-    <path d="M370.389 435.612H247.93L245.814 367.378L245.007 340.165L364.141 337.846L369.18 416.966L370.389 435.612Z" fill="#A6A9B3"/>
-    <path d="M370.389 435.612H247.93C247.426 403.561 247.023 371.409 246.519 339.358L306.388 338.955C284.114 382.899 277.663 399.328 279.477 400.739C281.896 402.755 298.627 375.239 307.094 379.976C310.117 381.69 310.52 386.729 311.327 390.156C314.048 400.638 326.647 412.128 369.18 416.966L370.389 435.612Z" fill="black" opacity="0.1"/>
-    <path d="M341.664 208.433L340.757 208.13C337.431 222.745 318.382 233.932 295.301 233.932C269.902 233.932 249.24 220.326 249.24 203.595V202.789C248.434 202.889 247.628 202.99 246.821 203.192V203.595C246.821 221.939 268.592 236.855 295.301 236.855C319.39 236.855 339.346 224.761 343.075 208.937L341.664 208.433Z" fill="#E1E1E1"/>
-    <path d="M300.038 251.671C302.098 251.671 303.768 249.686 303.768 247.237C303.768 244.787 302.098 242.802 300.038 242.802C297.979 242.802 296.309 244.787 296.309 247.237C296.309 249.686 297.979 251.671 300.038 251.671Z" fill="#E1E1E1"/>
-    <path d="M249.543 183.437L228.78 184.848C225.857 174.971 225.252 164.589 226.865 154.41C226.966 153.502 227.268 152.192 227.671 150.479L230.695 140.501C230.897 139.896 231.199 139.392 231.401 138.787C233.215 134.655 235.331 130.623 237.952 126.894C236.944 140.198 236.843 158.743 242.487 170.536C244.503 174.971 246.821 179.305 249.543 183.437Z" fill="black" opacity="0.3"/>
-    <path d="M364.141 337.947C324.429 338.653 284.718 339.459 245.007 340.265C245.108 337.544 245.108 334.722 245.209 332.001V331.9C309.109 335.024 346.704 311.54 357.791 302.57C359.807 314.262 362.024 326.054 364.141 337.947Z" fill="black" opacity="0.1"/>
-    <path d="M270.507 376.247C264.661 385.923 252.768 388.443 243.999 381.488C238.657 376.852 211.948 352.058 206.707 307.509C204.087 284.025 207.917 260.339 217.794 238.871C218.399 237.561 218.903 236.452 219.407 235.545L237.952 246.43C237.246 247.539 236.339 249.152 235.13 251.268C230.796 259.533 224.547 274.853 228.276 290.576C230.292 299.143 234.223 305.191 242.185 316.781C248.938 326.558 256.598 335.629 265.064 343.995C274.438 351.151 276.756 366.068 270.507 376.247Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M238.053 246.531C237.347 247.64 236.44 249.252 235.231 251.369C230.091 247.741 222.027 242.096 217.895 238.972C218.5 237.662 219.004 236.553 219.508 235.646L238.053 246.531Z" fill="#C7C6C5"/>
-    <path d="M296.612 200.168C285.323 199.563 274.035 199.664 262.746 200.672C261.839 202.587 261.436 204.704 261.436 206.82C261.436 219.419 276.554 229.498 295.201 229.498C313.847 229.498 328.965 219.318 328.965 206.82C328.965 206.115 328.864 205.51 328.763 204.804C318.281 202.385 307.497 200.773 296.612 200.168Z" fill="black" opacity="0.07"/>
-    <path d="M447.896 170.234C448.904 182.227 450.013 194.221 451.021 206.115C453.037 229.195 455.053 252.377 457.068 275.559C458.681 293.499 460.193 311.44 461.705 329.481H553.423C555.237 311.54 556.951 293.6 558.765 275.559L561.789 245.019C564.308 220.024 566.727 195.129 569.247 170.234H447.896Z" fill="#DADBE0"/>
-    <path d="M566.123 202.285C557.152 209.239 548.787 217 541.127 225.365C523.186 245.12 520.666 255.703 512.2 259.331C502.323 263.565 484.987 258.223 452.533 213.17L457.27 277.977C458.782 295.112 460.294 312.246 461.705 329.38H553.423C555.237 311.44 556.951 293.499 558.765 275.559H559.168L566.123 202.285Z" fill="black" opacity="0.1"/>
-    <path d="M421.187 265.48C423.405 271.628 426.428 277.474 430.158 282.916C431.266 284.529 432.476 286.041 433.685 287.452C439.027 293.902 445.881 299.043 453.642 302.268C457.572 303.981 461.705 305.191 465.938 305.896C471.784 306.904 477.831 307.307 483.778 306.904C484.282 306.904 484.786 306.904 485.29 306.803H485.894L487.003 306.702H487.91C492.446 306.199 496.981 305.493 501.416 304.384H501.517C505.447 303.477 509.378 302.268 513.208 300.857C514.922 300.252 516.534 299.647 518.147 298.942C520.364 298.035 522.481 297.027 524.396 295.918C527.923 294.003 531.35 291.886 534.676 289.568C536.188 288.56 537.498 287.452 538.708 286.545C530.947 283.017 523.186 279.59 515.426 276.062C510.89 274.047 506.355 272.031 501.819 269.914C500.005 271.426 497.888 272.636 495.772 273.543C494.159 274.248 492.345 274.752 490.631 275.055C489.523 275.256 488.313 275.357 487.104 275.256C483.576 275.055 480.351 273.341 477.327 270.62C477.126 270.519 477.025 270.318 476.924 270.217C475.513 268.906 474.203 267.495 473.094 265.984C460.596 250.059 452.936 219.217 452.936 219.217C456.363 207.626 456.564 195.33 453.541 183.639C452.331 179.002 450.517 174.567 448.199 170.334C443.462 171.241 439.027 173.056 435.096 175.676C432.98 177.087 431.166 178.7 429.452 180.615C412.822 197.951 410.302 236.251 421.187 265.48Z" fill="#DADBE0"/>
-    <path d="M447.896 170.233C440.74 171.544 434.088 175.172 429.149 180.514C412.822 197.951 410.302 236.251 421.187 265.48C423.404 271.628 426.428 277.474 430.157 282.916C431.266 284.529 432.476 286.041 433.685 287.452C439.027 293.902 445.881 299.042 453.641 302.268C455.657 303.074 457.673 303.78 459.689 304.384L461.906 329.38H553.624C555.439 311.44 557.152 293.499 558.966 275.458L561.99 244.919C564.51 219.923 566.929 195.028 569.348 170.133H447.896V170.233Z" fill="black" opacity="0.05"/>
-    <path d="M549.694 80.8332C549.493 85.7719 549.089 93.0287 548.384 101.999C548.182 104.015 548.082 105.728 547.981 106.232C546.872 116.009 544.453 125.584 540.925 134.756C540.22 136.57 539.414 138.283 538.607 139.997C535.483 146.145 512.402 153.603 492.345 151.487C472.288 149.37 465.031 129.716 473.699 121.351C476.319 118.73 478.839 114.497 480.855 109.861C483.274 104.317 485.29 98.5721 486.801 92.6256C487.809 89.2995 488.313 87.0821 488.313 87.0821L504.137 73.3748H542.034C541.631 79.7245 543.244 84.1592 545.259 84.5624C547.275 84.9655 549.291 81.5387 549.694 80.8332Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M549.694 80.8332C549.492 85.7719 549.089 93.0287 548.384 101.999C548.182 104.015 548.081 105.728 547.981 106.232C546.872 116.009 544.453 125.584 540.925 134.756C538.506 133.949 536.188 132.74 534.172 131.127C532.056 129.313 530.242 127.096 528.931 124.576C527.621 121.855 526.714 119.032 526.311 116.009C525.908 114.094 525.706 112.179 525.504 110.264C510.991 115.102 495.268 114.9 480.754 109.76C483.173 104.216 485.189 98.4713 486.701 92.5248C487.708 89.1987 488.212 86.9813 488.212 86.9813L504.137 73.3748H542.034C541.631 79.7245 543.243 84.1592 545.259 84.5624C547.275 84.9655 549.291 81.5387 549.694 80.8332Z" fill="black" opacity="0.1"/>
-    <path d="M554.33 88.8963C554.129 97.1611 550.5 105.123 545.562 109.961C544.453 110.868 543.344 111.977 542.337 113.086C539.716 116.311 538.003 120.141 537.297 124.173C535.483 122.056 534.475 119.436 534.173 116.714C533.87 112.481 535.684 104.821 535.785 103.712C535.785 103.712 535.785 103.41 535.886 103.108C535.886 102.503 535.987 102.301 536.088 101.293C536.188 99.2777 536.188 97.2619 536.088 95.2461V94.9437C526.513 100.79 499.098 115.001 480.754 100.991C477.932 98.7737 475.311 96.254 473.195 93.3311C472.993 93.1295 472.792 92.8271 472.691 92.5248C472.187 91.8192 471.683 91.0129 471.28 90.3074C471.28 90.2066 471.179 90.2066 471.179 90.1058V90.005C470.07 87.9892 469.264 85.8727 468.861 83.5545L468.76 82.6474C468.659 81.6395 468.659 80.6316 468.76 79.6237C469.264 75.6929 471.179 72.0645 474.001 69.444C479.343 64.1021 487.205 60.9777 491.337 59.365C507.463 52.9145 531.854 51.3019 545.763 65.9163C549.19 69.7463 551.811 74.2819 553.121 79.2206C553.927 82.4458 554.431 85.6711 554.33 88.8963Z" fill="#454C5E"/>
-    <path d="M535.987 95.0445C526.412 100.89 498.997 115.102 480.653 101.092C477.831 98.8745 475.211 96.3548 473.094 93.4319C472.892 93.2303 472.691 92.9279 472.59 92.6256C472.086 91.92 471.582 91.1137 471.179 90.4082C471.179 90.3074 471.078 90.3074 471.078 90.2066V90.1058C469.97 88.09 469.264 85.8727 468.861 83.6553C473.195 87.8885 478.133 91.3153 483.475 93.835C510.285 106.434 538.406 90.7106 542.941 88.1908L543.243 87.9893C541.026 90.509 538.607 92.8272 535.987 95.0445Z" fill="black" opacity="0.3"/>
-    <path d="M553.423 329.481L545.562 520.276H530.04L508.673 372.82L493.857 520.276H482.468L461.806 329.481H553.423Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M512.704 546.783L547.275 542.953C547.275 542.953 548.485 533.983 543.143 530.858C537.801 527.734 518.349 538.317 512.704 546.783ZM461.806 546.783L496.376 542.953C496.376 542.953 497.586 533.983 492.244 530.858C486.902 527.734 467.349 538.317 461.806 546.783ZM421.188 265.48C423.405 271.628 426.429 277.474 430.158 282.916C436.004 291.483 444.067 298.236 453.642 302.268C454.65 294.003 452.835 285.638 448.703 278.381C441.648 266.387 430.158 261.246 421.188 265.48Z" fill="#454C5E"/>
-    <path d="M521.07 167.714C512.503 176.281 504.238 179.405 497.989 180.615L496.981 180.816L483.173 169.931L521.07 167.714Z" fill="#E1E1E1"/>
-    <path d="M453.843 227.583C457.976 241.189 462.209 254.796 466.341 268.402C473.497 277.373 481.762 285.234 491.035 291.987C505.851 302.469 530.141 314.262 551.811 313.455C563.099 313.052 573.682 309.323 581.846 300.353C588.599 292.894 591.824 284.025 595.049 271.628C595.856 268.604 596.662 265.278 597.468 261.75C599.786 252.175 606.64 222.342 597.166 195.532C593.739 185.856 589.808 181.22 587.591 179.002C585.071 176.382 582.048 174.265 578.721 172.854C575.698 171.443 572.473 170.637 569.146 170.334C568.945 171.241 568.743 172.552 568.441 174.265C567.635 179.305 567.131 183.538 566.727 186.561C566.627 187.469 566.425 188.98 566.324 190.795C565.921 194.826 565.619 198.757 565.518 202.486C565.417 210.449 564.309 218.31 562.192 225.97C560.277 233.025 557.455 239.778 553.726 246.128C545.058 249.958 535.785 252.377 526.311 253.284C491.74 256.207 465.031 236.956 453.843 227.583Z" fill="#DADBDF"/>
-    <path d="M551.911 313.455C563.2 313.052 573.782 309.323 581.946 300.353C588.699 292.894 591.925 284.025 595.15 271.628C587.591 272.837 578.923 277.171 570.86 284.428C561.184 292.995 554.431 303.78 551.911 313.455Z" fill="#454C5E"/>
-    <path d="M493.857 520.276L508.673 372.82L502.021 329.481H461.806L482.468 520.276H493.857Z" fill="black" opacity="0.22"/>
-    <path d="M501.013 178.196L478.637 162.17L473.497 167.613L488.716 190.291L501.013 178.196ZM502.021 178.095L535.987 156.929L543.647 164.085L520.667 193.919L502.021 178.095Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M501.013 178.196L478.637 162.17L473.497 167.613L488.716 190.291L501.013 178.196Z" fill="black" opacity="0.22"/>
-</svg>

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

@@ -1,35 +0,0 @@
----
----
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
-    <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.561 539.075 370.672 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.38 93.1471 412.534 93.1471C370.687 93.1471 322.561 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="black" opacity="0.07"/>
-    <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="black" opacity="0.26"/>
-    <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-primary, var(--tblr-illustrations-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="#DADCE0"/>
-    <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.929 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.287 225.409 549.372 225.181 549.473 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.649 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.21 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M600.816 220.246C592.32 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.949 224.094 579.678 224.036L572.069 212.595C578.203 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="#232B41"/>
-    <path d="M585.584 197.736C585.395 190.871 582.537 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.686C184.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.262C178.006 432.201 184.702 434.979 191.686 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.78 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.78 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.998 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.111 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.111 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.998 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.572V198.336C585.599 198.179 585.599 197.964 585.584 197.736ZM575.573 408.572C575.569 412.898 573.849 417.047 570.789 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.382 408.572V198.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.572Z" fill="#444B5E"/>
-    <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-primary, var(--tblr-illustrations-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="#DADCE0"/>
-    <path d="M211.809 279.856H368.971C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.971 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-primary, var(--tblr-illustrations-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.815 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADCE0"/>
-    <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.15"/>
-    <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="#444B5E"/>
-    <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.71 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.22 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.3"/>
-    <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.15"/>
-    <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.356V364.107L575.588 372.688V346.817L585.384 342.197L585.599 343.356Z" 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.39 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.875 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.86 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-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/light/boy-girl.svg

@@ -1,42 +0,0 @@
----
----
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
-    <path d="M656.009 271.607C656.009 314.948 610.189 346.365 589.94 381.35C569.055 417.454 564.036 472.618 527.932 493.502C492.947 513.751 443.135 491.103 399.804 491.103C356.473 491.103 306.661 513.751 271.676 493.502C235.582 472.618 230.552 417.454 209.668 381.35C189.429 346.365 143.608 314.927 143.608 271.607C143.608 228.286 189.429 196.838 209.668 161.853C230.552 125.759 235.582 70.555 271.676 49.701C306.661 29.4618 356.473 52.0998 399.804 52.0998C443.135 52.0998 492.947 29.4618 527.932 49.701C564.036 70.5853 569.055 125.759 589.94 161.853C610.189 196.838 656.009 228.276 656.009 271.607Z" fill="rgba(0, 20, 80, .04)"/>
-    <path d="M396.357 558.655C543.583 558.655 662.934 554.187 662.934 548.676C662.934 543.165 543.583 538.698 396.357 538.698C249.13 538.698 129.78 543.165 129.78 548.676C129.78 554.187 249.13 558.655 396.357 558.655Z" fill="#A6A9B3"/>
-    <path d="M484.268 224.768C480.317 231.058 459.554 262.938 422.069 269.117C408.493 271.303 394.58 269.846 381.752 264.894C374.591 262.189 367.814 258.56 361.593 254.099L370.665 232.025C371.673 232.902 373.235 234.243 375.281 235.734C382.336 240.875 394.875 247.83 407.746 243.485C414.983 241.056 420.043 236.43 429.739 226.935C438.206 218.604 445.866 209.492 452.619 199.721C458.667 188.634 471.175 185.923 479.723 193.311C487.937 200.245 490.094 214.326 484.268 224.768Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M381.782 264.823C374.621 262.118 367.844 258.489 361.624 254.028L370.695 231.955C371.703 232.832 373.265 234.172 375.311 235.664C374.757 240.452 374.434 248.233 376.813 254.532C378.2 258.086 379.862 261.527 381.782 264.823Z" fill="black" opacity="0.15"/>
-    <path d="M317.819 140.495C326.542 157.066 341.085 169.825 358.65 176.317L300.059 181.73C305.986 167.981 311.906 154.237 317.819 140.495Z" fill="#232B41"/>
-    <path d="M294.244 425.497L291.401 459.293L287.289 508.45H283.287L272.916 457.449L268.481 435.617L294.244 425.497ZM351.776 425.497L349.115 457.307L344.832 508.45H340.83L330.801 459.202L326.003 435.617L351.776 425.497Z" fill="#DADBE0"/>
-    <path d="M268.471 435.617L294.243 425.538L291.401 459.333C284.991 458.92 278.802 458.325 272.916 457.489L268.471 435.617ZM351.776 425.497L349.105 457.307C343.279 458.134 337.151 458.769 330.801 459.202L326.003 435.617L351.776 425.497Z" fill="black" opacity="0.15"/>
-    <path d="M311.439 185.993C294.768 187.817 276.161 182.969 268.471 177.758C267.15 176.982 266.042 175.892 265.246 174.583C264.409 172.92 263.673 171.197 262.947 169.372C261.94 166.873 261.073 164.272 260.297 161.672C258.229 154.906 256.782 147.967 255.973 140.939C255.973 140.364 255.761 138.651 255.549 136.665C254.824 127.765 254.461 120.538 254.249 115.579C254.672 116.305 256.749 119.692 258.623 119.379C260.639 118.966 262.323 114.531 261.859 108.181H299.666L315.45 121.828C315.45 121.828 315.914 124.016 316.902 127.342C318.502 133.185 320.506 138.911 322.899 144.477C324.915 149.113 327.324 153.387 329.955 155.987C338.673 164.292 331.436 183.907 311.439 185.993Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M322.899 144.477C308.504 149.601 292.809 149.767 278.308 144.95C274.606 145.471 271.118 147.002 268.229 149.375C263.955 152.973 264.066 156.3 260.629 161.198L260.317 161.672C258.249 154.906 256.802 147.967 255.993 140.939C255.993 140.364 255.781 138.651 255.569 136.665C254.844 127.765 254.481 120.538 254.269 115.579C254.692 116.305 256.769 119.692 258.643 119.379C260.659 118.966 262.343 114.531 261.879 108.181H299.686L315.47 121.828C315.47 121.828 315.934 124.016 316.922 127.342C318.515 133.185 320.512 138.91 322.899 144.477Z" fill="black" opacity="0.1"/>
-    <path d="M349.417 256.568C353.056 276.193 355.636 290.616 357.41 300.776C357.511 301.341 357.602 301.905 357.703 302.469C359.819 314.272 361.996 326.085 364.113 337.908C324.414 338.62 284.705 339.386 244.986 340.206C245.046 337.475 245.087 334.653 245.157 331.901V331.76C243.969 301.583 244.43 271.364 246.538 241.238C246.689 239.01 246.851 236.803 247.032 234.585L241.085 248.475L217.258 234.364C218.115 230.594 221.108 219.245 229.917 211.484C229.917 211.484 237.91 204.529 246.83 203.269C247.659 203.192 248.48 203.058 249.29 202.866C249.432 202.828 249.577 202.802 249.723 202.785C254.813 202.06 259.742 201.404 264.378 201.052C275.651 200.072 286.979 199.903 298.275 200.548C309.102 201.205 319.856 202.755 330.428 205.184C333.089 205.819 335.861 206.545 338.492 207.412L340.729 208.168C341.011 208.258 341.283 208.339 341.546 208.44L343.017 208.974C344.69 209.619 361.331 214.467 364.98 215.586C369.074 216.917 372.829 219.121 375.986 222.047L360.777 264.077L349.417 256.568Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M261.486 206.847C261.486 219.406 276.605 229.566 295.302 229.566C313.999 229.566 329.047 219.406 329.047 206.847C329.049 206.17 328.981 205.495 328.846 204.831C318.271 202.364 307.503 200.813 296.662 200.195C285.372 199.553 274.05 199.731 262.786 200.729C261.914 202.65 261.471 204.738 261.486 206.847Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M332.273 121.355C329.612 127.191 323.514 131.434 322.687 131.988C305.028 143.952 278.419 130.366 271.283 126.304C269.509 131.142 264.923 134.79 264.348 137.764C264.197 138.651 264.046 139.538 263.935 140.364C263.759 141.799 263.675 143.243 263.683 144.688C263.736 147.141 264.013 149.583 264.51 151.986C265.387 156.158 269.116 167.246 275.214 181.689C266.673 182.254 258.126 182.828 249.572 183.413L228.819 184.804C225.917 174.917 225.256 164.508 226.884 154.334C227.035 153.427 227.277 152.096 227.64 150.433C228.402 147.048 229.413 143.722 230.663 140.485C230.885 139.921 231.127 139.336 231.369 138.752C233.151 134.57 235.349 130.579 237.931 126.838C244.628 117.17 253.455 109.17 263.734 103.454C267.271 101.599 289.94 89.9577 313.001 98.132C318.736 100.148 332.373 105.056 333.523 114.591C333.757 116.919 333.324 119.265 332.273 121.355ZM282.572 520.605C276.776 522.52 276.685 532.025 276.685 532.025L275.113 541.722L286.301 544.362L289.496 536.742L310.149 544.362C305.835 534.384 288.377 518.7 282.572 520.605ZM365.746 544.362C361.422 534.384 343.965 518.7 338.169 520.605C332.374 522.51 332.273 532.025 332.273 532.025L330.71 541.722L341.878 544.362L345.073 536.742L365.746 544.362Z" fill="#232B41"/>
-    <path d="M332.273 121.355C329.612 127.191 323.524 131.434 322.687 131.978C305.028 143.963 278.419 130.366 271.283 126.304C268.795 123.996 266.559 121.431 264.61 118.653C274.822 124.592 286.333 127.939 298.137 128.401C309.941 128.863 321.678 126.426 332.323 121.304L332.273 121.355Z" fill="black" opacity="0.3"/>
-    <path d="M370.392 435.617H247.959L245.822 367.38L244.986 340.216L364.113 337.898L369.203 417.02L370.392 435.617Z" fill="#A6A9B3"/>
-    <path d="M370.393 435.617H247.959L246.548 339.349L306.379 338.956C284.144 382.912 277.633 399.281 279.427 400.763C281.886 402.778 298.578 375.302 307.034 380.03C310.108 381.753 310.431 386.813 311.308 390.2C314.039 400.662 326.588 412.142 369.203 417.021L370.393 435.617Z" fill="black" opacity="0.1"/>
-    <path d="M341.626 208.46H341.576L340.76 208.198C337.474 222.803 318.353 234.051 295.322 234.051C269.932 234.051 249.28 220.444 249.28 203.733V202.886C248.504 203.007 247.687 203.138 246.841 203.299C246.83 203.444 246.83 203.588 246.841 203.733C246.841 222.037 268.582 236.994 295.322 236.994C319.381 236.994 339.389 224.899 343.088 209.065L341.626 208.46Z" fill="#E1E1E1"/>
-    <path d="M300.059 251.619C302.108 251.619 303.768 249.643 303.768 247.205C303.768 244.766 302.108 242.79 300.059 242.79C298.011 242.79 296.35 244.766 296.35 247.205C296.35 249.643 298.011 251.619 300.059 251.619Z" fill="#E1E1E1"/>
-    <path d="M249.522 183.443L228.769 184.834C225.867 174.948 225.205 164.538 226.833 154.364C226.985 153.457 227.226 152.127 227.589 150.464L230.613 140.515C230.835 139.951 231.077 139.366 231.319 138.782C233.1 134.6 235.299 130.609 237.88 126.868C236.872 140.173 236.721 158.719 242.376 170.511C244.481 174.969 246.868 179.288 249.522 183.443Z" fill="black" opacity="0.3"/>
-    <path d="M364.113 337.908C324.414 338.62 284.705 339.387 244.986 340.206C245.046 337.475 245.087 334.653 245.157 331.901V331.76C309.1 334.935 346.686 311.39 357.703 302.469C359.819 314.272 362.037 326.085 364.113 337.908Z" fill="black" opacity="0.1"/>
-    <path d="M270.567 376.3C264.681 385.946 252.848 388.516 244.099 381.572C238.787 376.885 212.017 352.17 206.806 307.58C204.163 284.125 208.001 260.395 217.903 238.97C218.518 237.66 219.052 236.571 219.505 235.684L238.061 246.539C237.396 247.618 236.398 249.281 235.28 251.388C230.915 259.653 224.696 274.963 228.426 290.697C230.441 299.284 234.352 305.332 242.335 316.903C249.081 326.68 256.742 335.792 265.215 344.117C274.488 351.203 276.776 366.12 270.567 376.3Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M238.062 246.539C237.396 247.618 236.399 249.281 235.28 251.388C230.129 247.779 222.116 242.125 217.893 238.97C218.508 237.66 219.042 236.571 219.496 235.684L238.062 246.539Z" fill="#C7C6C5"/>
-    <path d="M296.663 200.165C285.373 199.522 274.051 199.701 262.786 200.699C261.91 202.629 261.466 204.727 261.486 206.847C261.486 219.406 276.605 229.566 295.302 229.566C313.999 229.566 329.047 219.406 329.047 206.847C329.049 206.17 328.981 205.495 328.846 204.831C318.272 202.354 307.505 200.793 296.663 200.165Z" fill="black" opacity="0.07"/>
-    <path d="M447.942 170.239C448.97 182.234 450.009 194.211 451.057 206.172L457.104 275.578C458.677 293.526 460.239 311.484 461.791 329.452H553.513C555.293 311.477 557.081 293.519 558.875 275.578C559.903 265.405 560.911 255.234 561.899 245.068C564.392 220.112 566.871 195.169 569.337 170.239H447.942Z" fill="#DADBE0"/>
-    <path d="M566.122 202.251C557.117 209.208 548.742 216.945 541.095 225.373C523.164 245.088 520.675 255.661 512.158 259.32C502.27 263.573 484.944 258.211 452.468 213.197L457.246 278.037H457.296C458.801 295.172 460.293 312.307 461.771 329.442H553.493C555.274 311.48 557.061 293.526 558.855 275.578H559.248L566.122 202.251Z" fill="black" opacity="0.1"/>
-    <path d="M421.182 265.468C423.419 271.631 426.427 277.487 430.133 282.895C431.224 284.46 432.388 285.974 433.62 287.431C439.007 293.89 445.851 298.978 453.587 302.278C457.546 303.959 461.68 305.19 465.914 305.947C471.802 307.002 477.795 307.341 483.764 306.955C484.258 306.955 484.772 306.904 485.226 306.864C485.414 306.875 485.602 306.875 485.79 306.864L486.899 306.773L487.423 306.723H487.786C492.348 306.245 496.873 305.467 501.333 304.395H501.403C505.351 303.447 509.241 302.276 513.055 300.887C514.768 300.292 516.421 299.637 518.004 298.942C520.208 297.987 522.291 296.98 524.253 295.918C527.799 294.033 531.217 291.915 534.483 289.578C535.955 288.52 537.306 287.502 538.515 286.554C530.754 283.067 522.983 279.559 515.212 276.092C510.669 274.076 506.134 272.037 501.605 269.974C499.747 271.442 497.716 272.678 495.557 273.653C493.913 274.384 492.177 274.886 490.397 275.144C489.246 275.345 488.076 275.413 486.909 275.346C483.432 275.144 480.156 273.431 477.112 270.679C476.955 270.556 476.806 270.421 476.669 270.276C475.275 268.952 473.982 267.527 472.798 266.013C460.3 250.067 452.64 219.245 452.64 219.245C456.096 207.654 456.305 195.336 453.244 183.635C451.991 179.004 450.208 174.533 447.933 170.31C443.245 171.192 438.787 173.02 434.829 175.682C432.759 177.096 430.853 178.735 429.145 180.57C412.836 197.977 410.327 236.248 421.182 265.468Z" fill="#DADBE0"/>
-    <path d="M447.942 170.239C440.754 171.566 434.18 175.162 429.185 180.5C412.836 197.977 410.327 236.248 421.182 265.468C423.419 271.631 426.426 277.487 430.132 282.895C431.224 284.46 432.388 285.974 433.62 287.431C439.007 293.89 445.85 298.978 453.587 302.278C455.56 303.113 457.58 303.836 459.634 304.445L461.822 329.452H553.543C555.324 311.477 557.111 293.519 558.905 275.578C559.933 265.398 560.941 255.228 561.929 245.068C564.402 220.112 566.871 195.169 569.337 170.239H447.942Z" fill="black" opacity="0.05"/>
-    <path d="M549.723 80.8057C549.532 85.7647 549.139 93.0318 548.403 101.972C548.201 103.988 548.05 105.651 548.01 106.246C546.867 116.013 544.496 125.597 540.954 134.77C540.218 136.595 539.483 138.308 538.646 139.981C535.552 146.17 512.44 153.629 492.342 151.421C472.244 149.214 465.037 129.67 473.725 121.314C476.376 118.714 478.835 114.44 480.851 109.784C483.248 104.199 485.248 98.4534 486.838 92.5883C487.846 89.2521 488.31 87.0447 488.31 87.0447L504.155 73.3873H542.063C541.619 79.7776 543.293 84.1923 545.298 84.5854C547.304 84.9785 549.28 81.5414 549.723 80.8057Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);"/>
-    <path d="M549.723 80.8057C549.532 85.7647 549.139 93.0318 548.403 101.972C548.201 103.988 548.05 105.651 548.01 106.246C546.867 116.013 544.496 125.597 540.954 134.77C538.498 133.998 536.213 132.763 534.221 131.132C532.06 129.304 530.276 127.071 528.97 124.56C527.653 121.869 526.765 118.988 526.339 116.023C525.966 114.114 525.703 112.186 525.553 110.247C511.018 115.084 495.283 114.92 480.852 109.784C483.248 104.199 485.249 98.4534 486.839 92.5883C487.847 89.2521 488.31 87.0447 488.31 87.0447L504.155 73.3873H542.063C541.62 79.7776 543.293 84.1923 545.299 84.5854C547.304 84.9785 549.28 81.5414 549.723 80.8057Z" fill="black" opacity="0.1"/>
-    <path d="M554.39 88.9094C554.168 97.1543 550.6 105.167 545.581 109.975C544.424 110.928 543.336 111.962 542.325 113.069C539.754 116.292 538.023 120.101 537.286 124.157C535.521 122.039 534.432 119.441 534.161 116.698C533.899 112.515 535.693 104.804 535.784 103.726C535.784 103.726 535.784 103.434 535.874 103.091C535.874 102.496 535.965 102.254 536.046 101.327C536.185 99.3137 536.185 97.293 536.046 95.2795C536.068 95.1834 536.068 95.0834 536.046 94.9872C526.45 100.833 499.105 115.075 480.7 101.035C477.84 98.8553 475.307 96.2755 473.181 93.3746C472.961 93.1435 472.781 92.8779 472.647 92.5884C472.129 91.8669 471.657 91.1127 471.236 90.3306C471.196 90.2645 471.152 90.2005 471.105 90.1391V90.0887C469.983 88.0897 469.206 85.9156 468.807 83.6581L468.666 82.7711C468.583 81.7649 468.583 80.7536 468.666 79.7474C469.185 75.8426 471.04 72.2382 473.917 69.5471C479.249 64.2454 487.121 61.1007 491.263 59.4678C507.39 52.9868 531.812 51.4044 545.692 65.9992C549.166 69.8125 551.7 74.3862 553.09 79.3543C553.967 82.463 554.405 85.6793 554.39 88.9094Z" fill="#232B41"/>
-    <path d="M535.985 94.9973C526.39 100.843 499.045 115.085 480.64 101.045C477.779 98.8654 475.246 96.2855 473.121 93.3846C472.901 93.1536 472.72 92.888 472.586 92.5984C472.068 91.877 471.597 91.1228 471.175 90.3407C471.135 90.2745 471.091 90.2106 471.044 90.1492V90.0988C469.942 88.0928 469.186 85.9154 468.807 83.6581C473.1 87.8483 478.055 91.3015 483.472 93.8785C510.313 106.478 538.455 90.7741 542.94 88.2744L543.283 88.0728C541.025 90.5582 538.585 92.8727 535.985 94.9973Z" fill="black" opacity="0.3"/>
-    <path d="M553.453 329.452L545.571 520.263H530.079L508.64 372.843L493.924 520.263H482.444L461.771 329.452H553.453Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M512.722 546.751L547.304 542.901C547.304 542.901 548.554 533.94 543.131 530.806C537.709 527.671 518.377 538.355 512.722 546.751ZM461.822 546.751L496.394 542.901C496.394 542.901 497.644 533.94 492.231 530.806C486.818 527.671 467.416 538.355 461.822 546.751ZM421.182 265.468C423.419 271.631 426.427 277.487 430.133 282.895C435.934 291.468 444.075 298.195 453.587 302.278C454.555 293.997 452.811 285.626 448.618 278.42C441.663 266.406 430.163 261.275 421.182 265.468Z" fill="#232B41"/>
-    <path d="M521.037 167.76C512.44 176.317 504.235 179.482 497.986 180.631L496.978 180.812L483.18 169.967L521.037 167.76Z" fill="#E1E1E1"/>
-    <path d="M453.889 227.57C458.049 241.184 462.218 254.794 466.398 268.401C473.514 277.355 481.834 285.282 491.122 291.957C505.918 302.459 530.21 314.212 551.93 313.446C563.199 313.073 573.772 309.323 581.967 300.343C588.73 292.894 591.975 284.024 595.191 271.647C595.987 268.573 596.793 265.297 597.64 261.759C599.958 252.184 606.852 222.319 597.358 195.538C593.901 185.812 589.97 181.185 587.782 178.978C585.232 176.388 582.23 174.287 578.923 172.779C575.892 171.414 572.65 170.575 569.337 170.3C569.166 171.227 568.934 172.568 568.672 174.18C567.856 179.22 567.332 183.493 566.999 186.437C566.898 187.374 566.737 188.846 566.576 190.63C566.193 194.661 565.914 198.549 565.739 202.291C565.655 210.229 564.547 218.122 562.443 225.776C560.52 232.845 557.659 239.625 553.936 245.935C545.228 249.79 535.952 252.206 526.47 253.091C491.767 256.246 465.067 236.914 453.889 227.57Z" fill="#DADBDF"/>
-    <path d="M551.931 313.466C563.199 313.093 573.772 309.344 581.967 300.363C588.73 292.914 591.976 284.044 595.191 271.667C587.672 272.897 579.004 277.251 570.88 284.458C561.183 293.015 554.45 303.79 551.931 313.466Z" fill="#232B41"/>
-    <path d="M493.924 520.263L508.64 372.843L502.079 329.452H461.771L482.444 520.263H493.924Z" fill="black" opacity="0.22"/>
-    <path d="M501.03 178.242L478.664 162.176L473.554 167.588L488.754 190.287L501.03 178.242ZM502.079 178.081L535.975 156.955L543.716 164.071L520.685 193.915L502.079 178.081Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));"/>
-    <path d="M501.03 178.242L478.664 162.176L473.554 167.588L488.754 190.287L501.03 178.242Z" fill="black" opacity="0.22"/>
-</svg>

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

@@ -1,35 +0,0 @@
----
----
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="none" viewBox="0 0 800 600">
-    <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="rgba(0, 20, 80, .04)"/>
-    <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="#A7AAB3"/>
-    <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-primary, var(--tblr-illustrations-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="#DADCE0"/>
-    <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-primary, var(--tblr-illustrations-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"/>
-    <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.262C178.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.572V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.572C575.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.572V198.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.572Z" fill="#232B41"/>
-    <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-primary, var(--tblr-illustrations-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="#DADCE0"/>
-    <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-primary, var(--tblr-illustrations-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="#DADCE0"/>
-    <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"/>
-    <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-primary, var(--tblr-illustrations-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/_includes/cards/activity.html

@@ -1,5 +1,5 @@
 <div class="card" style="height: 28rem">
 	<div class="card-body card-body-scrollable card-body-scrollable-shadow">
-		{% include parts/activity.html %}
+		{% include "parts/activity.html" %}
 	</div>
 </div>

src/pages/_includes/cards/auth-lock.html

@@ -1,5 +1,5 @@
-{% assign person = site.data.people[0] %}
-<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+{% assign person = people[0] %}
+<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body text-center">
 		<div class="mb-4">
 			<h2 class="card-title">Account Locked</h2>
@@ -7,7 +7,7 @@
 		</div>
 
 		<div class="mb-4">
-			{% include ui/avatar.html person=person size="xl" class="mb-3" %}
+			{% include "ui/avatar.html" person=person size="xl" class="mb-3" %}
 			<h3>{{ person.full_name }}</h3>
 		</div>
 
@@ -16,7 +16,7 @@
 		</div>
 
 		<div>
-			{% include ui/button.html color="primary" block=true icon="lock-open" text="Unlock" %}
+			{% include "ui/button.html" color="primary" block=true icon="lock-open" text="Unlock" %}
 		</div>
 	</div>
 </form>

src/pages/_includes/cards/blog-single.html

@@ -1,7 +1,7 @@
 {% assign article-id = include.article-id | default: 2 %}
-{% assign article = include.article | default: site.data.articles[article-id] %}
+{% assign article = include.article | default: articles[article-id] %}
 {% assign type = include.type | default: 'none' %}
-{% assign author = site.data.people[article.author] %}
+{% assign author = people[article.author] %}
 {% assign liked = include.liked | default: false %}
 {% assign truncate = include.truncate | default: 100 %}
 {% assign avatar = article.author %}
@@ -12,14 +12,14 @@
    <div class="text-secondary">{{ article.description | truncate: truncate }}</div>
 
    <div class="d-flex align-items-center pt-4 mt-auto">
-      {% include ui/avatar.html person-id=avatar %}
+      {% include "ui/avatar.html" person-id=avatar %}
       <div class="ms-3">
-         <a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
+         <a href="{{ page | relative }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
          <div class="text-secondary">3 days ago</div>
       </div>
       <div class="ms-auto">
          <a href="#" class="icon d-none d-md-inline-block ms-3 {% if liked %}text-red{% else %}text-secondary{% endif %}">
-            {% include ui/icon.html icon="heart" use-svg=true  %}
+            {% include "ui/icon.html" icon="heart" use-svg=true  %}
          </a>
       </div>
    </div>
@@ -31,7 +31,7 @@
    <div class="row row-0 flex-fill">
       <div class="col-md-3">
          <a href="#">
-            <img src="{{ site.base }}/static/photos/{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
+            <img src="{{ page | relative }}/static/photos/{{ photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
          </a>
       </div>
       <div class="col">
@@ -43,7 +43,7 @@
    {% else %}
       {% if type == 'image' %}
       <a href="#">
-         <img class="card-img-top" src="{{ site.base }}/static/photos/{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
+         <img class="card-img-top" src="{{ page | relative }}/static/photos/{{ photos[article.image].file }}" alt="{{ article.title | escape}}">
       </a>
       {% endif %}
       <div class="card-body d-flex flex-column">

src/pages/_includes/cards/body-placeholder.html

@@ -1,5 +1,5 @@
 {% assign width = include.width | default: 400 %}
 {% assign height = include.height | default: 200 %}
 <div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
-	{% include ui/svg.html width=width height=height ratio=include.ratio class="w-100" %}
+	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
 </div>

src/pages/_includes/cards/card-group.html

@@ -1,5 +1,5 @@
 <div class="card-group">
-   {% include cards/card.html link=true class="text-center" body="This is first card" inactive=true %}
-   {% include cards/card.html link=true class="text-center" body="This is second card" active=true %}
-   {% include cards/card.html link=true class="text-center" body="This is third card" %}
+   {% include "cards/card.html" link=true class="text-center" body="This is first card" inactive=true %}
+   {% include "cards/card.html" link=true class="text-center" body="This is second card" active=true %}
+   {% include "cards/card.html" link=true class="text-center" body="This is third card" %}
 </div>

src/pages/_includes/cards/card-image.html

@@ -4,7 +4,7 @@
 		<div class="col-3{% if include.right %} order-md-last{% endif %}">
 			{% assign class = "w-100 h-100 object-cover" %}
 			{% if include.right %}{% assign class = class | append: " card-img-end" %}{% else %}{% assign class = class | append: " card-img-start" %}{% endif %}
-			{% include ui/photo.html id=img-id class=class %}
+			{% include "ui/photo.html" id=img-id class=class %}
 		</div>
 		<div class="col">
 			<div class="card-body">

src/pages/_includes/cards/card.html

@@ -1,14 +1,13 @@
-{% removeemptylines %}
 {% assign link = include.link | default: false %}
 <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include['empty'] %}
-		{% include ui/empty.html illustration=true %}
+		{% include "ui/empty.html" illustration=true %}
 
 	{% else %}
 
 		{% if include.img-top %}
-		{% include ui/photo.html id=img-id class="card-img-top" ratio="21x9" id=7 %}
+		{% include "ui/photo.html" id=img-id class="card-img-top" ratio="21x9" id=7 %}
 		{% endif %}
 
 		{% if include.status-top %}
@@ -22,7 +21,7 @@
 		{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
 		<div class="card-header">
 			{% if include.header-tabs or include.header-pills %}
-				{% include ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
+				{% include "ui/nav.html" header=true pills=include.header-pills tabs=include.header-tabs %}
 
 			{% else %}
 				<h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
@@ -75,11 +74,11 @@
 					<div class="col-auto{% if right %} ms-auto{% endif %}">
 						{% case el %}
 							{% when "switch" %}
-								{% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
+								{% include "ui/form/check.html" switch=true empty=true checked=true class="m-0" %}
 							{% when "check" %}
-								{% include ui/form/check.html empty=true checked=true class="m-0" %}
+								{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
 							{% when "avatars" %}
-								{% include ui/avatar-list.html stacked=true text="+3" %}
+								{% include "ui/avatar-list.html" stacked=true text="+3" %}
 							{% when "more" %}
 								<a href="#">More information</a>
 						{% endcase %}
@@ -105,12 +104,11 @@
 
 		{% if include.img-bottom %}
 
-		{% include ui/photo.html id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
+		{% include "ui/photo.html" id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
 		{% endif %}
 
 		{% if include.progress %}
-			{% include ui/progress.html class="progress-sm card-progress" %}
+			{% include "ui/progress.html" class="progress-sm card-progress" %}
 		{% endif %}
 	{% endif %}
 </{% if link %}a{% else %}div{% endif %}>
-{% endremoveemptylines %}

src/pages/_includes/cards/carousel.html

@@ -3,6 +3,6 @@
       <h3 class="card-title">{{ include.title | default: 'Carousel' }}</h3>
    </div>
    <div class="card-body">
-      {% include ui/carousel.html %}
+      {% include "ui/carousel.html" id=include.id indicators=include.indicators indicators-thumb=include.indicators-thumb indicators-thumb-ratio=include.indicators-thumb-ratio indicators-dot=include.indicators-dot controls=include.controls offset=include.offset fade=include.fade limit=include.limit indicators-vertical=include.indicators-vertical %}
    </div>
 </div>

src/pages/_includes/cards/charts/active-users.html

@@ -3,16 +3,16 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Active users</div>
 			<div class="ms-auto lh-1">
-				{% include parts/dropdown/days.html %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
 			<div class="h1 mb-3 me-2">2,986</div>
 			<div class="me-auto">
-				{% include ui/trending.html value=4 %}
+				{% include "ui/trending.html" value=4 %}
 			</div>
 		</div>
 
-		{% include ui/chart.html chart-id="active-users" size="sm" %}
+		{% include "ui/chart.html" chart-id="active-users" size="sm" %}
 	</div>
 </div>

src/pages/_includes/cards/charts/heatmap.html

@@ -2,6 +2,6 @@
 	<div class="card-body">
 		<h4 class="card-title">{{ include.title }}</h4>
 
-		{% include ui/chart-heatmap.html chart-id=include.id id=include.id colors=include.colors scale=include.scale labels=include.labels no-shades=include.no-shades count=include.count color=include.color %}
+		{% include "ui/chart-heatmap.html" chart-id=include.id id=include.id colors=include.colors scale=include.scale labels=include.labels no-shades=include.no-shades count=include.count color=include.color %}
 	</div>
 </div>

src/pages/_includes/cards/charts/new-clients.html

@@ -3,16 +3,16 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">New clients</div>
 			<div class="ms-auto lh-1">
-				{% include parts/dropdown/days.html %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
 			<div class="h1 mb-3 me-2">6,782</div>
 			<div class="me-auto">
-				{% include ui/trending.html value=0 %}
+				{% include "ui/trending.html" value=0 %}
 			</div>
 		</div>
 
-		{% include ui/chart.html chart-id="new-clients" size="sm" %}
+		{% include "ui/chart.html" chart-id="new-clients" size="sm" %}
 	</div>
 </div>

src/pages/_includes/cards/charts/revenue.html

@@ -3,15 +3,15 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Revenue</div>
 			<div class="ms-auto lh-1">
-				{% include parts/dropdown/days.html %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
 			<div class="h1 mb-0 me-2">$4,300</div>
 			<div class="me-auto">
-				{% include ui/trending.html value=8 %}
+				{% include "ui/trending.html" value=8 %}
 			</div>
 		</div>
 	</div>
-	{% include ui/chart.html chart-id="revenue-bg" size="sm" %}
+	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" %}
 </div>

src/pages/_includes/cards/charts/sales.html

@@ -3,14 +3,14 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Sales</div>
 			<div class="ms-auto lh-1">
-				{% include parts/dropdown/days.html %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="h1 mb-3">75%</div>
 		<div class="d-flex mb-2">
 			<div>Conversion rate</div>
-			<div class="ms-auto">{% include ui/trending.html value=7 %}</div>
+			<div class="ms-auto">{% include "ui/trending.html" value=7 %}</div>
 		</div>
-		{% include ui/progress.html value=75 color="primary" size="sm" %}
+		{% include "ui/progress.html" value=75 color="primary" size="sm" %}
 	</div>
 </div>

src/pages/_includes/cards/charts/total-sales.html

@@ -1,9 +1,9 @@
 <div class="card">
 	<div class="card-body">
-		{% include ui/card-dropdown.html %}
+		{% include "ui/card-dropdown.html" %}
 		<h3 class="card-title">Total sales</h3>
 
-		{% include ui/chart.html chart-id="total-sales" height=15 %}
-		{% include ui/chart.html chart-id="campaigns" height=15 %}
+		{% include "ui/chart.html" chart-id="total-sales" height=15 %}
+		{% include "ui/chart.html" chart-id="campaigns" height=15 %}
 	</div>
 </div>

src/pages/_includes/cards/comments.html

@@ -4,10 +4,10 @@
    </div>
    <div class="card-body">
 
-      {% for person in site.data.people limit: 3 %}
+      {% for person in people limit: 3 %}
       <div class="d-flex{% unless forloop.last %} mb-5{% endunless %}">
          <div class="me-4">
-            {% include ui/avatar.html person=person status="green" %}
+            {% include "ui/avatar.html" person=person status="green" %}
          </div>
          <div class="flex-fill">
             <div class="d-flex mt-n1">
@@ -17,13 +17,13 @@
                <div class="ms-auto small text-secondary">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
             </div>
             <p class="mb-2">
-               {{ site.data.comments[forloop.index] }}
+               {{ comments[forloop.index] }}
             </p>
             <div class="small">
                <span class="text-success me-1">+{{ forloop.index | random_number: 20, 50 }}</span>
-               <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
+               <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Up">{% include "ui/icon.html" icon="chevron-up" %}</a>
                <a href="#" class="me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Down">
-                  {% include ui/icon.html icon="chevron-down" %}
+                  {% include "ui/icon.html" icon="chevron-down" %}
                </a>
                <span class="me-1">·</span>
                <a href="#" class="me-1 text-secondary">Reply</a>

src/pages/_includes/cards/company-employees.html

@@ -12,9 +12,9 @@
 		</tr>
 		</thead>
 
-		{% for person in site.data.people limit: 5 offset: 20 %}
+		{% for person in people limit: 5 offset: 20 %}
 		<tr>
-			<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
+			<td class="w-1">{% include "ui/avatar.html" src=person.photo %}</td>
 			<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
 			<td>{{ person.department }}</td>
 			<td class="w-1 pe-0">{{ forloop.index | random_number: 30, 90 }}%</td>
@@ -23,7 +23,7 @@
 					<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
 				</div>
 			</td>
-			<td><a href="{{ site.base }}" class="text-secondary">{% include ui/icon.html icon="dots" %}</a></td>
+			<td><a href="{{ page | relative }}" class="text-secondary">{% include "ui/icon.html" icon="dots" %}</a></td>
 		</tr>
 		{% endfor %}
 	</table>

src/pages/_includes/cards/company-lookup.html

@@ -56,7 +56,7 @@
             </div>
 
             <div class="map-static"
-                 style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key={{ site.google-maps-key }});"></div>
+                 style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key={{ site.googleMapsKey }});"></div>
 
             <hr>
 

src/pages/_includes/cards/configuration.html

@@ -5,7 +5,7 @@
 		</h3>
 		<div class="card-actions">
 			<a href="#">
-				Edit configuration{% include ui/icon.html icon="edit" class="ms-1" %}
+				Edit configuration{% include "ui/icon.html" icon="edit" class="ms-1" %}
 			</a>
 		</div>
 	</div>
@@ -18,7 +18,7 @@
 			<dd class="col-7">tabler</dd>
 
 			<dt class="col-5">Location:</dt>
-			<dd class="col-7">{% include ui/flag.html flag="pl" %} Poland</dd>
+			<dd class="col-7">{% include "ui/flag.html" flag="pl" %} Poland</dd>
 
 			<dt class="col-5">IP Address:</dt>
 			<dd class="col-7">46.113.11.3</dd>

src/pages/_includes/cards/credit-card.html

@@ -2,7 +2,7 @@
 	<div class="card-body">
 		<div class="mb-3">
 			<div class="form-label">Card number</div>
-			{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
+			{% include "ui/form/input-mask.html" mask="0000 0000 0000 0000" visible=true %}
 		</div>
 
 		<div class="mb-3">
@@ -41,7 +41,7 @@
 		</div>
 
 		<div class="mt-2">
-			{% include ui/button.html text="Pay now" color="primary" block=true  %}
+			{% include "ui/button.html" text="Pay now" color="primary" block=true  %}
 		</div>
 	</div>
 </div>

src/pages/_includes/cards/development-activity.html

@@ -5,14 +5,14 @@
 	<div class="position-relative">
 		<div class="position-absolute top-0 left-0 px-3 mt-1 w-75">
 			<div class="row g-2">
-				<div class="col-auto">{% include ui/chart-sparkline.html id="activity" percentage=35 type="donut" %}</div>
+				<div class="col-auto">{% include "ui/chart-sparkline.html" id="activity" percentage=35 type="donut" %}</div>
 				<div class="col">
 					<div>Today's Earning: $4,262.40</div>
-					<div class="text-secondary">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
+					<div class="text-secondary">{% include "ui/icon.html" icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
 				</div>
 			</div>
 		</div>
-		{% include ui/chart.html chart-id="development-activity" height=12 %}
+		{% include "ui/chart.html" chart-id="development-activity" height=12 %}
 	</div>
 
 	<div class="card-table table-responsive">
@@ -25,10 +25,10 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for commit in site.data.commits limit: 5 %}
+			{% for commit in commits limit: 5 %}
 			<tr>
 				<td class="w-1">
-					{% include ui/avatar.html person-id=forloop.index size="sm" %}
+					{% include "ui/avatar.html" person-id=forloop.index size="sm" %}
 				</td>
 				<td class="td-truncate">
 					<div class="text-truncate">

src/pages/_includes/cards/forgot-password.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Forgot password</h2>
 
@@ -9,10 +9,10 @@
 			<input type="email" class="form-control" placeholder="Enter email">
 		</div>
 		<div class="form-footer">
-			{% include ui/button.html text="Send me new password" block=true color="primary" icon="mail" %}
+			{% include "ui/button.html" text="Send me new password" block=true color="primary" icon="mail" %}
 		</div>
 	</div>
 </form>
 <div class="text-center text-secondary mt-3">
-	Forget it, <a href="{{ site.base }}/sign-in.html">send me back</a> to the sign in screen.
+	Forget it, <a href="{{ page | relative }}/sign-in.html">send me back</a> to the sign in screen.
 </div>

src/pages/_includes/cards/gallery-photo.html

@@ -1,8 +1,8 @@
 <div class="card card-sm">
-	<a href="#" class="d-block"><img src="{{ site.base }}/static/photos/{{ photo.file }}" class="card-img-top"></a>
+	<a href="#" class="d-block"><img src="{{ page | relative }}/static/photos/{{ photo.file }}" class="card-img-top"></a>
 	<div class="card-body">
 		<div class="d-flex align-items-center">
-			{% include ui/avatar.html person=include.person class="me-3 rounded" %}
+			{% include "ui/avatar.html" person=include.person class="me-3 rounded" %}
 			<div>
 				<div>{{ include.person.full_name }}</div>
 				<div class="text-secondary">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
@@ -10,7 +10,7 @@
 			{% unless include.hide-likes %}
 			<div class="ms-auto">
 				<a href="#" class="text-secondary">
-					{% include ui/icon.html icon="eye" %}
+					{% include "ui/icon.html" icon="eye" %}
 					{{ forloop.index | random_number: 300, 600 }}
 				</a>
 				<a href="#" class="ms-3 text-secondary">
@@ -18,7 +18,7 @@
 					{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
 						{% assign class = "icon-filled text-red" %}
 					{% endif %}
-					{% include ui/icon.html icon="heart" class=class %}
+					{% include "ui/icon.html" icon="heart" class=class %}
 					{{ forloop.index | random_number: 20, 100 }}
 				</a>
 			</div>

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

@@ -1,9 +1,9 @@
-{% assign icons-count = site.data.icons-info.count %}
+{% assign icons-count = icons-info.count %}
 
 <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" %}
+			{% include "ui/icon.html" icon="ghost" %}
 		</div>
 	</div>
 	<div class="card-body">
@@ -17,7 +17,7 @@
 				</div>
 				<div class="mt-3">
 					<a href="{{ site.icons.link }}" class="btn btn-primary" target="_blank" rel="noopener">
-						{% include ui/icon.html icon="download" %}
+						{% include "ui/icon.html" icon="download" %}
 						Download icons
 					</a>
 				</div>

src/pages/_includes/cards/icons.html

@@ -1,8 +1,7 @@
 {% assign type = include.type | default: "outline" %}
-{% assign icons = site.data.icons %}
 
 {% assign limit = null %}
-{% if jekyll.environment == 'development' %}
+{% if environment == 'development' %}
 	{% assign limit = 20 %}
 {% endif %}
 
@@ -13,11 +12,11 @@
 	<div class="card-body p-0">
 		<div class="demo-icons-list-wrap">
 			<div class="demo-icons-list">
-				{% for icon in site.data.icons %}
+				{% for icon in icons %}
 				{% assign icon-name = icon[0] %}
 				{% if icon[1].svg[type] %}
 				<a href="https://tabler.io/icons/icon/{{ icon-name }}" target="_blank" rel="noopener" class="demo-icons-list-item" title="{{ icon-name }}" data-bs-toggle="tooltip" data-bs-placement="top">
-					{% include ui/icon.html icon=icon-name type=type %}
+					{% include "ui/icon.html" icon=icon-name type=type %}
 				</a>
 				{% endif %}
 				{% endfor %}

src/pages/_includes/cards/invoices.html

@@ -27,7 +27,7 @@
 			<thead>
 			<tr>
 				<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
-				<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm icon-thick" %}</th>
+				<th class="w-1">No. {% include "ui/icon.html" icon="chevron-up" class="icon-sm icon-thick" %}</th>
 				<th>Invoice Subject</th>
 				<th>Client</th>
 				<th>VAT No.</th>
@@ -39,13 +39,13 @@
 			</thead>
 
 			<tbody>
-			{% for invoice in site.data.invoices limit: 8 %}
+			{% for invoice in invoices limit: 8 %}
 			<tr>
 				<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
 				<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
 				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
 				<td>
-					{% include ui/flag.html flag=invoice.country size="xs" class="me-2" %}{{ invoice.client }}
+					{% include "ui/flag.html" flag=invoice.country size="xs" class="me-2" %}{{ invoice.client }}
 				</td>
 				<td>
 					{{ invoice.vat-no }}
@@ -61,7 +61,7 @@
 				<td class="text-end">
 					<span class="dropdown">
 						<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
-						{% include ui/dropdown-menu.html right=true %}
+						{% include "ui/dropdown-menu.html" right=true %}
 					</span>
 				</td>
 			</tr>
@@ -71,6 +71,6 @@
 	</div>
 	<div class="card-footer d-flex align-items-center">
 		<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
-		{% include ui/pagination.html class="m-0 ms-auto" %}
+		{% include "ui/pagination.html" class="m-0 ms-auto" %}
 	</div>
 </div>

src/pages/_includes/cards/map-vector.html

@@ -4,6 +4,6 @@
 		{% if include.title %}
 			<h3 class="card-title">{{ include.title }}</h3>
 		{% endif %}
-		{% include ui/map-vector.html map-id=map color="primary" ratio="21x9" %}
+		{% include "ui/map-vector.html" map-id=map color="primary" ratio="21x9" %}
 	</div>
 </div>

src/pages/_includes/cards/most-visited-pages.html

@@ -14,19 +14,19 @@
 			</tr>
 			</thead>
 
-			{% for page in site.data.pages limit: 6 %}
+			{% for page in pages limit: 6 %}
 			{% assign data = page.data | join: ',' %}
 			{% assign id = "bounce-rate-" | append: forloop.index %}
 			<tr>
 				<td>
 					{{ page.uri }}
-					<a href="#" class="ms-1" aria-label="Open website">{% include ui/icon.html icon="link" %}</a>
+					<a href="#" class="ms-1" aria-label="Open website">{% include "ui/icon.html" icon="link" %}</a>
 				</td>
 				<td class="text-secondary">{{ page.visitors | format_number }}</td>
 				<td class="text-secondary">{{ page.unique | format_number }}</td>
 				<td class="text-secondary">{{ page.bounce }}</td>
 				<td class="text-end w-1">
-					{% include ui/chart-sparkline.html type="line" data=data id=id small=true color="primary" %}
+					{% include "ui/chart-sparkline.html" type="line" data=data id=id small=true color="primary" %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/music/track-info.html

@@ -1,9 +1,9 @@
 {% assign track-id = include.track-id | default: 5 %}
-{% assign track = site.data.tracks[track-id] %}
+{% assign track = tracks[track-id] %}
 <div class="card">
 	<div class="row row-0">
 		<div class="col-auto">
-			<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded-start" alt="{{ track.name | escape }}" width="80" height="80">
+			<img src="{{ page | relative }}/static/tracks/{{ track.album.images[1].path }}" class="rounded-start" alt="{{ track.name | escape }}" width="80" height="80">
 		</div>
 		<div class="col">
 			<div class="card-body">

src/pages/_includes/cards/music/tracks-list.html

@@ -1,13 +1,13 @@
 <div class="card">
 	<div class="list-group card-list-group">
-		{% for track in site.data.tracks limit: 12 %}
+		{% for track in tracks limit: 12 %}
 		<div class="list-group-item">
 			<div class="row g-2 align-items-center">
 				<div class="col-auto fs-3">
 					{{ forloop.index }}
 				</div>
 				<div class="col-auto">
-					<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="40" height="40">
+					<img src="{{ page | relative }}/static/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="40" height="40">
 				</div>
 				<div class="col">
 					{{ track.name }}
@@ -22,13 +22,13 @@
 				</div>
 				<div class="col-auto">
 					<a href="#" class="link-secondary">
-						{% include ui/switch-icon.html icon="heart" %}
+						{% include "ui/switch-icon.html" icon="heart" %}
 					</a>
 				</div>
 				<div class="col-auto lh-1">
 					<div class="dropdown">
-						<a href="#" class="link-secondary" data-bs-toggle="dropdown">{% include ui/icon.html icon="dots" %}</a>
-						{% include ui/dropdown-menu.html right=true %}
+						<a href="#" class="link-secondary" data-bs-toggle="dropdown">{% include "ui/icon.html" icon="dots" %}</a>
+						{% include "ui/dropdown-menu.html" right=true %}
 					</div>
 				</div>
 			</div>

src/pages/_includes/cards/navbar-notifications.html

@@ -14,7 +14,7 @@
 				</div>
 				<div class="col-auto">
 					<a href="#" class="list-group-item-actions">
-						{% include ui/icon.html icon="star" color="muted" %}
+						{% include "ui/icon.html" icon="star" color="muted" %}
 					</a>
 				</div>
 			</div>
@@ -30,7 +30,7 @@
 				</div>
 				<div class="col-auto">
 					<a href="#" class="list-group-item-actions show">
-						{% include ui/icon.html icon="star" color="yellow" %}
+						{% include "ui/icon.html" icon="star" color="yellow" %}
 					</a>
 				</div>
 			</div>
@@ -46,7 +46,7 @@
 				</div>
 				<div class="col-auto">
 					<a href="#" class="list-group-item-actions">
-						{% include ui/icon.html icon="star" color="muted" %}
+						{% include "ui/icon.html" icon="star" color="muted" %}
 					</a>
 				</div>
 			</div>
@@ -62,7 +62,7 @@
 				</div>
 				<div class="col-auto">
 					<a href="#" class="list-group-item-actions">
-						{% include ui/icon.html icon="star" color="muted" %}
+						{% include "ui/icon.html" icon="star" color="muted" %}
 					</a>
 				</div>
 			</div>

src/pages/_includes/cards/order-statistics.html

@@ -5,13 +5,13 @@
 
 		<div class="d-flex align-items-baseline mb-3">
 			<div class="h1 mb-0 me-2">2,137</div>
-			<div class="me-auto">{% include ui/trending.html value=7 %}</div>
+			<div class="me-auto">{% include "ui/trending.html" value=7 %}</div>
 		</div>
 
-		{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
+		{% include "ui/progress.html" values="40,15,25,15,5" class="mb-4" %}
 
 		<ul class="list-unstyled">
-			{% for item in site.data.orders %}
+			{% for item in orders %}
 			<li class="row g-2 align-items-center mb-2">
 				<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
 				<div class="col">

src/pages/_includes/cards/pricing-card-enterprise.html

@@ -6,7 +6,7 @@
 				<p class="m-0 text-secondary">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
 			</div>
 			<div class="col-auto">
-				{% include ui/button.html text="Book a demo" %}
+				{% include "ui/button.html" text="Book a demo" %}
 			</div>
 		</div>
 	</div>

src/pages/_includes/cards/pricing-card.html

@@ -2,7 +2,7 @@
 {% assign available-features = include.features | default: '1000' | split: '' %}
 <div class="card card-md">
 	{% if include.featured-color %}
-		{% include ui/ribbon.html color=include.featured-color bookmark=true top=true filled=true %}
+		{% include "ui/ribbon.html" color=include.featured-color bookmark=true top=true filled=true %}
 	{% endif %}
 
 	<div class="card-body text-center">
@@ -15,9 +15,9 @@
 			{% for feature in features %}
 			<li>
 				{% if available-features[forloop.index0] == '1' %}
-				{% include ui/icon.html icon="check" class="me-1 text-success" %}
+				{% include "ui/icon.html" icon="check" class="me-1 text-success" %}
 				{% else %}
-				{% include ui/icon.html icon="x" class="me-1 text-danger" %}
+				{% include "ui/icon.html" icon="x" class="me-1 text-danger" %}
 				{% endif %}
 				{{ feature }}
 			</li>

src/pages/_includes/cards/profile-2.html

@@ -1,25 +1,25 @@
 <div class="card">
 	<div class="card-body">
 		<div class="media">
-			{% include ui/avatar.html person-id=8 size="xl" %}
+			{% include "ui/avatar.html" person-id=8 size="xl" %}
 			<div class="media-body ms-4">
-				<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
-				<p class="text-secondary mb-0">{{ site.data.people[20].job_title }}</p>
+				<h3>{{ people[20].first_name }} {{ people[20].last_name }}</h3>
+				<p class="text-secondary mb-0">{{ people[20].job_title }}</p>
 
 				<ul class="social-links list-inline mb-0 mt-2">
 					<li class="list-inline-item">
 						<a href="#" title="Facebook" data-bs-toggle="tooltip">
-							{% include ui/icon.html icon="brand-facebook" %}
+							{% include "ui/icon.html" icon="brand-facebook" %}
 						</a>
 					</li>
 					<li class="list-inline-item">
 						<a href="#" title="X" data-bs-toggle="tooltip">
-							{% include ui/icon.html icon="brand-x" %}
+							{% include "ui/icon.html" icon="brand-x" %}
 						</a>
 					</li>
 					<li class="list-inline-item">
 						<a href="#" title="1234567890" data-bs-toggle="tooltip">
-							{% include ui/icon.html icon="phone" %}
+							{% include "ui/icon.html" icon="phone" %}
 						</a>
 					</li>
 				</ul>

src/pages/_includes/cards/profile-edit.html

@@ -6,7 +6,7 @@
 		<form>
 			<div class="row mb-3">
 				<div class="col-auto">
-					<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
+					<span class="avatar avatar-lg" style="background-image: url({{ people[11].photo }})"></span>
 				</div>
 				<div class="col">
 					<div class="mb-2">

src/pages/_includes/cards/profile-timeline.html

@@ -2,19 +2,19 @@
 	<div class="card-header">
 		<div class="input-group">
 			<input type="text" class="form-control" placeholder="Message">
-			{% include ui/button.html icon="camera" icon-only=true  %}
+			{% include "ui/button.html" icon="camera" icon-only=true  %}
 		</div>
 	</div>
 	<ul class="list-group card-list-group">
 		<li class="list-group-item py-4">
 			<div class="d-flex">
 				<div>
-					{% include ui/avatar.html person-id=5 class="me-3" %}
+					{% include "ui/avatar.html" person-id=5 class="me-3" %}
 				</div>
 				<div class="flex-fill">
 					<div>
 						<small class="float-right text-secondary">4 min</small>
-						<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
+						<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
 					</div>
 
 					<div>
@@ -26,20 +26,20 @@
 					<ul class="list-unstyled">
 						<li class="d-flex mt-4">
 							<div>
-								{% include ui/avatar.html person-id=8 class="me-3" %}
+								{% include "ui/avatar.html" person-id=8 class="me-3" %}
 							</div>
 							<div class="flex-fill">
-								<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
+								<strong>{{ people[7].first_name }} {{ people[7].last_name }}: </strong>
 								Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
 								auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
 							</div>
 						</li>
 						<li class="d-flex mt-4">
 							<div>
-								{% include ui/avatar.html person-id=10 class="me-3" %}
+								{% include "ui/avatar.html" person-id=10 class="me-3" %}
 							</div>
 							<div class="flex-fill">
-								<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
+								<strong>{{ people[9].first_name }} {{ people[9].last_name }}: </strong>
 								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
 								amet risus.
 							</div>
@@ -51,12 +51,12 @@
 		<li class="list-group-item py-4">
 			<div class="d-flex">
 				<div>
-					{% include ui/avatar.html person-id=11 class="me-3" %}
+					{% include "ui/avatar.html" person-id=11 class="me-3" %}
 				</div>
 				<div class="flex-fill">
 					<div>
 						<small class="float-right text-secondary">12 min</small>
-						<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
+						<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
 					</div>
 					<div>
 						Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
@@ -68,12 +68,12 @@
 		<li class="list-group-item py-4">
 			<div class="d-flex">
 				<div>
-					{% include ui/avatar.html person-id=15 class="me-3" %}
+					{% include "ui/avatar.html" person-id=15 class="me-3" %}
 				</div>
 				<div class="flex-fill">
 					<div>
 						<small class="float-right text-secondary">34 min</small>
-						<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
+						<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
 					</div>
 
 					<div>
@@ -84,10 +84,10 @@
 					<ul class="list-unstyled">
 						<li class="d-flex mt-4">
 							<div>
-								{% include ui/avatar.html person-id=6 class="me-3" %}
+								{% include "ui/avatar.html" person-id=6 class="me-3" %}
 							</div>
 							<div class="flex-fill">
-								<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
+								<strong>{{ people[5].first_name }} {{ people[5].last_name }}: </strong>
 								Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
 								auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
 							</div>

src/pages/_includes/cards/profile.html

@@ -1,13 +1,13 @@
 <div class="card">
 	<div class="card-body text-center">
-		<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
+		<h2 class="mb-3">{{ people[4].first_name }} {{ people[4].last_name }}</h2>
 
 		<p class="mb-4">
 			Big belly rude boy, million dollar hustler. Unemployed.
 		</p>
 
 		<button class="btn btn-outline-primary btn-sm">
-			{% include ui/icon.html icon="brand-x" %}
+			{% include "ui/icon.html" icon="brand-x" %}
 			Follow
 		</button>
 	</div>

src/pages/_includes/cards/project-kanban.html

@@ -4,7 +4,7 @@
 {% assign percentage-color = include.percentage-color | default: "green" %}
 {% assign due = include.due | default: "2 days" %}
 <div class="card">
-	{% include ui/progress.html value=percentage class="card-progress" color=percentage-color %}
+	{% include "ui/progress.html" value=percentage class="card-progress" color=percentage-color %}
 	<div class="card-body">
 
 		<h3 class="card-title">
@@ -12,11 +12,11 @@
 			{% if include.badge %} <span class="badge ms-2">{{ include.badge }}</span>{% endif %}
 		</h3>
 
-		{% include ui/avatar-list.html offset=offset limit=limit stacked=true class="mb-3" %}
+		{% include "ui/avatar-list.html" offset=offset limit=limit stacked=true class="mb-3" %}
 
 		<div class="card-meta d-flex justify-content-between">
 			<div class="d-flex align-items-center">
-				{% include ui/icon.html icon="check" class="me-2" %}
+				{% include "ui/icon.html" icon="check" class="me-2" %}
 				<span>5/10</span>
 			</div>
 			<span>Due {{ due }}</span>

src/pages/_includes/cards/project-progress.html

@@ -1,5 +1,5 @@
 {% assign project-id = include.project-id | default: 0 %}
-{% assign project = site.data.projects[project-id] %}
+{% assign project = projects[project-id] %}
 {% assign progress = include.progress | default: 25 %}
 {% assign days-ago = include.days-ago | default: 2 %}
 
@@ -23,13 +23,13 @@
 							{{ progress }}%
 						</div>
 						<div class="col">
-							{% include ui/progress.html value=progress size="sm" %}
+							{% include "ui/progress.html" value=progress size="sm" %}
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="col-auto">
-				{% include ui/card-dropdown.html %}
+				{% include "ui/card-dropdown.html" %}
 			</div>
 		</div>
 	</div>

src/pages/_includes/cards/project-summary.html

@@ -1,14 +1,14 @@
 <div class="card">
 	<div class="card-body p-4 py-5 text-center">
-		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
+		{% include "ui/avatar.html" size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
 		<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
 		<p class="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
 		<p class="mb-3">
 			<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
 		</p>
 		<div>
-			{% include ui/avatar-list.html stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
+			{% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
 		</div>
 	</div>
-	{% include ui/progress.html class="card-progress" value=include.percentage color=include.percentage-color %}
+	{% include "ui/progress.html" class="card-progress" value=include.percentage color=include.percentage-color %}
 </div>

src/pages/_includes/cards/ribbon.html

@@ -1,5 +1,5 @@
 {% assign product-id = include.product-id | default: 0 %}
-{% assign product = site.data.products[product-id] %}
+{% assign product = products[product-id] %}
 
 <div class="card">
 	<div class="card-body"{% unless include.lorem %} style="height: 5rem"{% endunless %}>
@@ -9,5 +9,5 @@
 		{% endif %}
 	</div>
 
-	{% include ui/ribbon.html color=include.color top=include.top left=include.left bottom=include.bottom bookmark=include.bookmark %}
+	{% include "ui/ribbon.html" color=include.color top=include.top left=include.left bottom=include.bottom bookmark=include.bookmark %}
 </div>

src/pages/_includes/cards/sign-in.html

@@ -2,19 +2,19 @@
 	<div class="card-body">
 		<h2 class="h2 text-center mb-4">Login to your account</h2>
 
-		{% include forms/sign-in.html %}
+		{% include "forms/sign-in.html" %}
 	</div>
 
-	{% include ui/hr.html text="or" %}
+	{% include "ui/hr.html" text="or" %}
 
 	<div class="card-body">
 		<div class="row">
-			<div class="col">{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
-			<div class="col">{% include ui/button.html  block=true icon="brand-x" icon-color="x" text="Login with X" %}</div>
+			<div class="col">{% include "ui/button.html"  block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
+			<div class="col">{% include "ui/button.html"  block=true icon="brand-x" icon-color="x" text="Login with X" %}</div>
 		</div>
 	</div>
 </div>
 
 <div class="text-center text-secondary mt-3">
-	Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
+	Don't have account yet? <a href="{{ page | relative }}/sign-up.html" tabindex="-1">Sign up</a>
 </div>

src/pages/_includes/cards/sign-up.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+<form class="card card-md" action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Create new account</h2>
 
@@ -12,12 +12,12 @@
 		</div>
 		<div class="mb-3">
 			<label class="form-label">Password</label>
-			{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
+			{% include "ui/form/input-group.html" type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
 		</div>
 		<div class="mb-3">
 			<label class="form-check">
 				<input type="checkbox" class="form-check-input"/>
-				<span class="form-check-label">Agree the <a href="{{ site.base }}/terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
+				<span class="form-check-label">Agree the <a href="{{ page | relative }}/terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
 			</label>
 		</div>
 
@@ -28,5 +28,5 @@
 </form>
 
 <div class="text-center text-secondary mt-3">
-	Already have account? <a href="{{ site.base }}/sign-in.html" tabindex="-1">Sign in</a>
+	Already have account? <a href="{{ page | relative }}/sign-in.html" tabindex="-1">Sign in</a>
 </div>

src/pages/_includes/cards/small-stats-2.html

@@ -14,12 +14,12 @@
 <div class="card" data-color={{color}}>
 	<div class="card-body">
 		<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
-			{% include ui/icon.html icon=icon %}
+			{% include "ui/icon.html" icon=icon %}
 		</div>
 		<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
 		<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
 		<p class="mb-0 text-secondary">
-			{% include ui/trending.html value=include.growth %}
+			{% include "ui/trending.html" value=include.growth %}
 			<span class="text-nowrap">{{ include.description | default: 'Since last month' }}</span>
 		</p>
 	</div>

src/pages/_includes/cards/small-stats-3.html

@@ -1,7 +1,7 @@
 <div class="card">
 	<div class="card-body p-2 text-center">
 		<div class="text-end {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
-			{% include ui/trending.html value=include.percentage %}
+			{% include "ui/trending.html" value=include.percentage %}
 		</div>
 		<div class="h1 m-0">{{ include.number }}</div>
 		<div class="text-secondary mb-3">{{ include.title }}</div>

src/pages/_includes/cards/small-stats.html

@@ -5,15 +5,15 @@
 		<div class="row align-items-center">
 			{% if include.icon %}
 				<div class="col-auto">
-					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include ui/icon.html icon=include.icon %}</span>
+					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
 				</div>
 			{% elsif include.person-id %}
 				<div class="col-auto">
-				{% include ui/avatar.html person-id=include.person-id %}
+				{% include "ui/avatar.html" person-id=include.person-id %}
 				</div>
 			{% elsif include.chart-data and chart-position == "left" %}
 				<div class="col-auto">
-					{% include ui/chart-sparkline.html id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+					{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 				</div>
 			{% endif %}
 
@@ -22,7 +22,7 @@
 				<div class="font-weight-medium">
 					{{ include.title | default: 1700 }}
 					{% if include.small-icon %}
-						{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ms-1" %}
+						{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
 					{% endif %}
 					{% if include.description-value %}
 					<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
@@ -36,7 +36,7 @@
 
 			{% if include.chart-data and chart-position=="right" %}
 			<div class="col-auto">
-				{% include ui/chart-sparkline.html id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 			</div>
 			{% endif %}
 		</div>

src/pages/_includes/cards/sponsor.html

@@ -1,3 +1,3 @@
-<a href="{{ site.sponsor-url }}" class="card card-sponsor" target="_blank" rel="noopener" style="background-image: url({{ site.base }}/static/sponsor-banner-homepage.svg)" aria-label="Sponsor Tabler!">
+<a href="{{ site.sponsorUrl }}" class="card card-sponsor" target="_blank" rel="noopener" style="background-image: url({{ page | relative }}/static/sponsor-banner-homepage.svg)" aria-label="Sponsor Tabler!">
 	<div class="card-body"></div>
 </a>

src/pages/_includes/cards/store-list.html

@@ -1,8 +1,8 @@
 <div class="card">
 	<table class="table card-table table-vcenter">
-		{% for product in site.data.products %}
+		{% for product in products %}
 		<tr>
-			<td><img src="{{ site.base }}/img/products/{{ product.image }}" alt="" class="h-16"></td>
+			<td><img src="{{ page | relative }}/img/products/{{ product.image }}" alt="" class="h-16"></td>
 			<td>
 				{{ product.name }}
 

src/pages/_includes/cards/store-product-grid.html

@@ -1,13 +1,13 @@
 <div class="row">
-    {% for product in site.data.products%}
+    {% for product in products%}
     <div class="col-lg-3">
         <div class="card p-3">
-            <img src="{{ site.base }}/img/products/{{ product.image }}" alt="" class="mb-3">
+            <img src="{{ page | relative }}/img/products/{{ product.image }}" alt="" class="mb-3">
             <h3 class="mb-0">{{product.name}}</h3>
             <div class="text-secondary mb-2">{{product.producer}}</div>
             <h1 class="text-azure">{{product.price}}$</h1>
             <div class="d-flex justify-content-between align-items-center">
-                {% include ui/stars.html %}
+                {% include "ui/stars.html" %}
 
                 <a href="#" class="btn btn-primary">Add to cart</a>
             </div>
@@ -16,5 +16,5 @@
     {% endfor %}
 </div>
 <div class="d-flex">
-    {% include ui/pagination.html class="ms-auto" %}
+    {% include "ui/pagination.html" class="ms-auto" %}
 </div>

src/pages/_includes/cards/store-product.html

@@ -1,9 +1,9 @@
 {% assign product-id = include.product-id | default: 1 %}
-{% assign product = site.data.products[product-id] %}
+{% assign product = products[product-id] %}
 <div class="card">
 	<div class="card-body">
 		<div class="mb-4 text-center">
-			<img src="{{ site.base }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
+			<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
 		</div>
 		<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
 		<div class="mt-5 d-flex align-items-center">
@@ -11,7 +11,7 @@
 				<strong>{{ product.price }}</strong>
 			</div>
 			<div class="ms-auto">
-				<a href="#" class="btn btn-primary">{% include ui/icon.html icon='plus' %} Add to cart</a>
+				<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
 			</div>
 		</div>
 	</div>

src/pages/_includes/cards/subscribe.html

@@ -1,10 +1,10 @@
 {% assign person-id = include.person-id | default: 0 %}
-{% assign person = site.data.people[person-id] %}
+{% assign person = people[person-id] %}
 <div class="card">
 	<div class="card-body">
 		<div class="row g-2 align-items-center">
 			<div class="col-auto">
-				{% include ui/avatar.html person=person size="lg" %}
+				{% include "ui/avatar.html" person=person size="lg" %}
 			</div>
 			<div class="col">
 				<h4 class="card-title m-0">
@@ -23,7 +23,7 @@
 				</a>
 			</div>
 			<div class="col-auto">
-				{% include ui/card-dropdown.html %}
+				{% include "ui/card-dropdown.html" %}
 			</div>
 		</div>
 	</div>

src/pages/_includes/cards/table-users.html

@@ -12,7 +12,7 @@
 			</thead>
 			<tbody>
 
-			{% for person in site.data.people limit: 8 offset: 50 %}
+			{% for person in people limit: 8 offset: 50 %}
 			{% assign percentage = forloop.index | random_number %}
 			{% assign time_offset = forloop.index | random_number: 0, 800 %}
 			{% assign register_offset = forloop.index | random_number: 0, 8000000 %}
@@ -20,12 +20,12 @@
 
 			<tr>
 				<td class="text-center w-1">
-					{% include ui/avatar.html person-id=person.id %}
+					{% include "ui/avatar.html" person-id=person.id %}
 				</td>
 				<td>
 					<div>{{ person.full_name }}</div>
 					<div class="small text-secondary">
-						Registered: {{ site.time | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
+						Registered: {{ 'now' | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
 					</div>
 				</td>
 				<td>
@@ -37,18 +37,18 @@
 							<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
 						</div>
 					</div>
-					{% include ui/progress.html value=percentage size="sm" color=percentage_color %}
+					{% include "ui/progress.html" value=percentage size="sm" color=percentage_color %}
 
 				</td>
 				<td class="text-center">
 					{% capture payment %}
 					{%- cycle 'visa', 'googlewallet', 'mastercard', 'shopify', 'ebay', 'paypal' -%}
 					{% endcapture %}
-					{% include ui/payment.html payment=payment %}
+					{% include "ui/payment.html" payment=payment %}
 				</td>
 				<td>
 					<div class="small text-secondary">Last login</div>
-					<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
+					<div>{{ 'now' | date: "%s" | minus: time_offset | to_pretty_time }}</div>
 				</td>
 				<td class="text-center">
 					{% assign percentage = forloop.index | random_number: 0, 100 %}
@@ -56,7 +56,7 @@
 <!--					     data-thickness="3" data-color="primary">-->
 <!--						<div class="chart-circle-value">{{ percentage }}%</div>-->
 <!--					</div>-->
-					{% include ui/chart-sparkline.html percentage=percentage type="donut" %}
+					{% include "ui/chart-sparkline.html" percentage=percentage type="donut" %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/tables/progressbg.html

@@ -10,11 +10,11 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for page in site.data.pages %}
+			{% for page in pages %}
 			<tr>
 				<td>
 					<div class="progressbg">
-						{% include ui/progress.html value=page.bounce class="progressbg-progress" color="primary-lt" %}
+						{% include "ui/progress.html" value=page.bounce class="progressbg-progress" color="primary-lt" %}
 						<div class="progressbg-text">{{ page.uri }}</div>
 					</div>
 				</td>

src/pages/_includes/cards/tabs.html

@@ -1,7 +1,4 @@
-{% assign id = 0 | random_id %}
-{% if include.id %}
-   {% assign id = include.id %}
-{% endif %}
+{% assign id = include.id %}
 {% assign icon-class = "me-2" %}
 {% if include.hide-text %}
    {% assign icon-class = "" %}
@@ -12,33 +9,33 @@
 	<div class="card-header">
 		<ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
 			<li class="nav-item">
-				<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
+				<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
 			</li>
 			<li class="nav-item">
-				<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
+				<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
 			</li>
 
 			{% if include.activity %}
 			<li class="nav-item">
-				<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
+				<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
 			</li>
 			{% endif %}
 
 			{% if include.disabled %}
 			<li class="nav-item">
-				<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
+				<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
 			</li>
 			{% endif %}
 
 			{% if include.dropdown %}
 			<li class="nav-item dropdown">
 				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-				{% include ui/dropdown-menu.html %}
+				{% include "ui/dropdown-menu.html" %}
 			</li>
 			{% endif %}
 			{% if include.settings %}
 			<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
-				<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include ui/icon.html icon="settings" %}</a>
+				<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include "ui/icon.html" icon="settings" %}</a>
 			</li>
 			{% endif %}
 		</ul>

src/pages/_includes/cards/tasks.html

@@ -4,7 +4,7 @@
 	</div>
 	<div class="table-responsive">
 		<table class="table card-table table-vcenter">
-			{% for task in site.data.tasks-list %}
+			{% for task in tasks-list %}
 			<tr>
 				<td class="w-1 pe-0">
 					<input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task"{% if task.checked %} checked{% endif %} >
@@ -13,21 +13,21 @@
 					<a href="#" class="text-reset">{{ task.name }}</a>
 				</td>
 				<td class="text-nowrap text-secondary">
-					{% include ui/icon.html icon="calendar" %}
-					{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }}
+					{% include "ui/icon.html" icon="calendar" %}
+					{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%B %d, %Y' }}
 				</td>
 				<td class="text-nowrap">
 					<a href="#" class="text-secondary">
-						{% include ui/icon.html icon="check" %}
+						{% include "ui/icon.html" icon="check" %}
 						{{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}
 					</a>
 				</td>
 				<td class="text-nowrap">
 					<a href="#" class="text-secondary">
-						{% include ui/icon.html icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
+						{% include "ui/icon.html" icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
 				</td>
 				<td>
-					{% include ui/avatar.html size="sm" person-id=forloop.index %}
+					{% include "ui/avatar.html" size="sm" person-id=forloop.index %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/timeline.html

@@ -1,6 +1,6 @@
 <ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
 	<li class="timeline-event">
-		<div class="timeline-event-icon bg-x-lt">{% include ui/icon.html icon="brand-x" %}</div>
+		<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">10 hrs ago</div>
@@ -10,7 +10,7 @@
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon">{% include ui/icon.html icon="briefcase" %}</div>
+		<div class="timeline-event-icon">{% include "ui/icon.html" icon="briefcase" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">2 hrs ago</div>
@@ -20,7 +20,7 @@
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon">{% include ui/icon.html icon="check" %}</div>
+		<div class="timeline-event-icon">{% include "ui/icon.html" icon="check" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">1 day ago</div>
@@ -30,7 +30,7 @@
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon bg-facebook-lt">{% include ui/icon.html icon="brand-facebook" %}</div>
+		<div class="timeline-event-icon bg-facebook-lt">{% include "ui/icon.html" icon="brand-facebook" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">1 day ago</div>
@@ -40,21 +40,21 @@
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon">{% include ui/icon.html icon="user-plus" %}</div>
+		<div class="timeline-event-icon">{% include "ui/icon.html" icon="user-plus" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">2 days ago</div>
 				<h4>+3 Friend Requests</h4>
 				<div class="avatar-list mt-3">
-					{% for person in site.data.people limit: 3 %}
-					{% include ui/avatar.html person=person status="success" %}
+					{% for person in people limit: 3 %}
+					{% include "ui/avatar.html" person=person status="success" %}
 					{% endfor %}
 				</div>
 			</div>
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon">{% include ui/icon.html icon="photo" %}</div>
+		<div class="timeline-event-icon">{% include "ui/icon.html" icon="photo" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">3 days ago</div>
@@ -63,12 +63,12 @@
 					<div class="row g-2">
 						<div class="col-6">
 							<div class="media media-2x1 rounded">
-								<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
+								<a class="media-content" style="background-image: url({% include "ui/photo.html" id=6 %})"></a>
 							</div>
 						</div>
 						<div class="col-6">
 							<div class="media media-2x1 rounded">
-								<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
+								<a class="media-content" style="background-image: url({% include "ui/photo.html" id=7 %})"></a>
 							</div>
 						</div>
 					</div>
@@ -77,7 +77,7 @@
 		</div>
 	</li>
 	<li class="timeline-event">
-		<div class="timeline-event-icon">{% include ui/icon.html icon="settings" %}</div>
+		<div class="timeline-event-icon">{% include "ui/icon.html" icon="settings" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">2 weeks ago</div>

src/pages/_includes/cards/user-card-bg.html

@@ -1,8 +1,8 @@
 {% assign person-id = include.person-id | default: 0 %}
-{% assign person = site.data.people[person-id] %}
+{% assign person = people[person-id] %}
 <a class="card card-link" href="#">
-	<div class="card-cover card-cover-blurred text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({%include ui/image.html id=person-id %})">
-		{% include ui/avatar.html size="xl" person=person thumb=true rounded=true %}
+	<div class="card-cover card-cover-blurred text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({% include "ui/photo.html" id=person-id %})">
+		{% include "ui/avatar.html" size="xl" person=person thumb=true rounded=true %}
 	</div>
 	<div class="card-body text-center">
 		<div class="card-title mb-1">{{ person.full_name }}</div>

src/pages/_includes/cards/user-card-big.html

@@ -1,9 +1,9 @@
 {% assign person-id = include.person-id | default: 0 %}
-{% assign person = site.data.people[person-id] %}
+{% assign person = people[person-id] %}
 <div class="card">
 	<div class="card-body text-center">
 		<div class="mb-3">
-			{% include ui/avatar.html size="xl" person=person rounded=true %}
+			{% include "ui/avatar.html" size="xl" person=person rounded=true %}
 		</div>
 		<div class="card-title mb-1">{{ person.full_name }}</div>
 		<div class="text-secondary">{{ person.job_title }}</div>

src/pages/_includes/cards/user-card.html

@@ -1,8 +1,8 @@
 {% assign person-id = include.person-id | default: 0 %}
-{% assign person = site.data.people[person-id] %}
+{% assign person = people[person-id] %}
 {% capture col-avatar %}
 	<div class="col-auto">
-		{% include ui/avatar.html person=person class="rounded" %}
+		{% include "ui/avatar.html" person=person class="rounded" %}
 	</div>
 {% endcapture %}
 

src/pages/_includes/cards/user-info.html

@@ -1,31 +1,31 @@
 {% assign person-id = include.person-id | default: 25 | minus: 1 %}
-{% assign person = site.data.people[person-id] %}
+{% assign person = people[person-id] %}
 
 <div class="card">
 	<div class="card-body">
 		<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="book" class="me-2 text-secondary" %}
+			{% include "ui/icon.html" icon="book" class="me-2 text-secondary" %}
 			Went to: <strong>{{ person.university }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="briefcase" class="me-2 text-secondary" %}
+			{% include "ui/icon.html" icon="briefcase" class="me-2 text-secondary" %}
 			Worked at: <strong>{{ person.company }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="home" class="me-2 text-secondary" %}
+			{% include "ui/icon.html" icon="home" class="me-2 text-secondary" %}
 			Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="map-pin" class="me-2 text-secondary" %}
-			From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
+			{% include "ui/icon.html" icon="map-pin" class="me-2 text-secondary" %}
+			From: <strong>{% include "ui/flag.html" size="xs" flag=person.country_code %} {{ person.country }}</strong>
 		</div>
 		<div class="mb-2">
-			{% include ui/icon.html icon="calendar" class="me-2 text-secondary" %}
+			{% include "ui/icon.html" icon="calendar" class="me-2 text-secondary" %}
 			Birth date: <strong>{{ person.birth_date }}</strong>
 		</div>
 		<div>
-			{% include ui/icon.html icon="clock" class="me-2 text-secondary" %}
+			{% include "ui/icon.html" icon="clock" class="me-2 text-secondary" %}
 			Time zone: <strong>{{ person.time_zone }}</strong>
 		</div>
 	</div>

src/pages/_includes/cards/users-list-2.html

@@ -7,12 +7,12 @@
 	<div class="card-body">
 		<div class="row g-3">
 			{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
-			{% for person in site.data.people limit: limit offset: offset %}
+			{% for person in people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
 			<div class="col-6">
 				<div class="row g-3 align-items-center">
 					<a href="#" class="col-auto">
-						{% include ui/avatar.html person=person status=color %}
+						{% include "ui/avatar.html" person=person status=color %}
 					</a>
 					<div class="col text-truncate">
 						<a href="#" class="text-reset d-block text-truncate">{{ person.full_name }}</a>

src/pages/_includes/cards/users-list-headers.html

@@ -5,7 +5,7 @@
 
 	<div class="list-group list-group-flush overflow-auto" style="max-height: 35rem">
 		{% assign prev-letter = '' %}
-		{% assign people = site.data.people | sort: 'last_name' %}
+		{% assign people = people | sort: 'last_name' %}
 
 		{% for person in people %}
 			{% assign first-letter = person.last_name | slice: 0 %}
@@ -17,13 +17,13 @@
 				<div class="row">
 					<div class="col-auto">
 						<a href="#">
-							{% include ui/avatar.html person=person %}
+							{% include "ui/avatar.html" person=person %}
 						</a>
 					</div>
 					<div class="col text-truncate">
 						<a href="#" class="text-body d-block">{{ person.full_name }}</a>
 						{% assign i = forloop.index | plus: offset %}
-						<div class="text-secondary text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
+						<div class="text-secondary text-truncate mt-n1">{{ commits[i].description }}</div>
 					</div>
 				</div>
 			</div>

src/pages/_includes/cards/users-list.html

@@ -1,41 +1,42 @@
 {% assign limit = include.limit | default: 8 %}
 {% assign offset = include.offset | default: 0 %}
 {% assign hoverable = include.hoverable | default: false %}
-{% assign checked-ids = include.checked-ids | default: '' | extract: ',' %}
+{% assign checked-ids = include.checked-ids | default: '' | split: ',' %}
 <div class="card{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
 	</div>
 	<div class="list-group list-group-flush{% if hoverable %} list-group-hoverable{% endif %}">
 		{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
-		{% for person in site.data.people limit: limit offset: offset %}
+		{% for person in people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
-			<div class="list-group-item{% if checked-ids contains forloop.index %} active{% endif %}">
+			{% assign index = '' | append: forloop.index %}
+			<div class="list-group-item{% if checked-ids contains index %} active{% endif %}">
 				<div class="row align-items-center">
 					{% if include.checkbox %}
-					<div class="col-auto"><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
+					<div class="col-auto"><input type="checkbox" class="form-check-input"{% if checked-ids contains index %} checked{% endif %}></div>
 					{% else %}
 					<div class="col-auto"><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
 					{% endif %}
 					<div class="col-auto">
 						<a href="#">
-							{% include ui/avatar.html person=person %}
+							{% include "ui/avatar.html" person=person %}
 						</a>
 					</div>
 
 					<div class="col text-truncate">
 						<a href="#" class="text-reset d-block">{{ person.full_name }}</a>
 						{% assign i = forloop.index | plus: offset %}
-						<div class="d-block text-secondary text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
+						<div class="d-block text-secondary text-truncate mt-n1">{{ commits[i].description }}</div>
 					</div>
 					{% if hoverable %}
-					{% if checked-ids contains forloop.index %}
+					{% if checked-ids contains index %}
 					{% assign star-color = 'text-yellow' %}
 					{% else %}
 					{% assign star-color = 'text-secondary' %}
 					{% endif %}
 					<div class="col-auto">
-						<a href="#" class="list-group-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
+						<a href="#" class="list-group-item-actions{% if checked-ids contains index %} show{% endif %}">{% include "ui/icon.html" icon="star" class=star-color %}</a>
 					</div>
 					{% endif %}
 				</div>

src/pages/_includes/example.html

@@ -1,46 +0,0 @@
-{% assign demo-code = code %}
-{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
-{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
-
-<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns or include.light %} example-bg{% endif %}">
-	<div class="example-content">
-		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
-		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
-		{% if include.modal %}<div class="example-modal-backdrop"></div>{% endif %}
-		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
-
-		{{ demo-code }}
-
-		{% if include.wrapper %}</div>{% endif %}
-		{% if include.columns %}</div>{% endif %}
-		{% if include.max-width %}</div>{% endif %}
-	</div>
-</div>
-
-
-{% capture html %}
-{{ code }}
-
-{% removeemptylines %}
-{{ site.captured_global.scripts | last }}
-{% endremoveemptylines %}
-{% endcapture %}
-
-{% assign html = html | strip %}
-{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %}
-
-{% capture new_line %}
-{% endcapture %}
-{% assign html = html | replace_regex: "\n\n+", new_line %}
-
-{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
-{% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %}
-{% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
-{% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
-{% assign html = html | replace_regex: 'class=" ', 'class="' %}
-
-{% assign html = html | htmlbeautifier %}
-
-<div class="example-code">
-	{% highlight html %}{{ html }}{% endhighlight %}
-</div>

src/pages/_includes/forms/form-elements-1.html

@@ -1,6 +1,6 @@
-{% include parts/form/input.html type="static" %}
-{% include parts/form/input.html type="text" hint="Here's some more info." %}
-{% include parts/form/input.html type="password" hint="Here's some more info." %}
+{% include "parts/form/input.html" type="static" %}
+{% include "parts/form/input.html" type="text" hint="Here's some more info." %}
+{% include "parts/form/input.html" type="password" hint="Here's some more info." %}
 
 <div class="mb-3">
 	<label class="form-label">Disabled</label>
@@ -21,12 +21,12 @@
 	<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 </div>
 
-{% include parts/form/select.html %}
-{% include parts/form/select.html label="Select multiple" multiple=true %}
+{% include "parts/form/select.html" %}
+{% include "parts/form/select.html" label="Select multiple" multiple=true %}
 
 <div class="mb-3">
 	<div class="form-label">Select multiple states</div>
-	{% include ui/select.html key="states" multiple=true %}
+	{% include "ui/select.html" key="states" multiple=true %}
 </div>
 
 <div class="mb-3">
@@ -39,7 +39,7 @@
 		<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			Action
 		</button>
-		{% include ui/dropdown-menu.html %}
+		{% include "ui/dropdown-menu.html" %}
 		<input type="text" class="form-control" aria-label="Text input with dropdown button">
 	</div>
 </div>
@@ -49,12 +49,12 @@
 		<input type="text" class="form-control">
 		<button type="button" class="btn">Action</button>
 		<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
-		{% include ui/dropdown-menu.html right=true %}
+		{% include "ui/dropdown-menu.html" right=true %}
 	</div>
 </div>
 
-{% include parts/form/input-icon.html %}
-{% include parts/form/input-icon-separated.html %}
+{% include "parts/form/input-icon.html" %}
+{% include "parts/form/input-icon-separated.html" %}
 
 
 <div class="mb-3">

src/pages/_includes/forms/form-elements-2.html

@@ -1,7 +1,7 @@
 <div class="mb-3">
 	<label class="form-label">Form control rounded</label>
 	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
-	{% include ui/form/input-icon.html input-class="form-control-rounded" %}
+	{% include "ui/form/input-icon.html" input-class="form-control-rounded" %}
 </div>
 
 <div class="mb-3">
@@ -11,30 +11,30 @@
 
 <div class="mb-3">
 	<label class="form-label">Input group</label>
-	{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
-	{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
-	{% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
+	{% include "ui/form/input-group.html" prepend="@" placeholder="username" class="mb-2" %}
+	{% include "ui/form/input-group.html" append=".tabler.io" placeholder="subdomain" class="mb-2" %}
+	{% include "ui/form/input-group.html" prepend="https://" append=".tabler.io" placeholder="subdomain" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Input with checkbox or radios</label>
-	{% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
-	{% include ui/form/input-group.html append="radio" %}
+	{% include "ui/form/input-group.html" prepend="checkbox" class="mb-2" %}
+	{% include "ui/form/input-group.html" append="radio" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Input with prepended text</label>
-   {% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
+   {% include "ui/form/input-group.html" prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Input with appended text</label>
-   {% include ui/form/input-group.html append=".tabler.io" input-class="text-end pe-0" flat=true value="yourfancydomain" %}
+   {% include "ui/form/input-group.html" append=".tabler.io" input-class="text-end pe-0" flat=true value="yourfancydomain" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Input with appended link</label>
-	{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
+	{% include "ui/form/input-group.html" append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
 </div>
 
 {% capture html %}
@@ -43,12 +43,12 @@
 
 <div class="mb-3">
 	<label class="form-label">Input with appended kbd</label>
-	{% include ui/form/input-group.html append-html=html flat=true %}
+	{% include "ui/form/input-group.html" append-html=html flat=true %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Input with appended icon links</label>
-	{% include ui/form/input-group.html append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
+	{% include "ui/form/input-group.html" append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
 </div>
 
 <div class="mb-3">

src/pages/_includes/forms/form-elements-3.html

@@ -1,11 +1,11 @@
-{% include parts/form/input-image.html %}
-{% include parts/form/input-image-radio.html offset=10 %}
-{% include parts/form/input-color.html %}
-{% include parts/form/input-color.html name="color-rounded" rounded=true %}
-{% include parts/form/input-colorpicker.html %}
+{% include "parts/form/input-image.html" %}
+{% include "parts/form/input-image-radio.html" offset=10 %}
+{% include "parts/form/input-color.html" %}
+{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
+{% include "parts/form/input-colorpicker.html" %}
 
-{% include parts/form/validation-states.html %}
-{% include parts/form/validation-states.html lite=true %}
+{% include "parts/form/validation-states.html" %}
+{% include "parts/form/validation-states.html" lite=true %}
 
 <label class="form-label">Form fieldset</label>
-{% include parts/form/fieldset.html %}
+{% include "parts/form/fieldset.html" %}

src/pages/_includes/forms/form-elements-4.html

@@ -1,34 +1,34 @@
 
-{% include parts/form/input-selectgroups.html %}
-{% include parts/form/selectgroup-payments.html %}
-{% include parts/form/selectgroup-project-manager.html %}
+{% include "parts/form/input-selectgroups.html" %}
+{% include "parts/form/selectgroup-payments.html" %}
+{% include "parts/form/selectgroup-project-manager.html" %}
 
 <div class="mb-3">
 	<label class="form-label">Buttons group</label>
-	{% include ui/button-group.html items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
+	{% include "ui/button-group.html" items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Buttons group with dropdown</label>
-	{% include ui/button-group.html items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
+	{% include "ui/button-group.html" items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
 </div>
 
 <div class="row">
 	<div class="col">
 		<div class="mb-3">
 			<label class="form-label">Vertical buttons group</label>
-			{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
+			{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
 		</div>
 	</div>
 	<div class="col">
 		<div class="mb-3">
 			<label class="form-label">Vertical with dropdown</label>
-			{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
+			{% include "ui/button-group.html" items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
 		</div>
 	</div>
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Toolbar</label>
-	{% include ui/button-group.html icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
+	{% include "ui/button-group.html" icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
 </div>

src/pages/_includes/forms/form-elements-5.html

@@ -1,8 +1,8 @@
-{% include parts/form/input-radios.html %}
-{% include parts/form/input-radios-inline.html %}
+{% include "parts/form/input-radios.html" %}
+{% include "parts/form/input-radios-inline.html" %}
 
-{% include parts/form/input-checkboxes.html %}
-{% include parts/form/input-checkboxes-inline.html %}
+{% include "parts/form/input-checkboxes.html" %}
+{% include "parts/form/input-checkboxes-inline.html" %}
 
 <div class="mb-3">
 	<label class="form-label">Checkboxes with description</label>
@@ -33,15 +33,15 @@
 	</label>
 </div>
 
-{% include parts/form/input-toggle.html %}
-{% include parts/form/input-toggle-single.html %}
+{% include "parts/form/input-toggle.html" %}
+{% include "parts/form/input-toggle-single.html" %}
 
 <div class="mb-3">
 	<label class="form-label">Notification</label>
-	{% include parts/form/checkboxes-list.html %}
+	{% include "parts/form/checkboxes-list.html" %}
 </div>
 
-{% include parts/form/input-file.html %}
+{% include "parts/form/input-file.html" %}
 
 
 <div class="mb-3">
@@ -86,14 +86,14 @@
 
 <div class="mb-3">
 	<label class="form-label">Text mask</label>
-	{% include ui/form/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
+	{% include "ui/form/input-mask.html" mask="00/00/0000" placeholder="00/00/0000" visible=true %}
 </div>
 <div class="mb-3">
 	<label class="form-label">Telephone mask</label>
-	{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
+	{% include "ui/form/input-mask.html" mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Autosize textarea</label>
-	{% include ui/form/textarea-autosize.html %}
+	{% include "ui/form/textarea-autosize.html" %}
 </div>

src/pages/_includes/forms/form-elements-6.html

@@ -1,68 +1,68 @@
-{% include parts/form/input-datalist.html %}
-{% include parts/form/input-range.html %}
+{% include "parts/form/input-datalist.html" %}
+{% include "parts/form/input-range.html" %}
 
 <div class="mb-3">
 	<label class="form-label">Datepicker</label>
-	{% include ui/datepicker.html id="default" class="mb-2" %}
-	{% include ui/datepicker.html id="icon" layout="icon" class="mb-2" %}
-	{% include ui/datepicker.html id="icon-prepend" layout="icon-prepend" %}
+	{% include "ui/datepicker.html" id="default" class="mb-2" %}
+	{% include "ui/datepicker.html" id="icon" layout="icon" class="mb-2" %}
+	{% include "ui/datepicker.html" id="icon-prepend" layout="icon-prepend" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Inline datepicker</label>
-	{% include ui/datepicker.html id="inline" inline=true %}
+	{% include "ui/datepicker.html" id="inline" inline=true %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Progress</label>
-	{% include ui/progress.html class="mb-2" %}
-	{% include ui/progress.html indeterminate=true color="green" %}
+	{% include "ui/progress.html" class="mb-2" %}
+	{% include "ui/progress.html" indeterminate=true color="green" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Form buttons</label>
 	<div class="row">
 		<div class="col">
-			{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}
+			{% include "ui/button.html"  block=true icon="brand-github" icon-color="github" text="Login with Github" %}
 		</div>
 		<div class="col">
-			{% include ui/button.html  block=true icon="brand-x" icon-color="x" text="Login with X" %}
+			{% include "ui/button.html"  block=true icon="brand-x" icon-color="x" text="Login with X" %}
 		</div>
 	</div>
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Tags input</label>
-	{% include ui/select.html key="tags" placeholder="Select tags" %}
+	{% include "ui/select.html" key="tags" placeholder="Select tags" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select</label>
-	{% include ui/select.html key="users" %}
+	{% include "ui/select.html" key="users" %}
 </div>
 
 <div class="mb-3">
 	 <label class="form-label">Advanced select with optgroup</label>
-	 {% include ui/select.html key="optgroups" %}
+	 {% include "ui/select.html" key="optgroups" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with avatars</label>
-	{% include ui/select.html key="people" indicator="avatar" %}
+	{% include "ui/select.html" key="people" indicator="avatar" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with flags</label>
-	{% include ui/select.html key="countries" indicator="flag" %}
+	{% include "ui/select.html" key="countries" indicator="flag" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with labels</label>
-	{% include ui/select.html key="labels" indicator="label" %}
+	{% include "ui/select.html" key="labels" indicator="label" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select with validation state</label>
-	{% include ui/select.html id="countries-valid" key="countries" state="valid" class="mb-3" %}
-	{% include ui/select.html id="countries-invalid" key="countries" state="invalid" %}
+	{% include "ui/select.html" id="countries-valid" key="countries" state="valid" class="mb-3" %}
+	{% include "ui/select.html" id="countries-invalid" key="countries" state="invalid" %}
 </div>