From b1a6f809cef7764ff8d7d4a4b8b246f9daaff3b6 Mon Sep 17 00:00:00 2001
From: Nabil Ould Hamou <ouldhamounabil@gmail.com>
Date: Sun, 7 Jan 2024 04:14:21 +0100
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20refonte=20graphique=20compl=C3=A8te?=
 =?UTF-8?q?=20du=20site.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       | 417 +++++++++++++++++-------
 package.json                            |  10 +-
 src/app.css                             |  78 ++++-
 src/lib/Projects.ts                     |  24 +-
 src/lib/components/HamburgerMenu.svelte |  29 ++
 src/lib/components/LightSwitch.svelte   |  17 +
 src/lib/components/Navbar.svelte        |  14 +-
 src/lib/components/Project.svelte       |  57 +++-
 src/routes/+error.svelte                |   2 +-
 src/routes/+layout.svelte               |  10 +-
 src/routes/+page.svelte                 |  54 ++-
 src/routes/about/+page.svelte           |   4 +-
 src/routes/projects/+page.svelte        |  12 +-
 svelte.config.js                        |   5 +-
 tailwind.config.js                      |  82 +++--
 15 files changed, 621 insertions(+), 194 deletions(-)
 create mode 100644 src/lib/components/HamburgerMenu.svelte
 create mode 100644 src/lib/components/LightSwitch.svelte

diff --git a/package-lock.json b/package-lock.json
index 248ca48..3f2b995 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,15 @@
 			"name": "portfolio",
 			"version": "0.0.1",
 			"dependencies": {
-				"svelte-icons": "^2.1.0"
+				"@radix-ui/react-slot": "^1.0.2",
+				"bits-ui": "^0.13.3",
+				"clsx": "^2.1.0",
+				"mode-watcher": "^0.1.2",
+				"radix-icons-svelte": "^1.2.1",
+				"svelte-icons": "^2.1.0",
+				"tailwind-merge": "^2.2.0",
+				"tailwind-variants": "^0.1.20",
+				"vaul-svelte": "^0.0.4"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
@@ -43,7 +51,6 @@
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
 			"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -55,7 +62,6 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
 			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.0",
 				"@jridgewell/trace-mapping": "^0.3.9"
@@ -64,6 +70,17 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@babel/runtime": {
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
+			"integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@esbuild/android-arm": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -481,6 +498,31 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+			"integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+			"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+			"dependencies": {
+				"@floating-ui/core": "^1.5.3",
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.0.tgz",
+			"integrity": "sha512-T4jNeM6dMzXONGkSjk7+O+eFQTVbw7KHi5OYuvFaBer3Wcrmpwi6fHKcT/FdSf7boWC7H9eXTyYTFZOQdJ1AMA==",
+			"peerDependencies": {
+				"react": ">=16.8.0"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.11",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -514,11 +556,18 @@
 			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
 			"dev": true
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.1.tgz",
+			"integrity": "sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.0.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -532,7 +581,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
 			"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -541,7 +589,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -549,24 +596,54 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"dev": true
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.19",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
 			"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@melt-ui/svelte": {
+			"version": "0.67.0",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.67.0.tgz",
+			"integrity": "sha512-fd9PsDE6sKbeyExagqH0nOpZEnDqyr2efbkjfmCRRYXVW5vlDEOPaSB+mg4Tjch121102sFH1Od+MlXwmeHy3A==",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^4.0.2"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
+		"node_modules/@melt-ui/svelte/node_modules/nanoid": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+			"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.stat": "2.0.5",
 				"run-parallel": "^1.1.9"
@@ -579,7 +656,6 @@
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
 			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -588,7 +664,6 @@
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
 			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.scandir": "2.1.5",
 				"fastq": "^1.6.0"
@@ -603,6 +678,41 @@
 			"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
 			"dev": true
 		},
+		"node_modules/@radix-ui/react-compose-refs": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+			"integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-slot": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+			"integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -686,6 +796,14 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+			"integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.2.tgz",
@@ -695,8 +813,7 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-			"dev": true
+			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
 		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.12",
@@ -908,7 +1025,6 @@
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
 			"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -968,14 +1084,12 @@
 		"node_modules/any-promise": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-			"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-			"dev": true
+			"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
 		},
 		"node_modules/anymatch": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
 			"dependencies": {
 				"normalize-path": "^3.0.0",
 				"picomatch": "^2.0.4"
@@ -987,8 +1101,7 @@
 		"node_modules/arg": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-			"dev": true
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
 		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
@@ -1000,7 +1113,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1055,7 +1167,6 @@
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
 			"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1063,23 +1174,50 @@
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
 		},
+		"node_modules/bits-ui": {
+			"version": "0.13.3",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.13.3.tgz",
+			"integrity": "sha512-sbhFPVRHozz0tzAJyJrGJ7whcQfSTSiwtYvKmPMbY/qw+cgqS2J34G2HiLgnRkcrV4DVUGkXdpfahRL6cGfonw==",
+			"dependencies": {
+				"@internationalized/date": "^3.5.1",
+				"@melt-ui/svelte": "0.67.0",
+				"nanoid": "^5.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
+		"node_modules/bits-ui/node_modules/nanoid": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.4.tgz",
+			"integrity": "sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -1089,7 +1227,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -1151,7 +1288,6 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
 			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -1196,7 +1332,6 @@
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
 			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -1223,7 +1358,6 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -1231,11 +1365,18 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/clsx": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+			"integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -1266,7 +1407,6 @@
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
 			"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -1274,8 +1414,7 @@
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
 		},
 		"node_modules/cookie": {
 			"version": "0.5.0",
@@ -1304,7 +1443,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1317,7 +1455,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
 			"bin": {
 				"cssesc": "bin/cssesc"
 			},
@@ -1361,7 +1498,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1384,8 +1520,7 @@
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-			"dev": true
+			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
 		},
 		"node_modules/dir-glob": {
 			"version": "3.0.1",
@@ -1402,8 +1537,7 @@
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-			"dev": true
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
 		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
@@ -1715,7 +1849,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -1739,7 +1872,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
 			"integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.stat": "^2.0.2",
 				"@nodelib/fs.walk": "^1.2.3",
@@ -1755,7 +1887,6 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -1779,7 +1910,6 @@
 			"version": "1.15.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
 			"integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-			"dev": true,
 			"dependencies": {
 				"reusify": "^1.0.4"
 			}
@@ -1800,7 +1930,6 @@
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -1844,6 +1973,14 @@
 			"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
 			"dev": true
 		},
+		"node_modules/focus-trap": {
+			"version": "7.5.4",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+			"integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+			"dependencies": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
@@ -1860,14 +1997,12 @@
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -1880,8 +2015,7 @@
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
 		},
 		"node_modules/glob": {
 			"version": "7.2.3",
@@ -1907,7 +2041,6 @@
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
 			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.3"
 			},
@@ -1978,7 +2111,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
 			"dependencies": {
 				"function-bind": "^1.1.1"
 			},
@@ -2043,7 +2175,6 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"dev": true,
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -2052,14 +2183,12 @@
 		"node_modules/inherits": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 		},
 		"node_modules/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
 			},
@@ -2071,7 +2200,6 @@
 			"version": "2.13.0",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
 			"integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
-			"dev": true,
 			"dependencies": {
 				"has": "^1.0.3"
 			},
@@ -2083,7 +2211,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2092,7 +2219,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -2104,7 +2230,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -2122,7 +2247,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -2137,11 +2261,16 @@
 			"version": "1.20.0",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
 			"integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
-			"dev": true,
 			"bin": {
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"peer": true
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2213,7 +2342,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
 			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -2221,14 +2349,12 @@
 		"node_modules/lines-and-columns": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-			"dev": true
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
 		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -2251,6 +2377,18 @@
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
 			"dev": true
 		},
+		"node_modules/loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"peer": true,
+			"dependencies": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			},
+			"bin": {
+				"loose-envify": "cli.js"
+			}
+		},
 		"node_modules/lru-cache": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2267,7 +2405,6 @@
 			"version": "0.30.3",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
 			"integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@@ -2278,14 +2415,12 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
 			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -2294,7 +2429,6 @@
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
 			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-			"dev": true,
 			"dependencies": {
 				"braces": "^3.0.2",
 				"picomatch": "^2.3.1"
@@ -2316,7 +2450,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
 			},
