From de14eb400e37be79d9e28025e4983f6aaae21d56 Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 11:13:31 +0200
Subject: [PATCH 1/6] fix(buttons): now centering text for bigger buttons,
 removed div and applied style to button directly

Took 3 hours 30 minutes
---
 src/components/LButton.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/LButton.vue b/src/components/LButton.vue
index c5ee128..c476a86 100644
--- a/src/components/LButton.vue
+++ b/src/components/LButton.vue
@@ -12,7 +12,10 @@ const { text, variant, light, small } = withDefaults(defineProps<LButtonProps>()
 	light: false,
 	small: false,
 });
-let style = twMerge("rounded-full font-bold w-fit", small ? "body-tiny px-6 py-3" : "body-default px-8 py-4");
+let style = twMerge(
+	"rounded-full font-bold w-fit flex justify-center space-x-1",
+	small ? "body-tiny px-6 py-3" : "body-default px-8 py-4",
+);
 
 if (variant === "primary")
 	style = twMerge(
@@ -31,9 +34,7 @@ else
 
 <template>
 	<button :class="style">
-		<div class="flex space-x-1">
-			<span>{{ text }}</span>
-			<slot></slot>
-		</div>
+		<span class="text-center">{{ text }}</span>
+		<slot></slot>
 	</button>
 </template>

From 9a35416e97a0a6d43babe2534c6897e4c608723c Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 11:15:40 +0200
Subject: [PATCH 2/6] deps: added shadcn-vue for complex components

Took 2 minutes
---
 components.json    |  17 +++
 package-lock.json  | 334 +++++++++++++++++++++++++++++++++++++++++----
 package.json       |   5 +-
 tailwind.config.js |  30 +++-
 tsconfig.json      |   8 +-
 vite.config.ts     |   6 +
 6 files changed, 370 insertions(+), 30 deletions(-)
 create mode 100644 components.json

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..8661cfb
--- /dev/null
+++ b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/style.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 332f973..d0cf3ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,13 +11,16 @@
         "@aleph-sdk/client": "^1.0.6",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "lucide-vue-next": "^0.407.0",
         "pinia": "^2.1.7",
-        "tailwind-merge": "^2.3.0",
+        "radix-vue": "^1.9.0",
+        "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2"
       },
       "devDependencies": {
+        "@types/node": "^20.14.10",
         "@typescript-eslint/eslint-plugin": "^7.9.0",
         "@typescript-eslint/parser": "^7.9.0",
         "@vitejs/plugin-vue": "^5.0.4",
@@ -103,18 +106,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
-      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -561,6 +552,68 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
+      "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.1.tgz",
+      "integrity": "sha512-cyawjk9etPZPl/RVtMRnWrwtAhWbPVSrRVYARgOzhLIqxr0k2up1APrrFjqP9QwRQ0AwjKSvbWg4YC6jESutow==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@floating-ui/utils": "^0.2.4",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -616,6 +669,24 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
+      "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -970,12 +1041,63 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.2.tgz",
+      "integrity": "sha512-ffpN6kTaPGwQPoWMcBAHbdv2ZCpj1SugldoYAcY0C4xH+Pej1KCOEUisNeEgbUnXOp8Y/4q6wGPu2tFHthOIQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.2.tgz",
+      "integrity": "sha512-mVix+nFKajrA+48ky5s7/IYP5/uHHLTz1ZRJfwg2bOLcHUcKyvsLE2UGG4+8hd62ueprWg5MgTudGyR2TYfwpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.8.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
@@ -1326,6 +1448,94 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
       "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.0.tgz",
+      "integrity": "sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.0",
+        "@vueuse/shared": "10.11.0",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.0.tgz",
+      "integrity": "sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.0.tgz",
+      "integrity": "sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1413,6 +1623,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2211,6 +2433,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2678,8 +2906,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
@@ -3492,6 +3719,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.407.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.407.0.tgz",
+      "integrity": "sha512-BvwHA9u/t80S8VEO3I/OqY8xdW0tprGtEnMtz29MbnsQvjUXzzuw9Hgi7vyFt1b5PlQo4Ub1F3UbGkAB7bKrew==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@@ -4437,6 +4673,46 @@
         }
       ]
     },
+    "node_modules/radix-vue": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.0.tgz",
+      "integrity": "sha512-Ds1GpB6IBhSyFePWyxDhnqA7Ymgmcxah3t5qWxamftqX/zFRkkf5RaRxzuGB8QgdbP6Q/t7scIdMEcndhFc+Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7",
+        "@floating-ui/vue": "^1.1.0",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.8.1",
+        "@vueuse/core": "^10.11.0",
+        "@vueuse/shared": "^10.11.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.7"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/radix-vue/node_modules/nanoid": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -4492,12 +4768,6 @@
         "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==",
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4990,13 +5260,10 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
-      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
+      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.24.1"
-      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -5114,6 +5381,12 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "license": "0BSD"
+    },
     "node_modules/tty-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
@@ -5158,6 +5431,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
diff --git a/package.json b/package.json
index f4a0f0e..4a3034b 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,16 @@
     "@aleph-sdk/client": "^1.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.407.0",
     "pinia": "^2.1.7",
-    "tailwind-merge": "^2.3.0",
+    "radix-vue": "^1.9.0",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
+    "@types/node": "^20.14.10",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/tailwind.config.js b/tailwind.config.js
index 8a092d2..c19abd3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,7 @@ export default {
 
 	content: [
 		"./pages/**/*.{ts,tsx,vue}",
-		"./components/**/*.{ts,tsx,vue}",
+		"@/components**/*.{ts,tsx,vue}",
 		"./app/**/*.{ts,tsx,vue}",
 		"./src/**/*.{ts,tsx,vue}",
 	],
@@ -211,6 +211,34 @@ export default {
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)",
 			},
+			keyframes: {
+				"accordion-down": {
+					from: { height: 0 },
+					to: {
+						height: "var(--radix-accordion-content-height)",
+					},
+					"accordion-up": {
+						from: { height: "var(--radix-accordion-content-height)" },
+						to: { height: 0 },
+					},
+					"collapsible-down": {
+						from: { height: 0 },
+						to: {
+							height: "var(--radix-collapsible-content-height)",
+						},
+						"collapsible-up": {
+							from: { height: "var(--radix-collapsible-content-height)" },
+							to: { height: 0 },
+						},
+					},
+					animation: {
+						"accordion-down": "accordion-down 0.2s ease-out",
+						"accordion-up": "accordion-up 0.2s ease-out",
+						"collapsible-down": "collapsible-down 0.2s ease-in-out",
+						"collapsible-up": "collapsible-up 0.2s ease-in-out",
+					},
+				},
+			},
 		},
 	},
 	plugins: [animate],
