Update UI & bootstrap 5.2.1

Author: ganatan

angular/ui/angular-starter-home.html

@@ -45,18 +45,6 @@
     .nga-logo:hover {
       color: rgba(255, 255, 255, 0.75);
     }
-
-    .nga-btn-navbar {
-      color: #fff;
-      background-color: #1976d2;
-      border-color: #0d6efd;
-    }
-
-    .nga-btn-navbar:hover {
-      color: white;
-      background-color: #0b5ed7;
-      border-color: #0a58ca;
-    }
   </style>
 
   <!-- FOOTER -->
@@ -86,7 +74,6 @@
     }
   </style>
 
-
   <!-- HOME -->
   <style>
     .nga-card {
@@ -99,8 +86,43 @@
     }
 
     .nga-card:hover {
+      transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
     }
+
+    .nga-card a {
+      color: #0d6efd;
+      text-decoration: none;
+    }
+
+    .nga-card a:hover {
+      color: #0d6efd;
+      text-decoration: none;
+    }
+
+    /*    .nga-card-step {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 3px 3px rgba(0, 0, 0, .09);
+      margin: 4px;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .nga-card-step:hover {
+      box-shadow: 0 4px 4px rgba(0, 0, 0, .09), 0 4px 4px rgba(0, 0, 0, .13);
+      border-radius: 5px;
+      color: #0d6efd;
+
+    }
+
+    .nga-card-step a {
+      color: black;
+      text-decoration: none;
+    }
+
+    .nga-card-step a:hover {
+      color: #0d6efd;
+      text-decoration: none;
+    } */
   </style>
 
 </head>
@@ -109,9 +131,9 @@
 
   <header class="navbar navbar-expand-md navbar-dark fixed-top nga-navbar">
     <nav class="container" aria-label="Main navigation">
-      <a href="" class="navbar-brand" alt="Accueil" aria-label="Ganatan">
+      <a href="home" class="navbar-brand" alt="Accueil" aria-label="Ganatan">
         <img src="./assets/params/images/logo/ganatan-logo.png" srcset="./assets/params/images/logo/ganatan-logo.png,
-        ./assets/params/images/logo/ganatan-logo@2x.png 2x" width="25" height="25" alt="Ganatan Logo">
+        ./assets/params/images/logo/ganatan-logo@2x.png 2x" width="25" height="25" alt="Ganatan Logo" />
         <span class="nga-logo mx-1">ganatan</span>
       </a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
@@ -121,24 +143,24 @@
       <div class="collapse navbar-collapse" id="navbarCollapse">
         <ul class="navbar-nav mx-auto">
           <li class="nav-item">
-            <a class="nav-link" aria-current="page" href="">
+            <a class="nav-link" aria-current="page" href="/">
               <i class="fas fa-home me-1"></i>Home</a>
           </li>
         </ul>
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="">
+            <a class="nav-link active" aria-current="page" href="about">
               <i class="far fa-question-circle me-1"></i>About</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" aria-current="page" href="">
+            <a class="nav-link" aria-current="page" href="contact">
               <i class="fas fa-envelope me-1"></i>Contact</a>
           </li>
         </ul>
         <form class="d-flex">
-          <button type="button" class="btn btn-sm nga-btn-navbar me-2"><i class="fas fa-user-plus me-2"></i>Sign
-            up</button>
-          <button type="button" class="btn btn-sm btn-outline-light me-2"><i
+          <button type="button" class="btn btn-sm btn btn-primary me-2" routerLink="/signup"><i
+              class="fas fa-user-plus me-2"></i>Sign up</button>
+          <button type="button" class="btn btn-sm btn-outline-light me-2" routerLink="/login"><i
               class="fas fa-sign-in-alt me-2"></i>Login</button>
         </form>
       </div>
@@ -181,11 +203,11 @@ <h3 class="h5">Features<i class="fas fa-list ms-2"></i></h3>
       <div class="row pt-2">
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
           <div class="card nga-card bg-light mb-3">
-            <a routerLink="/bootstrap">
+            <a href="/bootstrap">
               <div class="card-header">
                 <div class="row">
                   <div class="col-10 col-xl-10">
-                    <h5 class="card-title">Bootstrap</h5>
+                    <h4 class="card-title h5">Bootstrap</h4>
                   </div>
                   <div class="col-2 col-xl-2">
                     <i class="fab fa-bootstrap fa-lg text-primary"></i>
@@ -203,7 +225,7 @@ <h5 class="card-title">Bootstrap</h5>
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Services</h5>
+                  <h4 class="card-title h5">Services</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="fas fa-handshake fa-lg text-primary"></i>
@@ -220,7 +242,7 @@ <h5 class="card-title">Services</h5>
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Components</h5>
+                  <h4 class="card-title h5">Components</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-clone  fa-lg text-primary"></i>
@@ -237,7 +259,7 @@ <h5 class="card-title">Components</h5>
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Reactive Forms</h5>
+                  <h4 class="card-title h5">Reactive Forms</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-file-alt fa-lg text-primary"></i>
@@ -254,7 +276,7 @@ <h5 class="card-title">Reactive Forms</h5>
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Template Driven Forms</h5>
+                  <h4 class="card-title h5">Template Driven Forms</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-file-alt fa-lg text-primary"></i>