feat: integrate Avatar component across various modules for improved user representation and enhance profile page with Gravatar support

src/app/profile/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getUserById } from '@/services/auth';
 import { ProfileForm } from './ProfileForm';
 import { PasswordForm } from './PasswordForm';
+import { getGravatarUrl } from '@/lib/gravatar';
 
 export default async function ProfilePage() {
   const session = await auth();
@@ -19,17 +20,36 @@ export default async function ProfilePage() {
 
   return (
     <main className="mx-auto max-w-2xl px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
-        <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+      <div className="mb-8 flex items-center gap-6">
+        <img
+          src={getGravatarUrl(user.email, 160)}
+          alt={user.name || user.email}
+          width={80}
+          height={80}
+          className="rounded-full border-2 border-border"
+        />
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
+          <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+        </div>
       </div>
 
       <div className="space-y-8">
         {/* Profile Info */}
         <section className="rounded-xl border border-border bg-card p-6">
-          <h2 className="mb-6 text-xl font-semibold text-foreground">
-            Informations personnelles
-          </h2>
+          <div className="mb-6 flex items-start justify-between">
+            <h2 className="text-xl font-semibold text-foreground">
+              Informations personnelles
+            </h2>
+            <a
+              href="https://gravatar.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted hover:text-primary transition-colors"
+            >
+              Changer mon avatar sur Gravatar →
+            </a>
+          </div>
           <ProfileForm
             initialData={{
               name: user.name || '',