@@ -2345,6 +2478,14 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/mode-watcher": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.1.2.tgz",
+			"integrity": "sha512-XTdPCdqC3kqSvB+Q262Kor983YJkkB2Z3vj9uqg5IqKQpOdiz+xB99Jihp8sWbyM67drC7KKp0Nt5FzCypZi2g==",
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -2373,7 +2514,6 @@
 			"version": "2.7.0",
 			"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
 			"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-			"dev": true,
 			"dependencies": {
 				"any-promise": "^1.0.0",
 				"object-assign": "^4.0.1",
@@ -2384,7 +2524,6 @@
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -2420,7 +2559,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2438,7 +2576,6 @@
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2447,7 +2584,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
 			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -2456,7 +2592,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
 			"dependencies": {
 				"wrappy": "1"
 			}
@@ -2533,7 +2668,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2550,8 +2684,7 @@
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-			"dev": true
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-type": {
 			"version": "4.0.0",
@@ -2566,7 +2699,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -2576,14 +2708,12 @@
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -2595,7 +2725,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
 			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2604,7 +2733,6 @@
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
 			"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -2613,7 +2741,6 @@
 			"version": "8.4.33",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
 			"integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -2641,7 +2768,6 @@
 			"version": "15.1.0",
 			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
 			"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-			"dev": true,
 			"dependencies": {
 				"postcss-value-parser": "^4.0.0",
 				"read-cache": "^1.0.0",
@@ -2658,7 +2784,6 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
 			"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-			"dev": true,
 			"dependencies": {
 				"camelcase-css": "^2.0.1"
 			},
@@ -2706,7 +2831,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
 			"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-			"dev": true,
 			"dependencies": {
 				"postcss-selector-parser": "^6.0.11"
 			},
@@ -2767,7 +2891,6 @@
 			"version": "6.0.13",
 			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
 			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-			"dev": true,
 			"dependencies": {
 				"cssesc": "^3.0.0",
 				"util-deprecate": "^1.0.2"
@@ -2779,8 +2902,7 @@
 		"node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-			"dev": true
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
@@ -2829,7 +2951,6 @@
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
 			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -2845,11 +2966,27 @@
 				}
 			]
 		},
+		"node_modules/radix-icons-svelte": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/radix-icons-svelte/-/radix-icons-svelte-1.2.1.tgz",
+			"integrity": "sha512-svmiMd0ocpdTm9cvAz0klcZpnh639lVctj6psQiawd4pYalVzOG4cX+JizAgRckyTAsRVdzObP7D2EBrSfdghA=="
+		},
+		"node_modules/react": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+			"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
 			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-			"dev": true,
 			"dependencies": {
 				"pify": "^2.3.0"
 			}
@@ -2858,7 +2995,6 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
 			"dependencies": {
 				"picomatch": "^2.2.1"
 			},
