Remove animation and change design asso list

src/app/app.component.html

@@ -1,7 +1,7 @@
 <app-header></app-header>
 
-<main [@routerTransition]="getState(o)">
-    <router-outlet #o="outlet"></router-outlet>
+<main>
+    <router-outlet></router-outlet>
     <app-tchat-icon></app-tchat-icon>
 </main>
 

src/app/app.component.ts

@@ -1,30 +1,8 @@
-import { Component, ViewChild } from '@angular/core';
-import {
-  trigger,
-  animate,
-  style,
-  group,
-  animateChild,
-  query,
-  stagger,
-  transition,
-  state,
-} from '@angular/animations';
-import { AppService } from './services/app.service';
+import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  message = '';
-  name = '';
-
-  constructor(private appService: AppService) {}
-
-  getState(outlet: any) {
-    // Changing the activatedRouteData.state triggers the animation
-    return outlet.activatedRouteData.state;
-  }
-
 }

src/app/components/associations/associations-list/associations-list.component.html

@@ -2,31 +2,46 @@
 
 <div *ngIf="isLoaded && associations && associations.length > 0" class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
   <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-    <li *ngFor="let association of associations" class="group col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow overflow-hidden transition-shadow shadow-xl duration-300 bg-white rounded shadow-sm block scale-100 transform opacity-100 transition duration-300 scale-100 transform transition duration-300 hover:scale-105">
-      <div class="flex w-full items-center justify-between space-x-6 p-6 cursor-pointer" [routerLink]="['/associations', association.id]">
-        <div class="flex-1">
-          <div class="flex items-center space-x-3">
-            <a [routerLink]="['/associations', association.id]">
-              <h3 class="truncate text-sm font-medium text-gray-900">{{ association.nom }}</h3>
-            </a>
-          </div>
-          <p class="mt-1 text-sm text-gray-500">
-            {{ association.shortDescription }}
-          </p>
-        </div>
-        <img class="h-20 w-20 flex-shrink-0 rounded-full bg-gray-300" [src]="association.photos[0].url" alt="{{ association.nom }}">
+    <li 
+      *ngFor="let association of associations"
+      class="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow flex flex-col transition transform duration-300 hover:scale-105 cursor-pointer"
+      [routerLink]="['/associations', association.id]">
+
+      <div class="flex-1 p-6 flex flex-col items-center">
+        <!-- Nom de l'association -->
+        <a [routerLink]="['/associations', association.id]" class="text-center">
+          <h2 class="text-xl font-medium text-gray-900">{{ association.nom }}</h2>
+        </a>
+
+        <!-- Image de l'association -->
+        <div class="mt-4" *ngIf="association.photos && association.photos.length > 0">
+          <img class="h-32 w-32 rounded-full object-cover mx-auto" [src]="association.photos[0].url" alt="{{ association.nom }}">
+        </div>        
+
+        <!-- Description de l'association -->
+        <p class="mt-4 text-sm text-gray-500 text-center">{{ association.shortDescription }}</p>
       </div>
+
       <div>
-        <div class="flex justify-center border-gray-200">
-          <div class="relative inline-flex items-center gap-x-3 py-4 text-sm font-semibold text-gray-900">
-            <fa-icon [icon]="faLocationDot" aria-label="Favori" title="Favori" class="mr-2 fa-xl"></fa-icon>
-            {{ association.ville }}
+        <div class="-mt-px flex divide-x divide-gray-200">
+          <!-- Ville -->
+          <div class="flex w-0 flex-1">
+            <div class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900">
+              <fa-icon [icon]="faLocationDot" aria-label="Location" title="Location" class="mr-2 fa-xl"></fa-icon>
+              {{ association.ville }}
+            </div>
+          </div>
+          <!-- Nombre de chats (exemple de fonctionnalité supplémentaire) -->
+          <div class="-ml-px flex w-0 flex-1">
+            <div class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900">
+              <fa-icon [icon]="faCat" aria-label="Location" title="Location" class="mr-2 fa-xl"></fa-icon>
+              {{ association.chats.length }}
+            </div>
           </div>
         </div>
       </div>
     </li>
   </ul>
 </div>
 
-
-<app-associations-form></app-associations-form>
+<app-associations-form></app-associations-form>

src/app/components/associations/associations-list/associations-list.component.ts

@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
 import { AuthService } from '@auth0/auth0-angular';
 import { Subscription } from 'rxjs';
 import { Association } from '../../../interfaces/interfaces';
-import { faLocationDot, faPen } from '@fortawesome/free-solid-svg-icons';
+import { faCat, faLocationDot, faPen } from '@fortawesome/free-solid-svg-icons';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 
@@ -19,6 +19,7 @@ export class AssociationsListComponent {
   isLoaded: boolean = false;
   isAuthenticated: boolean = false;
   faLocationDot = faLocationDot;
+  faCat = faCat;
   faPen = faPen;
 
   associationForm!: FormGroup;