diff --git a/tsconfig.json b/tsconfig.json
index a38d0d5..da4cfa6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
   "include": [
     "src/**/*.ts",
diff --git a/vite.config.ts b/vite.config.ts
index 5d5445e..68290b6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,14 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
+import path from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [vue(), nodePolyfills()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
 });

From 2da7fe2e30cce966dc8491e9d79ab43b297a3aeb Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 11:16:36 +0200
Subject: [PATCH 3/6] style(imports): now importing via alias @

Took 54 seconds
---
 src/App.vue                                        | 4 ++--
 src/pages/Company/JoinTeamSection.vue              | 2 +-
 src/pages/Company/ProductTextsSection.vue          | 2 +-
 src/pages/Company/TeamTextsSection.vue             | 2 +-
 src/pages/Developer/ArchitectureSection.vue        | 8 ++++----
 src/pages/Earn/CallToActionSection.vue             | 2 +-
 src/pages/Home/AICustomizationSection.vue          | 4 ++--
 src/pages/Home/ChatPreviewSection.vue              | 2 +-
 src/pages/Home/DataSecuritySection.vue             | 2 +-
 src/pages/Home/HeroSection.vue                     | 2 +-
 src/pages/Home/NotYourAverageAIAssistant.vue       | 4 ++--
 src/pages/Home/OpenSourceModelsSection.vue         | 8 ++++----
 src/pages/Home/RedefiningAIBoundariesSection.vue   | 2 +-
 src/pages/Home/RoadmapSection.vue                  | 6 +++---
 src/pages/Home/TheresMoreSection.vue               | 2 +-
 src/pages/Tokenomics/ContractAddressSection.vue    | 4 ++--
 src/pages/Tokenomics/ExplanationSection.vue        | 2 +-
 src/pages/Tokenomics/LiveSupplySection.vue         | 2 +-
 src/pages/Tokenomics/OverallTotalSupplySection.vue | 4 ++--
 src/pages/Tokenomics/VestingScheduleSection.vue    | 2 +-
 20 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 361e001..5fc4cc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import Navbar from "./components/Navbar.vue";
-import Footer from "./components/Footer.vue";
+import Navbar from "@/components/Navbar.vue";
+import Footer from "@/components/Footer.vue";
 </script>
 
 <template>
diff --git a/src/pages/Company/JoinTeamSection.vue b/src/pages/Company/JoinTeamSection.vue
index 7c3ca87..4015ca6 100644
--- a/src/pages/Company/JoinTeamSection.vue
+++ b/src/pages/Company/JoinTeamSection.vue
@@ -19,5 +19,5 @@
 	</section>
 </template>
 <script lang="ts" setup>
-import LButton from "../../components/LButton.vue";
+import LButton from "@/components/LButton.vue";
 </script>
