Add actions to introduction view

- Updates packages

app/package.json

@@ -17,17 +17,17 @@
   "private": true,
   "dependencies": {
     "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular/animations": "^18.0.3",
-    "@angular/cdk": "^18.0.3",
-    "@angular/common": "^18.0.3",
-    "@angular/compiler": "^18.0.3",
-    "@angular/core": "^18.0.3",
-    "@angular/forms": "^18.0.3",
-    "@angular/material": "^18.0.3",
-    "@angular/platform-browser": "^18.0.3",
-    "@angular/platform-browser-dynamic": "^18.0.3",
-    "@angular/router": "^18.0.3",
-    "@angular/service-worker": "^18.0.3",
+    "@angular/animations": "^18.0.4",
+    "@angular/cdk": "^18.0.4",
+    "@angular/common": "^18.0.4",
+    "@angular/compiler": "^18.0.4",
+    "@angular/core": "^18.0.4",
+    "@angular/forms": "^18.0.4",
+    "@angular/material": "^18.0.4",
+    "@angular/platform-browser": "^18.0.4",
+    "@angular/platform-browser-dynamic": "^18.0.4",
+    "@angular/router": "^18.0.4",
+    "@angular/service-worker": "^18.0.4",
     "@web5/api": "^0.9.4",
     "@web5/credentials": "^1.0.3",
     "@web5/dids": "^1.1.1",
@@ -41,10 +41,10 @@
     "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.4",
-    "@angular/cli": "^18.0.4",
-    "@angular/compiler-cli": "^18.0.3",
-    "@angular/localize": "^18.0.3",
+    "@angular-devkit/build-angular": "^18.0.5",
+    "@angular/cli": "^18.0.5",
+    "@angular/compiler-cli": "^18.0.4",
+    "@angular/localize": "^18.0.4",
     "@types/jasmine": "~5.1.4",
     "angular-cli-ghpages": "^2.0.1",
     "jasmine-core": "~5.1.2",

app/src/app/account/account.component.html

@@ -1 +1,3 @@
-<p>account works!</p>
+<h1></h1>
+
+<p></p>

app/src/app/introduction/introduction.component.html

@@ -1,3 +1,28 @@
+
+<h1>Welcome</h1>
+
+<img class="community-illustration" src="community.png">
+
+<p>Ariton is different than your average app. <strong>You don't need to register to sign up</strong>, 
+  Ariton has already made a new account for you.</p>
+
+  <p>
+    If you want to keep your account, you can <strong>take a backup</strong> of it. This will allow you to use your account on other devices, 
+    and if you delete your browser data, you can restore it.
+  </p>
+
+  <p>We also suggest you start protecting your account by <strong>securing it with your personal password</strong>. Right now anyone who have access 
+    to your device, can access your Ariton account.
+  </p>
+
+  <p>
+    <button mat-stroked-button [routerLink]="['/communities']">Skip and jump into the app</button>
+    <button mat-flat-button>Set a secure password</button>
+    <button mat-flat-button>Backup your account</button>
+  </p>
+
+  <mat-divider></mat-divider>
+
 <h1 i18n>Introduction to Ariton</h1>
 
 <p>
@@ -42,4 +67,5 @@ <h1 i18n>Introduction to Ariton</h1>
 </p>
 
 <p><strong>Settings</strong> you can use to change the behavior and preferences of Ariton.
-</p>
+</p>
+

app/src/app/introduction/introduction.component.scss

@@ -0,0 +1,19 @@
+.community-illustration {
+    max-width: 256px;
+    float: right;
+    margin-left: 1em;
+}
+
+h1 {
+    clear: both;
+}
+
+button {
+    margin-right: 1em;
+    margin-top: 1em;
+}
+
+mat-divider {
+    margin-top: 3em;
+    margin-bottom: 3em;
+}

app/src/app/introduction/introduction.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-introduction',
   standalone: true,
-  imports: [],
+  imports: [MatButtonModule, MatDividerModule, RouterLink],
   templateUrl: './introduction.component.html',
   styleUrl: './introduction.component.scss'
 })