@@ -2866,11 +3002,15 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+		},
 		"node_modules/resolve": {
 			"version": "1.22.4",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
 			"integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
-			"dev": true,
 			"dependencies": {
 				"is-core-module": "^2.13.0",
 				"path-parse": "^1.0.7",
@@ -2896,7 +3036,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
 			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-			"dev": true,
 			"engines": {
 				"iojs": ">=1.0.0",
 				"node": ">=0.10.0"
@@ -2937,7 +3076,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
 			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -3076,7 +3214,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3121,7 +3258,6 @@
 			"version": "3.34.0",
 			"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
 			"integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.2",
 				"commander": "^4.0.0",
@@ -3143,7 +3279,6 @@
 			"version": "7.1.6",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
 			"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-			"dev": true,
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
 				"inflight": "^1.0.4",
@@ -3175,7 +3310,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -3187,7 +3321,6 @@
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz",
 			"integrity": "sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3372,11 +3505,51 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+		},
+		"node_modules/tailwind-merge": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.0.tgz",
+			"integrity": "sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.23.5"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
+		"node_modules/tailwind-variants": {
+			"version": "0.1.20",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
+			"integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
+			"dependencies": {
+				"tailwind-merge": "^1.14.0"
+			},
+			"engines": {
+				"node": ">=16.x",
+				"pnpm": ">=7.x"
+			},
+			"peerDependencies": {
+				"tailwindcss": "*"
+			}
+		},
+		"node_modules/tailwind-variants/node_modules/tailwind-merge": {
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+			"integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
 			"integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
-			"dev": true,
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -3413,7 +3586,6 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
 			"integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-			"dev": true,
 			"dependencies": {
 				"lilconfig": "^2.0.5",
 				"yaml": "^2.1.1"
@@ -3442,7 +3614,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
 			"integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 14"
 			}
@@ -3457,7 +3628,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
 			"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-			"dev": true,
 			"dependencies": {
 				"any-promise": "^1.0.0"
 			}
@@ -3466,7 +3636,6 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
 			"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-			"dev": true,
 			"dependencies": {
 				"thenify": ">= 3.1.0 < 4"
 			},
@@ -3488,7 +3657,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -3508,14 +3676,12 @@
 		"node_modules/ts-interface-checker": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-			"dev": true
+			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
 		},
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-			"dev": true
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/tsutils": {
 			"version": "3.21.0",
@@ -3629,8 +3795,18 @@
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+		},
+		"node_modules/vaul-svelte": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/vaul-svelte/-/vaul-svelte-0.0.4.tgz",
+			"integrity": "sha512-JqmjJWUM1ubJecVyUbCoKQ+K8YV1rJlSILb5kg3hARDvFggPEM0HzHWgYS2xXYuf9VTIgvwRnqFHNGAzPc1sfA==",
+			"dependencies": {
+				"bits-ui": "^0.13.0"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
 		},
 		"node_modules/vite": {
 			"version": "4.5.1",
@@ -3719,8 +3895,7 @@
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
diff --git a/package.json b/package.json
index e99db6e..88e589e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,14 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-icons": "^2.1.0"
+		"@radix-ui/react-slot": "^1.0.2",
+		"bits-ui": "^0.13.3",
+		"clsx": "^2.1.0",
+		"mode-watcher": "^0.1.2",
+		"radix-icons-svelte": "^1.2.1",
+		"svelte-icons": "^2.1.0",
+		"tailwind-merge": "^2.2.0",
+		"tailwind-variants": "^0.1.20",
+		"vaul-svelte": "^0.0.4"
 	}
 }
diff --git a/src/app.css b/src/app.css
index 44513f3..6662813 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,8 +1,78 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.content-container {
-    height: calc(100vh - theme('spacing.16'));
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 4.9% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
\ No newline at end of file
diff --git a/src/lib/Projects.ts b/src/lib/Projects.ts
index 82bc589..285224e 100644
--- a/src/lib/Projects.ts
+++ b/src/lib/Projects.ts
@@ -2,25 +2,39 @@ const projects = [
     {
         "name": "Portfolio",
         "stack": ["SvelteKit", "TypeScript", "TailwindCSS"],
-        "description": "SvelteKit project to learn svelte and also update my personal website.",
+        "shortDesc": "Personal portfolio made using SvelteKit for learning purposes.",
+        "description": "This project is the website that you are actually using. This is my personal portfolio and used " +
+            "this project as an occasion to learn SvelteKit. In order to have an easier time with the design and make something " +
+            "good looking I also used TailwindCSS and Shadcn-svelte which is a binding for Shadcn/ui in Svelte. This project was " +
+            "the perfect occasion for me to learn and get more familiar with SvelteKit which is now my favorite framework for web developpment.",
         "url": "https://github.com/nabilouldhamou/portfolio"
     },
     {
         "name": "Green Plates",
-        "stack": ["GoLang", "GinGonic", "SvelteKit", "TypeScript"],
-        "description": "Recipe website with custom made backend using GoLang.",
+        "stack": ["Go", "GinGonic", "SvelteKit", "TypeScript"],
+        "shortDesc": "Recipe website with custom made backend using Go.",
+        "description": "Green Plates is a recipe sharing website made in collaboration with my friend @BenGregory23. " +
+            "This website is also made with SvelteKit for the frontend but also features a custom made high performance backend using Go and GinGonic. " +
+            "The website is still in a work in progress but the backend 99% done, only missing file fetching after the files are uploaded to the server.",
         "url": "https://github.com/NabilOuldHamou?tab=repositories&q=green-plates&type=&language=&sort="
     },
     {
         "name": "AnimeWorld",
         "stack": ["Symfony 6", "PHP", "Nginx"],
-        "description": "University group project for the Web Server Programming class. I took the initiative to deploy the website on my VPS.",
+        "shortDesc": "University group project for my Web Server Programming class.",
+        "description": "For my Web Server Programming class, we were tasked with creating a website using Symfony 6 and other libraries, " +
+            "we decided to make an anime rating website, where users can create their own accounts are rate animes using a grade from 0 to 5 and also leave a comment. " +
+            "This project was the occasion for me to endorse a bit as a group leader by planning and taking care of the GitHub repository by giving some rules to follow to not compromise the repository. " +
+            "This was also the occasion for me to work once again on deploying a website on a Linux VPS by using Nginx and having to come up with the configuration needed for our website and also configure mailer, DNS and other domain related stuff.",
         "url": "https://github.com/luxray555/projetsymfony"
     },
     {
         "name": "EMG reader",
         "stack": ["C", "Arduino"],
-        "description": "EMG reader for a friend in Biomedical Masters. The source code is private.",
+        "shortDesc": "EMG reader for a friend in Biomedical Masters.",
+        "description": "A friend in Biomedical Masters degree asked for my help to conceive a program, that would allow him to read the data from EMG using an Arduino board. " +
+            "I proceeded to write a program that can read the data from the EMG and send it to a computer where that data can be read and processed accordingly. " +
+            "My friend did not release the source code thus the project is considered proprietary.",
         "url": ""
     }
 ]
diff --git a/src/lib/components/HamburgerMenu.svelte b/src/lib/components/HamburgerMenu.svelte
new file mode 100644
index 0000000..fc88470
--- /dev/null
+++ b/src/lib/components/HamburgerMenu.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Button } from "@/components/ui/button";
+    import * as Drawer from "@/components/ui/drawer";
+    import {HamburgerMenu} from "radix-icons-svelte";
+    import routes from "@/Routes";
+    export let path;
+</script>
+
+<Drawer.Root>
+    <Drawer.Trigger asChild let:builder>
+        <Button class="sm:hidden" variant="ghost" builders={[builder]}><HamburgerMenu class="w-6 h-6" /></Button>
+    </Drawer.Trigger>
+    <Drawer.Content>
+        <div class="mx-auto w-full max-w-sm mb-10">
+            <Drawer.Header>
+                <Drawer.Title>nbiloh.me</Drawer.Title>
+            </Drawer.Header>
+            <div class="p-4 pb-0">
+                <div class="flex flex-col gap-4 items-center justify-center space-x-2 text-muted-foreground">
+                    {#each routes as route}
+                        <Drawer.Close asChild let:builder>
+                            <Button builders={[builder]} variant="ghost" class={`cursor-pointer ${path === route.href ? 'text-foreground font-bold' : 'hover:text-foreground'}`} href={route.href}>{route.name}</Button>
+                        </Drawer.Close>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    </Drawer.Content>
+</Drawer.Root>
\ No newline at end of file
diff --git a/src/lib/components/LightSwitch.svelte b/src/lib/components/LightSwitch.svelte
new file mode 100644
index 0000000..80c6c65
--- /dev/null
+++ b/src/lib/components/LightSwitch.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { Button } from "@/components/ui/button";
+    import { Sun, Moon } from "radix-icons-svelte";
+
+    import {ModeWatcher, toggleMode} from "mode-watcher";
+</script>
+
+<ModeWatcher />
+<Button on:click={toggleMode} variant="outline" size="icon">
+    <Sun
+            class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+    />
+    <Moon
+            class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+    />
+    <span class="sr-only">Toggle theme</span>
+</Button>
\ No newline at end of file
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 3913d7e..7fc0284 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,15 +1,19 @@
 <script>
     import routes from '$lib/Routes'
+    import LightSwitch from "@/components/LightSwitch.svelte";
+    import HamburgerMenu from "@/components/HamburgerMenu.svelte";
     export let path;
 </script>
 
-<div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-dark-charcoal-gray'>
-    <div class='pt-4 w-4/5 flex justify-between'>
-        <img alt="Logo" src="/images/console.png" class='w-12 h-12' />
-        <div class='flex items-center justify-between sm:gap-x-8 gap-x-4 font-medium text-lg'>
+<div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-background'>
+    <div class='pt-4 w-4/5 flex justify-between items-center'>
+        <span class="font-bold cursor-default">nbiloh.me</span>
+        <div class='hidden sm:visible sm:flex items-center justify-between sm:gap-x-8 gap-x-4 font-medium text-lg text-muted-foreground'>
             {#each routes as route}
-                <a class={`cursor-pointer ${path === route.href ? 'text-accent' : 'hover:text-accent'}`} href={route.href}>{route.name}</a>
+                <a class={`cursor-pointer ${path === route.href ? 'text-foreground' : 'hover:text-foreground'}`} href={route.href}>{route.name}</a>
             {/each}
         </div>
+        <HamburgerMenu path={path} />
+        <LightSwitch />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/Project.svelte b/src/lib/components/Project.svelte
index 5341111..46aea77 100644
--- a/src/lib/components/Project.svelte
+++ b/src/lib/components/Project.svelte
@@ -1,14 +1,57 @@
 <script lang="ts">
+    import * as Card from "@/components/ui/card";
+    import {Button, buttonVariants} from "@/components/ui/button";
+    import * as Dialog from "@/components/ui/dialog"
+    import {EyeNone, GithubLogo} from "radix-icons-svelte";
     export let name: string;
     export let stack: string;
+    export let shortDescription: string;
     export let description: string;
     export let url: string;
 </script>
 
-<a target='_blank' href='{url}'>
-    <div class='rounded-md border border-gray-200 max-w-xl text-center flex flex-col items-center justify-center flex-wrap hover:border-accent transition ease-in-out duration-500'>
-        <h1 class='text-blue-300 text-xl font-medium'>{name}</h1>
-        <h3 class='text-accent w-11/12 break-words'>{stack}</h3>
-        <p class='w-4/5'>{description}</p>
-    </div>
-</a>
\ No newline at end of file
+<Card.Root class="max-w-xs w-[320px]">
+    <Card.Header>
+        <Card.Title class="font-bold">{name}</Card.Title>
+        <Card.Description>{stack}</Card.Description>
+    </Card.Header>
+    <Card.Content>
+        <p>{shortDescription}</p>
+    </Card.Content>
+    <Card.Footer class="flex justify-between items-center">
+        {#if url === ""}
+            <Button disabled="true" variant="outline">
+                <EyeNone class="mr-2 h-4 w-4" />
+                Proprietary
+            </Button>
+            {:else }
+            <Button href={url} target="_blank" variant="outline">
+                <GithubLogo class="mr-2 h-4 w-4" />
+                View on GitHub
+            </Button>
+        {/if}
+        <Dialog.Root>
+            <Dialog.Trigger class={buttonVariants({ variant: "default" })}>View More</Dialog.Trigger>
+            <Dialog.Content>
+                <Dialog.Header>
+                    <Dialog.Title>{name}</Dialog.Title>
+                    <Dialog.Description>{stack}</Dialog.Description>
+                </Dialog.Header>
+                <p>{description}</p>
+                <Dialog.Footer>
+                    {#if url === ""}
+                        <Button disabled="true" variant="outline">
+                            <EyeNone class="mr-2 h-4 w-4" />
+                            Proprietary
+                        </Button>
+                    {:else }
+                        <Button href={url} target="_blank" variant="outline">
+                            <GithubLogo class="mr-2 h-4 w-4" />
+                            View on GitHub
+                        </Button>
+                    {/if}
+                </Dialog.Footer>
+            </Dialog.Content>
+        </Dialog.Root>
+    </Card.Footer>
+</Card.Root>
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 9fc65fe..b637118 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,4 +1,4 @@
 <div class='flex flex-col items-center justify-center w-full h-full'>
-    <h1 class='text-lg text-accent font-bold'>404</h1>
+    <h1 class='text-lg text-foreground font-bold'>404</h1>
     <h3>This page does not exist.</h3>
 </div>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3a2fc07..66070a3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,12 +9,4 @@
   <section class='content-container'>
     <slot />
   </section>
-</main>
-
-<style lang="postcss">
-  :global(html) {
-    font-family: theme(fontFamily.fira-code);
-    background-color: theme(colors.dark-charcoal-gray);
-    color: theme(colors.white-smoke);
-  }
-</style>
\ No newline at end of file
+</main>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 96f2367..e36a1db 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,18 +1,44 @@
 <script lang="ts">
-import FaGithub from 'svelte-icons/fa/FaGithub.svelte'
-import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
-import FaRegFileAlt from 'svelte-icons/fa/FaRegFileAlt.svelte';
+    import {Button} from '@/components/ui/button'
+    import { GithubLogo } from "radix-icons-svelte";
+    import { TwitterLogo } from "radix-icons-svelte";
+    import { FileText } from "radix-icons-svelte";
+    import * as Card from "@/components/ui/card";
+    import * as Avatar from "@/components/ui/avatar"
 </script>
 
-<div class='flex flex-col justify-center items-center h-full font-bold text-center cursor-default'>
-    <div class='w-3/5'>
-        <h1 class='text-xl sm:text-4xl'>Hi I'm Nabil 👋</h1>
-        <p class='text-lg sm:text-2xl'>A <span class='text-accent'>Computer Science</span> student 🧑🏽‍💻 interested in <span class='text-accent'>embedded systems engineering</span> 🔋 Currently based in France 🇫🇷</p>
-    </div>
-    
-    <div class='w-3/5 h-10 flex mt-8 justify-evenly'>
-        <a class='hover:text-accent cursor-pointer' href="https://github.com/nabilouldhamou" target="_blank"><FaGithub /></a>
-        <a class='hover:text-accent cursor-pointer' href="https://twitter.com/nbil_o" target="_blank"><FaTwitter /></a>
-        <a class='hover:text-accent cursor-pointer' href="/CV.pdf" target="_blank"><FaRegFileAlt /></a>
-    </div>
+<div class='flex flex-col justify-center items-center h-full text-center cursor-default mt-20'>
+
+    <Card.Root class="max-w-xs sm:max-w-sm ease-in-out duration-500">
+        <Card.Header class="flex items-center">
+            <Card.Title>Nabil Ould Hamou</Card.Title>
+            <Card.Description>Computer Science Student</Card.Description>
+            <Avatar.Root class="h-32 w-32">
+                <Avatar.Image src="https://github.com/nabilouldhamou.png" alt="@nabilouldhamou" />
+                <Avatar.Fallback>NOH</Avatar.Fallback>
+            </Avatar.Root>
+        </Card.Header>
+        <Card.Content>
+            <p class="text-muted-foreground">Hi I am <span class="text-foreground font-bold">Nabil</span> 👋</p>
+            <p class="text-muted-foreground">I am a <span class="text-foreground">computer science student</span> 👨‍💻 interested in <span class="text-foreground">embedded systems engineering</span> 📟.</p>
+        </Card.Content>
+        <Card.Footer class="flex flex-col justify-center gap-2">
+            <div class="flex justify-center gap-1.5 sm:gap-3">
+                <Button href="https://github.com/nabilouldhamou" target='_blank' variant="outline">
+                    <GithubLogo class="mr-2 h-4 w-4" />
+                    Github
+                </Button>
+                <Button href="/CV.pdf" target='_blank' variant="outline">
+                    <FileText class="mr-2 h-4 w-4" />
+                    CV
+                </Button>
+                <Button href="https://x.com/nbil_o" target='_blank' variant="outline">
+                    <TwitterLogo class="mr-2 h-4 w-4" />
+                    Twitter
+                </Button>
+            </div>
+            <p class="font-bold">Contact: ouldhamounabil@gmail.com</p>
+        </Card.Footer>
+    </Card.Root>
+
 </div>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 5f13161..c7f371b 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,7 +1,7 @@
 <div class='flex flex-col justify-center items-center pt-6'>
     <div class='text-justify w-4/5 lg:w-3/5'>
-        <h3 class='text-accent md:text-4xl text-3xl pb-5 font-bold'>About Me</h3>
-        <p class='sm:text-xl text-md'>Hello I am <span class='text-accent'>Nabil Ould Hamou</span>, a <span class='text-accent'>computer science student</span>.
+        <h1 class='md:text-4xl text-3xl pb-5 font-bold'>About Me</h1>
+        <p class='text-muted-foreground text-lg'>I am <span class='text-foreground font-bold'>Nabil Ould Hamou</span>, a <span class='text-foreground font-bold'>computer science student</span>.
         I am currently studying computer science and making my way to become an embedded systems engineer. Since a very young age I always 
         loved tinkering, especially with electronics, anything from game consoles to computers. This curiosity led me into pursuing my dream
         of become a computer scientist.</p>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index c52a26a..f11d905 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -3,13 +3,15 @@
     import projects from '$lib/Projects'
 </script>
 
-<div class='flex flex-col items-center'>
+<div class='flex flex-col justify-center items-center pt-6'>
+    <div class='w-4/5 lg:w-3/5'>
+        <h1 class='md:text-4xl text-3xl pb-5 font-bold'>Projects</h1>
+
+    </div>
     
-    <h1 class='text-accent text-4xl font-bold my-4'>Projects</h1>
-    
-    <div class='flex flex-col gap-6 w-4/5 mb-6 items-center justify-center'>
+    <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6'>
         {#each projects as project}
-            <Project name={project.name} stack={project.stack} description={project.description} url={project.url} />
+            <Project name={project.name} stack={project.stack} shortDescription={project.shortDesc} description={project.description} url={project.url} />
         {/each}
     </div>
 </div>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 1cf26a0..9c2fdc3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,10 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+			"@/*": "./src/lib",
+		},
 	}
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 71cc6d4..8d260d9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,64 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
 /** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  purge: ["./src/**/*.svelte"],
-  darkMode: true,
-  theme: {
-    extend: {
-      colors: {
-        'dark-charcoal-gray': '#111111',
-        'white-smoke': '#efefef',
-        'accent': '#f9f871',
-        'lighter-gray': '#333333',
-      },
-      fontFamily: {
-        'fira-code': ['Fira Code', 'monospace']
-      }
-    }
-  },
-  plugins: []
-};
\ No newline at end of file
+const config = {
+	darkMode: ["class"],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+  safelist: ["dark"],
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	},
+};
+
+export default config;

From 2c4305a4029e4dccdc46494a16b35410c1508251 Mon Sep 17 00:00:00 2001
From: Nabil Ould Hamou <ouldhamounabil@gmail.com>
Date: Sun, 7 Jan 2024 04:16:51 +0100
Subject: [PATCH 2/4] feat: ajout de nouveaux fichiers fix: QOL -> "logo"
 cliquable pour revenir sur la page principale

---
 components.json                               | 13 ++++
 .../ui/avatar/avatar-fallback.svelte          | 19 ++++++
 .../components/ui/avatar/avatar-image.svelte  | 18 ++++++
 src/lib/components/ui/avatar/avatar.svelte    | 21 +++++++
 src/lib/components/ui/avatar/index.ts         | 13 ++++
 src/lib/components/ui/button/button.svelte    | 25 ++++++++
 src/lib/components/ui/button/index.ts         | 52 ++++++++++++++++
 .../components/ui/card/card-content.svelte    | 13 ++++
 .../ui/card/card-description.svelte           | 13 ++++
 src/lib/components/ui/card/card-footer.svelte | 13 ++++
 src/lib/components/ui/card/card-header.svelte | 13 ++++
 src/lib/components/ui/card/card-title.svelte  | 21 +++++++
 src/lib/components/ui/card/card.svelte        | 25 ++++++++
 src/lib/components/ui/card/index.ts           | 24 +++++++
 .../ui/dialog/dialog-content.svelte           | 36 +++++++++++
 .../ui/dialog/dialog-description.svelte       | 16 +++++
 .../components/ui/dialog/dialog-footer.svelte | 19 ++++++
 .../components/ui/dialog/dialog-header.svelte | 16 +++++
 .../ui/dialog/dialog-overlay.svelte           | 24 +++++++
 .../components/ui/dialog/dialog-portal.svelte |  9 +++
 .../components/ui/dialog/dialog-title.svelte  | 16 +++++
 src/lib/components/ui/dialog/index.ts         | 34 ++++++++++
 .../ui/drawer/drawer-content.svelte           | 24 +++++++
 .../ui/drawer/drawer-description.svelte       | 18 ++++++
 .../components/ui/drawer/drawer-footer.svelte | 20 ++++++
 .../components/ui/drawer/drawer-header.svelte | 19 ++++++
 .../ui/drawer/drawer-overlay.svelte           | 18 ++++++
 .../components/ui/drawer/drawer-title.svelte  | 18 ++++++
 src/lib/components/ui/drawer/drawer.svelte    | 17 +++++
 src/lib/components/ui/drawer/index.ts         | 37 +++++++++++
 src/lib/utils.ts                              | 62 +++++++++++++++++++
 31 files changed, 686 insertions(+)
 create mode 100644 components.json
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/components/ui/drawer/drawer-content.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-description.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-footer.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-header.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-overlay.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-title.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer.svelte
 create mode 100644 src/lib/components/ui/drawer/index.ts
 create mode 100644 src/lib/utils.ts

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..ce18a67
--- /dev/null
+++ b/components.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.css",
+    "baseColor": "zinc"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..3b9b24c
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn(
+		"flex h-full w-full items-center justify-center rounded-full bg-muted",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..27b0e7d
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..b8a6ee1
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn(
+		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..b08c780
--- /dev/null
+++ b/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..a128f14
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..9787e3e
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,52 @@
+import type { Button as ButtonPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default:
+				"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline:
+				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary:
+				"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants
+};
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..2388f2b
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..906782a
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..dab6252
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..d7412d7
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..e87b5c6
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..4a11395
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={cn(
+		"rounded-xl border bg-card text-card-foreground shadow",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..14a7f72
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..9f78e8a
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import * as Dialog from ".";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { Cross2 } from "radix-icons-svelte";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..7250e09
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..36c0cca
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..82fbe51
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..62f8f3f
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { fade } from "svelte/transition";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
+		className
+	)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..400e62b
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..fb863c9
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..c05c48e
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription
+};
diff --git a/src/lib/components/ui/drawer/drawer-content.svelte b/src/lib/components/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..2f5d543
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Portal>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		class={cn(
+			"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+			className
+		)}
+		{...$$restProps}
+	>
+		<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+		<slot />
+	</DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>
diff --git a/src/lib/components/ui/drawer/drawer-description.svelte b/src/lib/components/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..87de82c
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-description.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.DescriptionProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Description
+	bind:el
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Description>
diff --git a/src/lib/components/ui/drawer/drawer-footer.svelte b/src/lib/components/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..2e714dd
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/drawer/drawer-header.svelte b/src/lib/components/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..4bd2f5a
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/drawer/drawer-overlay.svelte b/src/lib/components/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..5bda25d
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.OverlayProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:el
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Overlay>
diff --git a/src/lib/components/ui/drawer/drawer-title.svelte b/src/lib/components/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..1d64d92
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-title.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.TitleProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Title
+	bind:el
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Title>
diff --git a/src/lib/components/ui/drawer/drawer.svelte b/src/lib/components/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..135c007
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.Root
+	{shouldScaleBackground}
+	bind:open
+	bind:activeSnapPoint
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Root>
diff --git a/src/lib/components/ui/drawer/index.ts b/src/lib/components/ui/drawer/index.ts
new file mode 100644
index 0000000..162af4f
--- /dev/null
+++ b/src/lib/components/ui/drawer/index.ts
@@ -0,0 +1,37 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+
+const Trigger = DrawerPrimitive.Trigger;
+const Portal = DrawerPrimitive.Portal;
+const Close = DrawerPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+	//
+	Root as Drawer,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..230a1fb
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+
+export const flyAndScale = (
+    node: Element,
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+
+    const scaleConversion = (
+        valueA: number,
+        scaleA: [number, number],
+        scaleB: [number, number]
+    ) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+
+        return valueB;
+    };
+
+    const styleToString = (
+        style: Record<string, number | string | undefined>
+    ): string => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined) return str;
+            return str + `${key}:${style[key]};`;
+        }, "");
+    };
+
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};
\ No newline at end of file

