➕ Add Font Awesome

web/package-lock.json

@@ -15,6 +15,7 @@
         "vue-class-component": "^8.0.0-0"
       },
       "devDependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.1",
         "@typescript-eslint/eslint-plugin": "^2.33.0",
         "@typescript-eslint/parser": "^2.33.0",
         "@vue/cli-plugin-eslint": "~4.5.0",
@@ -120,6 +121,16 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
+      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -14586,6 +14597,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
+      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
+      "dev": true
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

web/package.json

@@ -15,6 +15,7 @@
     "vue-class-component": "^8.0.0-0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-eslint": "~4.5.0",

web/src/components/Hero.vue

@@ -3,9 +3,11 @@
     <div class="hero-body">
       <div class="container">
         <h1 class="title">
-          Welcome to the admin panel for anchiale
+          Anchiale
         </h1>
-        <h2 class="subtitle mt-3"></h2>
+        <h2 class="subtitle mt-3">
+          Scalable IoT solution for temperature sampling with raspberry-pi
+        </h2>
       </div>
     </div>
   </section>

web/src/main.ts

@@ -3,5 +3,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 
 import 'bulma/css/bulma.css';
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/js/all.js';
 
 createApp(App).mount('#app');