diff --git a/src/pages/Company/ProductTextsSection.vue b/src/pages/Company/ProductTextsSection.vue
index ad0620e..702d258 100644
--- a/src/pages/Company/ProductTextsSection.vue
+++ b/src/pages/Company/ProductTextsSection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import TextSection from "../../components/TextSection.vue";
+import TextSection from "@/components/TextSection.vue";
 
 const items = ref<{ title: string; description: string }[]>([
 	{
diff --git a/src/pages/Company/TeamTextsSection.vue b/src/pages/Company/TeamTextsSection.vue
index 6a80abc..4b460d7 100644
--- a/src/pages/Company/TeamTextsSection.vue
+++ b/src/pages/Company/TeamTextsSection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import TextSection from "../../components/TextSection.vue";
+import TextSection from "@/components/TextSection.vue";
 
 const items = ref<{ title: string; description: string }[]>([
 	{
diff --git a/src/pages/Developer/ArchitectureSection.vue b/src/pages/Developer/ArchitectureSection.vue
index 8cff3bf..15cf296 100644
--- a/src/pages/Developer/ArchitectureSection.vue
+++ b/src/pages/Developer/ArchitectureSection.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import LModelCard from "../../components/LModelCard.vue";
-import { models } from "../../texts.ts";
-import LTinyHeading from "../../components/LTinyHeading.vue";
-import LButton from "../../components/LButton.vue";
+import LModelCard from "@/components/LModelCard.vue";
+import { models } from "@/texts.ts";
+import LTinyHeading from "@/components/LTinyHeading.vue";
+import LButton from "@/components/LButton.vue";
 
 const paragraphs = [
 	"LibertAI works on top of the aleph.im network. It uses its on-demand virtual machines (serverless). When you do a call to the API, it's going to one of the load balancers of the network that distributes your request to one of the available CRN (computing resource nodes, you can also call the API directly on one). This CRN then looks at the path (or domain) and redirects it to a specific virtual machine.",
diff --git a/src/pages/Earn/CallToActionSection.vue b/src/pages/Earn/CallToActionSection.vue
index 6fbceed..1a47e9d 100644
--- a/src/pages/Earn/CallToActionSection.vue
+++ b/src/pages/Earn/CallToActionSection.vue
@@ -3,7 +3,7 @@ import StakeImage from "../../assets/earn/staking.svg";
 import CoreNodeImage from "../../assets/earn/core-channel-node-operator.svg";
 import ResourceNodeImage from "../../assets/earn/resource-node-operator.svg";
 import ConnectAccountsImage from "../../assets/earn/connect-accounts.svg";
-import LButton from "../../components/LButton.vue";
+import LButton from "@/components/LButton.vue";
 
 type Action = {
 	cardTitle: string;
diff --git a/src/pages/Home/AICustomizationSection.vue b/src/pages/Home/AICustomizationSection.vue
index 0556bde..e1091f8 100644
--- a/src/pages/Home/AICustomizationSection.vue
+++ b/src/pages/Home/AICustomizationSection.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import LButton from "../../components/LButton.vue";
+import LButton from "@/components/LButton.vue";
 import AilonMusk from "../../assets/home/personas/AilonMusk.png";
 import Therapist from "../../assets/home/personas/Therapist.png";
 import VirtualBoyfriend from "../../assets/home/personas/VirtualBoyfriend.png";
 import VirtualGirlfriend from "../../assets/home/personas/VirtualGirlfriend.png";
 import Tromp from "../../assets/home/personas/Tromp.png";
 import { onMounted, ref, watch } from "vue";
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 
 const AIs = [
 	{ text: "Donald Tromp", image: Tromp },
diff --git a/src/pages/Home/ChatPreviewSection.vue b/src/pages/Home/ChatPreviewSection.vue
index 48be225..31621e1 100644
--- a/src/pages/Home/ChatPreviewSection.vue
+++ b/src/pages/Home/ChatPreviewSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Iphone from "../../assets/Iphone_chat.png";
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 </script>
 
 <template>
diff --git a/src/pages/Home/DataSecuritySection.vue b/src/pages/Home/DataSecuritySection.vue
index 512b354..1f6010d 100644
--- a/src/pages/Home/DataSecuritySection.vue
+++ b/src/pages/Home/DataSecuritySection.vue
@@ -34,5 +34,5 @@
 	</section>
 </template>
 <script setup lang="ts">
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 </script>
diff --git a/src/pages/Home/HeroSection.vue b/src/pages/Home/HeroSection.vue
index 3eebc86..0d7c00c 100644
--- a/src/pages/Home/HeroSection.vue
+++ b/src/pages/Home/HeroSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import LButton from "../../components/LButton.vue";
+import LButton from "@/components/LButton.vue";
 </script>
 
 <template>
diff --git a/src/pages/Home/NotYourAverageAIAssistant.vue b/src/pages/Home/NotYourAverageAIAssistant.vue
index 0372cc3..af9311f 100644
--- a/src/pages/Home/NotYourAverageAIAssistant.vue
+++ b/src/pages/Home/NotYourAverageAIAssistant.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import iphone from "../../assets/home/notYourAverageAIAssistantIphone.png";
-import LTinyHeading from "../../components/LTinyHeading.vue";
-import LButton from "../../components/LButton.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
+import LButton from "@/components/LButton.vue";
 </script>
 
 <template>
diff --git a/src/pages/Home/OpenSourceModelsSection.vue b/src/pages/Home/OpenSourceModelsSection.vue
index 8a64924..768da87 100644
--- a/src/pages/Home/OpenSourceModelsSection.vue
+++ b/src/pages/Home/OpenSourceModelsSection.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import LModelCard from "../../components/LModelCard.vue";
-import LButton from "../../components/LButton.vue";
-import { models } from "../../texts.ts";
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LModelCard from "@/components/LModelCard.vue";
+import LButton from "@/components/LButton.vue";
+import { models } from "@/texts.ts";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 </script>
 
 <template>
diff --git a/src/pages/Home/RedefiningAIBoundariesSection.vue b/src/pages/Home/RedefiningAIBoundariesSection.vue
index 015149b..7990f4f 100644
--- a/src/pages/Home/RedefiningAIBoundariesSection.vue
+++ b/src/pages/Home/RedefiningAIBoundariesSection.vue
@@ -3,7 +3,7 @@ import lockClosedIcon from "../../assets/icons/lock-closed.svg";
 import botIcon from "../../assets/icons/bot.svg";
 import globeIcon from "../../assets/icons/globe.svg";
 import confidentialIcon from "../../assets/icons/confidential.svg";
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 
 const cards = [
 	{
diff --git a/src/pages/Home/RoadmapSection.vue b/src/pages/Home/RoadmapSection.vue
index a615b37..d2ae0d0 100644
--- a/src/pages/Home/RoadmapSection.vue
+++ b/src/pages/Home/RoadmapSection.vue
@@ -35,9 +35,9 @@
 	</section>
 </template>
 <script lang="ts" setup>
-import { RoadmapFeatureStatus } from "../../types/roadmap.ts";
-import RoadmapFeatureCard from "../../components/RoadmapFeatureCard.vue";
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import { RoadmapFeatureStatus } from "@/types/roadmap.ts";
+import RoadmapFeatureCard from "@/components/RoadmapFeatureCard.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 
 type RoadmapFeature = { name: string; status: RoadmapFeatureStatus };
 type RoadmapSection = {
diff --git a/src/pages/Home/TheresMoreSection.vue b/src/pages/Home/TheresMoreSection.vue
index a887abd..9977ca5 100644
--- a/src/pages/Home/TheresMoreSection.vue
+++ b/src/pages/Home/TheresMoreSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 
 import ChatBotImage from "../../assets/home/more_features/chat_bot.png";
 import VoiceTranscriptionImage from "../../assets/home/more_features/voice_transcription.png";
diff --git a/src/pages/Tokenomics/ContractAddressSection.vue b/src/pages/Tokenomics/ContractAddressSection.vue
index a14a900..8611536 100644
--- a/src/pages/Tokenomics/ContractAddressSection.vue
+++ b/src/pages/Tokenomics/ContractAddressSection.vue
@@ -26,6 +26,6 @@
 	</section>
 </template>
 <script lang="ts" setup>
-import LTinyHeading from "../../components/LTinyHeading.vue";
-import LButton from "../../components/LButton.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
+import LButton from "@/components/LButton.vue";
 </script>
diff --git a/src/pages/Tokenomics/ExplanationSection.vue b/src/pages/Tokenomics/ExplanationSection.vue
index 2696caa..faf3e0e 100644
--- a/src/pages/Tokenomics/ExplanationSection.vue
+++ b/src/pages/Tokenomics/ExplanationSection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import { useTokensStore } from "../../stores/tokens.ts";
+import { useTokensStore } from "@/stores/tokens.ts";
 import { storeToRefs } from "pinia";
 
 const tokensStore = useTokensStore();
diff --git a/src/pages/Tokenomics/LiveSupplySection.vue b/src/pages/Tokenomics/LiveSupplySection.vue
index 2ad9259..53a45dd 100644
--- a/src/pages/Tokenomics/LiveSupplySection.vue
+++ b/src/pages/Tokenomics/LiveSupplySection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useTokensStore } from "../../stores/tokens.ts";
+import { useTokensStore } from "@/stores/tokens.ts";
 import { onMounted } from "vue";
 
 const tokensStore = useTokensStore();
diff --git a/src/pages/Tokenomics/OverallTotalSupplySection.vue b/src/pages/Tokenomics/OverallTotalSupplySection.vue
index f63e209..a5e3680 100644
--- a/src/pages/Tokenomics/OverallTotalSupplySection.vue
+++ b/src/pages/Tokenomics/OverallTotalSupplySection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import LTinyHeading from "../../components/LTinyHeading.vue";
-import { useTokensStore } from "../../stores/tokens.ts";
+import LTinyHeading from "@/components/LTinyHeading.vue";
+import { useTokensStore } from "@/stores/tokens.ts";
 
 const tokensStore = useTokensStore();
 </script>
diff --git a/src/pages/Tokenomics/VestingScheduleSection.vue b/src/pages/Tokenomics/VestingScheduleSection.vue
index 7d0d241..c09b23d 100644
--- a/src/pages/Tokenomics/VestingScheduleSection.vue
+++ b/src/pages/Tokenomics/VestingScheduleSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import LTinyHeading from "../../components/LTinyHeading.vue";
+import LTinyHeading from "@/components/LTinyHeading.vue";
 
 const stats = [
 	{

From 05d7619cc1864faf8948da6ef9113c4c92d524ab Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 11:19:35 +0200
Subject: [PATCH 4/6] feat(redirection-warning): added LLink component to proxy
 every link by a warning if it goes outside of the current site

---
 src/components/LLink.vue                      | 44 +++++++++++++++++++
 .../ui/alert-dialog/AlertDialog.vue           | 14 ++++++
 .../ui/alert-dialog/AlertDialogAction.vue     | 20 +++++++++
 .../ui/alert-dialog/AlertDialogCancel.vue     | 22 ++++++++++
 .../ui/alert-dialog/AlertDialogContent.vue    | 42 ++++++++++++++++++
 .../alert-dialog/AlertDialogDescription.vue   | 25 +++++++++++
 .../ui/alert-dialog/AlertDialogFooter.vue     | 21 +++++++++
 .../ui/alert-dialog/AlertDialogHeader.vue     | 16 +++++++
 .../ui/alert-dialog/AlertDialogTitle.vue      | 22 ++++++++++
 .../ui/alert-dialog/AlertDialogTrigger.vue    | 11 +++++
 src/components/ui/alert-dialog/index.ts       |  9 ++++
 src/components/ui/button/Button.vue           | 26 +++++++++++
 src/components/ui/button/index.ts             | 35 +++++++++++++++
 13 files changed, 307 insertions(+)
 create mode 100644 src/components/LLink.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 src/components/ui/alert-dialog/index.ts
 create mode 100644 src/components/ui/button/Button.vue
 create mode 100644 src/components/ui/button/index.ts

diff --git a/src/components/LLink.vue b/src/components/LLink.vue
new file mode 100644
index 0000000..460a41b
--- /dev/null
+++ b/src/components/LLink.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { LinkHTMLAttributes, ref } from "vue";
+import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { AlertDialogOverlay, AlertDialogPortal } from "radix-vue";
+import LButton from "@/components/LButton.vue";
+
+interface IProps extends /* @vue-ignore */ LinkHTMLAttributes {}
+
+withDefaults(defineProps<IProps>(), {});
+
+const open = ref(false);
+</script>
+
+<template>
+	<RouterLink v-if="href && href.startsWith('/')" :to="href">
+		<slot />
+	</RouterLink>
+	<AlertDialog v-model:open="open">
+		<AlertDialogTrigger as-child>
+			<a>
+				<slot />
+			</a>
+		</AlertDialogTrigger>
+		<AlertDialogPortal>
+			<AlertDialogOverlay class="fixed inset-0 z-30 backdrop-blur-sm" />
+			<AlertDialogContent class="flex flex-col gap-y-6 bg-primary px-6 py-9 text-neutral-white">
+				<h6 class="body-default text-center font-bold">Leaving our website</h6>
+				<p class="body-tiny text-center">
+					You will be redirected to an external website <strong class="font-bold">({{ $attrs.href }})</strong> that is
+					not under our control. We cannot guarantee the accuracy, security, or reliability of the information provided
+					on these external sites.
+				</p>
+				<div class="gap-x- flex justify-center gap-x-3">
+					<a v-bind="$attrs">
+						<LButton class="w-[150px]" light text="Continue" @click="open = false" />
+					</a>
+					<LButton class="w-[150px]" light text="Cancel" @click="open = false" />
+				</div>
+			</AlertDialogContent>
+		</AlertDialogPortal>
+	</AlertDialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ui/alert-dialog/AlertDialog.vue b/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..8fb30de
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogAction.vue b/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..092d6cd
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogCancel.vue b/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..907f24c
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { computed, type HTMLAttributes } from "vue";
+import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+	return delegated;
+});
+</script>
+
+<template>
+	<AlertDialogCancel
+		:class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
+		v-bind="delegatedProps"
+	>
+		<slot />
+	</AlertDialogCancel>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..93ef36f
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed, type HTMLAttributes } from "vue";
+import {
+	AlertDialogContent,
+	type AlertDialogContentEmits,
+	type AlertDialogContentProps,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<AlertDialogPortal>
+		<AlertDialogOverlay
+			class="bg-black/80 fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+		/>
+		<AlertDialogContent
+			:class="
+				cn(
+					'fixed left-1/2 top-1/2 z-50 grid w-[45vw] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+					props.class,
+				)
+			"
+			v-bind="forwarded"
+		>
+			<slot />
+		</AlertDialogContent>
+	</AlertDialogPortal>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogDescription.vue b/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..9682cbb
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.vue b/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..55d0a0e
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.vue b/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..c61c449
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..50c583d
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..4f5e2fd
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/src/components/ui/alert-dialog/index.ts b/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..91d138a
--- /dev/null
+++ b/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..5cfd668
--- /dev/null
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
new file mode 100644
index 0000000..1b00c32
--- /dev/null
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

From e0267fae7804e964963b68aafbb506cb5c8e1c47 Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 11:36:57 +0200
Subject: [PATCH 5/6] fix(link): invalid href prop, forgotten v-else

Took 14 minutes
---
 src/components/LLink.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LLink.vue b/src/components/LLink.vue
index 460a41b..b1b2332 100644
--- a/src/components/LLink.vue
+++ b/src/components/LLink.vue
@@ -12,12 +12,12 @@ const open = ref(false);
 </script>
 
 <template>
-	<RouterLink v-if="href && href.startsWith('/')" :to="href">
+	<RouterLink v-if="$attrs.href && ($attrs.href as string).startsWith('/')" :to="$attrs.href">
 		<slot />
 	</RouterLink>
-	<AlertDialog v-model:open="open">
+	<AlertDialog v-else v-model:open="open">
 		<AlertDialogTrigger as-child>
-			<a>
+			<a class="cursor-pointer">
 				<slot />
 			</a>
 		</AlertDialogTrigger>

From 5381987c9945e8a933f3530a38517a952aa6cc94 Mon Sep 17 00:00:00 2001
From: Croos3r <dorian.moy@epitech.eu>
Date: Thu, 18 Jul 2024 17:47:30 +0200
Subject: [PATCH 6/6] feat(link): replaced every internal and external links by
 libertai link component

Took 26 minutes
---
 src/components/Footer.vue                     | 10 +++--
 src/components/LAnnouncementBanner.vue        |  6 ++-
 src/components/LLink.vue                      | 12 ++++--
 src/components/Navbar.vue                     | 43 ++++++++++---------
 src/pages/Company/JoinTeamSection.vue         |  5 ++-
 src/pages/Developer/ArchitectureSection.vue   |  5 ++-
 src/pages/Earn/CallToActionSection.vue        |  5 ++-
 src/pages/Home/AICustomizationSection.vue     |  9 ++--
 src/pages/Home/FooterSection.vue              | 16 ++++---
 src/pages/Home/HeroSection.vue                |  7 +--
 src/pages/Home/NotYourAverageAIAssistant.vue  |  5 ++-
 src/pages/Home/OpenSourceModelsSection.vue    |  5 ++-
 src/pages/Home/PartnersSection.vue            | 12 +++---
 .../Tokenomics/ContractAddressSection.vue     | 13 +++---
 14 files changed, 88 insertions(+), 65 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index d4e0fa6..f2313a4 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,9 +6,9 @@
 				<div class="grid grid-cols-2">
 					<div v-for="section of sections" :key="section.title" class="space-y-2">
 						<p class="body-regular text-neutral-white">{{ section.title }}</p>
-						<a v-for="item of section.items" :key="item.title" :href="item.link" target="_blank">
+						<LLink v-for="item of section.items" :key="item.title" :href="item.link" target="_blank">
 							<p class="body-small text-neutral-white">{{ item.title }}</p>
-						</a>
+						</LLink>
 					</div>
 				</div>
 				<img alt="white logo" class="m-2 max-md:hidden" src="../assets/logos/libertAI_white.png" />
@@ -18,14 +18,16 @@
 				<p class="rich-bold-18 max-lg:body-small mt-2 text-center text-tertiary">
 					Copyright © LibertAI.io | Powered by
 				</p>
-				<a href="https://aleph.im/" target="_blank">
+				<LLink href="https://aleph.im/" target="_blank">
 					<p class="rich-bold-18 max-lg:body-small mt-2 text-center text-majorelle-500">aleph.im</p>
-				</a>
+				</LLink>
 			</div>
 		</div>
 	</div>
 </template>
 <script lang="ts" setup>
+import LLink from "@/components/LLink.vue";
+
 type FooterSection = {
 	title: string;
 	items: { title: string; link: string }[];
diff --git a/src/components/LAnnouncementBanner.vue b/src/components/LAnnouncementBanner.vue
index 15f0aee..4ee37e7 100644
--- a/src/components/LAnnouncementBanner.vue
+++ b/src/components/LAnnouncementBanner.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import LLink from "@/components/LLink.vue";
+
 export type LAnnouncementBannerProps = {
 	text: string;
 	link?: {
@@ -14,7 +16,7 @@ withDefaults(defineProps<LAnnouncementBannerProps>(), {
 <template>
 	<p class="max-lg:body-small bg-majorelle-500 py-6 text-center text-neutral-white max-lg:px-4">
 		{{ text }}
-		<RouterLink v-if="link && link.href.startsWith('/')" :to="link.href" class="font-bold">{{ link.text }}</RouterLink>
-		<a v-else-if="link" :href="link.href" class="font-bold">{{ link.text }}</a>
+		<LLink v-if="link && link.href.startsWith('/')" :href="link.href" class="font-bold">{{ link.text }}</LLink>
+		<LLink v-else-if="link" :href="link.href" class="font-bold">{{ link.text }}</LLink>
 	</p>
 </template>
diff --git a/src/components/LLink.vue b/src/components/LLink.vue
index b1b2332..12f8589 100644
--- a/src/components/LLink.vue
+++ b/src/components/LLink.vue
@@ -3,21 +3,27 @@ import { LinkHTMLAttributes, ref } from "vue";
 import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { AlertDialogOverlay, AlertDialogPortal } from "radix-vue";
 import LButton from "@/components/LButton.vue";
+import { ClassProp } from "class-variance-authority/types";
 
 interface IProps extends /* @vue-ignore */ LinkHTMLAttributes {}
 
-withDefaults(defineProps<IProps>(), {});
+withDefaults(defineProps<IProps & ClassProp>(), {});
 
 const open = ref(false);
 </script>
 
 <template>
-	<RouterLink v-if="$attrs.href && ($attrs.href as string).startsWith('/')" :to="$attrs.href">
+	<RouterLink
+		v-if="$attrs.href && ($attrs.href as string).startsWith('/')"
+		:class="$props.class ?? $props.className"
+		:to="$attrs.href"
+		class="w-fit"
+	>
 		<slot />
 	</RouterLink>
 	<AlertDialog v-else v-model:open="open">
 		<AlertDialogTrigger as-child>
-			<a class="cursor-pointer">
+			<a :class="$props.class ?? $props.className" class="w-fit cursor-pointer">
 				<slot />
 			</a>
 		</AlertDialogTrigger>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ad32f3f..a696256 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -15,18 +15,18 @@
 			</button>
 
 			<!-- Site logo -->
-			<RouterLink class="mr-8" to="/">
+			<LLink class="mr-8" href="/">
 				<img alt="Site Logo" class="block max-lg:hidden" height="21" src="../assets/logos/libertAI.svg" width="120" />
 				<img alt="Site Logo" class="hidden h-8 max-lg:block" src="../assets/logos/libertAI.svg" />
-			</RouterLink>
+			</LLink>
 
 			<!-- Navbar buttons for large screens -->
 			<nav class="body-small flex space-x-8 text-neutral-800 max-lg:hidden">
-				<RouterLink to="/company">Company</RouterLink>
-				<RouterLink to="/earn">Earn</RouterLink>
-				<RouterLink to="/developer">Developer</RouterLink>
-				<RouterLink to="/tokenomics">Tokenomics</RouterLink>
-				<a href="/Litepaper_0624_v2.pdf" target="_blank">Litepaper</a>
+				<LLink href="/company">Company</LLink>
+				<LLink href="/earn">Earn</LLink>
+				<LLink href="/developer">Developer</LLink>
+				<LLink href="/tokenomics">Tokenomics</LLink>
+				<LLink href="/Litepaper_0624_v2.pdf" target="_blank">Litepaper</LLink>
 				<div @mouseenter="showApps = true" @mouseleave="showApps = false">
 					<div class="flex">
 						<span class="mr-1.5 cursor-pointer">Apps</span>
@@ -40,18 +40,18 @@
 							role="menu"
 						>
 							<div class="py-1">
-								<a href="https://chat.libertai.io" target="_blank">
+								<LLink href="https://chat.libertai.io" target="_blank">
 									<div class="dropdown-item flex justify-between">
 										<span class="mr-1">Chat dApp</span>
 										<img alt="Open" src="../assets/icons/open_in_new.svg" width="16" />
 									</div>
-								</a>
-								<a href="https://t.me/liberchat_bot" target="_blank">
+								</LLink>
+								<LLink href="https://t.me/liberchat_bot" target="_blank">
 									<div class="dropdown-item flex justify-between">
 										<span class="mr-1">Telegram bot</span>
 										<img alt="Open" src="../assets/icons/open_in_new.svg" width="16" />
 									</div>
-								</a>
+								</LLink>
 							</div>
 						</div>
 					</div>
@@ -60,7 +60,7 @@
 		</div>
 
 		<!-- Button for the chat app -->
-		<a href="https://chat.libertai.io">
+		<LLink href="https://chat.libertai.io">
 			<button
 				class="body-bold-default body-tiny w-fit rounded-full bg-majorelle-500 px-6 py-3 text-neutral-white max-lg:px-4 max-lg:py-2"
 			>
@@ -69,32 +69,32 @@
 					<img alt="Message" src="../assets/icons/message.svg" />
 				</div>
 			</button>
-		</a>
+		</LLink>
 		<!-- Navbar buttons for small screens -->
 		<div v-show="showSidebar" class="absolute left-0 top-16 w-full translate-y-1 border-y bg-neutral-white shadow">
 			<div class="flex flex-col">
-				<RouterLink class="body-default px-8 py-4 focus:bg-neutral-300" to="/company">Company</RouterLink>
-				<RouterLink class="body-default px-8 py-4 focus:bg-neutral-300" to="/earn">Earn</RouterLink>
-				<RouterLink class="body-default px-8 py-4 focus:bg-neutral-300" to="/developer">Developer</RouterLink>
-				<RouterLink class="body-default px-8 py-4 focus:bg-neutral-300" to="/tokenomics">Tokenomics</RouterLink>
+				<LLink class="body-default px-8 py-4 focus:bg-neutral-300" href="/company">Company</LLink>
+				<LLink class="body-default px-8 py-4 focus:bg-neutral-300" href="/earn">Earn</LLink>
+				<LLink class="body-default px-8 py-4 focus:bg-neutral-300" href="/developer">Developer</LLink>
+				<LLink class="body-default px-8 py-4 focus:bg-neutral-300" href="/tokenomics">Tokenomics</LLink>
 				<div class="body-default focus:bg-neutral-200">
 					<button class="flex items-center px-8 py-4" @click="showApps = !showApps">
 						<span class="mr-1.5 cursor-pointer">Apps</span>
 						<img alt="Chevron up" src="../assets/icons/chevron_down.svg" />
 					</button>
 					<div v-show="showApps" class="flex flex-col border-y">
-						<a href="https://chat.libertai.io" target="_blank">
+						<LLink href="https://chat.libertai.io" target="_blank">
 							<div class="body-default flex justify-between bg-neutral-200 px-16 py-4 focus:bg-neutral-300">
 								<span>Chat dApp</span>
 								<img alt="Open" src="../assets/icons/open_in_new.svg" width="20" />
 							</div>
-						</a>
-						<a href="https://t.me/liberchat_bot" target="_blank">
+						</LLink>
+						<LLink href="https://t.me/liberchat_bot" target="_blank">
 							<div class="body-default flex justify-between bg-neutral-200 px-16 py-4 focus:bg-neutral-300">
 								<span>Telegram bot</span>
 								<img alt="Open" src="../assets/icons/open_in_new.svg" width="20" />
 							</div>
-						</a>
+						</LLink>
 					</div>
 				</div>
 			</div>
@@ -105,6 +105,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import LLink from "@/components/LLink.vue";
 
 const showApps = ref(false);
 const showSidebar = ref(false);
diff --git a/src/pages/Company/JoinTeamSection.vue b/src/pages/Company/JoinTeamSection.vue
index 4015ca6..d089cfb 100644
--- a/src/pages/Company/JoinTeamSection.vue
+++ b/src/pages/Company/JoinTeamSection.vue
@@ -10,9 +10,9 @@
 					Are you passionate about artificial intelligence, decentralization, and community-driven innovation? Do you
 					want to be a part of a pioneering team that is transforming the AI landscape? Look no further than LibertAI!
 				</p>
-				<a class="w-full max-lg:mb-6" href="mailto:hello@libertai.io" target="_blank">
+				<LLink class="w-full max-lg:mb-6" href="mailto:hello@libertai.io" target="_blank">
 					<LButton small text="Join Now" />
-				</a>
+				</LLink>
 			</div>
 			<img alt="Company" class="m-auto max-lg:w-full lg:rounded-2xl" src="../../assets/team.webp" width="730px" />
 		</div>
@@ -20,4 +20,5 @@
 </template>
 <script lang="ts" setup>
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 </script>
diff --git a/src/pages/Developer/ArchitectureSection.vue b/src/pages/Developer/ArchitectureSection.vue
index 15cf296..0802d2c 100644
--- a/src/pages/Developer/ArchitectureSection.vue
+++ b/src/pages/Developer/ArchitectureSection.vue
@@ -3,6 +3,7 @@ import LModelCard from "@/components/LModelCard.vue";
 import { models } from "@/texts.ts";
 import LTinyHeading from "@/components/LTinyHeading.vue";
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 
 const paragraphs = [
 	"LibertAI works on top of the aleph.im network. It uses its on-demand virtual machines (serverless). When you do a call to the API, it's going to one of the load balancers of the network that distributes your request to one of the available CRN (computing resource nodes, you can also call the API directly on one). This CRN then looks at the path (or domain) and redirects it to a specific virtual machine.",
@@ -29,9 +30,9 @@ const paragraphs = [
 				:type="model.type"
 			/>
 		</div>
-		<a class="mb-36" href="https://docs.libertai.io">
+		<LLink class="mb-36" href="https://docs.libertai.io">
 			<LButton text="Find Out More" />
-		</a>
+		</LLink>
 		<div class="pt-20 text-primary">
 			<h2 class="text-center max-lg:hidden">How it works</h2>
 			<h3 class="hidden text-center max-lg:block">How it works</h3>
diff --git a/src/pages/Earn/CallToActionSection.vue b/src/pages/Earn/CallToActionSection.vue
index 1a47e9d..58ca977 100644
--- a/src/pages/Earn/CallToActionSection.vue
+++ b/src/pages/Earn/CallToActionSection.vue
@@ -4,6 +4,7 @@ import CoreNodeImage from "../../assets/earn/core-channel-node-operator.svg";
 import ResourceNodeImage from "../../assets/earn/resource-node-operator.svg";
 import ConnectAccountsImage from "../../assets/earn/connect-accounts.svg";
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 
 type Action = {
 	cardTitle: string;
@@ -62,9 +63,9 @@ const actions: Action[] = [
 				<img :src="action.imagePath" alt="card" />
 				<p class="body-bold-default text-primary">{{ action.cardTitle }}</p>
 				<p class="body-tiny w-56">{{ action.cardDescription }}</p>
-				<a :href="action.buttonLink" target="_blank">
+				<LLink :href="action.buttonLink" target="_blank">
 					<LButton :text="action.buttonText" small />
-				</a>
+				</LLink>
 			</div>
 		</div>
 	</section>
diff --git a/src/pages/Home/AICustomizationSection.vue b/src/pages/Home/AICustomizationSection.vue
index e1091f8..2fb85a1 100644
--- a/src/pages/Home/AICustomizationSection.vue
+++ b/src/pages/Home/AICustomizationSection.vue
@@ -7,6 +7,7 @@ import VirtualGirlfriend from "../../assets/home/personas/VirtualGirlfriend.png"
 import Tromp from "../../assets/home/personas/Tromp.png";
 import { onMounted, ref, watch } from "vue";
 import LTinyHeading from "@/components/LTinyHeading.vue";
+import LLink from "@/components/LLink.vue";
 
 const AIs = [
 	{ text: "Donald Tromp", image: Tromp },
@@ -67,9 +68,9 @@ onMounted(() => {
 							keeping your data encrypted and under your control.
 						</p>
 						<div>
-							<a class="text-majorelle-500" href="https://chat.libertai.io/">
+							<LLink class="text-majorelle-500" href="https://chat.libertai.io/">
 								<LButton small text="Customize Now" />
-							</a>
+							</LLink>
 						</div>
 					</div>
 					<div
@@ -116,9 +117,9 @@ onMounted(() => {
 							keeping your data encrypted and under your control.
 						</p>
 						<div>
-							<a class="text-majorelle-500" href="https://chat.libertai.io/#/persona-management">
+							<LLink class="text-majorelle-500" href="https://chat.libertai.io/#/persona-management">
 								<LButton small text="Customize Now" />
-							</a>
+							</LLink>
 						</div>
 					</div>
 				</div>
diff --git a/src/pages/Home/FooterSection.vue b/src/pages/Home/FooterSection.vue
index 136f2fb..74d61de 100644
--- a/src/pages/Home/FooterSection.vue
+++ b/src/pages/Home/FooterSection.vue
@@ -18,18 +18,20 @@
 					the future of decentralized intelligence.
 				</p>
 				<div class="flex flex-row space-x-7">
-					<a href="https://x.com/Libertai_DAI" target="_blank">
+					<LLink href="https://x.com/Libertai_DAI" target="_blank">
 						<img alt="Twitter / X" src="../../assets/icons/x.svg" style="width: 36px; height: 36px" />
-					</a>
-					<a href="https://t.me/libertai" target="_blank">
+					</LLink>
+					<LLink href="https://t.me/libertai" target="_blank">
 						<img alt="Telegram" src="../../assets/icons/telegram.svg" style="width: 36px; height: 36px" />
-					</a>
-					<a href="https://aleph.im/" target="_blank">
+					</LLink>
+					<LLink href="https://aleph.im/" target="_blank">
 						<img alt="Aleph.im" src="../../assets/icons/aleph.svg" style="width: 36px; height: 36px" />
-					</a>
+					</LLink>
 				</div>
 			</div>
 		</div>
 	</footer>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import LLink from "@/components/LLink.vue";
+</script>
diff --git a/src/pages/Home/HeroSection.vue b/src/pages/Home/HeroSection.vue
index 0d7c00c..95e705a 100644
--- a/src/pages/Home/HeroSection.vue
+++ b/src/pages/Home/HeroSection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 </script>
 
 <template>
@@ -15,15 +16,15 @@ import LButton from "@/components/LButton.vue";
 		<div class="z-20 flex w-[1440px] justify-center py-60 max-lg:px-0 max-lg:py-56">
 			<div
 				:style="{ backdropFilter: 'blur(20px)' }"
-				class="mx-20 flex w-full flex-col gap-6 rounded-3xl border-t bg-primary bg-opacity-10 px-6 py-10 text-center text-neutral-white max-lg:mx-5"
+				class="mx-20 flex w-full flex-col items-center gap-6 rounded-3xl border-t bg-primary bg-opacity-10 px-6 py-10 text-center text-neutral-white max-lg:mx-5"
 			>
 				<h1 class="max-lg:hidden">Discover the Freedom of Decentralized AI</h1>
 				<h2 class="hidden sm:max-lg:block">Discover the Freedom of Decentralized AI</h2>
 				<h3 class="hidden font-bold max-sm:block">Discover the Freedom of Decentralized AI</h3>
 				<p class="body-small">Use decentralized AI and keep your data private and secure with blockchain.</p>
-				<a href="https://chat.libertai.io">
+				<LLink href="https://chat.libertai.io">
 					<LButton class="w-fit" light text="TRY FOR FREE" />
-				</a>
+				</LLink>
 			</div>
 		</div>
 	</section>
diff --git a/src/pages/Home/NotYourAverageAIAssistant.vue b/src/pages/Home/NotYourAverageAIAssistant.vue
index af9311f..385e901 100644
--- a/src/pages/Home/NotYourAverageAIAssistant.vue
+++ b/src/pages/Home/NotYourAverageAIAssistant.vue
@@ -2,6 +2,7 @@
 import iphone from "../../assets/home/notYourAverageAIAssistantIphone.png";
 import LTinyHeading from "@/components/LTinyHeading.vue";
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 </script>
 
 <template>
@@ -19,9 +20,9 @@ import LButton from "@/components/LButton.vue";
 			<div class="relative mt-48 flex h-[346px] w-[837px] rounded-3xl bg-gradient-to-tr from-[#644DF9] to-[#FCCBFF]">
 				<img :src="iphone" alt="iphone" class="absolute bottom-0 left-0 right-0 mx-auto" />
 			</div>
-			<a href="https://t.me/liberchat_bot" target="_blank">
+			<LLink href="https://t.me/liberchat_bot" target="_blank">
 				<LButton text="Add to Telegram" class="mt-12" />
-			</a>
+			</LLink>
 		</div>
 	</section>
 </template>
diff --git a/src/pages/Home/OpenSourceModelsSection.vue b/src/pages/Home/OpenSourceModelsSection.vue
index 768da87..99fcc1f 100644
--- a/src/pages/Home/OpenSourceModelsSection.vue
+++ b/src/pages/Home/OpenSourceModelsSection.vue
@@ -3,6 +3,7 @@ import LModelCard from "@/components/LModelCard.vue";
 import LButton from "@/components/LButton.vue";
 import { models } from "@/texts.ts";
 import LTinyHeading from "@/components/LTinyHeading.vue";
+import LLink from "@/components/LLink.vue";
 </script>
 
 <template>
@@ -26,9 +27,9 @@ import LTinyHeading from "@/components/LTinyHeading.vue";
 				:type="model.type"
 			/>
 		</div>
-		<RouterLink to="/developer">
+		<LLink href="/developer">
 			<LButton small text="Find Out More" />
-		</RouterLink>
+		</LLink>
 	</section>
 </template>
 
diff --git a/src/pages/Home/PartnersSection.vue b/src/pages/Home/PartnersSection.vue
index d955be1..67455c1 100644
--- a/src/pages/Home/PartnersSection.vue
+++ b/src/pages/Home/PartnersSection.vue
@@ -4,15 +4,17 @@
 			<div class="flex h-full flex-col items-center justify-center">
 				<p class="body-bold-large text-center text-majorelle-800">Proudly supported by</p>
 				<div class="mt-6 flex max-sm:flex-col max-sm:space-y-4 sm:space-x-9">
-					<a href="https://aleph.im" target="_blank">
+					<LLink href="https://aleph.im" target="_blank">
 						<img alt="Aleph.im logo" src="../../assets/logos/aleph.svg" />
-					</a>
-					<a href="https://twentysix.cloud" target="_blank">
+					</LLink>
+					<LLink href="https://twentysix.cloud" target="_blank">
 						<img alt="TwentySixCloud logo" src="../../assets/logos/twentysix.svg" />
-					</a>
+					</LLink>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import LLink from "@/components/LLink.vue";
+</script>
diff --git a/src/pages/Tokenomics/ContractAddressSection.vue b/src/pages/Tokenomics/ContractAddressSection.vue
index 8611536..f4c2199 100644
--- a/src/pages/Tokenomics/ContractAddressSection.vue
+++ b/src/pages/Tokenomics/ContractAddressSection.vue
@@ -2,24 +2,24 @@
 	<section>
 		<div class="relative flex justify-center py-8">
 			<div class="relative flex w-[1440px] flex-col overflow-hidden px-20 py-12 max-lg:px-4">
-				<div class="justify-center space-y-6 py-6 text-center">
+				<div class="flex flex-col items-center justify-center space-y-6 py-6 text-center">
 					<LTinyHeading>Double, triple check.</LTinyHeading>
 					<h2 class="text-majorelle-500 max-lg:hidden">Contract address</h2>
 					<h3 class="hidden text-majorelle-500 max-lg:block">Contract address</h3>
 					<p class="body-default text-center text-majorelle-800">
 						Ensure that you are interacting with the correct contract address for LibertAI:
 						<br />
-						<a
-							class="max-sm:body-small text-link"
+						<LLink
 							href="https://basescan.org/token/0xF8B1b47AA748F5C7b5D0e80C726a843913EB573a"
 							target="_blank"
+							class="max-sm:body-small text-link"
 						>
 							0xF8B1b47AA748F5C7b5D0e80C726a843913EB573a
-						</a>
+						</LLink>
 					</p>
-					<a href="https://app.uniswap.org/explore/tokens/base/0xf8b1b47aa748f5c7b5d0e80c726a843913eb573a?chain=base">
+					<LLink href="/design">
 						<LButton class="mt-6" text="Uniswap" />
-					</a>
+					</LLink>
 				</div>
 			</div>
 		</div>
@@ -28,4 +28,5 @@
 <script lang="ts" setup>
 import LTinyHeading from "@/components/LTinyHeading.vue";
 import LButton from "@/components/LButton.vue";
+import LLink from "@/components/LLink.vue";
 </script>