From ed30ce43f5d722b58d551513a622428a9318c9dc Mon Sep 17 00:00:00 2001
From: Nabil Ould Hamou <ouldhamounabil@gmail.com>
Date: Sun, 7 Jan 2024 04:16:51 +0100
Subject: [PATCH 3/4] feat: ajout de nouveaux fichiers fix: QOL -> "logo"
 cliquable pour revenir sur la page principale

---
 components.json                               | 13 ++++
 src/lib/components/Navbar.svelte              |  2 +-
 .../ui/avatar/avatar-fallback.svelte          | 19 ++++++
 .../components/ui/avatar/avatar-image.svelte  | 18 ++++++
 src/lib/components/ui/avatar/avatar.svelte    | 21 +++++++
 src/lib/components/ui/avatar/index.ts         | 13 ++++
 src/lib/components/ui/button/button.svelte    | 25 ++++++++
 src/lib/components/ui/button/index.ts         | 52 ++++++++++++++++
 .../components/ui/card/card-content.svelte    | 13 ++++
 .../ui/card/card-description.svelte           | 13 ++++
 src/lib/components/ui/card/card-footer.svelte | 13 ++++
 src/lib/components/ui/card/card-header.svelte | 13 ++++
 src/lib/components/ui/card/card-title.svelte  | 21 +++++++
 src/lib/components/ui/card/card.svelte        | 25 ++++++++
 src/lib/components/ui/card/index.ts           | 24 +++++++
 .../ui/dialog/dialog-content.svelte           | 36 +++++++++++
 .../ui/dialog/dialog-description.svelte       | 16 +++++
 .../components/ui/dialog/dialog-footer.svelte | 19 ++++++
 .../components/ui/dialog/dialog-header.svelte | 16 +++++
 .../ui/dialog/dialog-overlay.svelte           | 24 +++++++
 .../components/ui/dialog/dialog-portal.svelte |  9 +++
 .../components/ui/dialog/dialog-title.svelte  | 16 +++++
 src/lib/components/ui/dialog/index.ts         | 34 ++++++++++
 .../ui/drawer/drawer-content.svelte           | 24 +++++++
 .../ui/drawer/drawer-description.svelte       | 18 ++++++
 .../components/ui/drawer/drawer-footer.svelte | 20 ++++++
 .../components/ui/drawer/drawer-header.svelte | 19 ++++++
 .../ui/drawer/drawer-overlay.svelte           | 18 ++++++
 .../components/ui/drawer/drawer-title.svelte  | 18 ++++++
 src/lib/components/ui/drawer/drawer.svelte    | 17 +++++
 src/lib/components/ui/drawer/index.ts         | 37 +++++++++++
 src/lib/utils.ts                              | 62 +++++++++++++++++++
 32 files changed, 687 insertions(+), 1 deletion(-)
 create mode 100644 components.json
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/components/ui/drawer/drawer-content.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-description.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-footer.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-header.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-overlay.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer-title.svelte
 create mode 100644 src/lib/components/ui/drawer/drawer.svelte
 create mode 100644 src/lib/components/ui/drawer/index.ts
 create mode 100644 src/lib/utils.ts

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..ce18a67
--- /dev/null
+++ b/components.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.css",
+    "baseColor": "zinc"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 7fc0284..ea47732 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -7,7 +7,7 @@
 
 <div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-background'>
     <div class='pt-4 w-4/5 flex justify-between items-center'>
