refacto des pages home, register, login, detail profile
This commit is contained in:
styve Lioumba
@@ -1,114 +1,188 @@
|
||||
<section class="text-gray-600">
|
||||
<div class="container px-5 py-12 mx-auto flex flex-col">
|
||||
<div class="lg:w-4/6 mx-auto">
|
||||
<div class="rounded-lg min-h-56 max-h-64 overflow-hidden bg-cover bg-auth">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<a [routerLink]="['/profiles']">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10"
|
||||
>
|
||||
<title>Retour</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="container mx-auto px-4 py-6 md:py-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
|
||||
@if (profile().estVerifier) {
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4"
|
||||
<!-- Header avec bannière et bouton retour -->
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
|
||||
<div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
|
||||
<!-- Overlay gradient -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
|
||||
|
||||
<!-- Bouton retour -->
|
||||
<div class="relative z-10 p-4 flex justify-between items-start">
|
||||
<a
|
||||
[routerLink]="['/profiles']"
|
||||
class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
<title>Profile verifier</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-6 h-6 text-white group-hover:text-white transition-transform group-hover:-translate-x-1"
|
||||
>
|
||||
<title>Retour</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Badge vérifié -->
|
||||
@if (profile().estVerifier) {
|
||||
<div class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5 md:w-6 md:h-6 text-purple-300"
|
||||
>
|
||||
<title>Profil vérifié</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatar positionné sur le bord de la bannière -->
|
||||
<div class="relative -mt-16 md:-mt-20 px-4 md:px-8 pb-6">
|
||||
<div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
|
||||
<!-- Avatar avec animation -->
|
||||
<div class="relative group animate-slide-up">
|
||||
<div class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-full rounded-full overflow-hidden bg-white">
|
||||
@if (user().avatar) {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Indicateur en ligne (optionnel) -->
|
||||
<div class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Nom et profession -->
|
||||
<div class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100">
|
||||
@if (user().name) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().name }}
|
||||
</h1>
|
||||
} @else if (user().username) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().username }}
|
||||
</h1>
|
||||
} @else {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().email }}
|
||||
</h1>
|
||||
}
|
||||
|
||||
<p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
|
||||
{{ profile().profession | uppercase }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
|
||||
<!-- Colonne gauche - Informations -->
|
||||
<div class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
|
||||
|
||||
<!-- Card Biographie -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Biographie
|
||||
</h3>
|
||||
@if (profile().bio) {
|
||||
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">{{ profile().bio }}</p>
|
||||
} @else {
|
||||
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
|
||||
Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
|
||||
compétences. N'hésitez pas à me contacter pour en savoir plus sur mon parcours et
|
||||
mes domaines d'intervention.
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Card Secteur -->
|
||||
@if (profile().secteur) {
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
Secteur
|
||||
</h3>
|
||||
<app-chips [sectorId]="profile().secteur" />
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Card Réseaux -->
|
||||
@if (profile().reseaux) {
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
|
||||
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
|
||||
</svg>
|
||||
Réseaux
|
||||
</h3>
|
||||
<app-reseaux [reseaux]="profile().reseaux" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- <img alt="{{user().username}}" class="object-cover object-center h-full w-full" src="https://api.dicebear.com/9.x/adventurer/svg?seed={{user().username}}">-->
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row mt-10">
|
||||
<div class="sm:w-1/3 text-center sm:pr-8 sm:py-8">
|
||||
<div
|
||||
class="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
|
||||
>
|
||||
@if (user().avatar) {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover object-center h-full w-full rounded-full"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover object-center h-full w-full rounded-full"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
<!-- Colonne droite - À propos et Projets -->
|
||||
<div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
|
||||
|
||||
<!-- Card À propos -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
À propos
|
||||
</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
||||
{{ profile().apropos }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center justify-center">
|
||||
@if (user().name) {
|
||||
<h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
|
||||
{{ user().name }}
|
||||
</h2>
|
||||
} @else if (user().username) {
|
||||
<h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
|
||||
{{ user().username }}
|
||||
</h2>
|
||||
} @else {
|
||||
<h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
|
||||
{{ user().email }}
|
||||
</h2>
|
||||
}
|
||||
<div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
|
||||
@if (profile().bio) {
|
||||
<p class="text-base dark:text-white">{{ profile().bio }}</p>
|
||||
} @else {
|
||||
<p class="text-base dark:text-white">
|
||||
Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
|
||||
compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et
|
||||
mes domaines d’intervention.
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (profile().secteur) {
|
||||
<div class="space-y-2 flex flex-col my-4">
|
||||
<p class="text-base dark:text-white">Secteur</p>
|
||||
<app-chips [sectorId]="profile().secteur" />
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (profile().reseaux) {
|
||||
<div class="space-y-2 flex flex-col my-4">
|
||||
<p class="text-base dark:text-white">Réseaux</p>
|
||||
<app-reseaux [reseaux]="profile().reseaux" />
|
||||
</div>
|
||||
}
|
||||
<!-- Card Projets -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
|
||||
</svg>
|
||||
Projets
|
||||
</h2>
|
||||
<app-project-list [userProjectId]="profile().utilisateur" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left flex-col flex space-y-2"
|
||||
>
|
||||
<h2 class="text-3xl font-extrabold text-black dark:text-white">
|
||||
{{ profile().profession | uppercase }}
|
||||
</h2>
|
||||
<p class="leading-relaxed text-lg mb-4 dark:text-white">{{ profile().apropos }}</p>
|
||||
|
||||
<app-project-list [userProjectId]="profile().utilisateur" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/* Animations personnalisées */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseSlow {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulseSlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import {NgOptimizedImage, UpperCasePipe} from '@angular/common';
|
||||
import { UpperCasePipe } from '@angular/common';
|
||||
import { User } from '@app/shared/models/user';
|
||||
import { ChipsComponent } from '@app/shared/components/chips/chips.component';
|
||||
import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.component';
|
||||
@@ -18,7 +18,6 @@ import { Profile } from '@app/domain/profiles/profile.model';
|
||||
RouterLink,
|
||||
UpperCasePipe,
|
||||
ProjectListComponent,
|
||||
NgOptimizedImage,
|
||||
],
|
||||
templateUrl: './profile-detail.component.html',
|
||||
styleUrl: './profile-detail.component.scss',
|
||||
|
||||
@@ -1,19 +1,58 @@
|
||||
<section class="pb-10 relative">
|
||||
<div
|
||||
class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10 flex sm:flex-row flex-col space-y-2 items-center sm:space-x-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<app-search />
|
||||
<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16">
|
||||
<!-- Hero Section avec recherche -->
|
||||
<div class="relative overflow-hidden">
|
||||
<!-- Décorations de fond -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
|
||||
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
|
||||
<!-- Titre de la page -->
|
||||
<div class="text-center mb-8 animate-fade-in">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4">
|
||||
Découvrez les
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
|
||||
meilleurs profils
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Explorez notre communauté de talents et trouvez le profil parfait pour votre projet
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Barre de recherche améliorée -->
|
||||
<div class="max-w-3xl mx-auto animate-slide-up animation-delay-200">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300">
|
||||
<app-search (onSearchChange)="showNewQuery($event)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<!-- Liste des profils -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
|
||||
@if (loading().isLoading) {
|
||||
<div class="flex justify-center items-center h-96">
|
||||
<p>Chargement...</p>
|
||||
</div>
|
||||
<app-loading message="Chargement des profils..."/>
|
||||
} @else {
|
||||
<app-vertical-profile-list [profiles]="profiles()" />
|
||||
<!-- Titre de section -->
|
||||
<div class="mb-6 flex items-center justify-between animate-fade-in">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Tous les profils
|
||||
</h2>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
||||
</svg>
|
||||
<span>{{ profiles().length }} profil(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des profils avec animation d'apparition -->
|
||||
<div class="animate-slide-up animation-delay-100">
|
||||
<app-vertical-profile-list [profiles]="profiles()" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
/* Animations blob pour le fond */
|
||||
@keyframes blob {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translate(20px, -50px) scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
75% {
|
||||
transform: translate(50px, 50px) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinSlow {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-blob {
|
||||
animation: blob 7s infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spinSlow 3s linear infinite;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.animation-delay-2000 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animation-delay-4000 {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@@ -3,17 +3,21 @@ import { SearchComponent } from '@app/shared/features/search/search.component';
|
||||
import { VerticalProfileListComponent } from '@app/shared/components/vertical-profile-list/vertical-profile-list.component';
|
||||
import { UntilDestroy } from '@ngneat/until-destroy';
|
||||
import { ProfileFacade } from '@app/ui/profiles/profile.facade';
|
||||
import {LoadingComponent} from "@app/shared/components/loading/loading.component";
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-profile-list',
|
||||
standalone: true,
|
||||
imports: [SearchComponent, VerticalProfileListComponent],
|
||||
imports: [SearchComponent, VerticalProfileListComponent, LoadingComponent],
|
||||
templateUrl: './profile-list.component.html',
|
||||
styleUrl: './profile-list.component.scss',
|
||||
})
|
||||
@UntilDestroy()
|
||||
export class ProfileListComponent implements OnInit {
|
||||
private readonly facade = inject(ProfileFacade);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
protected readonly profiles = this.facade.profiles;
|
||||
protected readonly loading = this.facade.loading;
|
||||
protected readonly error = this.facade.error;
|
||||
@@ -21,4 +25,8 @@ export class ProfileListComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
this.facade.load();
|
||||
}
|
||||
|
||||
showNewQuery(newQuery: string) {
|
||||
this.router.navigate(['/profiles'], { queryParams: { search: newQuery } });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user