-        <span class="font-bold cursor-default">nbiloh.me</span>
+        <a href="/" class="font-bold">nbiloh.me</a>
         <div class='hidden sm:visible sm:flex items-center justify-between sm:gap-x-8 gap-x-4 font-medium text-lg text-muted-foreground'>
             {#each routes as route}
                 <a class={`cursor-pointer ${path === route.href ? 'text-foreground' : 'hover:text-foreground'}`} href={route.href}>{route.name}</a>
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..3b9b24c
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn(
+		"flex h-full w-full items-center justify-center rounded-full bg-muted",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..27b0e7d
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..b8a6ee1
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn(
+		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..b08c780
--- /dev/null
+++ b/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..a128f14
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..9787e3e
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,52 @@
+import type { Button as ButtonPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default:
+				"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline:
+				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary:
+				"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants
+};
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..2388f2b
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..906782a
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..dab6252
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..d7412d7
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..e87b5c6
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..4a11395
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={cn(
+		"rounded-xl border bg-card text-card-foreground shadow",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..14a7f72
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..9f78e8a
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import * as Dialog from ".";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { Cross2 } from "radix-icons-svelte";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..7250e09
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..36c0cca
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..82fbe51
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..62f8f3f
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { fade } from "svelte/transition";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
+		className
+	)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..400e62b
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..fb863c9
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..c05c48e
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription
+};
diff --git a/src/lib/components/ui/drawer/drawer-content.svelte b/src/lib/components/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..2f5d543
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Portal>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		class={cn(
+			"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+			className
+		)}
+		{...$$restProps}
+	>
+		<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+		<slot />
+	</DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>
diff --git a/src/lib/components/ui/drawer/drawer-description.svelte b/src/lib/components/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..87de82c
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-description.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.DescriptionProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Description
+	bind:el
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Description>
diff --git a/src/lib/components/ui/drawer/drawer-footer.svelte b/src/lib/components/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..2e714dd
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/drawer/drawer-header.svelte b/src/lib/components/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..4bd2f5a
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/drawer/drawer-overlay.svelte b/src/lib/components/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..5bda25d
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.OverlayProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:el
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Overlay>
diff --git a/src/lib/components/ui/drawer/drawer-title.svelte b/src/lib/components/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..1d64d92
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer-title.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DrawerPrimitive.TitleProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Title
+	bind:el
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Title>
diff --git a/src/lib/components/ui/drawer/drawer.svelte b/src/lib/components/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..135c007
--- /dev/null
+++ b/src/lib/components/ui/drawer/drawer.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.Root
+	{shouldScaleBackground}
+	bind:open
+	bind:activeSnapPoint
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Root>
diff --git a/src/lib/components/ui/drawer/index.ts b/src/lib/components/ui/drawer/index.ts
new file mode 100644
index 0000000..162af4f
--- /dev/null
+++ b/src/lib/components/ui/drawer/index.ts
@@ -0,0 +1,37 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+
+const Trigger = DrawerPrimitive.Trigger;
+const Portal = DrawerPrimitive.Portal;
+const Close = DrawerPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+	//
+	Root as Drawer,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..230a1fb
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+
+export const flyAndScale = (
+    node: Element,
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+
+    const scaleConversion = (
+        valueA: number,
+        scaleA: [number, number],
+        scaleB: [number, number]
+    ) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+
+        return valueB;
+    };
+
+    const styleToString = (
+        style: Record<string, number | string | undefined>
+    ): string => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined) return str;
+            return str + `${key}:${style[key]};`;
+        }, "");
+    };
+
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};
\ No newline at end of file

From be154398f782bcd65a3e4edce8798d2e056430ae Mon Sep 17 00:00:00 2001
From: Nabil Ould Hamou <ouldhamounabil@gmail.com>
Date: Sun, 7 Jan 2024 04:18:09 +0100
Subject: [PATCH 4/4] fix: lang=ts dans navbar

---
 src/lib/components/Navbar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index ea47732..e420b65 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
     import routes from '$lib/Routes'
     import LightSwitch from "@/components/LightSwitch.svelte";
     import HamburgerMenu from "@/components/HamburgerMenu.svelte";
-    export let path;
+    export let path: string;
 </script>
 
 <div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-background'>